/* Шрифты — свои файлы (fonts/, копирует landing/build.ts из @fontsource): без запросов к Google. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/manrope-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/manrope-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/manrope-cyrillic-800-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/manrope-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/golos-text-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/golos-text-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/golos-text-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/golos-text-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/golos-text-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/golos-text-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Раскладка: широкая сетка 12 колонок, живой первый экран с чатом, «день мастера» с липкими часами, бенто возможностей. */
/* Палитра: фиолетовый #6F55BD (акцент), лаванда #EAE3FA, тёплый светлый #F7F5F1 (фон), тёмно-зелёный #253C39 (текст и тёмные блоки), лайм #C8F16E (свободное время, «онлайн», акценты на тёмном). */
:root {
  --bg: #F7F5F1;
  --surface: #ffffff;
  --ink: #253C39;
  --muted: #66716e;
  --line: #e6e1d8;
  --accent: #6F55BD;
  --accent-ink: #ffffff;
  --accent-soft: #EAE3FA;
  --free: #C8F16E;
  --free-soft: #eef9d3;
  --free-text: #4a6a10;
  --warm: #6F55BD;
  --chat: #efece6;
  --wall: #f1ecfb;
  --wall-ink: #6F55BD;
  --dark: #253C39;
  --dark-deep: #1b2d2b;
  --display: "Manrope", "Helvetica Neue", system-ui, sans-serif;
  --body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Время и цифры — тем же Manrope, с цифрами одинаковой ширины (отдельный моноширинный шрифт не нужен). */
  --mono: "Manrope", "Helvetica Neue", system-ui, sans-serif;
  --radius: 22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #142120; --surface: #1c2d2b; --ink: #F7F5F1; --muted: #a5b1ae; --line: #2c403d;
    --accent: #a993ec; --accent-ink: #142120; --accent-soft: #2f2754; --free: #C8F16E; --free-soft: #2d3a17; --free-text: #C8F16E;
    --warm: #a993ec; --chat: #243634; --wall: #182725; --wall-ink: #a993ec; --dark: #0f1918; --dark-deep: #0a1110; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #142120; --surface: #1c2d2b; --ink: #F7F5F1; --muted: #a5b1ae; --line: #2c403d;
  --accent: #a993ec; --accent-ink: #142120; --accent-soft: #2f2754; --free: #C8F16E; --free-soft: #2d3a17; --free-text: #C8F16E;
  --warm: #a993ec; --chat: #243634; --wall: #182725; --wall-ink: #a993ec; --dark: #0f1918; --dark-deep: #0a1110; color-scheme: dark;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; padding-inline: 20px; }
.wrap { max-width: 1180px; margin: 0 auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; text-wrap: balance; margin: 0; letter-spacing: -0.03em; }
h2 { font-size: clamp(26px, 3.6vw, 44px); line-height: 1.1; }
p { margin: 0; }
a { color: inherit; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--muted); }
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 14px 22px; font: 600 16px var(--body); text-decoration: none; border: 0; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 30px -12px var(--accent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* шапка */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; padding-block: 14px; }
.top-inner { display: flex; align-items: center; gap: 24px; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 999px; padding: 8px 8px 8px 18px; }
.logo { font-family: var(--display); font-weight: 700; font-size: 20px; display: flex; align-items: center; gap: 8px; text-decoration: none; }
/* Аватар Миры — вместо знака: её фото с зелёной точкой «онлайн». */

.nav { display: flex; gap: 22px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--ink); }
.top .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.top .btn { padding: 10px 18px; font-size: 15px; }
@media (max-width: 860px) { .nav, .login { display: none; } }

/* первый экран */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; padding-block: 24px 40px; min-height: calc(100svh - 90px); }
.hero h1 { font-size: clamp(36px, 5.4vw, 72px); line-height: 1.02; }
/* Меняющееся слово — всегда отдельной строкой: остальной заголовок не перескакивает. */
.hero h1 { text-wrap: wrap; }
.hero h1 .swap { color: var(--accent); display: block; white-space: nowrap; height: 1.05em; transition: opacity .25s, transform .25s; }
.hero h1 .swap.out { opacity: 0; transform: translateY(-0.25em); }
.hero-lead { font-size: 19px; color: var(--muted); margin-top: 22px; max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; }
.hero-note span::before { content: "✓ "; color: var(--free-text); font-weight: 700; }

/* Мира: портрет на первом экране, чат поверх него */

/* Фон под телефоном: повёрнутая плитка цвета акцента с сеткой точек и «окна» вокруг. */

@keyframes float { 50% { transform: translateY(-10px); } }

.live { width: 9px; height: 9px; border-radius: 50%; background: var(--free); box-shadow: 0 0 0 0 var(--free); animation: live 2s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* Телефон по высоте экрана: целиком виден на первом экране вместе с переключателем профессий. */

/* живой чат */
/* Телефон: корпус с рамкой, «островок» сверху, строка состояния, поле ввода и полоска «домой». */

/* Обои переписки, как в Telegram: мягкий фон и узор из календарей, часов и звёзд. */

.msg.bot, .from-mira .msg.bot, .typing { background: var(--surface); }
.msg { max-width: 82%; padding: 9px 13px; border-radius: 18px; font-size: 15px; line-height: 1.4; animation: pop .35s ease both; }
.msg.client { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 6px; }
.msg.bot { align-self: flex-start; background: var(--chat); border-bottom-left-radius: 6px; }
/* Ответы бота — от Миры: её аватар слева от сообщения. */
.from-mira { align-self: flex-start; display: flex; align-items: flex-end; gap: 6px; max-width: 90%; animation: pop .35s ease both; }
.from-mira > img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; flex: none; }
.from-mira .msg, .from-mira .typing { max-width: 100%; animation: none; }

 

@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* бегущая строка профессий */
/* Чёрные полосы: бегущая строка и «день мастера» — на всю ширину, токены инвертированы. */

@keyframes run { to { transform: translateX(-50%); } }

/* день мастера */
section { padding-block: 96px; }
.section-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 44px; }

/* возможности — бенто */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; position: relative; }
.tile h3 { font-family: var(--body); font-size: 20px; font-weight: 600; letter-spacing: 0; }
.tile p { color: var(--muted); }
.t-wide { grid-column: span 4; } .t-mid { grid-column: span 2; } .t-half { grid-column: span 3; }

.ai-tile { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; align-items: center; }
.ai-intro { display: grid; gap: 10px; }
.qa-log { display: grid; gap: 12px; }
.qa-row { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 10px; font-size: 14px; }
.qa-row time { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 8px; grid-row: span 2; }
.qa-row span { padding: 8px 11px; border-radius: 14px; width: fit-content; max-width: 100%; }
.qa-row .q { background: var(--chat); border-bottom-left-radius: 4px; }
.qa-row .a { background: var(--accent-soft); color: var(--accent); justify-self: end; border-bottom-right-radius: 4px; }
.qa-row .a.ask { background: var(--free-soft); color: var(--free-text); }
@media (max-width: 900px) { .ai-tile { grid-template-columns: minmax(0, 1fr); } }
.big-num { font-family: var(--mono); font-weight: 800; font-size: clamp(48px, 5.6vw, 76px); line-height: 1; letter-spacing: -0.06em; color: var(--ink); }
.big-num .slash { color: var(--free-text); }
.story-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.story-tile .story-text { display: grid; gap: 10px; align-self: start; }
.story { width: 150px; aspect-ratio: 9 / 16; border-radius: 18px; padding: 12px 11px; color: #fff; display: flex; flex-direction: column; gap: 7px; font-size: 11px; position: relative; overflow: hidden;
  background: radial-gradient(circle at 85% 12%, #6F55BD 0 22%, transparent 23%), radial-gradient(circle at 10% 95%, #C8F16E 0 26%, transparent 27%), #253C39; box-shadow: 0 22px 40px -22px rgba(37, 60, 57, .7); transform: rotate(3deg); }
.story-bar { display: flex; gap: 3px; }
.story-bar i { flex: 1; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .35); }
.story-bar i:first-child { background: #fff; }
.story-who { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.story-who img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.story-title { font: 800 16px/1.05 var(--display); margin-top: 6px; }
.story-days { display: grid; gap: 5px; margin-top: 2px; }
.story-days div { display: flex; justify-content: space-between; align-items: center; padding: 5px 7px; border-radius: 8px; background: rgba(255, 255, 255, .1); }
.story-days b { font-family: var(--mono); font-size: 10px; padding: 2px 5px; border-radius: 5px; background: #fff; color: #253C39; }
.story-cta { margin-top: auto; align-self: center; padding: 5px 10px; border-radius: 999px; background: #fff; color: #253C39; font-weight: 700; }
@media (max-width: 420px) { .story-tile { grid-template-columns: minmax(0, 1fr); } .story { justify-self: center; } }
@media (max-width: 900px) { .t-wide, .t-mid, .t-half { grid-column: span 6; } }

/* шаги */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.step { padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.step::before { counter-increment: s; content: counter(s); font-family: var(--display); font-size: 48px; color: var(--accent); line-height: 1; display: block; margin-bottom: 14px; }
.step h3 { font-family: var(--body); font-size: 20px; font-weight: 600; letter-spacing: 0; }
.step p { color: var(--muted); margin-top: 6px; }

/* тарифы */
.trial { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--free-soft); color: var(--free-text); font-weight: 600; font-size: 14px; }
.period { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); gap: 4px; margin-top: 8px; }
.period button { font: 600 14px var(--body); padding: 8px 16px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.period button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.period small { color: var(--free-text); font-weight: 700; margin-left: 4px; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin-inline: auto; }
.plan { display: flex; flex-direction: column; gap: 16px; padding: 30px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.plan-pro { background: var(--dark); color: #F7F5F1; border-color: var(--dark); --muted: #b3c0bd; --line: #3b5551; --free-text: #C8F16E; position: relative; }
.plan-pro .badge { position: absolute; top: 24px; right: 24px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: #C8F16E; color: #253C39; }
.plan h3 { font-size: 26px; }
.plan .lead { color: var(--muted); }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price b { font: 800 clamp(40px, 4.6vw, 56px) / 1 var(--mono); letter-spacing: -0.05em; }
.price span { color: var(--muted); }
.price-note { font-size: 14px; color: var(--free-text); font-weight: 600; min-height: 1.5em; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.plan li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
.plan li::before { content: "✓"; color: var(--free-text); font-weight: 800; }
.plan li b { font-weight: 700; }
.plan .btn { margin-top: auto; justify-content: center; }
.plan-pro .btn-primary { background: #C8F16E; color: #253C39; box-shadow: none; }
.plan .own { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #EAE3FA 14%, transparent); font-size: 14px; }

.addon b { font: 800 28px var(--mono); }
.compare-wrap { max-width: 980px; margin: 16px auto 0; overflow-x: auto; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.compare th:not(:first-child), .compare td:not(:first-child) { text-align: center; width: 22%; }
.compare thead th { font-family: var(--display); font-size: 16px; }
.compare thead th:last-child { background: var(--dark); color: #F7F5F1; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare .yes { color: var(--free-text); font-weight: 800; }
.compare .no { color: var(--muted); }
.compare td b { font-family: var(--mono); }
.unsure { max-width: 980px; margin: 16px auto 0; text-align: center; color: var(--muted); }
.unsure b { color: var(--ink); }
@media (max-width: 800px) { .plans, .ai-explain { grid-template-columns: minmax(0, 1fr); } }

/* компактные тарифы */
#pricing { padding-block: 72px; }
#pricing .section-head { margin-bottom: 24px; gap: 10px; }
.pricing-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.pricing-controls .period { margin-top: 0; }
.plan { padding: 22px 24px; gap: 12px; border-radius: 24px; }
.plan h3 { font-size: 22px; }
.plan .lead { font-size: 15px; }
.price b { font-size: clamp(34px, 3.6vw, 44px); }
.price-note { font-size: 13px; margin: 2px 0 0; }
.plan ul { gap: 6px; font-size: 15px; }
.plan .own { padding: 9px 12px; font-size: 13px; }
.plan-pro .badge { top: 20px; right: 20px; }
.ai-strip { max-width: 980px; margin: 12px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.ai-strip > div:first-child { flex: 1; min-width: 0; }
.ai-strip .cmd { display: inline-block; padding: 3px 9px; border-radius: 10px 10px 10px 3px; background: var(--wall); margin: 2px 2px 0 0; }
.ai-strip .addon { font-weight: 600; white-space: nowrap; }
.ai-strip .addon b { font: 800 18px var(--mono); }
.compare-details { max-width: 980px; margin: 12px auto 0; }
.compare-details summary { cursor: pointer; list-style: none; text-align: center; font-weight: 600; color: var(--accent); padding: 6px; }
.compare-details summary::after { content: " ↓"; }
.compare-details[open] summary::after { content: " ↑"; }
.compare-details .compare-wrap { margin-top: 8px; }
.compare th, .compare td { padding: 10px 16px; font-size: 14px; }
.unsure { margin-top: 10px; font-size: 14px; }

/* вопросы */
.faq { display: grid; gap: 10px; max-width: 860px; margin-inline: auto; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
details { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; }
summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::after { content: "+"; font-family: var(--mono); color: var(--accent); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--muted); margin-top: 10px; }

/* финал */
.final { --bg: #F7F5F1; background: var(--dark); color: #F7F5F1; border-radius: 36px; padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 48px; align-items: center; position: relative; overflow: hidden; }
.final-text { display: grid; gap: 22px; justify-items: start; position: relative; }

@media (max-width: 760px) { .final { grid-template-columns: minmax(0, 1fr); }  }
.final h2 { max-width: 16em; }
.final p { color: color-mix(in srgb, var(--bg) 70%, transparent); max-width: 36em; }
.final .grid-bg { position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--bg) 18%, transparent) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent 30%, #000); pointer-events: none; }
footer { padding-block: 36px 48px; display: flex; flex-wrap: wrap; gap: 20px; color: var(--muted); font-size: 14px; }
footer a { text-decoration: none; }

@media (max-width: 900px) {
  .hero, .day { grid-template-columns: minmax(0, 1fr); }
  
  .steps { grid-template-columns: minmax(0, 1fr); }
  
  section { padding-block: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- SEO-страницы и блог ---------- */
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.crumbs { font-size: 14px; color: var(--muted); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--muted); }
.page-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: center; padding-block: 36px 56px; }
.page-hero.single { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.page-hero h1 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.05; margin-top: 12px; }
.mini-chat { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 28px; background: var(--wall); }
.mini-chat .msg, .mini-chat .from-mira { animation: none; }
.mini-chat .msg.bot { background: var(--surface); }
.page-section { padding-block: 40px; }
.page-section > h2 { font-size: clamp(24px, 3vw, 36px); }
.page-section > .muted { margin-top: 10px; max-width: 46em; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip-tag { padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.check-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.check-list li { padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.check-list li::before { content: "✓ "; color: var(--free-text); font-weight: 800; }
.link-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
#who .link-grid, #blog .post-grid { margin-top: 0; }
.link-card { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color .2s, transform .2s; }
.link-card:hover, .post-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.link-card b { font-family: var(--display); font-size: 17px; }
.link-card span { color: var(--muted); font-size: 14px; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.post-card { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color .2s, transform .2s; }
.post-card b { font-family: var(--display); font-size: 20px; line-height: 1.2; }
.post-card .muted { font-size: 15px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.post-cat { padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.blog-filter { margin-bottom: 8px; }
.article { max-width: 720px; margin: 0 auto; padding-block: 28px 20px; font-size: 18px; line-height: 1.7; }
.article header { display: grid; gap: 14px; margin-bottom: 18px; }
.article h1 { font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; }
.article h2 { font-size: 24px; margin-top: 36px; }
.article p { margin-top: 12px; }
.article .article-bubble { margin: 14px 0 0 0; align-self: auto; max-width: 92%; display: inline-block; }
.article-note { display: flex; gap: 14px; align-items: flex-start; margin-top: 36px; padding: 20px; border-radius: 20px; background: var(--accent-soft); color: var(--ink); font-size: 16px; }
.article-note img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; flex: none; }
.article-note p { margin: 0; }
.page-cta { padding-block: 32px 8px; }
.site-footer { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; padding-block: 56px 40px; margin-top: 40px; border-top: 1px solid var(--line); font-size: 14px; }
.site-footer nav { display: grid; gap: 9px; align-content: start; }
.site-footer nav b { font-family: var(--display); font-size: 15px; margin-bottom: 4px; }
.site-footer nav a { color: var(--muted); text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); }
.footer-brand { display: grid; gap: 10px; align-content: start; }
.footer-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px; color: var(--muted); padding-top: 20px; border-top: 1px solid var(--line); }
.footer-bottom a { color: var(--muted); text-decoration: none; }
@media (max-width: 900px) {
  .page-hero, .three, .post-grid, .check-list { grid-template-columns: minmax(0, 1fr); }
  .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .link-grid, .site-footer { grid-template-columns: minmax(0, 1fr); } }

/* На тёмно-зелёном главная кнопка — лаймовая. */
.final .btn-primary { background: #C8F16E; color: #253C39; box-shadow: 0 10px 30px -12px rgba(200, 241, 110, .6); }

/* ---------- Contigo24 ---------- */
/* Логотип: Manrope ExtraBold, CONTIGO — цвет текста, 24 — акцент. */
.logo { font-family: "Manrope", "Helvetica Neue", system-ui, sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: baseline; gap: 0; color: var(--ink); }

.hero h1 { font-size: clamp(36px, 5vw, 66px); }

/* Только свои координаты: старые top/left от прежнего первого экрана сбрасываются, иначе карточка растягивается. */

.live { width: 9px; height: 9px; border-radius: 50%; background: var(--free); box-shadow: 0 0 0 2px color-mix(in srgb, var(--free) 40%, transparent); display: inline-block; flex: none; }

/* Как это работает: 4 шага и демо — телефон слева, календарь справа. */

@keyframes fresh { from { transform: scale(.85); } 60% { transform: scale(1.06); } to { transform: none; } }

/* Мира и Марк: карточки персонажей. */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin-inline: auto; }

.tile-dark { background: var(--dark); color: #F7F5F1; border-color: var(--dark); }
.tile-dark p { color: #b3c0bd; }
.pro-tag { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--free); color: #253C39; font-size: 12px; }
.final-duo { position: relative; display: flex; }
.final-duo img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 4px solid var(--dark); }
.final-duo img + img { margin-left: -36px; }

@media (max-width: 900px) {
  .demo, .team { grid-template-columns: minmax(0, 1fr); }
  
  
  .final-duo img { width: 110px; height: 110px; }
}

/* ---------- Как это работает: шаги-карточки, телефон и календарь внахлёст ---------- */

#how { padding-bottom: 120px; }

/* Логотип — картинка от пользователя: белый фон убирается смешиванием; в тёмной теме — инверсия. */

/* Словесный знак contigo24 — везде одинаковый: Manrope ExtraBold, строчные, «24» — акцентом. */
.brand { font-family: "Manrope", "Helvetica Neue", system-ui, sans-serif; font-weight: 800; letter-spacing: -0.035em; text-transform: none; white-space: nowrap; }
.brand b { font-weight: 800; color: var(--accent); }
.logo { text-transform: none; font-size: 26px; color: var(--ink); }
.site-footer .logo { font-size: 28px; }
.final .brand b, .band-dark .brand b, .plan-pro .brand b, .tile-dark .brand b { color: #b8a6f2; }
.hero h1 .brand { letter-spacing: -0.045em; }

/* ---------- Выберите своего AI-администратора ---------- */
.team2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1080px; margin-inline: auto; }
.admin { position: relative; min-height: 520px; border-radius: 30px; overflow: hidden; display: flex; isolation: isolate; border: 1px solid var(--line); }
.admin-mira { background: linear-gradient(135deg, #f3eefc, #EAE3FA); justify-content: flex-end; }
.admin-mark { background: linear-gradient(135deg, #e6efec, #d8e6e1); justify-content: flex-start; }
.admin-photo { position: absolute; z-index: -1; top: 0; bottom: 0; width: 58%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.admin-mira .admin-photo { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.admin-mark .admin-photo { right: 0; -webkit-mask-image: linear-gradient(270deg, #000 55%, transparent); mask-image: linear-gradient(270deg, #000 55%, transparent); }
.admin-body { width: 58%; padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; color: #253C39; }
.admin h3 { font-size: 40px; display: flex; align-items: center; gap: 10px; }
.admin-sign { font-size: 24px; }
.admin-mira .admin-sign { color: #6F55BD; }
.admin-mark .admin-sign { color: #e0a01c; }
.admin-lead { color: #4d5b58; max-width: 22em; }
.admin-pills { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.admin-pills li { display: flex; align-items: center; gap: 9px; width: fit-content; max-width: 100%; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(6px); font-size: 14px; box-shadow: 0 6px 16px -12px rgba(37, 60, 57, .5); }
.pill-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.admin-mira .pill-ic { background: #EAE3FA; color: #6F55BD; }
.admin-mark .pill-ic { background: #dbe7e3; color: #253C39; }
.admin-btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 22px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform .2s; }
.admin-btn:hover { transform: translateY(-2px); }
.admin-btn-light { background: #fff; color: #6F55BD; box-shadow: 0 12px 26px -16px rgba(111, 85, 189, .7); }
.admin-btn-dark { background: #253C39; color: #F7F5F1; }
.team-facts { list-style: none; margin: 36px auto 0; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: center; }
.team-facts li { display: grid; justify-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.team-facts span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.team-facts svg { width: 24px; height: 24px; }
@media (max-width: 900px) {
  .team2 { grid-template-columns: minmax(0, 1fr); }
  .admin { min-height: 0; flex-direction: column; }
  .admin-photo { position: static; width: 100%; height: 300px; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent) !important; mask-image: linear-gradient(180deg, #000 70%, transparent) !important; }
  .admin-body { width: 100%; padding-top: 0; }
  .team-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Лица без растушёвки: фото тает только у внутреннего края; Мира чуть левее, Марк чуть правее. */
.admin-mira .admin-photo { left: -3%; object-position: 70% 12%; -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%); mask-image: linear-gradient(90deg, #000 78%, transparent 100%); }
.admin-mark .admin-photo { right: -3%; object-position: 30% 12%; -webkit-mask-image: linear-gradient(270deg, #000 78%, transparent 100%); mask-image: linear-gradient(270deg, #000 78%, transparent 100%); }
@media (max-width: 900px) {
  .admin-mira .admin-photo, .admin-mark .admin-photo { left: auto; right: auto; object-position: 50% 15%; }
}


/* Пункт тарифа — одной строкой с галочкой: название contigo внутри текста не переносится в отдельный ряд. */
.plan li { display: block; position: relative; padding-left: 28px; }
.plan li::before { position: absolute; left: 0; top: 0; }
/* Цена — пропорциональным шрифтом и узкими пробелами: «4 900 ₽» без широких зазоров. */
.price b { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; }

/* Вопрос — обычной строкой: название contigo24 внутри не разносится по ширине; «+» справа. */
.faq summary { display: block; position: relative; padding-right: 32px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { position: absolute; right: 0; top: 0; }

/* ---------- Как это работает: вертикальный таймлайн + сцена справа ---------- */
.tl-stage::before { content: ""; position: absolute; z-index: -1; width: 46%; aspect-ratio: 1; right: -10%; top: -12%; border-radius: 50%; background: var(--free); opacity: .7; }
.tl-stage::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1.2px, transparent 1.2px) 0 0 / 18px 18px; opacity: .5; }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(20px, 3vw, 40px); opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .45s, transform .45s; pointer-events: none; }
.scene.on { opacity: 1; transform: none; }
.sc-card { background: var(--surface); border-radius: 22px; padding: 18px; box-shadow: 0 24px 50px -30px rgba(37, 60, 57, .45); color: var(--ink); }
.scene .sc-a1, .scene .sc-a2, .scene .sc-a3, .scene .sc-a4, .scene .sc-a5 { opacity: 0; }
.scene.on .sc-a1 { animation: pop .4s .15s ease both; }
.scene.on .sc-a2 { animation: pop .4s .7s ease both; }
.scene.on .sc-a3 { animation: pop .4s 1.25s ease both; }
.scene.on .sc-a4 { animation: pop .4s 1.8s ease both; }
.scene.on .sc-a5 { animation: drop .5s 2.3s ease both; }

.sc-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sc-persona { display: grid; justify-items: center; gap: 6px; padding: 14px; border-radius: 18px; border: 2px solid var(--line); }
.sc-persona img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.sc-persona b { font: 800 18px var(--display); }
.sc-persona span { font-size: 12px; color: var(--muted); }
.sc-persona.sel { border-color: var(--accent); background: var(--accent-soft); }
.sc-persona.sel span { color: var(--accent); font-weight: 700; }
.sc-bubble, .sc-row { display: flex; align-items: flex-end; gap: 8px; }
.sc-bubble img, .sc-row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; flex: none; }
.sc-bubble p { background: var(--surface); padding: 12px 14px; border-radius: 18px 18px 18px 4px; box-shadow: 0 16px 34px -22px rgba(37, 60, 57, .5); font-size: 15px; }
.sc-q { font: 800 16px var(--display); margin: 2px 0 10px; }
.sc-q + .sc-chips + .sc-q { margin-top: 16px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chips span { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; }
.sc-chips .sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.sc-field { display: flex; justify-content: space-between; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--chat); font-size: 14px; }
.sc-services { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sc-services li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--chat); font-size: 14px; }
.sc-services i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--accent); color: #fff; font-style: normal; font-size: 12px; }
.sc-services .off { opacity: .55; }
.sc-services .off i { background: transparent; border: 2px solid var(--line); }
.sc-services small { display: block; color: var(--muted); font-size: 12px; }
.sc-services b { font-family: var(--display); }
.sc-sched { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.sc-sched span { color: var(--muted); font-size: 13px; }
.sc-sched b { font: 800 18px var(--display); }
.sc-sched small { color: var(--accent); font-weight: 600; }
.sc-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sc-ch { display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: var(--surface); box-shadow: 0 20px 40px -30px rgba(37, 60, 57, .5); }
.sc-ch b { font: 800 16px var(--display); }
.sc-ch .ok { font-size: 12px; font-weight: 700; color: #253C39; background: var(--free); padding: 3px 9px; border-radius: 999px; width: fit-content; }
.sc-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sc-link small { display: block; color: var(--muted); font-size: 12px; }
.sc-link b { display: block; font-family: var(--mono); font-size: 15px; margin: 4px 0 10px; word-break: break-all; }
.sc-copy { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; }
.sc-qr { width: 92px; height: 92px; flex: none; border-radius: 12px; background:
  conic-gradient(from 90deg at 18px 18px, #253C39 0 25%, transparent 0) 0 0 / 34px 34px,
  repeating-linear-gradient(90deg, #253C39 0 6px, transparent 6px 12px), var(--surface);
  border: 6px solid var(--surface); outline: 1px solid var(--line); }
.sc-chat { display: flex; flex-direction: column; gap: 10px; }
.sc-msg { padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: var(--chat); font-size: 14px; width: fit-content; max-width: 88%; }
.sc-msg.client { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--accent); color: #fff; }
.sc-slots, .sc-buttons { display: flex; gap: 8px; padding-left: 40px; }
.sc-slots span { font-family: var(--mono); font-size: 13px; padding: 7px 12px; border-radius: 10px; border: 1.5px dashed var(--free-text); color: var(--free-text); background: var(--free-soft); }
.sc-slots .pick { border-style: solid; border-color: var(--free); background: var(--free); color: #253C39; }
.sc-buttons span { padding: 8px 16px; border-radius: 12px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.sc-buttons .pick { background: var(--accent); border-color: var(--accent); color: #fff; }
.sc-done { padding: 10px 13px; border-radius: 14px; background: var(--free-soft); color: #253C39; font-weight: 600; font-size: 14px; }
.sc-toast { align-self: flex-end; padding: 12px 16px; border-radius: 16px; background: var(--dark); color: #F7F5F1; font-size: 14px; box-shadow: 0 20px 40px -20px rgba(37, 60, 57, .7); }
.sc-toast b { color: var(--free); font-family: var(--mono); }
.sc-day { display: grid; gap: 8px; }
.sc-day div { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 14px; background: var(--chat); font-size: 14px; }
.sc-day time { font: 600 14px var(--mono); }
.sc-day em { font-style: normal; font-size: 12px; font-weight: 700; color: #253C39; background: var(--free); padding: 2px 8px; border-radius: 999px; }
.sc-day .hl { background: linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 40%, var(--surface))); box-shadow: inset 3px 0 0 var(--accent); }
.sc-day .hl.new em { background: var(--accent); color: #fff; }
.sc-day .free { color: var(--free-text); font-weight: 600; }

@media (max-width: 700px) {
  .scene { padding: 16px; gap: 10px; }
  .sc-persona img { width: 64px; height: 64px; }
  .sc-channels { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sc-ch { grid-template-columns: 1fr auto; align-items: center; padding: 10px 14px; }
  .sc-qr { width: 64px; height: 64px; }
  
}


/* QR — картинка из скрипта на белом фоне. */
.sc-qr { background: #fff; border: 1px solid var(--line); outline: none; padding: 4px; }
.sc-qr svg { display: block; }


/* Пример фразы — разница между Мирой и Марком в манере, а не в возможностях. */
.admin-say { margin-top: 4px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: rgba(255, 255, 255, .6); font-size: 14px; font-style: italic; color: #253C39; max-width: 26em; }

/* ---------- Возможности: мини-макеты ---------- */
.mock-desk { margin-top: auto; display: grid; grid-template-columns: 34px minmax(0, 1fr) 92px; gap: 8px; height: 120px; padding: 10px; border-radius: 16px; background: var(--chat); }
.md-menu { display: grid; align-content: start; gap: 7px; padding: 6px; border-radius: 10px; background: var(--surface); }
.md-menu i { height: 6px; border-radius: 3px; background: var(--line); }
.md-menu i.on { background: var(--accent); }
.md-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 10px; background: var(--surface); }
.md-week span { border-radius: 5px; }
.md-week .b { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.md-week .f { border: 1.5px dashed var(--free-text); background: var(--free-soft); }
.md-panel { display: grid; align-content: start; gap: 7px; padding: 8px; border-radius: 10px; background: var(--surface); }
.md-panel b { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); }
.md-panel i { height: 6px; border-radius: 3px; background: var(--line); }
.md-panel em { margin-top: 6px; height: 14px; border-radius: 7px; background: var(--accent); }
.mock-ical { margin-top: auto; display: grid; gap: 6px; padding: 12px; border-radius: 16px; background: var(--chat); }
.mi-day { font-weight: 700; font-size: 13px; color: #e5484d; }
.mi-ev { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); font-size: 13px; }
.mi-ev time { font: 600 12px var(--mono); color: var(--muted); }
.mi-ev small { display: block; color: var(--muted); font-size: 11px; }
.mock-site { margin-top: auto; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.ms-bar { padding: 7px 10px; background: var(--chat); font: 500 11px var(--mono); color: var(--muted); }
.ms-slots { display: flex; gap: 6px; padding: 12px 10px; background: var(--surface); }
.ms-slots span { font: 600 12px var(--mono); padding: 6px 9px; border-radius: 9px; border: 1.5px dashed var(--free-text); color: var(--free-text); background: var(--free-soft); }
.ms-slots .pick { border-style: solid; border-color: var(--free); background: var(--free); color: #253C39; }
.mock-client, .mock-bot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: var(--chat); }
.mock-client small, .mock-bot small { display: block; color: var(--muted); font-size: 12px; }
.mc-ava, .mb-ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); font: 800 14px var(--display); }
.tile-dark .mock-bot { background: rgba(255, 255, 255, .08); }
.tile-dark .mock-bot small { color: #b3c0bd; }
.tile-dark .mb-ava { background: var(--free); color: #253C39; }
#features .section-head .muted { max-width: 40em; }

/* ---------- Первый экран: продукт — телефон с администратором и календарь дня ---------- */
.hero-product { position: relative; min-height: 560px; display: grid; place-items: center; isolation: isolate; }
.hero-product::before { content: ""; position: absolute; z-index: -1; inset: 8% 4% 6% 10%; border-radius: 48px; transform: rotate(-5deg);
  background: radial-gradient(color-mix(in srgb, #fff 26%, transparent) 1.2px, transparent 1.2px) 0 0 / 18px 18px, var(--accent); }
.hero-product::after { content: ""; position: absolute; z-index: -1; width: 36%; aspect-ratio: 1; right: 0; top: 0; border-radius: 50%; background: var(--free); }
.hp-phone { width: 300px; aspect-ratio: 9 / 18.5; padding: 10px; border-radius: 48px; background: var(--dark-deep); box-shadow: 0 0 0 2px #36504c, 0 50px 90px -40px rgba(37, 60, 57, .6); }
.hp-screen { position: relative; height: 100%; border-radius: 39px; overflow: hidden; background: var(--wall); display: flex; flex-direction: column; color: var(--ink); }
.hp-island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; border-radius: 13px; background: var(--dark-deep); }
.hp-status { display: flex; justify-content: space-between; padding: 12px 24px 4px; font: 600 12px var(--body); }
.hp-status span:last-child { letter-spacing: 2px; font-size: 10px; }
.hp-head { display: flex; align-items: center; gap: 9px; padding: 8px 14px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.hp-head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.hp-head small { display: block; color: var(--muted); font-size: 11px; }
.hp-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; }
.hp-chat p { margin: 0; font-size: 13px; line-height: 1.4; padding: 9px 12px; width: fit-content; max-width: 88%; }
.hp-bot { background: var(--surface); border-radius: 16px 16px 16px 4px; box-shadow: 0 6px 16px -12px rgba(37, 60, 57, .4); }
.hp-me { margin-left: auto !important; background: var(--accent); color: #fff; border-radius: 16px 16px 4px 16px; }
.hp-note { background: var(--dark); color: #F7F5F1; border-radius: 14px; max-width: 100% !important; }
.hp-note b { color: var(--free); }
.hp-input { display: flex; gap: 8px; align-items: center; padding: 8px 12px 18px; background: var(--surface); border-top: 1px solid var(--line); }
.hp-input span:first-child { flex: 1; padding: 7px 12px; border-radius: 16px; background: var(--chat); color: var(--muted); font-size: 12px; }
.hp-input span:last-child { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 13px; }
/* Сообщения появляются один раз по очереди при загрузке — без зацикливания и прыжков. */
.hp-in { animation: pop .45s ease both; }
.hp-m1 { animation-delay: .3s; } .hp-m2 { animation-delay: 1.1s; } .hp-m3 { animation-delay: 1.9s; } .hp-m4 { animation-delay: 2.8s; }
.hp-cal { position: absolute; left: 0; bottom: 4%; width: 230px; padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(37, 60, 57, .55); display: grid; gap: 7px; }
.hp-cal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.hp-cal-head b { font: 800 15px var(--display); }
.hp-cal-head span { color: var(--muted); font-size: 12px; }
.hp-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--chat); font-size: 12px; }
.hp-row time { font: 600 12px var(--mono); }
.hp-row em { font-style: normal; font-weight: 800; color: #253C39; background: var(--free); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
.hp-row.hl { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.hp-row.free span { color: var(--free-text); font-weight: 600; }
.hp-duo { position: absolute; right: 0; top: 6%; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--surface); box-shadow: 0 20px 40px -24px rgba(37, 60, 57, .5); }
.hp-duo b { display: block; font: 800 14px var(--display); }
.hp-duo small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.hp-faces { display: flex; }
.hp-faces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 2px solid var(--surface); }
.hp-faces img + img { margin-left: -10px; }
@media (max-width: 900px) {
  .hero-product { min-height: 0; padding-block: 24px 120px; }
  .hp-phone { width: 270px; }
  .hp-cal { left: 2%; bottom: 0; width: 210px; }
  .hp-duo { top: 0; right: 2%; }
}
@media (prefers-reduced-motion: reduce) { .hp-in { animation: none; } }

/* Сквозной выбор администратора */
.hp-switch { margin-left: 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--accent); font: 600 12px var(--body); cursor: pointer; white-space: nowrap; }
.hp-switch:hover { border-color: var(--accent); }
.sc-persona span { visibility: hidden; }
.sc-persona.sel span { visibility: visible; }
.admin { transition: box-shadow .3s, border-color .3s, transform .3s; }
.admin.chosen { border: 2px solid var(--accent); box-shadow: 0 0 0 6px var(--accent-soft), 0 30px 60px -30px rgba(111, 85, 189, .5); }
.admin.chosen h3::after { content: "Ваш выбор"; margin-left: 4px; padding: 4px 10px; border-radius: 999px; background: var(--free); color: #253C39; font: 800 12px var(--body); letter-spacing: 0; }

/* Цифры одинаковой ширины там, где раньше был моноширинный шрифт: время, слоты, цены. */
time, .slot, .sc-slots span, .ms-slots span, .hp-row time, .mi-ev time, .qa-row time, .big-num, .price b, .compare td b, .addon b, .sc-link b, .ms-bar { font-variant-numeric: tabular-nums; }
.big-num { letter-spacing: -0.04em; }

.trial-terms { max-width: 760px; margin: 14px auto 0; text-align: center; font-size: 13px; color: var(--muted); }

/* Плашка «Отвечает …» — отдельной строкой над телефоном, не поверх шапки чата. */
.hero-product { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.hp-duo, .hero-product .hp-duo { position: relative; top: auto; right: auto; }
@media (max-width: 900px) { .hero-product .hp-duo { top: auto; right: auto; } }
/* Карточка «Сегодня» — ниже, у края телефона: не закрывает переписку. */
@media (min-width: 901px) { .hp-cal { left: -4%; bottom: -3%; } }

/* ---------- Как это работает: закреплённый таймлайн ----------
   Раздел встаёт на месте (sticky), все шаги видны сразу. Прокрутка двигает линию от кружка
   к кружку; кружок загорается, когда линия до него дошла, и справа меняется сцена. Линия дошла
   до последнего кружка — страница едет дальше. Длина прокрутки — по 38vh на шаг (--steps). */
.tl-pin { position: relative; height: calc(100vh + (var(--steps, 7) - 1) * 38vh); }
.tl { position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding-block: 96px 28px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; max-width: 1120px; margin-inline: auto; }
.tl-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 64px; height: min(100%, 600px); display: flex; flex-direction: column; justify-content: space-between; }
.tl-steps::before, .tl-steps::after { content: ""; position: absolute; left: 21px; width: 3px; border-radius: 2px; top: var(--start, 0); }
/* Серая линия — только между первым и последним кружком; фиолетовая — до точки, которую задаёт прокрутка. */
.tl-steps::before { height: calc(var(--end, 0px) - var(--start, 0px)); background: var(--line); }
.tl-steps::after { height: calc(var(--p, 0px) - var(--start, 0px)); background: var(--accent); }
.tl-step { position: relative; }
.tl-step h3 { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.2; color: var(--muted); transition: color .3s; }
.tl-step p { color: var(--muted); margin-top: 4px; max-width: 32em; font-size: 15px; line-height: 1.45; opacity: .55; transition: opacity .3s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-step.done h3 { color: var(--ink); }
.tl-step.on h3 { color: var(--ink); }
.tl-step.on p { opacity: 1; }
/* Кружок — со сплошным фоном страницы: линия за ним не видна. */
.tl-dot { position: absolute; left: -64px; top: -8px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; z-index: 1; background: var(--bg); border: 2px solid var(--line); color: var(--muted); font: 800 14px var(--display); transition: background .25s, border-color .25s, color .25s, transform .25s, box-shadow .25s; }
.tl-step.done .tl-dot, .tl-step.on .tl-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.tl-step.on .tl-dot { transform: scale(1.1); box-shadow: 0 0 0 6px var(--accent-soft); }
.tl-stage-wrap { position: relative; height: min(100%, 560px); }
.tl-stage { position: relative; height: 100%; border-radius: 36px; background: var(--accent-soft); overflow: hidden; isolation: isolate; }
.tl-caption { display: none; }
@media (max-width: 700px) {
  .tl-pin { height: calc(100svh + (var(--steps, 7) - 1) * 32svh); }
  .tl { height: 100svh; padding-block: 96px 16px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; align-items: start; }
  .tl-stage-wrap { order: -1; height: min(300px, 40svh); }
  .tl-stage { border-radius: 26px; }
  .tl-caption { display: block; order: -1; min-height: 2.9em; margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
  .tl-steps { height: 100%; padding-left: 48px; }
  .tl-step h3 { font-size: 16px; }
  .tl-step p { display: none; }
  .tl-steps::before, .tl-steps::after { left: 15px; }
  .tl-dot { left: -48px; top: -6px; width: 32px; height: 32px; font-size: 12px; }
}
/* На телефоне сцена ниже — её содержимое уменьшено, чтобы помещалось целиком. */
@media (max-width: 700px) { .tl-stage .scene { zoom: .8; } }
/* Таймлайн ближе к заголовку раздела: меньше отступы сверху (шапка сайта всё равно не перекрывает шаги). */
#how { padding-top: 56px; }
#how .section-head { margin-bottom: 0; }
@media (min-width: 901px) { .tl { padding-top: 84px; } }
/* Закреплённому разделу нужен запас под шапку сайта; до закрепления этот запас «съедается»
   отрицательным отступом — шаги стоят сразу под заголовком раздела. */
.tl-pin { margin-top: -56px; }
@media (max-width: 700px) { .tl-pin { margin-top: -64px; } }

/* ---------- Единые отступы между разделами ----------
   Каждый раздел — одинаковый отступ сверху и снизу (--section-y), заголовок раздела —
   одинаковый отступ до содержимого (--head-gap). Частные отступы прежних версий отменены. */
:root { --section-y: 64px; --head-gap: 40px; }
@media (max-width: 900px) { :root { --section-y: 44px; --head-gap: 28px; } }
section, #how, #pricing, #final { padding-block: var(--section-y); }
#final { padding-bottom: 0; }
.section-head, #pricing .section-head { margin-bottom: var(--head-gap); }
#how .section-head { margin-bottom: 0; }

/* Таймлайн: закреплённая часть — по высоте содержимого, а не во весь экран: снизу нет пустоты.
   Отступ сверху (84px) — запас под шапку сайта, пока раздел закреплён; до закрепления его
   «съедает» отрицательный отступ, и до шагов остаётся тот же --head-gap.
   --tl-top — высота шапки с запасом (site.js): на горизонтальном планшете меню в две строки,
   и шапка выше — таймлайн и сцена опускаются под неё. */
:root { --tl-top: 84px; }
.tl { height: auto; padding-block: var(--tl-top) 0; align-items: start; }
.tl-steps, .tl-stage-wrap { height: min(600px, calc(100vh - var(--tl-top) - 36px)); }
.tl-pin { margin-top: calc(var(--head-gap) - var(--tl-top)); height: calc(var(--tl-top) + min(600px, calc(100vh - var(--tl-top) - 36px)) + (var(--steps, 7) - 1) * 38vh); }
/* Высокий экран (1366×1024 и т. п.): закреплённая часть ниже экрана — фиксируем её посередине,
   а не у верха с пустотой снизу; над ней остаётся видно заголовок раздела. */
@media (min-width: 701px) { .tl { top: max(0px, calc((100vh - var(--tl-top) - min(600px, calc(100vh - var(--tl-top) - 36px))) / 2)); } }
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) { .tl { top: 0; } }
@media (max-width: 700px) {
  .tl { height: 100svh; padding-block: 96px 16px; }
  .tl-steps { height: 100%; }
  .tl-stage-wrap { height: min(300px, 40svh); }
  .tl-pin { margin-top: calc(var(--head-gap) - 96px); height: calc(100svh + (var(--steps, 7) - 1) * 32svh); }
}
/* Первый экран — тот же отступ до следующего раздела. Рукописная подпись — по ширине текста,
   чтобы поворот не раздувал её высоту и отступ до «Возможностей». */
.hero { padding-bottom: var(--section-y); }

/* ---------- Единое выравнивание заголовков ----------
   Заголовок раздела везде одинаковый: надпись (eyebrow) → заголовок → подзаголовок, по центру.
   Внутренние страницы: заголовки разделов и короткие «шапки» (блог, возможности) — тоже по центру;
   первый экран с примером переписки и статьи — по левому краю, как первый экран главной. */
.section-head, .section-head.center { margin-inline: auto; text-align: center; justify-items: center; max-width: 760px; gap: 12px; }
.section-head h2, .page-section > h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; }
.section-head .muted, .page-section > .muted { font-size: 17px; line-height: 1.5; max-width: 40em; }
.section-more { margin-top: var(--head-gap); text-align: center; }
.page-section > h2 { text-align: center; text-wrap: balance; }
.page-section > .muted { margin-inline: auto; text-align: center; }
.page-section > h2 + * { margin-top: var(--head-gap); }
.page-section > h2 + .muted { margin-top: 12px; }
.page-section > .muted + * { margin-top: var(--head-gap); }
.chip-row { justify-content: center; }
.faq { margin-inline: auto; }
.page-hero.single { margin-inline: auto; text-align: center; justify-items: center; }
.page-hero.single .hero-lead { margin-inline: auto; }
.page-hero.single .hero-cta { justify-content: center; }
.blog-filter { display: flex; width: fit-content; margin: 0 auto var(--head-gap); }

/* Подзаголовки — строки ровной длины, без последнего слова в одиночку; служебный класс без переноса. */
.section-head .muted, .page-section > .muted, .hero-lead { text-wrap: balance; }
.nowrap { white-space: nowrap; }

/* ---------- Таймлайн на телефоне ----------
   Картинка (сцена) закреплена посередине экрана, шаги обычным списком уходят вверх и проходят
   под ней. Активный шаг — тот, что вышел над картинкой: его кружок горит, линия дотянута до него,
   сцена — его. Раздел не закрепляется целиком, как на компьютере. */
@media (max-width: 700px) {
  .tl-pin { height: auto; margin-top: 0; }
  .tl { position: static; height: auto; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .tl-caption { display: none; }
  .tl-stage-wrap { order: -1; position: sticky; top: calc(50svh - 170px); z-index: 3; height: 340px; margin-bottom: 24px; }
  .tl-stage { box-shadow: 0 0 0 12px var(--bg); }
  .tl-steps { height: auto; display: block; padding: 0 0 calc(50svh - 170px) 48px; }
  .tl-step { min-height: 34svh; padding-top: 6px; }
  .tl-step p { display: -webkit-box; font-size: 14px; }
}
@media (max-width: 700px) { .tl-stage .scene { zoom: .76; } }

/* Планшет: в карточках администраторов возможности — в два столбца (карточка во всю ширину). */
@media (min-width: 641px) and (max-width: 900px) {
  .admin-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-pills li { width: auto; }
  .admin-say { max-width: none; }
}

/* ---------- Таймлайн на вертикальном планшете: горизонтальная шкала ----------
   Раздел закреплён, как на компьютере. Сверху — 7 кружков в ряд, линия идёт слева направо;
   под шкалой — активный шаг крупно (заголовок и описание целиком); ниже — сцена во всю ширину. */
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  .tl-pin { height: calc(100vh + (var(--steps, 7) - 1) * 38vh); }
  .tl { height: 100vh; padding-block: 84px 24px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 20px; align-items: stretch; }
  .tl-steps { height: auto; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 4px; }
  .tl-steps::before, .tl-steps::after { top: 21px; left: var(--start, 0); height: 3px; }
  .tl-steps::before { width: calc(var(--end, 0px) - var(--start, 0px)); }
  .tl-steps::after { width: calc(var(--p, 0px) - var(--start, 0px)); }
  .tl-step { flex: 0 0 auto; }
  /* Заголовки шагов остаются для экранного диктора, на экране — под шкалой у активного шага. */
  .tl-step h3, .tl-step p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tl-dot { position: relative; left: auto; top: auto; }
  .tl-caption { display: block; max-width: 600px; min-height: 5.6em; margin: 0 auto; text-align: center; }
  .tl-caption b { display: block; margin-bottom: 6px; font: 800 24px/1.2 var(--display); color: var(--ink); }
  .tl-caption span { font-size: 16px; line-height: 1.5; color: var(--muted); }
  .tl-stage-wrap { height: 100%; }
}

/* ---------- Администраторы на вертикальном планшете: две карточки рядом ----------
   Фото сверху (лицо целиком, без растушёвки), ниже имя, характер, возможности столбиком,
   пример фразы и кнопка. Оба администратора на одном экране — удобно сравнить и выбрать. */
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait) {
  .team2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .admin { min-height: 0; flex-direction: column; }
  .admin-mira .admin-photo, .admin-mark .admin-photo, .admin-photo {
    position: static; left: auto; right: auto; width: 100%; height: 260px; object-position: 50% 15%;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  .admin-body { width: 100%; padding: 18px 18px 20px; gap: 10px; flex: 1; }
  .admin h3 { font-size: 30px; }
  .admin-lead { font-size: 15px; }
  .admin-pills { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .admin-pills li { width: fit-content; font-size: 13px; }
  .admin-say { max-width: none; font-size: 13px; }
  .admin-btn { padding: 13px 16px; }
}

/* ---------- AI-действие ----------
   Компьютер и планшет — одной строкой; телефон — карточкой: заголовок с иконкой, пояснение,
   примеры как сообщения в чате, внизу «Нужно больше?» и лаймовая плашка с ценой. */
.ai-head-m, .ai-def-m, .addon-q { display: none; }
@media (max-width: 700px) {
  .ai-strip { display: grid; gap: 12px; padding: 16px; border-radius: 18px; }
  .ai-what { display: grid; gap: 10px; }
  .ai-def-d { display: none; }
  .ai-head-m { display: flex; align-items: center; gap: 8px; font: 800 16px var(--display); color: var(--ink); }
  .ai-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 14px; }
  .ai-def-m { display: block; color: var(--muted); font-size: 14px; }
  .ai-strip .cmd { display: block; justify-self: end; max-width: 85%; margin: 0; padding: 9px 12px; border-radius: 16px 16px 4px 16px; background: var(--accent); color: #fff; font-size: 14px; line-height: 1.35; }
  .ai-strip .addon { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); white-space: normal; }
  .addon-q { display: inline; color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; }
  .addon-price { padding: 7px 12px; border-radius: 999px; background: var(--free); color: #253C39; font-size: 14px; font-weight: 700; white-space: nowrap; }
  .ai-strip .addon-price b { font-size: 15px; }
}
/* «Сравнить тарифы» — компактная строка: меньше внутренние отступы и шрифт, чем у вопросов. */
.compare-details { padding: 10px 18px; border-radius: 16px; }
.compare-details summary { padding: 0; font-size: 15px; }
.compare-details[open] { padding-bottom: 14px; }
/* «+» у вопроса — по центру высоты строки вопроса, сколько бы строк он ни занимал. */
.faq summary::after { top: 50%; transform: translateY(-50%); line-height: 1; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
/* Телефон: сцена не налезает на подзаголовок — тот же отступ от заголовка раздела, что везде
   (с запасом на светлую обводку сцены). */
@media (max-width: 700px) { .tl-pin { margin-top: calc(var(--head-gap) + 12px); } }

/* Телефон: описание шага целиком, без обрезки «…». */
@media (max-width: 700px) { .tl-step p { display: block; -webkit-line-clamp: unset; overflow: visible; } }
/* Телефон: сцена ниже центра экрана — над ней больше места для текста активного шага. */
@media (max-width: 700px) { .tl-stage-wrap { top: calc(64svh - 170px); } }
/* Телефон: запас под последним шагом — сцена держится на месте, пока шаг 07 целиком
   не выйдет над ней, и только потом уезжает вместе с разделом. */
@media (max-width: 700px) { .tl-steps { padding-bottom: calc(190px + 12svh); } }
/* Телефон с невысоким экраном: над сценой всегда не меньше ~170px под текст шага (шапка ~96px),
   а сама сцена становится ниже, чтобы поместиться в экран. */
@media (max-width: 700px) {
  .tl-stage-wrap { top: max(calc(64svh - 170px), 270px); height: max(220px, min(340px, calc(100svh - 290px))); }
}
/* Плашка «Отвечает …» — без переносов; на узких экранах чуть компактнее, чтобы всё помещалось в строку. */
.hp-duo b, .hp-duo small, .hp-switch { white-space: nowrap; }
@media (max-width: 480px) {
  .hp-duo { gap: 8px; padding: 6px 8px 6px 6px; max-width: 100%; }
  .hp-faces img { width: 28px; height: 28px; }
  .hp-faces img + img { margin-left: -8px; }
  .hp-duo b { font-size: 13px; }
  .hp-duo small { font-size: 11px; }
  .hp-switch { padding: 6px 10px; font-size: 11px; }
}
/* Телефон: шаги плотнее — высота по тексту и небольшой зазор, без пустоты между текстом и сценой. */
@media (max-width: 700px) { .tl-step { min-height: 0; padding-bottom: 40px; } }
/* Запас под последним шагом — не меньше высоты сцены: шаг 07 успевает выйти над ней целиком. */
@media (max-width: 700px) { .tl-steps { padding-bottom: calc(max(220px, min(340px, 100svh - 290px)) + 48px); } }
/* Телефон: в начале раздела под заголовком сразу шаг 01, под ним сцена. Сцена стоит ниже на
   «место для шага» (--step-room), а список шагов поднят на это место отрицательным отступом
   и уходит под сцену при прокрутке. Пустого зазора под заголовком больше нет. */
@media (max-width: 700px) {
  .tl-pin { --stage-h: max(220px, min(340px, calc(100svh - 290px))); --step-room: 170px; margin-top: var(--head-gap); }
  .tl-stage-wrap { height: var(--stage-h); margin: var(--step-room) 0 0; }
  .tl-steps { margin-top: calc(-1 * (var(--step-room) + var(--stage-h))); padding-bottom: calc(var(--stage-h) + 48px); }
}

/* Телефон: запас под последним шагом — шаг 07 успевает подняться к верху экрана, пока картинка
   ещё на месте. */
@media (max-width: 700px) { .tl-steps { padding-bottom: calc(100svh - 120px); } }

/* Оферта и политика конфиденциальности: текст документа, удобный для чтения. */
.legal { max-width: 760px; margin: 0 auto; padding: 24px 16px var(--section-y); }
.legal h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.2; margin: 0 0 24px; }
.legal h2 { font-size: 19px; margin: 28px 0 10px; }
.legal p { margin: 0 0 10px; line-height: 1.6; color: var(--ink); }

/* ===== Главная 2026-10: первый экран, два живых демо в телефоне, администраторы, надёжность ===== */
.hero h1 .hero-accent { color: var(--accent); }
.hero-terms { margin-top: 12px; font-size: 13px; color: var(--muted); }
.hero-terms a { color: var(--accent); }

/* Кнопки не переносятся на две строки; на узком экране — короче и на всю ширину */
.btn { white-space: nowrap; justify-content: center; }
@media (max-width: 520px) {
  .top .hide-sm { display: none; }
  .top .btn { padding: 9px 14px; font-size: 14px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
}
@media (max-width: 380px) {
  .btn { font-size: 15px; padding-inline: 16px; }
  .plan .btn { font-size: 14px; padding-inline: 12px; }
}

/* Шаги слева, телефон с демо справа */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.how-step { flex-direction: row; align-items: flex-start; gap: 16px; padding: 20px 22px; transition: border-color .2s, box-shadow .2s, opacity .2s; opacity: .62; }
.how-step > div { display: grid; gap: 6px; min-width: 0; }
.how-step.on { opacity: 1; border-color: var(--accent); box-shadow: 0 20px 40px -30px rgba(111, 85, 189, .6); }
.how-step.done { opacity: 1; }
.step-num { flex: 0 0 44px; width: 44px; height: 44px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 800 17px/1 var(--display); }
.how-step.done .step-num { background: var(--free); color: #253C39; }

.demo-stage { display: grid; place-items: center; position: relative; isolation: isolate; padding: 20px 0; }
.demo-stage::before { content: ""; position: absolute; z-index: -1; inset: 6% 10%; border-radius: 48px; transform: rotate(4deg); background: var(--accent-soft); }
.demo-stage .hp-phone { width: 320px; max-width: 100%; }
.dm-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.dm-body p { margin: 0; font-size: 13px; line-height: 1.4; padding: 9px 12px; width: fit-content; max-width: 88%; }
.dm-opts { display: grid; gap: 6px; }
.dm-opt { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: 0; background: var(--surface); color: var(--accent); font: 600 13px/1.3 var(--body); cursor: pointer; box-shadow: 0 6px 16px -12px rgba(37, 60, 57, .4); }
.dm-opt small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.dm-opt b { color: var(--ink); font-family: var(--display); white-space: nowrap; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-chip { padding: 8px 12px; border-radius: 12px; border: 0; background: var(--surface); color: var(--accent); font: 600 13px/1.2 var(--mono); font-variant-numeric: tabular-nums; cursor: pointer; box-shadow: 0 6px 16px -12px rgba(37, 60, 57, .4); }
.dm-chip[aria-pressed="true"] { background: var(--accent); color: #fff; }
.dm-opt:hover, .dm-chip:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.dm-done { background: var(--free-soft) !important; color: var(--free-text); font-weight: 600; border-radius: 14px; }
.dm-note { background: var(--dark) !important; color: #F7F5F1; border-radius: 14px; max-width: 100% !important; }
.dm-note b { color: var(--free); }
.dm-link { font-family: var(--mono); font-weight: 600; color: var(--accent); }
.dm-foot { padding: 8px 12px 18px; background: var(--surface); border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); text-align: center; }

/* Администраторы: фото сверху, под ним характер и пример сообщения */
.team2 .admin { min-height: 0; flex-direction: column; justify-content: flex-start; }
.team2 .admin .admin-photo, .team2 .admin-mira .admin-photo, .team2 .admin-mark .admin-photo {
  position: static; z-index: auto; width: 100%; height: 380px; left: auto; right: auto; object-fit: cover; object-position: 50% 15%;
  /* !important — перебивает растушёвку фото из мобильных правил выше: граница фото и текста чёткая везде */
  -webkit-mask-image: none !important; mask-image: none !important; border-bottom: 1px solid rgba(37, 60, 57, .12);
}
.team2 .admin-body { width: 100%; padding: 24px; gap: 12px; }
.team2 .admin h3 { font-size: 34px; }
.team2 .admin-mark .admin-sign { color: #6F55BD; }
.admin-trait { font: 600 15px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #5b4d86; }
.admin-example { margin-top: 4px; background: #fff; border-radius: 16px; padding: 12px 16px; display: grid; gap: 6px; }
.admin-example .admin-say-label { margin: 0; color: #66716e; font-size: 13px; letter-spacing: .02em; }
.admin-example .admin-say { margin: 0; padding: 0; background: none; border-radius: 0; font-style: normal; font-size: 15px; max-width: none; }
@media (max-width: 600px) { .team2 .admin .admin-photo, .team2 .admin-mira .admin-photo, .team2 .admin-mark .admin-photo { height: 300px; } .team2 .admin-body { padding: 20px; } }
.both { max-width: 1080px; margin: 18px auto 0; background: var(--chat); border-radius: var(--radius); padding: 24px 28px; display: grid; gap: 16px; }
.both-title { display: flex; align-items: center; gap: 12px; font-family: var(--body); font-size: 22px; font-weight: 600; letter-spacing: 0; }
.both-title svg { color: var(--muted); flex: none; }
.both-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.both-list li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; }
.both-list li::before { content: "✓"; color: #3f9a4a; font-weight: 600; }
.both-note { text-align: center; color: var(--muted); font-size: 15px; }
@media (max-width: 600px) { .both-list { grid-template-columns: 1fr; } .both { padding: 20px; } }
.team-cta { max-width: 1080px; margin: 18px auto 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 28px 24px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.team-cta h3 { font-family: var(--body); font-size: 24px; font-weight: 600; letter-spacing: 0; }
.team-cta .muted { font-size: 17px; max-width: 40em; text-wrap: balance; }
.team-cta-note { color: var(--muted); font-size: 15px; }

/* Надёжность */
.trust-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.trust-ic svg { width: 22px; height: 22px; }
.tile-dark .support-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.tile-dark .support-links span { border: 1px solid rgba(247, 245, 241, .3); border-radius: 999px; padding: 8px 14px; font-size: 14px; }

/* Первый экран: вторая фраза заголовка — с новой строки */
.hero h1 .hero-accent { display: block; }
/* Заголовки «Три шага…», «Всё, что умеет…», «Ваши клиенты…» — в одну строку на больших экранах */
@media (min-width: 1100px) {
  .section-head.head-wide { max-width: none; }
  .section-head.head-wide h2 { white-space: nowrap; }
}