/* ─────────────────────────────────────────────────────────────
   «Авито для услуг» — рабочая тетрадь мастера.
   Тёплая бумага, чернила, жёлтый маркер; красный — «было/ошибка», зелёный — «стало/так надо».
   ───────────────────────────────────────────────────────────── */
:root {
  --paper: oklch(0.965 0.014 85);
  --paper-2: oklch(0.94 0.018 82);
  --card: oklch(0.99 0.006 85);
  --ink: oklch(0.22 0.02 265);
  --ink-2: oklch(0.42 0.02 265);
  --ink-3: oklch(0.58 0.015 265);
  --line: oklch(0.86 0.015 80);
  --marker: oklch(0.91 0.16 102);
  --marker-ink: oklch(0.3 0.06 95);
  --bad: oklch(0.6 0.2 30);
  --bad-soft: oklch(0.93 0.05 30);
  --good: oklch(0.58 0.14 152);
  --good-soft: oklch(0.93 0.05 152);
  --blue: oklch(0.55 0.15 255);
  --blue-soft: oklch(0.93 0.035 255);
  --shadow: 0 1px 0 oklch(0.85 0.02 80), 0 18px 40px -24px oklch(0.3 0.04 70 / 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --display: "Unbounded", "Golos Text", system-ui, sans-serif;
  --body: "Golos Text", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: oklch(0.2 0.012 265); --paper-2: oklch(0.24 0.014 265); --card: oklch(0.255 0.014 265);
    --ink: oklch(0.94 0.01 85); --ink-2: oklch(0.8 0.012 85); --ink-3: oklch(0.65 0.012 85); --line: oklch(0.33 0.014 265);
    --marker: oklch(0.55 0.12 100); --marker-ink: oklch(0.97 0.03 100);
    --bad-soft: oklch(0.3 0.06 30); --good-soft: oklch(0.3 0.05 152); --blue-soft: oklch(0.3 0.05 255);
    --shadow: 0 18px 40px -24px oklch(0 0 0 / 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: oklch(0.2 0.012 265); --paper-2: oklch(0.24 0.014 265); --card: oklch(0.255 0.014 265);
  --ink: oklch(0.94 0.01 85); --ink-2: oklch(0.8 0.012 85); --ink-3: oklch(0.65 0.012 85); --line: oklch(0.33 0.014 265);
  --marker: oklch(0.55 0.12 100); --marker-ink: oklch(0.97 0.03 100);
  --bad-soft: oklch(0.3 0.06 30); --good-soft: oklch(0.3 0.05 152); --blue-soft: oklch(0.3 0.05 255);
  --shadow: 0 18px 40px -24px oklch(0 0 0 / 0.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.65 var(--body); text-rendering: optimizeLegibility;
  /* бумажная фактура: лёгкий шум */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
::selection { background: var(--marker); color: var(--marker-ink); }

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(28px, 4.4vw, 48px); }
h3 { font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
mark, .hl {
  background: linear-gradient(104deg, transparent 0.5%, var(--marker) 2%, var(--marker) 97%, transparent 99%);
  color: inherit; padding: 0 0.15em; border-radius: 0.2em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ── Каркас: боковой план курса + контент ── */
.layout { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1080px) { .layout { grid-template-columns: 290px minmax(0, 1fr); } }
.rail { display: none; }
@media (min-width: 1080px) {
  .rail { display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; padding: 28px 22px; border-right: 1px dashed var(--line); }
}
.rail .brand { font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; color: var(--ink); }
.rail .brand small { display: block; font: 500 12px var(--body); color: var(--ink-3); margin-top: 4px; }
.progress { margin: 22px 0 14px; }
.progress .bar { height: 8px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.progress .bar i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: inherit; transition: width .6s var(--ease); }
.progress p { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
.toc { list-style: none; margin: 0; padding: 0; overflow-y: auto; counter-reset: m; }
.toc a { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 14.5px; line-height: 1.3; transition: background .2s, color .2s; }
.toc a:hover { background: var(--paper-2); color: var(--ink); }
.toc a .n { font: 600 11px var(--mono); color: var(--ink-3); min-width: 32px; white-space: nowrap; }
.toc a.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.toc a.done .n::after { content: " ✓"; color: var(--good); }
.rail .foot { margin-top: auto; font-size: 12px; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; }
.theme { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 99px; padding: 5px 11px; font: 500 12px var(--body); cursor: pointer; }

/* мобильная шапка с прогрессом */
.mtop { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: color-mix(in oklab, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px dashed var(--line); }
.mtop b { font: 600 13.5px var(--display); flex: 1; }
.mtop .bar { width: 96px; height: 6px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.mtop .bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .6s var(--ease); }
@media (min-width: 1080px) { .mtop { display: none; } }

main { min-width: 0; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 720px) { .wrap { padding: 0 40px; } }

/* ── Обложка ── */
.hero { padding: 56px 0 40px; position: relative; overflow: hidden; }
@media (min-width: 720px) { .hero { padding: 90px 0 60px; } }
.kicker { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.hero h1 { font-size: clamp(40px, 7.4vw, 92px); margin: 16px 0 22px; letter-spacing: -0.035em; }
.hero h1 .hl { padding: 0 .08em; }
.hero .lead { font-size: clamp(17px, 2vw, 21px); color: var(--ink-2); max-width: 54ch; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 34px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 99px; background: var(--card); box-shadow: var(--shadow); font-size: 14px; color: var(--ink-2); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; border-radius: 14px; background: var(--ink); color: var(--paper); font: 600 16px var(--body); text-decoration: none; border: 0; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s; box-shadow: 0 10px 24px -12px oklch(0.2 0.02 265 / 0.6); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ── Модуль ── */
.module { padding: 64px 0 40px; border-top: 1px dashed var(--line); scroll-margin-top: 60px; }
@media (min-width: 720px) { .module { padding: 96px 0 56px; } }
.mhead { display: grid; gap: 14px; margin-bottom: 30px; }
.mnum { font: 700 13px var(--mono); color: var(--paper); background: var(--ink); width: max-content; padding: 6px 10px; border-radius: 8px; letter-spacing: .06em; }
.mhead .why { font-size: 19px; color: var(--ink-2); max-width: 60ch; }
.mhead .time { font-size: 13px; color: var(--ink-3); }
.block { margin: 34px 0; }
.block > h3 { margin-bottom: 14px; }
.cols { display: grid; gap: 20px; }
@media (min-width: 820px) { .cols { grid-template-columns: 1fr 1fr; gap: 28px; } .cols.wide-left { grid-template-columns: 1.3fr 1fr; } }

/* карточка-заметка */
.note { background: var(--card); border-radius: 18px; padding: 22px 22px 6px; box-shadow: var(--shadow); }
.note.tilt { transform: rotate(-0.6deg); }
.note h4 { margin: 0 0 8px; font: 600 15px var(--display); letter-spacing: -0.01em; }
.note .src { font-size: 12.5px; color: var(--ink-3); margin: -4px 0 14px; }

/* цифра Авито */
.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.stat { background: var(--card); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); position: relative; }
.stat b { display: block; font: 700 clamp(34px, 4vw, 46px)/1 var(--display); letter-spacing: -0.03em; }
.stat span { display: block; margin-top: 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
.stat a { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }

/* было → стало */
.ba { display: grid; gap: 16px; }
@media (min-width: 820px) { .ba { grid-template-columns: 1fr 1fr; } }
.ba .side { border-radius: 18px; padding: 18px; position: relative; }
.ba .bad { background: var(--bad-soft); }
.ba .good { background: var(--good-soft); }
.ba .tag { font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; display: inline-flex; gap: 6px; align-items: center; margin-bottom: 12px; }
.ba .bad .tag { color: var(--bad); }
.ba .good .tag { color: var(--good); }
.ba ul { margin: 12px 0 0; padding-left: 18px; font-size: 15px; color: var(--ink-2); }
.ba li { margin: 4px 0; }

/* макет объявления (не интерфейс Авито — условная карточка) */
.listing { background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px oklch(0 0 0 / .08); font-family: var(--body); }
.listing .ph { aspect-ratio: 4 / 3; background: var(--paper-2); position: relative; overflow: hidden; }
.listing .ph img { width: 100%; height: 100%; object-fit: cover; }
.listing .ph .count { position: absolute; right: 8px; bottom: 8px; background: oklch(0 0 0 / .55); color: white; font: 600 11px var(--mono); padding: 3px 7px; border-radius: 6px; }
.listing .bd { padding: 12px 14px 14px; }
.listing .t { font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--blue); }
.listing .p { font-weight: 700; font-size: 18px; margin: 4px 0; }
.listing .d { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.listing .s { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.listing .s .badge { background: var(--good-soft); color: var(--good); padding: 2px 7px; border-radius: 6px; font-weight: 600; }
.listing .strike { text-decoration: line-through; text-decoration-color: var(--bad); text-decoration-thickness: 2px; }
.callout { position: relative; }
.pin { position: absolute; z-index: 2; font: 700 11px var(--mono); background: var(--ink); color: var(--paper); border-radius: 99px; width: 22px; height: 22px; display: grid; place-items: center; box-shadow: 0 0 0 4px color-mix(in oklab, var(--marker) 70%, transparent); }

/* ошибки / так надо */
.dodont { display: grid; gap: 12px; }
@media (min-width: 820px) { .dodont { grid-template-columns: 1fr 1fr; } }
.dodont div { border-radius: 14px; padding: 14px 16px 14px 46px; position: relative; font-size: 15.5px; line-height: 1.5; background: var(--card); box-shadow: var(--shadow); }
.dodont div::before { position: absolute; left: 14px; top: 13px; font: 700 15px var(--mono); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; }
.dodont .no::before { content: "✕"; background: var(--bad-soft); color: var(--bad); }
.dodont .yes::before { content: "✓"; background: var(--good-soft); color: var(--good); }
.dodont small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 4px; }

/* шаги */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { counter-increment: s; position: relative; padding: 14px 16px 14px 60px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow); }
.steps li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 32px; height: 32px; border-radius: 10px; background: var(--marker); color: var(--marker-ink); font: 700 15px var(--display); display: grid; place-items: center; }
.steps b { display: block; }
.steps .where { display: inline-block; margin-top: 6px; font: 500 12.5px var(--mono); color: var(--blue); background: var(--blue-soft); padding: 2px 8px; border-radius: 6px; }

/* фото: так / не так */
.photos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.photo { margin: 0; border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.photo img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.photo figcaption { padding: 10px 14px 12px; font-size: 14px; color: var(--ink-2); }
.photo figcaption b { display: inline-flex; gap: 6px; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
.photo.ok figcaption b { color: var(--good); }
.photo.no figcaption b { color: var(--bad); }
.photo .credit { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

/* задание и тест */
.task { border: 2px dashed var(--ink); border-radius: 18px; padding: 20px 22px 8px; position: relative; }
.task::before { content: "ЗАДАНИЕ"; position: absolute; top: -11px; left: 18px; background: var(--paper); padding: 0 8px; font: 700 12px var(--mono); letter-spacing: .14em; }
.quiz { background: var(--card); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); }
.quiz .q { font-weight: 600; font-size: 17px; margin-bottom: 12px; }
.quiz .opts { display: grid; gap: 8px; }
.quiz button.opt { text-align: left; font: 500 15.5px var(--body); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .2s, transform .12s var(--ease); }
.quiz button.opt:hover { border-color: var(--ink-3); }
.quiz button.opt:active { transform: scale(.99); }
.quiz button.opt.right { border-color: var(--good); background: var(--good-soft); }
.quiz button.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.quiz .why { margin-top: 12px; font-size: 15px; color: var(--ink-2); display: none; }
.quiz.answered .why { display: block; animation: enter .4s var(--ease) both; }
.quiz + .quiz { margin-top: 14px; }

/* инструменты: калькулятор, конструктор */
.tool { background: var(--ink); color: var(--paper); border-radius: 22px; padding: 26px; position: relative; overflow: hidden; }
.tool h3 { color: var(--paper); }
.tool .grid { display: grid; gap: 18px; margin-top: 18px; }
@media (min-width: 820px) { .tool .grid { grid-template-columns: 1.1fr 1fr; gap: 30px; } }
.tool label { display: block; font-size: 14px; color: color-mix(in oklab, var(--paper) 72%, transparent); margin-bottom: 14px; }
.tool label output { float: right; font: 600 14px var(--mono); color: var(--paper); }
.tool input[type=range] { width: 100%; accent-color: var(--marker); margin-top: 6px; }
.tool select, .tool input[type=text] { width: 100%; margin-top: 6px; padding: 11px 12px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--paper) 25%, transparent); background: color-mix(in oklab, var(--paper) 8%, transparent); color: var(--paper); font: 500 15px var(--body); }
.tool select option { color: #111; }
.tool .out { background: color-mix(in oklab, var(--paper) 8%, transparent); border-radius: 16px; padding: 18px; }
.tool .big { font: 700 clamp(36px, 5vw, 54px)/1 var(--display); letter-spacing: -0.03em; color: var(--marker); }
.tool .row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed color-mix(in oklab, var(--paper) 20%, transparent); font-size: 15px; }
.tool .row b { font-family: var(--mono); }
.tool .hint { font-size: 13px; color: color-mix(in oklab, var(--paper) 60%, transparent); margin-top: 12px; }
.titlebox { font: 600 20px var(--body); background: var(--paper); color: var(--blue); border-radius: 12px; padding: 14px 16px; min-height: 56px; }
.tcount { font: 500 13px var(--mono); margin-top: 8px; }
.tcount.over { color: oklch(0.75 0.17 30); }

/* чек-лист */
.check { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.check label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); cursor: pointer; transition: background .2s; }
.check input { width: 20px; height: 20px; accent-color: var(--good); flex-shrink: 0; margin-top: 2px; }
.check input:checked + span { text-decoration: line-through; color: var(--ink-3); }

/* вкладки ниш */
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.tabs button { flex-shrink: 0; border: 1.5px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 99px; padding: 9px 16px; font: 600 14px var(--body); cursor: pointer; transition: all .2s var(--ease); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.panel[hidden] { display: none; }
.panel { animation: enter .35s var(--ease) both; }

/* схема интерфейса */
.screen { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; font-size: 14px; }
.screen .bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); align-items: center; }
.screen .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.screen .bar span { margin-left: 8px; font: 500 12px var(--mono); color: var(--ink-3); }
.screen .body { padding: 14px; display: grid; gap: 10px; }
.screen .lbl { font: 700 10.5px var(--mono); letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; }

/* схема воронки */
.funnel { display: grid; gap: 10px; }
.funnel .lvl { display: flex; align-items: center; gap: 14px; }
.funnel .lvl .w { height: 46px; border-radius: 12px; background: var(--ink); color: var(--paper); display: flex; align-items: center; padding: 0 16px; font: 700 18px var(--display); transform-origin: left; transform: scaleX(0.02); transition: transform 1s var(--ease); white-space: nowrap; }
.funnel.on .lvl .w { transform: scaleX(1); }
.funnel .lvl:nth-child(2) .w { background: color-mix(in oklab, var(--ink) 80%, var(--blue)); transition-delay: .15s; }
.funnel .lvl:nth-child(3) .w { background: var(--blue); transition-delay: .3s; }
.funnel .lvl:nth-child(4) .w { background: var(--good); transition-delay: .45s; }
.funnel .lvl p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }

/* кейсы */
.cases { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.case { background: var(--card); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.case .niche { font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.case h4 { font: 600 18px var(--display); margin: 8px 0 12px; letter-spacing: -0.01em; }
.case .delta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 12px; }
.case .delta b { font: 700 32px var(--display); color: var(--good); letter-spacing: -0.03em; }
.case ul { margin: 0 0 12px; padding-left: 18px; font-size: 14.5px; color: var(--ink-2); }
.case .who { margin-top: auto; font-size: 12.5px; color: var(--ink-3); }
.case .who.third { color: var(--bad); }

/* разное */
.source { font-size: 12.5px; color: var(--ink-3); }
.legend { font-size: 13px; color: var(--ink-3); border-left: 3px solid var(--marker); padding-left: 10px; margin: 10px 0 0; }
footer.end { padding: 70px 0 90px; border-top: 1px dashed var(--line); }

/* появление при прокрутке */
@keyframes enter { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.reveal { opacity: 0; transform: translateY(14px); filter: blur(4px); transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.hero .reveal { transition-duration: .9s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.in { opacity: 1; transform: none; filter: none; transition: none; }
  .funnel .lvl .w { transform: none; transition: none; }
  .quiz .why, .panel { animation: none; }
  .btn, .quiz button.opt { transition: none; }
}

/* скор-карта: полоски вклада фактора */
.score { display: grid; gap: 8px; margin-top: 14px; }
.srow { display: grid; grid-template-columns: minmax(150px, 1.4fr) 2fr 56px; align-items: center; gap: 12px; font-size: 14.5px; }
.srow i { height: 12px; border-radius: 99px; background: var(--good); width: calc(var(--v) / 1.52 * 100%); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease); }
.srow.neg i { background: var(--bad); }
.srow b { font: 700 14px var(--mono); text-align: right; color: var(--good); }
.srow.neg b { color: var(--bad); }
.reveal.in .srow i, .score.in .srow i { transform: scaleX(1); }
.srow:nth-child(2) i { transition-delay: .06s } .srow:nth-child(3) i { transition-delay: .12s } .srow:nth-child(4) i { transition-delay: .18s }
.srow:nth-child(5) i { transition-delay: .24s } .srow:nth-child(6) i { transition-delay: .3s } .srow:nth-child(7) i { transition-delay: .36s } .srow:nth-child(8) i { transition-delay: .42s }
@media (prefers-reduced-motion: reduce) { .srow i { transform: none; transition: none; } }

/* ── Мастерская (метод автора) ── */
.part-label { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--marker-ink); background: var(--marker); padding: 5px 10px; border-radius: 6px; margin-bottom: 14px; }
.part-label::before { content: "✎"; letter-spacing: 0; }
.author-note { font-size: 13.5px; color: var(--ink-3); margin: 12px 0 0; padding-left: 22px; position: relative; max-width: 70ch; }
.author-note::before { content: "✎"; position: absolute; left: 0; top: 0; color: var(--ink-2); }

.freq { display: grid; gap: 10px; }
.fr { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: stretch; }
.fr .lvl { font: 700 14px var(--mono); display: grid; place-items: center; border-radius: 12px; background: var(--ink); color: var(--paper); }
.fr .bar { border-radius: 12px; padding: 12px 16px; background: var(--card); box-shadow: var(--shadow); transform-origin: left; }
.fr.hi .bar { width: 100%; background: var(--bad-soft); }
.fr.mid .bar { width: 82%; background: var(--paper-2); }
.fr.lo .bar { width: 64%; background: var(--good-soft); }
@media (max-width: 600px) { .fr .bar { width: 100% !important; } }
.fr .bar b { display: block; font-size: 16px; }
.fr .bar small { color: var(--ink-2); font-size: 14px; }
.freq .fr { opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in .fr { opacity: 1; transform: none; }
.reveal.in .fr.mid { transition-delay: .12s; } .reveal.in .fr.lo { transition-delay: .24s; }

.tool textarea { width: 100%; margin-top: 6px; padding: 11px 12px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--paper) 25%, transparent); background: color-mix(in oklab, var(--paper) 8%, transparent); color: var(--paper); font: 500 14px/1.5 var(--mono); resize: vertical; }
.tbtn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; padding: 11px 16px; background: var(--marker); color: var(--marker-ink); font: 600 14.5px var(--body); cursor: pointer; transition: transform .15s var(--ease), background .2s; }
.tbtn:hover { transform: translateY(-1px); }
.tbtn:active { transform: scale(.97); }
.tbtn.ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--paper) 35%, transparent); }
.tbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tool :focus-visible, .tabs button:focus-visible { outline: 2px solid var(--marker); outline-offset: 2px; }
.tool .tabs button { background: transparent; color: color-mix(in oklab, var(--paper) 75%, transparent); border-color: color-mix(in oklab, var(--paper) 25%, transparent); }
.tool .tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.tool .twarn { margin: 10px 0 0; font-size: 13.5px; color: oklch(0.82 0.14 70); }
.tool .twarn:empty { display: none; }
.tool .lab, .lab { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin: 0 0 8px; }

.scg { border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: color-mix(in oklab, var(--paper) 6%, transparent); border: 1px solid color-mix(in oklab, var(--paper) 14%, transparent); }
.scg p { margin: 0 0 6px; font-size: 14px; }
.scg b { font-family: var(--mono); padding: 1px 7px; border-radius: 5px; margin-right: 4px; }
.scg.hi b { background: oklch(0.6 0.2 30); color: #fff; } .scg.mid b { background: var(--paper); color: var(--ink); } .scg.lo b { background: oklch(0.62 0.14 152); color: #fff; }
.scg ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.scg .mono { opacity: .65; font-size: 12.5px; }

.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 14px; border-radius: 12px; }
.rtable { border-collapse: collapse; min-width: 980px; width: 100%; font-size: 13.5px; }
.rtable th { text-align: left; font: 600 11.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; opacity: .7; padding: 6px 6px 8px; white-space: nowrap; }
.rtable td { padding: 3px; vertical-align: middle; }
.rtable input, .rtable select { width: 100%; min-width: 120px; padding: 8px 9px; border-radius: 8px; border: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); background: color-mix(in oklab, var(--paper) 6%, transparent); color: var(--paper); font: 500 13.5px var(--body); }
.rtable input.n, .rtable select { min-width: 64px; width: 72px; font-family: var(--mono); }
.rtable select option { color: #111; }
.rtable td.mono { font-family: var(--mono); opacity: .8; white-space: nowrap; padding: 0 8px; }
.rtable.adtable { min-width: 860px; }
.rtable.adtable td:first-child input { min-width: 220px; }
.vd { display: inline-block; font-size: 13px; line-height: 1.35; padding: 5px 9px; border-radius: 8px; min-width: 210px; }
.vd.go { background: oklch(0.62 0.14 152 / .25); color: oklch(0.88 0.1 152); }
.vd.fix { background: oklch(0.8 0.14 80 / .2); color: oklch(0.88 0.12 85); }
.vd.off { background: oklch(0.6 0.2 30 / .28); color: oklch(0.86 0.1 30); }
.vd.wait { background: color-mix(in oklab, var(--paper) 10%, transparent); color: color-mix(in oklab, var(--paper) 80%, transparent); }

.pattern { display: grid; gap: 16px; }
.pattern p, .pattern ul { margin: 0; font-size: 14.5px; }
.pattern ul { padding-left: 18px; }
.wtag { display: inline-block; margin: 0 4px 6px 0; padding: 4px 9px; border-radius: 99px; background: var(--paper); color: var(--ink); font-size: 13.5px; }
.wtag i { font: 600 11px var(--mono); font-style: normal; opacity: .55; margin-left: 2px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.kpis div { background: color-mix(in oklab, var(--paper) 7%, transparent); border-radius: 12px; padding: 12px; }
.kpis b { display: block; font: 700 26px/1 var(--display); color: var(--marker); }
.kpis span { display: block; font-size: 12.5px; opacity: .75; margin-top: 6px; }

.funnel50 { display: grid; gap: 8px; max-width: 760px; }
.funnel50 .f { display: flex; align-items: center; gap: 18px; padding: 16px 22px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.funnel50 .f b { font: 700 44px/1 var(--display); letter-spacing: -0.04em; min-width: 76px; }
.funnel50 .f span { font-size: 15.5px; color: var(--ink-2); }
.funnel50 .f2 { margin-left: 8%; margin-right: 8%; background: var(--paper-2); }
.funnel50 .f3 { margin-left: 16%; margin-right: 16%; background: var(--marker); }
.funnel50 .f3 b, .funnel50 .f3 span { color: var(--marker-ink); }
@media (max-width: 600px) { .funnel50 .f2, .funnel50 .f3 { margin-left: 0; margin-right: 0; } .funnel50 .f b { font-size: 34px; min-width: 56px; } }

.layers { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ly { background: var(--card); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); position: relative; }
.ly span { font: 700 12px var(--mono); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: var(--paper); }
.ly h4 { font: 600 16px var(--display); margin: 10px 0 6px; letter-spacing: -0.01em; }
.ly p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }

.advs { margin-top: 4px; }
.chk { display: flex !important; gap: 10px; align-items: center; margin: 0 0 6px !important; padding: 8px 10px; border-radius: 9px; background: color-mix(in oklab, var(--paper) 6%, transparent); cursor: pointer; color: var(--paper) !important; font-size: 14px !important; }
.chk input { width: 18px; height: 18px; accent-color: var(--marker); flex-shrink: 0; }
.draft { margin-top: 12px; background: var(--paper); color: var(--ink); border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.55; }
.draft p { margin: 0 0 6px; } .draft p:last-child { margin: 0; }
.draft .hint { color: var(--ink-3) !important; }

.formula { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); counter-reset: f; }
.formula div { background: var(--card); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); position: relative; }
.formula div:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); font: 700 16px var(--mono); color: var(--ink-3); z-index: 1; }
.formula span { font: 700 12px var(--mono); color: var(--paper); background: var(--ink); border-radius: 6px; padding: 2px 7px; }
.formula b { display: block; margin: 8px 0 2px; font-size: 16px; }
.formula small { color: var(--ink-2); font-size: 13.5px; }
@media (max-width: 760px) { .formula div::after { display: none; } }

.ttable { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 14.5px; background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.ttable th { text-align: left; font: 600 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 12px 14px; background: var(--paper-2); }
.ttable td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.45; }
.ttable td.ok { color: var(--good); font-weight: 600; } .ttable td.no { color: var(--bad); font-weight: 600; } .ttable td.mid { color: var(--ink-2); }
.toc li.wk a .n { color: var(--marker-ink); background: var(--marker); border-radius: 5px; padding: 0 5px; min-width: auto; margin-right: 0; }
@media (max-width: 640px) {
  .ttable { min-width: 0; box-shadow: none; background: transparent; }
  .ttable thead { display: none; }
  .ttable, .ttable tbody, .ttable tr, .ttable td { display: block; }
  .ttable tr { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 10px; }
  .ttable td { border: 0; padding: 3px 0; }
  .ttable td:nth-child(1) { font: 600 16px var(--display); margin-bottom: 4px; }
  .ttable td:nth-child(2)::before { content: "Инструмент: "; color: var(--ink-3); }
  .ttable td:nth-child(3)::before { content: "Бесплатно: "; color: var(--ink-3); }
  .ttable td:nth-child(4) { margin-top: 4px; }
}

/* ════════════ Удобное чтение: единая шкала (шаг ≈1.25), без гигантов и мелочи ════════════ */
:root {
  --t-cap: 0.875rem;   /* 14 — подписи, источники */
  --t-sm: 0.9375rem;   /* 15 — вторичный текст */
  --t-body: 1.0625rem; /* 17 — основной */
  --t-h4: 1.1875rem;   /* 19 */
  --t-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);    /* 20–24 */
  --t-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);  /* 26–36 */
  --t-h1: clamp(2.125rem, 1.5rem + 2.4vw, 3.375rem); /* 34–54 */
  --t-num: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); /* крупные цифры 28–38 */
  --t-label: 0.8125rem; /* 13 — метки капсом моноширинным */
}
body { font-size: var(--t-body); line-height: 1.65; }
h2 { font-size: var(--t-h2); line-height: 1.15; }
h3 { font-size: var(--t-h3); line-height: 1.25; }
.hero h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.03em; max-width: 18ch; }
.hero .lead, .mhead .why { font-size: 1.1875rem; line-height: 1.55; max-width: 60ch; }
p, li { max-width: 68ch; }
.tool p, .tool li, .ttable td, .rtable td { max-width: none; }

/* мелочь — не меньше 13–14px */
.kicker, .mnum, .ba .tag, .lab, .tool .lab, .rtable th, .ttable th, .case .niche, .photo figcaption b, .task::before, .part-label { font-size: var(--t-label); }
.source, .legend, .note .src, .stat a, .case .who, .photo .credit, .dodont small, .tool .hint, .author-note, .tcount, .mhead .time, .progress p, .rail .brand small { font-size: var(--t-cap); }
.listing .d, .listing .s, .steps .where, .tool .twarn, .vd, .kpis span, .scg p, .wtag, .rtable, .theme, .toc a { font-size: var(--t-sm); }
.toc a .n { font-size: var(--t-label); }
.note h4, .ly h4, .case h4 { font-size: var(--t-h4); }
.ba ul, .ttable, .listing .t, .photo figcaption, .quiz .why, .quiz button.opt, .steps li, .dodont div, .case ul, .formula small, .ly p, .fr .bar small, .scg ul, .draft, .stat span { font-size: var(--t-sm); }
.steps li, .dodont div { font-size: 1rem; line-height: 1.55; }
.quiz .q { font-size: var(--t-h4); }

/* крупные цифры — заметно, но без «плакатов» */
.stat b, .tool .big, .funnel50 .f b, .kpis b { font-size: var(--t-num); }
.titlebox { font-size: 1.1875rem; }

/* «Как читать» — без цветной полосы сбоку */
.legend { border-left: 0; padding: 12px 14px; background: var(--paper-2); border-radius: 12px; max-width: 72ch; }

/* ════════════ Секретная техника ════════════ */
:root { --secret: color-mix(in oklab, var(--marker) 16%, var(--paper)); }
.module.secret { background: var(--secret); border-top: 0; position: relative; }
.module.secret + .module.secret { border-top: 1px dashed color-mix(in oklab, var(--marker-ink) 25%, transparent); }
.module.secret .mnum { background: var(--marker); color: var(--marker-ink); }
.module.secret .mnum::before { content: "★ "; }
.part-label::before { content: "★"; }
.author-note::before { content: "★"; color: var(--marker-ink); }
.toc li.wk a .n::before { content: "★ "; }
.toc-legend { margin: -4px 0 12px; font-size: var(--t-cap); color: var(--ink-3); }
.toc-legend span { color: var(--marker-ink); background: var(--marker); border-radius: 5px; padding: 0 5px; font-size: var(--t-label); }

.secret-map { margin: 44px 0 26px; background: var(--ink); color: var(--paper); border-radius: 24px; padding: clamp(22px, 3vw, 36px); position: relative; overflow: hidden; }
.secret-map::after { content: "★"; position: absolute; right: -0.08em; top: -0.32em; font-size: 12rem; line-height: 1; color: var(--marker); opacity: .1; pointer-events: none; }
.secret-map h2 { color: var(--paper); font-size: var(--t-h2); margin: 6px 0 10px; max-width: 20ch; }
.sm-label { font: 700 var(--t-label) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--marker); margin: 0; }
.sm-lead { color: color-mix(in oklab, var(--paper) 78%, transparent); font-size: var(--t-body); margin: 0 0 22px; }
.sm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); counter-reset: none; }
.sm-steps a { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: baseline; padding: 14px 16px; border-radius: 14px; background: color-mix(in oklab, var(--paper) 7%, transparent); color: var(--paper); text-decoration: none; transition: background .2s var(--ease), transform .2s var(--ease); height: 100%; }
.sm-steps a:hover { background: color-mix(in oklab, var(--paper) 13%, transparent); transform: translateY(-2px); }
.sm-steps a:focus-visible { outline: 2px solid var(--marker); outline-offset: 2px; }
.sm-steps b { grid-row: span 2; font: 700 1.375rem/1 var(--display); color: var(--marker); }
.sm-steps span { font-weight: 600; font-size: var(--t-body); }
.sm-steps small { color: color-mix(in oklab, var(--paper) 68%, transparent); font-size: var(--t-cap); line-height: 1.4; }

/* ════════════ Навигация по модулям ════════════ */
.mnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.mnav a { display: block; padding: 14px 18px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .2s var(--ease); }
.mnav a:hover { transform: translateY(-2px); }
.mnav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mnav small { display: block; font: 600 var(--t-label) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.mnav span { font-weight: 600; font-size: var(--t-body); line-height: 1.3; }
.mnav .next { grid-column: 2; text-align: right; background: var(--ink); color: var(--paper); }
.mnav .next small { color: color-mix(in oklab, var(--paper) 65%, transparent); }
.mnav .next.secret-next { background: var(--marker); color: var(--marker-ink); }
.mnav .next.secret-next small { color: var(--marker-ink); opacity: .7; }
@media (max-width: 600px) { .mnav { grid-template-columns: 1fr; } .mnav .next { grid-column: 1; order: -1; } }
.mtop b { font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* пол для мелких подписей */
.lbl, .screen .bar span, .ly span, .scg .mono, li .mono, th, .srow b, .pin { font-size: var(--t-label) !important; }
.note small, .stat small, .side small { font-size: var(--t-cap); }
.formula span, .mtop .bar + span { font-size: var(--t-label); }
.module.secret .mnum::before { content: none; } .module.secret .part-label { margin-bottom: 10px; }

/* ════════════ Стиль Авито: белый фон, серые плашки, синие кнопки, Manrope ════════════ */
:root, :root[data-theme="light"] {
  --paper: oklch(0.995 0 0); --paper-2: oklch(0.957 0.003 67); --card: oklch(0.995 0 0);
  --ink: oklch(0.21 0 0); --ink-2: oklch(0.42 0 0); --ink-3: oklch(0.57 0 0); --line: oklch(0.91 0.003 67);
  --blue: oklch(0.68 0.16 240); --blue-ink: oklch(0.55 0.16 245); --blue-soft: oklch(0.95 0.03 237);
  --good: oklch(0.6 0.17 150); --good-soft: oklch(0.95 0.05 150);
  --bad: oklch(0.64 0.19 22); --bad-soft: oklch(0.95 0.035 22);
  --marker: oklch(0.6 0.2 295); --marker-ink: oklch(0.99 0.01 295); --marker-soft: oklch(0.96 0.03 295);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.05), 0 4px 16px oklch(0 0 0 / 0.06);
  --display: "Manrope", system-ui, sans-serif; --body: "Manrope", system-ui, sans-serif; --mono: "Manrope", system-ui, sans-serif;
  --tool-bg: var(--paper-2); --tool-fg: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: oklch(0.17 0 0); --paper-2: oklch(0.23 0 0); --card: oklch(0.21 0 0);
    --ink: oklch(0.96 0 0); --ink-2: oklch(0.8 0 0); --ink-3: oklch(0.65 0 0); --line: oklch(0.3 0 0);
    --blue-soft: oklch(0.3 0.06 240); --good-soft: oklch(0.3 0.06 150); --bad-soft: oklch(0.3 0.06 22); --marker-soft: oklch(0.3 0.07 295);
    --shadow: 0 1px 2px oklch(0 0 0 / 0.4);
  }
}
:root[data-theme="dark"] {
  --paper: oklch(0.17 0 0); --paper-2: oklch(0.23 0 0); --card: oklch(0.21 0 0);
  --ink: oklch(0.96 0 0); --ink-2: oklch(0.8 0 0); --ink-3: oklch(0.65 0 0); --line: oklch(0.3 0 0);
  --blue-soft: oklch(0.3 0.06 240); --good-soft: oklch(0.3 0.06 150); --bad-soft: oklch(0.3 0.06 22); --marker-soft: oklch(0.3 0.07 295);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.4);
}
body { background-image: none; font-family: var(--body); font-feature-settings: "tnum" 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; }
.hero h1 { font-weight: 800; letter-spacing: -0.025em; }
.num, .mono, .kpis b, .stat b, .tcount { font-variant-numeric: tabular-nums; }
.kicker, .mnum, .ba .tag, .lab, .rtable th, .ttable th, .case .niche, .task::before, .part-label, .sm-label, .mnav small, .toc a .n { letter-spacing: .03em; font-weight: 700; }
mark, .hl { background: var(--blue-soft); color: var(--ink); border-radius: 6px; }
.hero h1 .hl { background: var(--blue); color: oklch(0.99 0 0); padding: 0 .12em; border-radius: 12px; }
::selection { background: var(--blue-soft); color: var(--ink); }
a { color: var(--blue-ink); }

/* кнопки как у Авито */
.btn { background: var(--blue); color: oklch(0.99 0 0); border-radius: 12px; font-weight: 700; box-shadow: none; }
.btn:hover { background: var(--blue-ink); }
.btn.ghost { background: var(--paper-2); color: var(--ink); box-shadow: none; }
.btn.ghost:hover { background: var(--line); }
.chip { background: var(--paper-2); box-shadow: none; font-weight: 600; }
.theme { background: var(--paper-2); border: 0; }

/* карточки: белые на сером или серые на белом, без «бумаги» */
.rail { background: var(--paper-2); }
.mtop { background: color-mix(in oklab, var(--paper) 92%, transparent); }
.note, .stat, .steps li, .ly, .formula div, .case, .quiz, .check label, .funnel50 .f, .mnav a, .listing, .photo, .ttable { box-shadow: none; border: 1px solid var(--line); }
.steps li::before, .ly span, .fr .lvl, .formula span, .mnum { background: var(--ink); color: var(--paper); }
.toc a.on { background: var(--card); box-shadow: none; border: 1px solid var(--line); }
.progress .bar i, .mtop .bar i { background: var(--blue); }
.task { border-color: var(--blue); }
.task::before { color: var(--blue-ink); }
.legend { background: var(--paper-2); }
.quiz button.opt { background: var(--card); }

/* инструменты — светло-серые плашки Авито вместо тёмных */
.tool { --ink: var(--tool-bg); --paper: var(--tool-fg); border: 0; }
.tool input[type=text], .tool select, .tool textarea, .rtable input, .rtable select { background: var(--card); border-color: var(--line); color: var(--tool-fg); }
.tool .out, .kpis div, .scg, .chk { background: var(--card); border-color: var(--line); }
.titlebox, .draft, .wtag { background: var(--card); color: var(--tool-fg); border: 1px solid var(--line); }
.titlebox { color: var(--blue-ink); }
.tool .twarn { color: oklch(0.55 0.15 55); }
.tbtn { background: var(--blue); color: oklch(0.99 0 0); }
.tbtn:hover { background: var(--blue-ink); }
.tbtn.ghost { background: var(--card); color: var(--tool-fg); box-shadow: inset 0 0 0 1px var(--line); }
.tool .tabs button { color: var(--ink-2); }
.vd.go { background: var(--good-soft); color: var(--good); }
.vd.fix { background: oklch(0.95 0.06 85); color: oklch(0.45 0.1 70); }
.vd.off { background: var(--bad-soft); color: var(--bad); }
.vd.wait { background: var(--card); color: var(--ink-3); border: 1px solid var(--line); }
.kpis b, .tool .big { color: var(--marker); }
.scg.mid b { background: var(--tool-fg); color: var(--card); }

/* секретная техника — фиолетовый акцент Авито */
.module.secret { background: var(--marker-soft); }
.secret-map { background: var(--marker); --paper: oklch(0.99 0.01 295); }
.secret-map::after { color: oklch(0.99 0 0); opacity: .12; }
.sm-label, .sm-steps b { color: oklch(0.99 0 0); }
.sm-steps a { background: oklch(1 0 0 / .14); }
.sm-steps a:hover { background: oklch(1 0 0 / .22); }
.mnav .next { background: var(--blue); color: oklch(0.99 0 0); }
.mnav .next small { color: oklch(0.99 0 0 / .8); }
.mnav .next.secret-next { background: var(--marker); color: var(--marker-ink); }
.part-label { white-space: normal; }
@media (max-width: 600px) { .part-label { font-size: 0.75rem; } }

/* ════════════ Визуализации ════════════ */
/* шесть цифр */
.kstats-wrap { margin: 40px 0 8px; }
.kstats-wrap h2 { font-size: var(--t-h3); margin-bottom: 16px; }
.kstats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.kstat { background: var(--paper-2); border-radius: 16px; padding: 18px 18px 16px; }
.kstat b { display: block; font: 800 var(--t-num)/1 var(--display); letter-spacing: -0.03em; }
.kstat:nth-child(4) { background: var(--marker-soft); }
.kstat:nth-child(4) b { color: var(--marker); }
.kbar { display: block; height: 6px; border-radius: 99px; background: var(--line); margin: 12px 0 10px; overflow: hidden; }
.kbar i { display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: inherit; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) calc(var(--i, 0) * 90ms + 150ms); }
.kstat:nth-child(4) .kbar i { background: var(--marker); }
.kstat.in .kbar i { transform: scaleX(1); }
.kstat p { margin: 0; font-size: var(--t-sm); line-height: 1.45; }
.kstat small { display: block; margin-top: 8px; font-size: var(--t-cap); color: var(--ink-3); }
.kstat .sec { color: var(--marker); font-weight: 700; }

/* телефон с подсказками */
.demo-search { align-items: center; }
.phone { width: min(320px, 100%); margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 34px; padding: 18px 14px 22px; box-shadow: 0 24px 50px -28px oklch(0 0 0 / .35); }
.ph-top { display: flex; gap: 8px; align-items: center; }
.ph-back { font-size: 20px; color: var(--ink-2); }
.ph-search { flex: 1; display: flex; align-items: center; gap: 6px; background: var(--paper-2); border-radius: 12px; padding: 10px 12px; font-size: 15px; min-height: 42px; }
.ph-ico { color: var(--ink-3); }
.ph-caret { width: 2px; height: 18px; background: var(--blue); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ph-city { margin: 10px 4px 6px; font-size: var(--t-cap); color: var(--ink-3); }
.ph-sugg { list-style: none; margin: 0; padding: 0; }
.ph-sugg li { padding: 11px 6px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.ph-sugg li b { color: var(--ink); font-weight: 600; }
.demo-search.sugg .ph-sugg li { opacity: 1; transform: none; }
.demo-search.sugg .ph-sugg li:nth-child(2) { transition-delay: .08s; } .demo-search.sugg .ph-sugg li:nth-child(3) { transition-delay: .16s; }
.demo-search.sugg .ph-sugg li:nth-child(4) { transition-delay: .24s; } .demo-search.sugg .ph-sugg li:nth-child(5) { transition-delay: .32s; }
.mini-steps { margin: 12px 0 0; padding-left: 20px; font-size: var(--t-sm); }
.mini-steps li { margin: 4px 0; }

/* выдача: 15 плиток */
.serp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.serp-head h3 { margin: 0; }
.serp .tbtn.ghost { color: var(--ink); }
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
.tile .img { display: block; aspect-ratio: 4/3; border-radius: 8px; background: linear-gradient(135deg, var(--paper-2), var(--line)); }
.tile .ln { display: block; height: 7px; border-radius: 4px; background: var(--paper-2); margin-top: 8px; }
.tile .ln.s { width: 60%; }
.tile .vw { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tile .vw b { color: var(--ink); }
.tile em { position: absolute; top: 12px; left: 12px; font: 800 11px var(--body); letter-spacing: .04em; font-style: normal; background: var(--marker); color: var(--marker-ink); padding: 3px 7px; border-radius: 6px; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s var(--ease); }
.tiles.ranked .tile:not(.top) { opacity: .38; }
.tiles.ranked .tile.top { border-color: var(--marker); box-shadow: 0 0 0 2px var(--marker); transform: translateY(-3px); }
.tiles.ranked .tile.top em { opacity: 1; transform: none; }

/* график цены контакта */
.cbars { position: relative; display: grid; gap: 12px; padding: 6px 0 26px; }
.cb { display: grid; grid-template-columns: minmax(150px, 230px) 1fr 92px; gap: 12px; align-items: center; font-size: var(--t-sm); }
@media (max-width: 640px) { .cb { grid-template-columns: 1fr 80px; } .cb .cn { grid-column: 1 / -1; } }
.cb .track { height: 22px; border-radius: 8px; background: var(--paper-2); overflow: hidden; }
.cb .track i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) calc(var(--i) * 140ms + 200ms); }
.cb.off .track i { background: var(--bad); } .cb.go .track i { background: var(--good); } .cb.wait .track i { background: var(--line); }
.cb b { font-variant-numeric: tabular-nums; }
.cb.off b { color: var(--bad); } .cb.go b { color: var(--good); } .cb.wait b { color: var(--ink-3); font-weight: 500; }
.cplchart.in .cb .track i { transform: scaleX(1); }
.tline { position: absolute; top: 0; bottom: 0; left: calc(min(230px, 40%) + 12px + (100% - min(230px, 40%) - 116px) * var(--target)); border-left: 2px dashed var(--ink-3); pointer-events: none; }
.tline em { position: absolute; bottom: 0; left: 6px; font: 600 12.5px var(--body); font-style: normal; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 640px) { .tline { display: none; } }

/* чат по формуле */
.chatdemo { margin-top: 20px; max-width: 520px; background: var(--paper-2); border-radius: 20px; overflow: hidden; }
.cd-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--card); border-bottom: 1px solid var(--line); }
.cd-head .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-ink); font-weight: 800; }
.cd-head b { display: block; font-size: 15px; } .cd-head small { color: var(--ink-3); font-size: 13px; }
.cd-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; min-height: 290px; }
.msg { margin: 0; max-width: 82%; padding: 9px 12px; border-radius: 16px; font-size: 15px; line-height: 1.4; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.msg.in { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg.out { align-self: flex-end; background: var(--blue); color: oklch(0.99 0 0); border-bottom-right-radius: 6px; }
.msg .st { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: oklch(1 0 0 / .25); font-size: 11px; font-weight: 800; vertical-align: 1px; }
.msg.show { opacity: 1; transform: none; }

/* фото в модулях */
.photo.wide img { aspect-ratio: 16 / 9; }

@media (prefers-reduced-motion: reduce) {
  .kbar i, .cb .track i { transform: none !important; transition: none !important; }
  .ph-sugg li, .msg { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ph-caret { animation: none; }
}
.exlist { display: grid; gap: 22px; margin-top: 14px; }
.exn { display: inline-block; font: 700 var(--t-label) var(--body); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
@media (min-width: 820px) { .exrow .ba { grid-template-columns: 1fr 1fr; } }
.exrow .ba .side { padding: 14px; }
.exrow .listing .d { -webkit-line-clamp: unset; }
.exwhy { margin: 8px 0 0; font-size: var(--t-sm); color: var(--marker); font-weight: 600; }
.photo.wide img { aspect-ratio: 21 / 9; }
@media (max-width: 640px) { .photo.wide img { aspect-ratio: 16 / 10; } }
.photo.tall img { aspect-ratio: 4 / 3; object-position: center 40%; }
.photo img { transition: transform .8s var(--ease); }
.photo:hover img { transform: scale(1.03); }
.block.cols > .stat, .block.cols > .note { align-self: start; }

/* ════════════════ РАСКЛАДКА КАК НА АВИТО + СПОКОЙНАЯ ПАЛИТРА ════════════════
   белый фон, чёрный текст, серые плашки #F2F1F0, один синий акцент. Цвет — только по делу. */
:root, :root[data-theme="light"] {
  --marker: var(--ink); --marker-ink: var(--paper); --marker-soft: var(--paper-2);
  --head-h: 112px;
}
@media (max-width: 760px) { :root { --head-h: 118px; } }
.module { scroll-margin-top: calc(var(--head-h) + 12px); border-top: 1px solid var(--line); }
html { scroll-padding-top: calc(var(--head-h) + 12px); }

/* шапка */
.av-head { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.av-in { max-width: 1340px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 14px; }
.av-top { background: var(--paper-2); }
.av-top .av-in { height: 34px; gap: 22px; font-size: 13.5px; }
.av-top a { color: var(--ink-2); text-decoration: none; }
.av-top a:hover { color: var(--ink); }
.av-top .sp { flex: 1; }
.av-top .theme { background: none; padding: 0; font-size: 13.5px; color: var(--ink-2); }
.av-main .av-in { height: 76px; }
.av-brand { text-decoration: none; color: var(--ink); font: 800 19px/1.05 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.av-brand small { display: block; font: 500 12.5px var(--body); color: var(--ink-3); letter-spacing: 0; margin-top: 2px; }
.av-cats { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 12px; background: var(--blue); color: oklch(0.99 0 0); text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; }
.av-cats:hover { background: var(--blue-ink); }
.burger { display: grid; gap: 3px; } .burger i { display: block; width: 14px; height: 2px; border-radius: 2px; background: currentColor; }
.av-search { flex: 1; display: flex; position: relative; height: 44px; border: 2px solid var(--blue); border-radius: 12px; background: var(--card); }
.av-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px; font: 500 15px var(--body); color: var(--ink); outline: none; }
.av-search button { border: 0; background: var(--blue); color: oklch(0.99 0 0); font: 700 15px var(--body); padding: 0 22px; border-radius: 0 9px 9px 0; cursor: pointer; }
.av-search button:hover { background: var(--blue-ink); }
.av-sugg { position: absolute; top: calc(100% + 6px); left: -2px; right: -2px; list-style: none; margin: 0; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px oklch(0 0 0 / .12); z-index: 50; }
.av-sugg a { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-size: 15px; }
.av-sugg a:hover, .av-sugg a.on { background: var(--paper-2); }
.av-sugg small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.av-sugg .empty { padding: 10px 12px; color: var(--ink-3); font-size: 14px; }
.av-post { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 12px; background: var(--blue); color: oklch(0.99 0 0); text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; }
.av-post:hover { background: var(--blue-ink); }
@media (max-width: 760px) {
  .av-top { display: none; }
  .av-main .av-in { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .av-brand { flex: 1; font-size: 17px; }
  .av-cats, .av-post { height: 38px; padding: 0 12px; font-size: 14px; }
  .av-post { display: none; }
  .av-search { order: 3; flex-basis: 100%; height: 42px; }
  .av-search button { padding: 0 16px; }
}
.mtop { display: none !important; }

/* каркас: контент слева, карточка справа (как страница объявления) */
.layout { max-width: 1340px; margin: 0 auto; }
@media (min-width: 1080px) {
  .layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 8px; }
  .rail { order: 2; display: flex; position: sticky; top: calc(var(--head-h) + 16px); height: calc(100dvh - var(--head-h) - 32px); margin: 16px 20px 16px 0; padding: 0; border: 0; background: none; }
}
.rail-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 10px; flex-shrink: 0; }
.rc-k { margin: 0; font-weight: 700; font-size: 15px; }
.rail .progress { margin: 0 0 4px; }
.progress .bar { height: 8px; background: var(--paper-2); }
.rc-btn { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none; transition: background .2s; }
.rc-btn.blue { background: var(--blue); color: oklch(0.99 0 0); } .rc-btn.blue:hover { background: var(--blue-ink); }
.rc-btn.gray { background: var(--paper-2); color: var(--ink); } .rc-btn.gray:hover { background: var(--line); }
.rail-h { margin: 18px 4px 6px; font-weight: 700; font-size: 15px; }
.rail .toc { flex: 1; min-height: 0; overflow-y: auto; }
.rail .toc a { padding: 7px 8px; font-size: 14.5px; }
.rail .toc a .n { min-width: 26px; }
.toc a.on { background: var(--paper-2); border: 0; }
.rail .foot, .rail .toc-legend, .rail .brand { display: none; }
.wrap { max-width: 920px; margin: 0; padding: 0 20px; }
@media (min-width: 720px) { .wrap { padding: 0 24px 0 40px; } }

/* обложка — спокойная, слева */
.hero { padding: 36px 0 24px; }
.hero h1 { font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.625rem); max-width: 22ch; margin: 10px 0 14px; }
.hero h1 .hl { background: none; color: inherit; padding: 0; }
.hero .lead { font-size: 1.0625rem; color: var(--ink-2); }
.hero .kicker { color: var(--ink-3); }

/* плитки-категории как на главной Авито */
.cats-wrap { margin: 30px 0 10px; }
.cats-wrap h2, .kstats-wrap h2 { font-size: 1.5rem; margin-bottom: 14px; }
.cats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.cat { position: relative; display: block; height: 128px; padding: 12px 14px; border-radius: 16px; background: var(--paper-2); text-decoration: none; color: var(--ink); overflow: hidden; transition: background .2s; }
.cat:hover { background: var(--line); }
.cat-n { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.cat b { position: relative; z-index: 1; display: block; margin-top: 2px; font-size: 15px; line-height: 1.25; max-width: 68%; }
.cat img { position: absolute; right: -14px; bottom: -14px; width: 92px; height: 92px; object-fit: cover; border-radius: 50%; transition: transform .4s var(--ease); }
.cat:hover img { transform: scale(1.06) rotate(-2deg); }
@media (max-width: 600px) { .cats { grid-template-columns: 1fr 1fr; } .cat { height: 118px; } .cat img { width: 76px; height: 76px; } }

/* секретная техника — серый баннер, как промо-блоки Авито */
.secret-map { background: var(--paper-2); color: var(--ink); --paper: var(--ink); }
.secret-map::after { display: none; }
.secret-map h2 { color: var(--ink); }
.sm-label { color: var(--ink-3); }
.sm-lead { color: var(--ink-2); }
.sm-steps a { background: var(--card); color: var(--ink); }
.sm-steps a:hover { background: var(--card); box-shadow: 0 6px 20px oklch(0 0 0 / .08); }
.sm-steps b { color: var(--blue); }
.sm-steps small { color: var(--ink-3); }

/* без радуги: убрать цветные заливки, оставить цвет только меткам */
.module.secret { background: var(--paper); }
.part-label { background: var(--ink); color: var(--paper); }
.module.secret .mnum, .mnum { background: none; color: var(--ink-3); padding: 0; font-size: 14px; letter-spacing: 0; text-transform: none; }
.module h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
mark { background: none; color: inherit; font-weight: 700; padding: 0; }
.ba .bad, .ba .good { background: var(--paper-2); }
.fr.hi .bar, .fr.mid .bar, .fr.lo .bar { background: var(--paper-2); border: 0; }
.fr .lvl { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.scg.hi b, .scg.mid b, .scg.lo b { background: var(--ink); color: var(--paper); }
.kstat:nth-child(4) { background: var(--paper-2); } .kstat:nth-child(4) b { color: var(--ink); } .kstat:nth-child(4) .kbar i { background: var(--blue); }
.kstat .sec { color: var(--ink); }
.task { border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); }
.task::before { background: var(--paper-2); color: var(--ink-3); }
.steps .where { background: var(--paper); color: var(--ink-2); border: 1px solid var(--line); }
.msg.out { background: var(--blue-soft); color: var(--ink); }
.msg .st { background: var(--card); color: var(--blue-ink); }
.exwhy { color: var(--ink-2); }
.tile em { background: var(--ink); color: var(--paper); }
.tiles.ranked .tile.top { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.toc li.wk a .n, .toc-legend span { background: none; color: var(--ink-3); padding: 0; }
.mnav .next.secret-next { background: var(--blue); color: oklch(0.99 0 0); }
.mnav .next.secret-next small { color: oklch(0.99 0 0 / .8); }
.funnel50 .f3 { background: var(--ink); } .funnel50 .f3 b, .funnel50 .f3 span { color: var(--paper); }
.kpis b, .tool .big { color: var(--ink); }
.legend { background: none; padding: 0; color: var(--ink-3); }
.author-note::before { color: var(--ink); }
.crumbs { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; } .crumbs a:hover { color: var(--blue-ink); }
.crumbs span { margin: 0 6px; }
.module { padding: 44px 0 36px; }
.mhead { margin-bottom: 22px; gap: 10px; }
@media (max-width: 600px) { .chip { font-size: 13.5px; padding: 6px 11px; } .hero-meta { gap: 8px; margin: 18px 0 22px; } .hero .lead { font-size: 1rem; } }
.fq-explain { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 14px; }
.fq-explain > div { background: var(--paper-2); border-radius: 16px; padding: 16px; }
.fq-tag { display: inline-block; font-weight: 800; font-size: 13px; background: var(--ink); color: var(--paper); border-radius: 6px; padding: 2px 8px; margin-bottom: 8px; }
.fq-explain b { display: block; font-size: 16px; }
.fq-explain p { margin: 6px 0 8px; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.fq-explain em { font-style: normal; font-weight: 600; color: var(--blue-ink); font-size: 15px; }
.fq-analogy { margin-top: 12px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line); font-size: var(--t-sm); }

/* ════════════ Продажа курса и защита ════════════ */
.av-main .sp { flex: 1; }
.av-cats.ghosty { background: var(--paper-2); color: var(--ink); }
.av-cats.ghosty:hover { background: var(--line); }
body.shop .layout, body.shop .rail { display: block; }
.shop-main { max-width: 1340px; margin: 0 auto; }
.shop-main .wrap { max-width: 980px; margin: 0 auto; }
.shop-main.narrow .wrap { max-width: 720px; }
.btn .old, .price s { opacity: .65; font-weight: 500; margin-left: 6px; }
.cat.locked::after { content: "🔒"; position: absolute; top: 10px; right: 12px; font-size: 13px; opacity: .55; }
.buy { padding: 48px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--head-h) + 12px); }
.buy-grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .buy-grid { grid-template-columns: 1fr 400px; align-items: start; } }
.buy-list { padding-left: 20px; margin: 14px 0 0; display: grid; gap: 8px; }
.buy-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 10px; box-shadow: 0 10px 30px -18px oklch(0 0 0 / .25); }
.price { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.price b { font: 800 2.25rem/1 var(--display); letter-spacing: -0.03em; }
.price s { font-size: 1.125rem; color: var(--ink-3); }
.price-note { margin: -4px 0 6px; color: var(--ink-3); font-size: 14px; }
.buy-card label, .card-auth label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.buy-card input[type=email], .card-auth input { height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; font: 500 16px var(--body); background: var(--card); color: var(--ink); }
.buy-card input:focus, .card-auth input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.buy-card .consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 14px; line-height: 1.45; }
.buy-card .consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--blue); flex-shrink: 0; }
.buy-card .btn, .card-auth .btn { justify-content: center; width: 100%; }
.hint { font-size: 13.5px; color: var(--ink-3); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { margin: 0; font-size: 14px; color: var(--bad); min-height: 1em; }
.form-msg.ok { color: var(--ink-2); }
.faq { padding: 10px 0 48px; }
.faq h2 { margin-bottom: 12px; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 8px 0 0; color: var(--ink-2); }
.shop-foot { padding: 26px 0 40px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.shop-foot p { margin: 4px 0; max-width: none; }
.shop-foot a { color: var(--ink-2); }
.card-auth { margin: 48px 0; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 4vw, 34px); display: grid; gap: 12px; }
.card-auth h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0; }
.card-auth form { display: grid; gap: 12px; }
.auth-reason { background: var(--paper-2); border-radius: 12px; padding: 12px 14px; margin: 0; }
.terms { padding: 36px 0 20px; }
.terms h1 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); margin-bottom: 14px; }
.terms h2 { font-size: 1.25rem; margin: 26px 0 8px; }
.terms p, .terms li { font-size: 15.5px; }

/* защита страниц курса */
body.learn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.learn input, body.learn textarea, body.learn select { -webkit-user-select: text; user-select: text; }
body.learn img { -webkit-user-drag: none; pointer-events: none; }
.cw { position: fixed; inset: 0; z-index: 90; pointer-events: none; background-repeat: repeat; opacity: .07; }
:root[data-theme="dark"] .cw { filter: invert(1); opacity: .09; }
.cw-mail { position: fixed; right: 12px; bottom: 8px; z-index: 91; margin: 0; font-size: 11px; color: var(--ink); opacity: .25; pointer-events: none; }
.cveil { display: none; position: fixed; inset: 0; z-index: 95; background: var(--paper); place-items: center; text-align: center; padding: 24px; }
.cveil p { font-weight: 700; font-size: 18px; max-width: 30ch; }
body.veiled .cveil { display: grid; }
body.veiled .layout, body.veiled .av-head { filter: blur(18px); }
.clock { min-height: 100dvh; display: grid; place-content: center; gap: 12px; text-align: center; padding: 24px; }
@media print { body.learn * { display: none !important; } body.learn::after { content: "Печать материалов курса запрещена условиями покупки."; display: block; padding: 40px; font: 700 20px sans-serif; } }

/* ════════════ ИИ в курсе ════════════ */
.tbtn.ai { background: var(--ink); color: var(--paper); }
.tool .tbtn.ai { background: var(--tool-fg); color: var(--card); }
.tbtn:disabled { opacity: .55; cursor: progress; }
.ai-ctx { display: grid; gap: 10px; grid-template-columns: 2fr 1fr; margin-top: 12px; }
@media (max-width: 600px) { .ai-ctx { grid-template-columns: 1fr; } }
.ai-ctx label { margin: 0; }
.ai-quota { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.linkish { background: none; border: 0; padding: 0; color: var(--blue-ink); text-decoration: underline; cursor: pointer; font: inherit; }
.ai-packs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.ai-packs p { margin: 0; width: 100%; font-size: 14px; }
.ai-out { margin-top: 14px; }
.ai-err { margin: 0; color: var(--bad); font-weight: 600; }
.ai-wait { margin: 0 0 12px; display: flex; gap: 10px; align-items: center; font-weight: 600; }
.ai-wait .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); animation: aiPulse 1s ease-in-out infinite; }
@keyframes aiPulse { 50% { transform: scale(.5); opacity: .4; } }
.sk { height: 14px; border-radius: 7px; margin: 10px 0; background: linear-gradient(90deg, var(--line) 0%, var(--paper-2) 50%, var(--line) 100%); background-size: 200% 100%; animation: aiShimmer 1.2s linear infinite; }
.sk.short { width: 55%; }
@keyframes aiShimmer { to { background-position: -200% 0; } }
.ai-res h4 { margin: 18px 0 8px; font-size: 16px; }
.ai-res ol, .ai-res ul { padding-left: 20px; margin: 0; display: grid; gap: 6px; }
.ai-res small { display: block; color: var(--ink-3); font-size: 13.5px; }
.ai-sum { font-weight: 600; margin: 0; }
.ai-titles { list-style: none; padding: 0 !important; }
.ai-titles li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--paper-2); border-radius: 10px; padding: 8px 10px; }
.ai-titles span { font-weight: 700; color: var(--blue-ink); flex: 1; min-width: 180px; }
.ai-titles i { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.tbtn.cp { padding: 6px 10px; font-size: 13px; }
.ai-draft { margin: 0 0 8px; background: var(--paper-2); border-radius: 12px; padding: 12px 14px; line-height: 1.55; -webkit-user-select: text; user-select: text; }
.ai-cols { display: grid; gap: 16px; }
@media (min-width: 720px) { .ai-cols { grid-template-columns: 1fr 1fr; } }
.ai-full-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.ai-full-head h4 { margin: 0; }
.ai-block { display: grid; grid-template-columns: 30px 1fr; gap: 10px; margin-top: 12px; }
.ai-n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--tool-fg, var(--ink)); color: var(--card); font-weight: 800; font-size: 13px; }
.ai-h { margin: 2px 0 6px; font-weight: 700; font-size: 14.5px; color: var(--ink-2); }
.ab-grid { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 860px) { .ab-grid { grid-template-columns: 1fr 1fr; } .ab-grid .card-fs { grid-column: 1 / -1; } }
.ab-grid fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 4px; margin: 0; background: var(--card); }
.ab-grid legend { font-weight: 800; font-size: 14px; padding: 0 6px; }
.ab-grid .card-fs { display: grid; gap: 0 14px; }
@media (min-width: 860px) { .ab-grid .card-fs { grid-template-columns: 1fr 1fr 1fr; } .ab-grid .card-fs .hint, .ab-grid .card-fs legend { grid-column: 1 / -1; } }
.ab-grid input[type=text], .ab-grid textarea { font-family: var(--body) !important; font-size: 15px !important; }
button.av-post { border: 0; cursor: pointer; font-family: var(--body); }
.promo summary { cursor: pointer; font-size: 14px; color: var(--blue-ink); }
.promo-row { display: flex; gap: 8px; margin-top: 8px; }
.promo-row input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; font: 600 15px var(--body); text-transform: uppercase; background: var(--card); color: var(--ink); }
.promo-row .btn { width: auto !important; padding: 0 16px; height: 44px; }
.promo-msg { margin: 6px 0 0; font-size: 13.5px; color: var(--bad); }
.promo-msg.ok { color: var(--good); }

/* ════════════ Робот поддержки ════════════ */
.bot { position: fixed; right: 14px; bottom: 10px; z-index: 93; width: 128px; height: 146px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 20px; }
.bot-canvas { width: 100%; height: 100%; display: block; }
.bot-tip { position: absolute; right: 100%; top: 26px; margin-right: 4px; white-space: nowrap; background: var(--ink); color: var(--paper); font: 700 13px var(--body); padding: 7px 11px; border-radius: 12px 12px 4px 12px; opacity: 0; transform: translateX(6px); transition: opacity .25s var(--ease), transform .25s var(--ease); pointer-events: none; }
.bot:hover .bot-tip, .bot:focus-visible .bot-tip { opacity: 1; transform: none; }
.bot.open .bot-tip { opacity: 0; }
@media (max-width: 600px) { .bot { width: 96px; height: 110px; right: 6px; bottom: 6px; } .bot-tip { display: none; } }
body.learn .cw-mail { right: 150px; }

.bot-panel { position: fixed; right: 18px; bottom: 160px; z-index: 94; width: min(360px, calc(100vw - 24px)); background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: 0 24px 60px -20px oklch(0 0 0 / .45); animation: botIn .28s var(--ease) both; }
@keyframes botIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.bot-panel[hidden] { display: none; }
@media (max-width: 600px) { .bot-panel { right: 12px; bottom: 122px; } }
.bp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.bp-k { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.bot-panel h2 { margin: 2px 0 0; font-size: 1.25rem; }
.bp-x { border: 0; background: var(--paper-2); color: var(--ink); width: 34px; height: 34px; border-radius: 10px; font-size: 20px; line-height: 1; cursor: pointer; }
.bp-form { display: grid; gap: 10px; }
.bp-form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.bp-form input[type=email], .bp-form textarea { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: 500 15px var(--body); background: var(--card); color: var(--ink); resize: vertical; -webkit-user-select: text; user-select: text; }
.bp-form input:focus, .bp-form textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.bp-form .bp-consent { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; font-size: 13px; line-height: 1.4; }
.bp-consent input { width: 18px; height: 18px; accent-color: var(--blue); flex-shrink: 0; margin-top: 1px; }
.bp-form .btn { width: 100%; justify-content: center; }
.bp-msg { margin: 0; font-size: 13.5px; color: var(--bad); min-height: 1em; }
.bp-alt { margin: 0; font-size: 13px; color: var(--ink-3); }
.bp-done { text-align: center; padding: 10px 4px; }
.bp-ok { font-weight: 800; font-size: 18px; margin: 0 0 6px; }

/* без WebGL — простой робот */
.bot-css { display: grid; justify-items: center; align-content: end; padding-bottom: 12px; }
.bc-head { width: 76px; height: 58px; border-radius: 22px; background: radial-gradient(circle at 30% 25%, #3a3d44, #121317 70%); box-shadow: inset 0 -6px 12px #000a, 0 8px 18px -6px #000c; display: grid; place-items: center; }
.bc-visor { width: 58px; height: 30px; border-radius: 12px; background: #030405; display: flex; gap: 12px; justify-content: center; align-items: center; box-shadow: inset 0 2px 6px #0008; }
.bc-visor i { width: 9px; height: 13px; border-radius: 6px; background: #2fb4ff; box-shadow: 0 0 10px #2fb4ff; transition: transform .1s; }
.bc-body { width: 58px; height: 40px; margin-top: 4px; border-radius: 18px; background: radial-gradient(circle at 35% 25%, #33363c, #101114 70%); box-shadow: 0 10px 16px -8px #000c; }
/* водяной знак заметнее + плавающая плашка (v2) */
.cw { opacity: .13; }
:root[data-theme="dark"] .cw { opacity: .16; }
.cw-float { position: fixed; left: 0; top: 0; z-index: 91; pointer-events: none; font: 700 14px var(--body); color: var(--ink); opacity: .32; white-space: nowrap; padding: 4px 10px; border: 1px dashed currentColor; border-radius: 8px; animation: cwDrift 46s linear infinite alternate; }
@keyframes cwDrift {
  0% { transform: translate(6vw, 22vh) rotate(-8deg); }
  25% { transform: translate(58vw, 70vh) rotate(-8deg); }
  50% { transform: translate(30vw, 40vh) rotate(-8deg); }
  75% { transform: translate(62vw, 18vh) rotate(-8deg); }
  100% { transform: translate(10vw, 78vh) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) { .cw-float { animation-duration: 180s; } }
img[src*="master-portrait"] { object-position: 80% 28%; }
.note-line { font-size: var(--t-sm); color: var(--ink-2); margin: 10px 0 0; }
/* метод автора целиком */
.method { padding: 40px 0 36px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--head-h) + 12px); }
.method h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 6px 0 10px; }
.method .why { color: var(--ink-2); max-width: 62ch; }
.mtd { list-style: none; counter-reset: mt; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.mtd > li { counter-increment: mt; position: relative; background: var(--paper-2); border-radius: 18px; padding: 18px 20px 14px 64px; }
.mtd > li::before { content: counter(mt); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.mtd h3 { font-size: 1.1875rem; margin: 4px 0 8px; }
.mtd p, .mtd li li { font-size: 1rem; line-height: 1.6; }
.mtd p { margin: 0 0 8px; }
.mtd ul { padding-left: 18px; margin: 0 0 8px; display: grid; gap: 4px; }
.mtd blockquote { margin: 6px 0 10px; padding: 12px 14px; background: var(--card); border-radius: 12px; font-style: italic; }
@media (max-width: 600px) { .mtd > li { padding: 52px 16px 12px; } .mtd > li::before { top: 14px; left: 16px; } }
/* 10 плавающих плашек, бледнее (v3) */
.cw-floats { position: fixed; inset: 0; z-index: 91; pointer-events: none; overflow: hidden; }
.cw-float { opacity: .18; font-size: 13px; animation-name: cwA; animation-duration: 52s; }
.cw-float.f2 { animation-name: cwB; animation-duration: 61s; animation-delay: -7s; }
.cw-float.f3 { animation-name: cwC; animation-duration: 47s; animation-delay: -15s; }
.cw-float.f4 { animation-name: cwD; animation-duration: 70s; animation-delay: -22s; }
.cw-float.f5 { animation-name: cwA; animation-duration: 58s; animation-delay: -31s; }
.cw-float.f6 { animation-name: cwB; animation-duration: 44s; animation-delay: -12s; }
.cw-float.f7 { animation-name: cwC; animation-duration: 66s; animation-delay: -40s; }
.cw-float.f8 { animation-name: cwD; animation-duration: 55s; animation-delay: -5s; }
.cw-float.f9 { animation-name: cwA; animation-duration: 63s; animation-delay: -48s; }
.cw-float.f10 { animation-name: cwB; animation-duration: 50s; animation-delay: -26s; }
@keyframes cwA { 0% { transform: translate(4vw, 12vh) rotate(-8deg); } 33% { transform: translate(60vw, 46vh) rotate(-8deg); } 66% { transform: translate(18vw, 80vh) rotate(-8deg); } 100% { transform: translate(70vw, 8vh) rotate(-8deg); } }
@keyframes cwB { 0% { transform: translate(72vw, 84vh) rotate(-8deg); } 33% { transform: translate(10vw, 52vh) rotate(-8deg); } 66% { transform: translate(55vw, 18vh) rotate(-8deg); } 100% { transform: translate(6vw, 30vh) rotate(-8deg); } }
@keyframes cwC { 0% { transform: translate(40vw, 4vh) rotate(-8deg); } 33% { transform: translate(78vw, 62vh) rotate(-8deg); } 66% { transform: translate(28vw, 38vh) rotate(-8deg); } 100% { transform: translate(48vw, 90vh) rotate(-8deg); } }
@keyframes cwD { 0% { transform: translate(14vw, 66vh) rotate(-8deg); } 33% { transform: translate(44vw, 26vh) rotate(-8deg); } 66% { transform: translate(76vw, 36vh) rotate(-8deg); } 100% { transform: translate(30vw, 72vh) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .cw-float { animation-duration: 240s !important; } }
/* 5 плашек: еле заметно, медленно (v4) */
.cw-float { opacity: .08; border-style: dotted; }
:root[data-theme="dark"] .cw-float { opacity: .1; }
.cw-float.f1 { animation-duration: 110s; }
.cw-float.f2 { animation-duration: 128s; }
.cw-float.f3 { animation-duration: 97s; }
.cw-float.f4 { animation-duration: 140s; }
.cw-float.f5 { animation-duration: 118s; }

/* ════════════ Метод автора v2 ════════════ */
.m-map { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 22px 0 14px; }
.mp-ph { background: var(--paper-2); border-radius: 16px; padding: 14px 16px; position: relative; }
.mp-ph:not(:last-child)::after { content: "→"; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--ink-3); z-index: 1; }
@media (max-width: 860px) { .mp-ph::after { display: none; } }
.mp-k { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .03em; text-transform: uppercase; }
.mp-ph b { display: block; font-size: 16px; margin-top: 4px; }
.mp-ph small { display: block; color: var(--ink-2); font-size: 13.5px; margin-top: 2px; line-height: 1.4; }
.mp-ph p { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mp-ph a { font-weight: 800; font-size: 13px; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 3px 7px; }
.mp-ph a:hover { border-color: var(--blue); color: var(--blue-ink); }
.m-result { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 4px 0 16px; }
.m-result ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.ms-k { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.m-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.m-progress .bar { flex: 1; height: 8px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.m-progress .bar i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: inherit; transition: width .5s var(--ease); }
.m-progress p { margin: 0; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.mtd2 { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.ms { border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; background: var(--card); scroll-margin-top: calc(var(--head-h) + 12px); transition: border-color .3s var(--ease), background .3s var(--ease); }
.ms.is-done { border-color: color-mix(in oklab, var(--good) 45%, var(--line)); background: color-mix(in oklab, var(--good-soft) 35%, var(--card)); }
.ms-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; }
.ms-n { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 800 16px var(--display); }
.ms.is-done .ms-n { background: var(--good); }
.ms-phase { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.ms-t h3 { margin: 2px 0 4px; font-size: 1.25rem; }
.ms-sum { margin: 0; color: var(--ink-2); font-size: 15px; }
.ms-done { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--paper-2); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.ms-done input { width: 18px; height: 18px; accent-color: var(--good); }
.ms-grid { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 980px) { .ms-grid { grid-template-columns: 1.15fr 1fr; } }
.ms-author p, .ms-author li { font-size: 15.5px; line-height: 1.62; }
.ms-author p { margin: 0 0 10px; }
.ms-author ul { padding-left: 18px; margin: 0 0 10px; display: grid; gap: 4px; }
.ms-author blockquote { margin: 6px 0 10px; padding: 12px 14px; background: var(--paper-2); border-radius: 12px; font-style: italic; }
.ms-side { display: grid; gap: 10px; align-content: start; }
.ms-box { background: var(--paper-2); border-radius: 14px; padding: 12px 14px; }
.ms-box ol { margin: 0; padding-left: 20px; display: grid; gap: 5px; font-size: 14.5px; line-height: 1.5; }
.ms-box p:not(.ms-k) { margin: 0; font-size: 14.5px; line-height: 1.5; }
.ms-box.ex { background: var(--blue-soft); }
.ms-box.no { background: var(--bad-soft); }
.ms-box.no .ms-k { color: var(--bad); }
.ms-tool { display: block; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--blue-ink); padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; }
.ms-tool:hover { border-color: var(--blue); }
@media (max-width: 600px) { .ms { padding: 14px; } .ms-head { grid-template-columns: auto 1fr; } .ms-done { grid-column: 1 / -1; justify-self: start; } }

/* ════════════ Схемы метода (анимации шагов) ════════════ */
.viz-wrap { background: var(--paper-2); border-radius: 14px; padding: 12px 14px; }
.viz { position: relative; min-height: 132px; font-size: 13px; }
.v-cap { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }
.v-cap b { color: var(--ink); }
.ms .viz * { transition-timing-function: var(--ease); }
/* 1 — 50 → 10 */
.v1-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.v1-grid span { aspect-ratio: 4/3; border-radius: 3px; background: var(--line); transition: background .3s, transform .3s; }
.ms.on .v1-grid span.t { animation: v1 .4s var(--ease) forwards; animation-delay: calc(var(--d) * 140ms + 200ms); }
@keyframes v1 { to { background: var(--blue); transform: scale(1.12); } }
/* 2 — сборка */
.v2-card { display: grid; grid-template-columns: 70px 1fr; gap: 10px; background: var(--card); border-radius: 12px; padding: 10px; }
.v2-card .ph { border-radius: 8px; background: linear-gradient(135deg, var(--line), var(--paper-2)); min-height: 74px; }
.v2-bd { display: grid; gap: 5px; align-content: start; }
.v2-card .t { font-size: 13px; color: var(--blue-ink); }
.v2-card i.l1, .v2-card i.l2, .v2-card i.l3 { height: 6px; border-radius: 3px; background: var(--line); }
.v2-card .l3 { width: 70%; }
.v2-card .cta { font-style: normal; font-size: 12px; font-weight: 700; color: var(--good); }
.v2-card .p { opacity: 0; transform: translateX(-14px); }
.ms.on .v2-card .p { animation: vIn .5s var(--ease) forwards; }
.ms.on .v2-card .ph { animation-delay: .1s; } .ms.on .v2-card .t { animation-delay: .4s; } .ms.on .v2-card .l1 { animation-delay: .7s; } .ms.on .v2-card .l2 { animation-delay: .85s; } .ms.on .v2-card .l3 { animation-delay: 1s; } .ms.on .v2-card .cta { animation-delay: 1.3s; }
@keyframes vIn { to { opacity: 1; transform: none; } }
/* 3 — А/Б */
.v3 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v3 .v-cap { grid-column: 1 / -1; }
.v3-c { background: var(--card); border-radius: 12px; padding: 10px; display: grid; gap: 6px; }
.v3-b { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-weight: 800; background: var(--ink); color: var(--paper); font-size: 12px; }
.v3-b.b { background: var(--blue); color: #fff; }
.v3-c i { height: 8px; border-radius: 4px; background: var(--paper-2); position: relative; overflow: hidden; }
.v3-c i::after { content: ""; position: absolute; inset: 0; width: calc(var(--w) * 100%); background: var(--blue); border-radius: inherit; transform: scaleX(0); transform-origin: left; }
.ms.on .v3-c i::after { animation: vGrow 1.2s var(--ease) .3s forwards; }
@keyframes vGrow { to { transform: scaleX(1); } }
/* 4 — спрос по дням */
.v4-bars { display: flex; gap: 8px; align-items: flex-end; height: 104px; }
.v4-c { flex: 1; display: grid; justify-items: center; gap: 4px; height: 100%; align-content: end; }
.v4-c i { width: 100%; height: calc(var(--h) * 0.8px); border-radius: 6px 6px 3px 3px; background: var(--line); transform: scaleY(0); transform-origin: bottom; }
.v4-c.pk i { background: var(--blue); }
.v4-c span { font-size: 11.5px; color: var(--ink-3); }
.ms.on .v4-c i { animation: vUp .7s var(--ease) forwards; animation-delay: calc(var(--d) * 90ms + 150ms); }
@keyframes vUp { to { transform: scaleY(1); } }
/* 5 — поиск */
.v5-in { display: flex; align-items: center; background: var(--card); border: 2px solid var(--blue); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.v5-tx { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; }
.ms.on .v5-tx { animation: vType 1.4s steps(17) .2s forwards; }
@keyframes vType { to { width: 17ch; } }
.v5-car { width: 2px; height: 16px; background: var(--blue); margin-left: 2px; animation: blink 1s steps(1) infinite; }
.v5 ul { list-style: none; margin: 6px 0 0; padding: 0; background: var(--card); border-radius: 10px; }
.v5 li { padding: 6px 10px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-4px); }
.v5 li:last-child { border: 0; }
.ms.on .v5 li { animation: vIn .35s var(--ease) forwards; animation-delay: calc(var(--d) * 120ms + 1.7s); }
/* 6 — ВЧ/СЧ/НЧ */
.v6-r { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.v6-r b { font-size: 12px; text-align: center; background: var(--card); border-radius: 6px; padding: 3px 0; }
.v6-r.ok b { background: var(--ink); color: var(--paper); }
.v6-r span { display: grid; gap: 3px; }
.v6-r i { height: 7px; border-radius: 4px; width: calc(var(--w) * 100%); transform: scaleX(0); transform-origin: left; }
.v6-r i.q { background: var(--blue); } .v6-r i.c { background: var(--bad); opacity: .7; }
.ms.on .v6-r i { animation: vGrow .9s var(--ease) .2s forwards; }
.v6 .lq, .v6 .lc { display: inline-block; width: 10px; height: 6px; border-radius: 3px; background: var(--blue); margin: 0 4px 1px 8px; }
.v6 .lc { background: var(--bad); }
/* 7 — Вордстат: ветки */
.v7 { min-height: 150px; }
.v7 svg { position: absolute; inset: 0; width: 100%; height: 150px; }
.v7 .ln path { stroke: var(--ink-3); stroke-width: 1.5; fill: none; stroke-dasharray: 110; stroke-dashoffset: 110; }
.ms.on .v7 .ln path { animation: vDraw .6s var(--ease) forwards; }
.ms.on .v7 .ln path:nth-child(2) { animation-delay: .2s; } .ms.on .v7 .ln path:nth-child(3) { animation-delay: .4s; } .ms.on .v7 .ln path:nth-child(4) { animation-delay: .6s; }
@keyframes vDraw { to { stroke-dashoffset: 0; } }
.v7-n { position: absolute; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 3px 7px; font-size: 11.5px; white-space: nowrap; transform: translate(-50%, -50%); }
.v7-n.c { left: 50%; top: 50%; background: var(--ink); color: var(--paper); border: 0; font-weight: 700; }
.v7-n.a { left: 19%; top: 16%; } .v7-n.b { left: 81%; top: 16%; } .v7-n.c2 { left: 19%; top: 84%; } .v7-n.d { left: 81%; top: 84%; }
.v7-n:not(.c) { opacity: 0; }
.ms.on .v7-n:not(.c) { animation: vPop .4s var(--ease) forwards; animation-delay: calc(var(--d) * 200ms + .5s); }
@keyframes vPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
/* 8 — слова в предложение */
.v8-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.v8-tags span { background: var(--card); border: 1px dashed var(--ink-3); border-radius: 99px; padding: 3px 9px; font-size: 12px; }
.ms.on .v8-tags span { animation: vDrop .6s var(--ease) forwards; animation-delay: calc(var(--d) * 250ms + .3s); }
@keyframes vDrop { to { opacity: 0; transform: translateY(26px) scale(.9); } }
.v8-s { margin: 14px 0 0; background: var(--card); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; }
.v8-s mark { background: transparent; font-weight: 400; transition: background .4s; border-radius: 4px; padding: 0 2px; }
.ms.on .v8-s mark { animation: vMark .5s var(--ease) forwards; animation-delay: calc(var(--d) * 250ms + .8s); }
@keyframes vMark { to { background: var(--blue-soft); font-weight: 700; } }
/* 9 — фото теплее */
.v9-ph { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; }
.v9-ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) hue-rotate(18deg) brightness(.95); }
.ms.on .v9-ph img { animation: vWarm 1.6s var(--ease) .4s forwards; }
@keyframes vWarm { to { filter: saturate(1.15) sepia(.18) brightness(1.04); } }
.v9-t { position: absolute; left: 8px; bottom: 8px; background: oklch(0.2 0 0 / .75); color: #fff; font-weight: 700; font-size: 12px; padding: 4px 8px; border-radius: 6px; }
.v9-t.b { opacity: 0; }
.ms.on .v9-t.a { animation: vOut .3s 1.4s forwards; } .ms.on .v9-t.b { animation: vIn .4s 1.6s forwards; }
@keyframes vOut { to { opacity: 0; } }
/* 10 — продвижение после роста */
.v10 svg { width: 100%; height: 120px; }
.v10 polyline { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; }
.v10 .g { stroke: var(--ink-3); } .v10 .b { stroke: var(--blue); }
.v10 .m { stroke: var(--ink-3); stroke-dasharray: 3 4; opacity: 0; }
.ms.on .v10 .g { animation: vDraw 1s var(--ease) .2s forwards; }
.ms.on .v10 .m { animation: vIn .3s 1.2s forwards; }
.ms.on .v10 .b { animation: vDraw 1.1s var(--ease) 1.4s forwards; }
.v10-l { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); font-size: 11.5px; font-weight: 700; color: var(--blue-ink); background: var(--card); padding: 2px 6px; border-radius: 6px; opacity: 0; }
.ms.on .v10-l { animation: vIn .3s 1.3s forwards; }
/* 11 — отзыв и ответ */
.v11 p.v11-r, .v11 p.v11-a { margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; font-size: 13px; opacity: 0; }
.v11-r { background: var(--card); max-width: 80%; }
.v11-a { background: var(--blue-soft); margin-left: auto !important; max-width: 92%; }
.v11-a em { font-style: normal; border-radius: 4px; padding: 0 2px; }
.ms.on .v11-r { animation: vIn .4s .2s forwards; } .ms.on .v11-a { animation: vIn .4s .9s forwards; }
.ms.on .v11-a em { animation: vMark .5s forwards; animation-delay: calc(var(--d) * 300ms + 1.4s); }
/* 12 — профиль */
.v12-c { display: flex; gap: 10px; align-items: center; background: var(--card); border-radius: 12px; padding: 12px; }
.v12-c .av { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #c9b8a6, #7d6a58); flex-shrink: 0; transform: scale(0); }
.v12-c div { display: grid; gap: 4px; flex: 1; }
.v12-c b { font-size: 13px; opacity: 0; }
.v12-c .st { color: oklch(0.78 0.16 80); letter-spacing: 2px; clip-path: inset(0 100% 0 0); }
.v12-c i { height: 6px; border-radius: 3px; background: var(--line); width: 90%; opacity: 0; } .v12-c i.s { width: 60%; }
.v12-b { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--good); background: var(--good-soft); padding: 4px 8px; border-radius: 6px; opacity: 0; }
.ms.on .v12-c .av { animation: vScale .4s var(--ease) .2s forwards; } .ms.on .v12-c b { animation: vIn .3s .5s forwards; }
.ms.on .v12-c .st { animation: vStars .8s steps(5) .8s forwards; } .ms.on .v12-c i { animation: vIn .3s 1.6s forwards; } .ms.on .v12-b { animation: vIn .4s 1.9s forwards; }
@keyframes vScale { to { transform: scale(1); } }
@keyframes vStars { to { clip-path: inset(0 0 0 0); } }
/* 13 — прайс */
.v13 ul { list-style: none; margin: 0; padding: 10px 12px; background: var(--card); border-radius: 12px; display: grid; gap: 6px; }
.v13 li { display: flex; align-items: baseline; gap: 6px; font-size: 13px; opacity: 0; transform: translateY(6px); }
.v13 li i { flex: 1; border-bottom: 1px dotted var(--ink-3); }
.ms.on .v13 li { animation: vIn .35s var(--ease) forwards; animation-delay: calc(var(--d) * 220ms + .2s); }
/* 14 — 5 минут и формула */
.v14 { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: center; }
.v14-t { width: 72px; height: 72px; transform: rotate(-90deg); }
.v14-t circle { fill: none; stroke: var(--line); stroke-width: 6; }
.v14-t .r { stroke: var(--blue); stroke-dasharray: 170; stroke-dashoffset: 0; stroke-linecap: round; }
.ms.on .v14-t .r { animation: vTimer 4s linear .2s forwards; }
@keyframes vTimer { to { stroke-dashoffset: 170; } }
.v14-n { position: absolute; left: 0; top: 50%; width: 72px; text-align: center; transform: translateY(-50%); font-weight: 800; font-size: 13px; }
.v14-f { display: flex; flex-wrap: wrap; gap: 6px; }
.v14-f span { background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; font-weight: 700; font-size: 12.5px; }
.ms.on .v14-f span { animation: vLit .4s forwards; animation-delay: calc(var(--d) * 400ms + .4s); }
@keyframes vLit { to { background: var(--blue); color: #fff; border-color: var(--blue); } }
/* 15 — ночью отвечает ИИ */
.v15 p { margin: 0 0 6px; font-size: 13px; }
.v15-h { font-weight: 800; color: var(--ink-3); }
.v15-q { background: var(--card); border-radius: 12px; padding: 7px 10px; max-width: 75%; }
.v15-dots { display: flex; gap: 4px; margin-left: auto !important; width: max-content; background: var(--blue-soft); padding: 9px 12px !important; border-radius: 12px; }
.v15-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: aiPulse 1s infinite; }
.v15-dots i:nth-child(2) { animation-delay: .15s; } .v15-dots i:nth-child(3) { animation-delay: .3s; }
.v15-a { background: var(--blue); color: #fff; border-radius: 12px; padding: 7px 10px; max-width: 85%; margin-left: auto !important; opacity: 0; }
.ms.on .v15-dots { animation: vOut .2s 1.6s forwards; } .ms.on .v15-a { animation: vIn .4s 1.8s forwards; }
/* 16 — выключить дорогие */
.v16-r { display: grid; grid-template-columns: 82px 1fr 52px 30px; gap: 8px; align-items: center; margin-bottom: 7px; font-size: 12.5px; }
.v16-r i { height: 8px; border-radius: 4px; background: var(--paper); position: relative; overflow: hidden; }
.v16-r i::after { content: ""; position: absolute; inset: 0; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--ink-3); transform: scaleX(0); transform-origin: left; }
.v16-r.off i::after { background: var(--bad); } .v16-r.on i::after { background: var(--good); }
.v16-r b { text-align: right; font-variant-numeric: tabular-nums; }
.v16-r em { width: 28px; height: 16px; border-radius: 99px; background: var(--good); position: relative; transition: background .3s; }
.v16-r em::after { content: ""; position: absolute; top: 2px; left: 14px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .3s var(--ease); }
.ms.on .v16-r i::after { animation: vGrow .9s var(--ease) .2s forwards; }
.ms.on .v16-r.off em { animation: vOff .3s 1.4s forwards; }
.ms.on .v16-r.off em::after { animation: vKnob .3s 1.4s forwards; }
@keyframes vOff { to { background: var(--line); } }
@keyframes vKnob { to { left: 2px; } }
/* без движения — сразу итог */
@media (prefers-reduced-motion: reduce) {
  .ms .viz *, .ms .viz *::after { animation-duration: .01s !important; animation-delay: 0s !important; }
}
/* правки схем */
.v7-n { font-size: 11px; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.v7-n.a, .v7-n.c2 { left: 27%; } .v7-n.b, .v7-n.d { left: 73%; }
.v4-c i { background: color-mix(in oklab, var(--ink-3) 45%, var(--paper-2)); }
.v4-c.pk i { background: var(--blue); }
@keyframes vDrop { to { opacity: .45; transform: translateY(3px) scale(.96); } }
@keyframes vTimer { to { stroke-dashoffset: 120; } }
.hero-value { display: inline-block; margin: 4px 0 0; padding: 8px 14px; border-radius: 12px; background: var(--blue-soft); color: var(--ink); font-weight: 700; font-size: 1.0625rem; }
.price s:empty { display: none; }

/* ════════════ Кружка кофе с паром ════════════ */
.mug { width: 92px; height: auto; flex-shrink: 0; overflow: visible; }
.mug.mini { width: 40px; margin: -10px 4px -6px -4px; vertical-align: middle; }
.price-row { display: flex; align-items: center; gap: 14px; }
.hero-value { display: inline-flex; align-items: center; gap: 6px; }
.mug .cup { transform-origin: 60px 116px; animation: mugSway 6s ease-in-out infinite; }
.mug .steam path { fill: none; stroke: #a9b1ba; stroke-width: 4; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: steam 3.2s cubic-bezier(.25, .6, .3, 1) infinite; }
.mug .steam .s2 { animation-delay: 1.05s; }
.mug .steam .s3 { animation-delay: 2.1s; }
:root[data-theme="dark"] .mug .steam path { stroke: #cfd6de; }
@keyframes steam {
  0% { opacity: 0; transform: translateY(10px) scaleX(.9); }
  25% { opacity: .75; }
  60% { opacity: .45; transform: translateY(-6px) scaleX(1.25) skewX(5deg); }
  100% { opacity: 0; transform: translateY(-18px) scaleX(.8) skewX(-4deg); }
}
@keyframes mugSway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-1.4deg); } }
@media (prefers-reduced-motion: reduce) { .mug .cup { animation: none; } .mug .steam path { animation-duration: 9s; } }

/* водяной знак в светлой теме — бледнее */
:root:not([data-theme="dark"]) .cw { opacity: .075; }
:root:not([data-theme="dark"]) .cw-float { opacity: .055; }
:root:not([data-theme="dark"]) .cw-mail { opacity: .16; }

/* ════════════ Акция: таймер, бонусы, большая кружка ════════════ */
.hero-promo { display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: center; margin: 18px 0 6px; padding: 18px 22px; border-radius: 22px; background: var(--paper-2); max-width: 860px; }
@media (max-width: 700px) { .hero-promo { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 16px; } }
/* после акции 390 ₽ кружки нет — блок в одну колонку */
.hero-promo:not(:has(> .mug)) { grid-template-columns: 1fr; }
.mug.big { width: 210px; }
@media (max-width: 700px) { .mug.big { width: 170px; } }
.buy-card .mug { width: 132px; }
.hp-body { display: grid; gap: 14px; width: 100%; }
.promo { display: grid; gap: 8px; }
.promo[hidden] { display: none; }
.promo-h { margin: 0; font-weight: 800; font-size: 1.0625rem; }
.tmr { display: flex; align-items: flex-start; gap: 6px; }
@media (max-width: 700px) { .tmr { justify-content: center; } }
.tmr span { display: grid; justify-items: center; min-width: 58px; padding: 8px 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.tmr b { font: 800 1.75rem/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tmr small { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.tmr i { font-style: normal; font-weight: 800; font-size: 1.5rem; padding-top: 8px; color: var(--ink-3); }
.promo.sm { background: var(--blue-soft); border-radius: 14px; padding: 10px 12px; }
.promo.sm .promo-h { font-size: 14px; }
.promo.sm .tmr span { min-width: 46px; padding: 6px 4px; }
.promo.sm .tmr b { font-size: 1.25rem; }
.promo.sm .tmr i { font-size: 1.1rem; padding-top: 5px; }
.bonus-h { margin: 0 0 8px; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-ink); }
.bonus-g { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .bonus-g { grid-template-columns: 1fr; text-align: left; } }
.bn { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border-radius: 14px; padding: 10px 12px; border: 1px solid var(--line); }
.bn b { display: block; font-size: 14.5px; }
.bn span { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.gift { width: 26px; height: 26px; flex-shrink: 0; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.buy-bonus { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--blue-ink); }
.buy-bonus::before { content: "+ "; }
.hp-title { margin: 0; font: 800 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.15 var(--display); letter-spacing: -0.02em; text-wrap: balance; }

/* ════════════ Таймер v2 и чашка v2 (soft-skill + impeccable) ════════════ */
:root { --spring: cubic-bezier(.32, .72, 0, 1); }
.hero-promo { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in oklab, var(--paper-2) 70%, var(--card)), var(--paper-2)); padding: clamp(18px, 3vw, 30px); border-radius: 28px; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--card) 80%, transparent); }
.hero-promo::before { content: ""; position: absolute; left: -40px; top: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, #f2d9b8 55%, transparent), transparent 70%); pointer-events: none; }
:root[data-theme="dark"] .hero-promo::before { opacity: .25; }
.hero-promo > * { position: relative; }
.mug.big { width: clamp(180px, 22vw, 240px); }
/* чашка: пар, латте-арт, покачивание, наведение */
.mug2 .wisp { fill: none; stroke-width: 6; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: wisp 4.4s var(--spring) infinite; }
.mug2 .w2 { stroke-width: 7; animation-duration: 5s; animation-delay: 1.1s; }
.mug2 .w3 { animation-duration: 4.7s; animation-delay: 2.2s; }
.mug2 .w4 { stroke-width: 4; animation-duration: 3.8s; animation-delay: 3.1s; }
@keyframes wisp {
  0% { opacity: 0; transform: translateY(16px) scaleY(.55) scaleX(.9); }
  22% { opacity: .95; }
  55% { opacity: .6; transform: translateY(-4px) scaleY(1) scaleX(1.22) skewX(7deg); }
  100% { opacity: 0; transform: translateY(-28px) scaleY(1.12) scaleX(.82) skewX(-6deg); }
}
.mug2 .m-cup { transform-box: fill-box; transform-origin: 50% 100%; animation: cupFloat 6.5s ease-in-out infinite; transition: transform .6s var(--spring); }
.mug2 .m-shadow { transform-box: fill-box; transform-origin: 50% 50%; animation: shadowBreath 6.5s ease-in-out infinite; }
@keyframes cupFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-1deg); } }
@keyframes shadowBreath { 0%, 100% { transform: scaleX(1); opacity: .22; } 50% { transform: scaleX(.93); opacity: .17; } }
.mug2 .m-crema { transform-box: fill-box; transform-origin: 50% 50%; animation: crema 26s linear infinite; }
@keyframes crema { to { transform: rotate(360deg); } }
.mug2 { cursor: default; }
.hero-promo:hover .mug2 .wisp, .buy-card:hover .mug2 .wisp { animation-duration: 2.6s; }
.hero-promo:hover .mug2 .m-cup, .buy-card:hover .mug2 .m-cup { animation-play-state: paused; transform: translateY(-6px) rotate(-1.5deg); }
:root[data-theme="dark"] .mug2 .wisp { stroke: #dbe1e7; }
/* таймер: двойная рамка, перелистывание цифр */
.promo-top { display: flex; align-items: center; gap: 10px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 0 color-mix(in oklab, var(--bad) 60%, transparent); animation: live 1.8s var(--spring) infinite; flex-shrink: 0; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--bad) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.promo-h { font-size: 1.0625rem; }
.tmr2 { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; }
@media (max-width: 700px) { .tmr2 { justify-content: center; } .promo-top { justify-content: center; } }
.u { display: grid; justify-items: center; gap: 6px; }
.u-shell { padding: 5px; border-radius: 20px; background: color-mix(in oklab, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 5%, transparent); }
.u-core { min-width: 68px; padding: 12px 10px 10px; border-radius: 15px; background: var(--card); box-shadow: inset 0 1px 1px color-mix(in oklab, #fff 70%, transparent), 0 10px 24px -14px color-mix(in oklab, var(--ink) 45%, transparent); display: grid; place-items: center; }
.dg { position: relative; display: block; height: 1.05em; width: 1.3em; overflow: hidden; font: 800 2.5rem/1.05 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; text-align: center; }
.dg i { position: absolute; inset: 0; font-style: normal; transition: transform .62s var(--spring), opacity .62s var(--spring); }
.dg i.in { transform: translateY(85%); opacity: 0; transition: none; }
.dg i.out { transform: translateY(-85%); opacity: 0; }
.u small { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.sep { font: 800 2rem/1 var(--display); color: color-mix(in oklab, var(--ink) 25%, transparent); padding-top: 18px; animation: sepBlink 2s steps(1) infinite; }
@keyframes sepBlink { 50% { opacity: .35; } }
.promo-bar { height: 4px; border-radius: 99px; background: color-mix(in oklab, var(--ink) 8%, transparent); overflow: hidden; margin-top: 12px; max-width: 360px; }
@media (max-width: 700px) { .promo-bar { margin-inline: auto; } }
.promo-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), color-mix(in oklab, var(--blue) 60%, #fff)); transform-origin: left; transition: transform 1s var(--spring); border-radius: inherit; }
.promo-foot { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); }
/* что будет после таймера: цена после акции, крупнее подписи и контрастом, чтобы не пропустить */
.promo-next { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); }
.promo-next b { color: var(--ink); font-weight: 800; white-space: nowrap; }
/* малый таймер в карточке оплаты */
.promo.sm { background: var(--paper-2); border-radius: 20px; padding: 12px 14px; }
.promo.sm .u-core { min-width: 50px; padding: 8px 6px 7px; border-radius: 12px; }
.promo.sm .u-shell { padding: 4px; border-radius: 16px; }
.promo.sm .dg { font-size: 1.5rem; }
.promo.sm .sep { font-size: 1.3rem; padding-top: 12px; }
.promo.sm .u small { font-size: 10px; }
.promo.sm .promo-h { font-size: 14px; }
.promo.sm .promo-foot, .promo.sm .promo-bar { display: none; }
.buy-card .mug { width: 150px; margin: -10px -8px -6px -10px; }
@media (prefers-reduced-motion: reduce) {
  .mug2 .m-cup, .mug2 .m-shadow, .mug2 .m-crema, .sep, .live-dot { animation: none; }
  .mug2 .wisp { animation-duration: 10s; }
  .dg i { transition: none; }
}
/* таймер на телефоне — помещается целиком */
@media (max-width: 700px) {
  .tmr2 { gap: 3px; }
  .u-shell { padding: 3px; border-radius: 15px; }
  .u-core { min-width: 0; width: 64px; padding: 9px 4px 8px; border-radius: 12px; }
  .dg { font-size: 1.75rem; }
  .sep { font-size: 1.3rem; padding-top: 13px; }
  .u small { font-size: 10px; letter-spacing: .03em; }
  .promo.sm .u-core { width: 54px; }
  .promo.sm .dg { font-size: 1.35rem; }
}
@media (max-width: 380px) { .u-core { width: 56px; } .dg { font-size: 1.5rem; } }
/* цифры таймера: анимирует JS (Web Animations), без классов */
.dg i { transition: none; }
/* тёплое свечение — мягче, за паром */
.hero-promo::before { left: 10px; top: -30px; width: 260px; height: 260px; background: radial-gradient(circle, color-mix(in oklab, #f2d9b8 32%, transparent), transparent 68%); }

/* ════════════ Таблицы v2: карточки вместо прокрутки вбок ════════════ */
.tool { --f: var(--tool-fg); }
.tool input[type=text], .tool input:not([type]), .tool textarea, .rv input, .rv textarea, .as input { width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--f); font: 500 15px var(--body); transition: border-color .2s, box-shadow .2s; }
.rv textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.rv input:focus, .rv textarea:focus, .as input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.rv input.n, .as input.n { font-variant-numeric: tabular-nums; font-weight: 700; }
.rv label, .as label { display: grid; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.rv-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 10px; font-size: 13px; color: var(--ink-2); }
.rv-legend b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); font-size: 11.5px; margin-right: 4px; }
.rv-list { display: grid; gap: 8px; }
.rv { background: var(--card); border: 1px solid var(--line); border-radius: 16px; transition: border-color .2s, box-shadow .2s; }
.rv[open] { box-shadow: 0 8px 24px -18px oklch(0 0 0 / .35); }
.rv.filled { border-color: color-mix(in oklab, var(--blue) 30%, var(--line)); }
.rv summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.rv summary::-webkit-details-marker { display: none; }
.rv-n { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--paper-2); font-weight: 800; font-size: 13px; color: var(--f); flex-shrink: 0; }
.rv.filled .rv-n { background: var(--blue); color: #fff; }
.rv-sum { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; color: var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv:not(.filled) .rv-sum { color: var(--ink-3); font-weight: 500; }
.rv-views { font-size: 13px; font-weight: 700; color: var(--blue-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-chev { width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); flex-shrink: 0; }
.rv[open] .rv-chev { transform: rotate(225deg) translateY(-2px); }
.rv-body { display: grid; gap: 12px; grid-template-columns: 1fr 120px 120px; padding: 2px 14px 14px; border-top: 1px dashed var(--line); padding-top: 14px; }
.rv-title { grid-column: 1; }
.rv-yn { grid-column: 1 / -1; display: flex; gap: 16px; flex-wrap: wrap; }
.rv-wide { grid-column: 1 / -1; }
@media (min-width: 860px) { .rv-body { grid-template-columns: 1fr 1fr 1fr 120px 120px; } .rv-title { grid-column: 1 / 4; } .rv-wide { grid-column: span 5; } .rv-wide:nth-of-type(5), .rv-wide:nth-of-type(6) { grid-column: span 5; } }
@media (max-width: 600px) { .rv-body { grid-template-columns: 1fr 1fr; } .rv-title { grid-column: 1 / -1; } }
.seg { display: inline-flex; align-items: center; gap: 8px; }
.seg-l { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.seg label { display: inline-flex; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label span { padding: 7px 14px; border: 1px solid var(--line); background: var(--card); font-size: 13.5px; font-weight: 700; color: var(--ink-2); transition: all .2s; }
.seg label:first-of-type span { border-radius: 10px 0 0 10px; }
.seg label:last-of-type span { border-radius: 0 10px 10px 0; margin-left: -1px; }
.seg input:checked + span { background: var(--f); color: var(--card); border-color: var(--f); }
.seg input:focus-visible + span { box-shadow: 0 0 0 3px var(--blue-soft); }

/* цена заявки — карточки */
.as-list { display: grid; gap: 10px; margin-top: 16px; }
.as { display: grid; gap: 12px; grid-template-columns: 1.4fr 1.4fr 1.3fr; align-items: end; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; position: relative; overflow: hidden; }
.as::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line); }
.as.go::before { background: var(--good); } .as.fix::before { background: oklch(0.75 0.15 75); } .as.off::before { background: var(--bad); }
@media (max-width: 900px) { .as { grid-template-columns: 1fr; } }
.as-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.as-out { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px 12px; align-items: start; }
.as-k span { display: block; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.as-k b { font: 800 1.25rem/1.2 var(--display); font-variant-numeric: tabular-nums; color: var(--f); }
.as-bar { position: relative; display: block; height: 5px; border-radius: 3px; background: var(--paper-2); margin-top: 6px; overflow: visible; }
.as-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--ink-3); transform-origin: left; transition: transform .6s var(--ease); }
.as.go .as-bar > i { background: var(--good); } .as.fix .as-bar > i { background: oklch(0.75 0.15 75); } .as.off .as-bar > i { background: var(--bad); }
.as-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-3); border-radius: 1px; }
.as .vd { grid-column: 1 / -1; min-width: 0; font-weight: 600; }

/* итоги быстрого подсчёта: цифры были не видны */
.kpis b, .tool .big { color: var(--tool-fg) !important; }
.kpis div { border: 1px solid var(--line); }
.wtag { background: var(--card); }

/* инструменты (модуль 06) */
.ttable { border: 0; border-collapse: separate; border-spacing: 0 8px; background: transparent; min-width: 0; }
.ttable th { background: transparent; padding: 0 14px 2px; }
.ttable td { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ttable td:first-child { border-left: 1px solid var(--line); border-radius: 14px 0 0 14px; font-weight: 700; }
.ttable td:last-child { border-right: 1px solid var(--line); border-radius: 0 14px 14px 0; }
.ttable td.ok, .ttable td.mid, .ttable td.no { font-weight: 500; }
.ttable td.ok { color: var(--good); }
.tscroll { overflow: visible; }
/* статус карточки — тонированный фон вместо боковой полосы */
.as::before { display: none; }
.as.off { background: color-mix(in oklab, var(--bad-soft) 45%, var(--card)); }
.as.go { background: color-mix(in oklab, var(--good-soft) 45%, var(--card)); }
.as.fix { background: color-mix(in oklab, oklch(0.95 0.06 85) 55%, var(--card)); }

/* ════════════ Маршрут: «Что сделать», азы, инсайты, переход к инструментам ════════════ */
.todo { margin: 6px 0 30px; padding: 18px 20px; border-radius: 18px; background: var(--blue-soft); border: 1px solid color-mix(in oklab, var(--blue) 25%, transparent); transition: background .3s, border-color .3s; }
.todo.is-done { background: color-mix(in oklab, var(--good-soft) 70%, var(--card)); border-color: color-mix(in oklab, var(--good) 35%, transparent); }
.todo-k { margin: 0 0 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--blue-ink); }
.todo.is-done .todo-k { color: var(--good); }
.todo ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.todo li { font-size: 1rem; line-height: 1.5; max-width: none; }
.todo-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed color-mix(in oklab, var(--ink) 15%, transparent); }
.todo-f p { margin: 0; font-size: 15px; }
.todo-done { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: 14px; cursor: pointer; }
.todo-done input { width: 18px; height: 18px; accent-color: var(--good); }
.go-tool { display: grid; gap: 4px; margin: 26px 0; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px dashed var(--blue); text-decoration: none; color: var(--ink); transition: background .2s; }
.go-tool:hover { background: var(--blue-soft); }
.go-tool b { color: var(--blue-ink); }
.go-tool span { font-size: 14.5px; color: var(--ink-2); }
.path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
@media (max-width: 700px) { .path { grid-template-columns: 1fr 1fr; } }
.path div { position: relative; background: var(--paper-2); border-radius: 14px; padding: 14px; }
.path b { display: block; font-size: 16px; }
.path span { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.4; }
.path div:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--blue); z-index: 1; }
@media (max-width: 700px) { .path div::after { display: none; } }
.terms-list { display: grid; gap: 8px; margin: 12px 0 0; }
.terms-list div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 600px) { .terms-list div { grid-template-columns: 1fr; gap: 2px; } }
.terms-list dt { font-weight: 800; }
.terms-list dd { margin: 0; color: var(--ink-2); }
.ins-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ins { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.ins b { display: block; font: 800 1.625rem/1.1 var(--display); color: var(--blue-ink); letter-spacing: -0.02em; }
.ins p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
/* уведомление о статистике */