/* ============================================================================
   Сетка — визуальный фундамент. Токены, типографика, скелет страницы.
   Подключается ПЕРВЫМ; всё остальное (сцена, секции) строится поверх.

   Шрифты: системный стек, без @font-face и без внешних запросов вообще —
   ни CDN, ни Google Fonts. Локальная гарнитура появится только если её
   положат в site/fonts/ и опишут здесь.
   ========================================================================= */

:root{
  /* --- Палитра ------------------------------------------------------------
     Тёплая нейтраль + один акцент. Акцент — кирпичный (обожжённая глина):
     татами, тейп на снаряде, красный угол. Даёт 6.35:1 на белом (текст ссылки
     проходит AA с запасом) и 6.35:1 белым по заливке кнопки.
     Синей палитры «Нити» здесь нет намеренно: два продукта одного владельца в
     одинаковой синеве читаются как один шаблон.                             */
  --accent:#A83B1B;          /* основной: заливка кнопки, ссылки, акценты      */
  --accent-dark:#8F2F14;     /* hover заливки; текст по --accent-soft (6.8:1)  */
  --accent-darker:#7C2D12;   /* active/press                                   */
  --accent-bright:#C2410C;   /* ТОЛЬКО графика: линии, кольцо курсора, обводка
                                фокуса. Для текста слишком светлый (4.85:1)    */
  --accent-soft:#F6E8E0;     /* плашка/чип под акцентным текстом               */
  --accent-line:#EDD6C7;     /* граница такой плашки                           */

  --bg:#FAF7F2;              /* тёплый почти-белый — фон страницы              */
  --surface:#FFFFFF;         /* карточки, окна чата, приподнятые плоскости     */
  --sand:#F3EDE4;            /* песочная подложка: чипы, номера шагов, полосы  */
  --border:#E8E1D6;          /* обычная граница                                */
  --border-strong:#D8CFC1;   /* граница интерактивного: hover инпутов, кнопок  */

  --fg:#211E1B;              /* графит с тёплым подтоном, не чёрный           */
  --fg-muted:#5F5952;        /* вторичный текст, 6.47:1 на фоне               */
  --fg-faint:#8A8279;        /* ТОЛЬКО иконки и хэйрлайны, не текст            */

  --ok:#1F6B45;              /* подтверждено, оплачено (6.05:1 на фоне)       */
  --ok-soft:#E7F2EA;
  /* Отдельного «красного для ошибки» тут нет: акцент сам красный, второй
     красный на странице читался бы как сбой. Тревожное состояние показываем
     самим акцентом или --fg-muted.                                          */

  /* --- Шкала отступов (8-based, как у «Нити» — один язык между проектами) - */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:80px;

  /* --- Радиусы ------------------------------------------------------------ */
  --radius-sm:8px;           /* мелкие кнопки внутри сцены                     */
  --radius:12px;             /* карточки, окна, кнопки                         */
  --radius-lg:18px;          /* пузыри сообщений                               */
  --radius-pill:999px;

  /* --- Кривые -------------------------------------------------------------
     easeOutQuint пролетает 80% пути за 20% времени — на любой длительности
     получаются «щелчки». Отсюда три кривые под три задачи:
     out    — отклик на действие (наведение, нажатие), мягкий выход;
     enter  — появление объекта, длинный хвост торможения;
     in-out — уход и возврат целого блока, без рывка в обе стороны.           */
  --ease-out:cubic-bezier(.33,.66,.3,1);
  --ease-enter:cubic-bezier(.16,.6,.28,1);
  --ease-in-out:cubic-bezier(.4,.05,.25,1);

  /* Две пружины через linear(): безье не умеет перелёта, а рост коробки и
     нажатие кнопки без него читаются как раздвижка панели, а не как отклик
     физического объекта. grow — перелёт 0.2% (почти критическое затухание),
     press — 3.8%. Обе интерполируются от текущего значения, то есть
     прерываемы, в отличие от @keyframes. */
  --e-grow:linear(0, 0.0082 1.6%, 0.0302 3.2%, 0.0627 4.8%, 0.103 6.3%, 0.1983 9.5%, 0.4551 17.5%, 0.548 20.6%, 0.6308 23.8%, 0.7028 27.0%, 0.764 30.2%, 0.815 33.3%, 0.857 36.5%, 0.9054 41.3%, 0.9396 46.0%, 0.969 52.4%, 0.9886 60.3%, 0.9998 73.0%, 1);
  --e-press:linear(0, 0.0119 1.6%, 0.044 3.2%, 0.0913 4.8%, 0.1498 6.3%, 0.2156 7.9%, 0.5001 14.3%, 0.6305 17.5%, 0.6891 19.0%, 0.7428 20.6%, 0.7913 22.2%, 0.8346 23.8%, 0.8728 25.4%, 0.906 27.0%, 0.9345 28.6%, 0.9586 30.2%, 0.9952 33.3%, 1.0186 36.5%, 1.0318 39.7%, 1.0384 44.4%, 1.0307 52.4%, 1.0067 68.3%, 0.9988 84.1%, 1);

  /* --- Тени. Тон тёплый (33,30,27), чтобы не сереть на песочном фоне ------ */
  --shadow-1:0 1px 2px rgba(33,30,27,.05);
  --shadow-2:0 1px 2px rgba(33,30,27,.05),0 18px 40px -22px rgba(33,30,27,.35);
  --shadow-3:0 2px 6px rgba(33,30,27,.07),0 30px 60px -28px rgba(33,30,27,.48);

  /* --- Шрифт и ширина ----------------------------------------------------- */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --maxw:1120px;

  /* Палитра только светлая. Без этой строки Android Chrome в режиме
     «автоматическая тёмная тема» перекрашивает страницу сам и портит тёплую
     нейтраль: белые окна чата становятся грязно-серыми, акцент уезжает. */
  color-scheme:light;
}

/* ============================ Сброс ====================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--fg);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto}
button{font:inherit;color:inherit}

/* ========================== Типографика ================================== */
h1,h2,h3{line-height:1.16;margin:0 0 var(--s5);font-weight:700;letter-spacing:-0.022em}
h1{font-size:clamp(32px,5vw,52px);letter-spacing:-0.03em;text-wrap:balance}
h2{font-size:clamp(25px,3.2vw,34px);text-wrap:balance}
/* 19/21 px, не 18: при body 18px на десктопе подзаголовок и абзац были одного
   кегля, и иерархия держалась только на весе и цвете. */
h3{font-size:19px;margin-bottom:var(--s3);letter-spacing:-0.012em}
@media(min-width:940px){h3{font-size:21px}}
p{margin:0 0 var(--s4)}

/* Полоса 761–939 px (iPad portrait и близкие): сетки уже схлопнуты в одну
   колонку, а типографика ещё десктопная — строка доходила до 91–104 знаков.
   68ch держит её в норме, не трогая ни одну из сеток. */
@media(min-width:761px) and (max-width:939px){
  .feat li,.card p,ul.limits li,ul.points li,.faq dd,.foot-grid p{max-width:68ch}
}
/* Колонка карточки на телефоне — 300 px, разброс длины строк доходил до 28%.
   lang="ru" стоит, переносы работают. */
@media(max-width:760px){
  p,li,dd{hyphens:auto}
}
p:last-child{margin-bottom:0}
b,strong{font-weight:700}
a{color:var(--accent-dark);text-underline-offset:2px}
a:hover{color:var(--accent-darker)}

/* Лид первого экрана и подзаголовок секции — одна роль, разный размер */
.lead{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--fg-muted);max-width:34em}
.section-lead{color:var(--fg-muted);max-width:660px;margin:calc(var(--s5) * -1 + 15px) 0 var(--s6)}
/* Мелкая приписка под кнопкой или карточкой */
.note{font-size:15px;color:var(--fg-muted);margin:var(--s3) 0 0}
/* Надзаголовок: капслок мелким, разрядка вместо жирности */
.eyebrow{font-size:13px;font-weight:700;color:var(--fg-muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--s2)}
/* Отбивка после ряда карточек: мысль важная, но на карточку не тянет */
.aside{margin:var(--s6) 0 0;padding-left:var(--s5);border-left:3px solid var(--accent);
  color:var(--fg-muted);font-size:16px;line-height:1.6;max-width:74ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(min-width:940px){
  body{font-size:18px}
  .card p{font-size:17px}
  ul.limits li{font-size:17px}
  .aside{font-size:17px}
  dd{font-size:17px}
}

/* =========================== Каркас ====================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

section{padding:var(--s9) 0;border-top:1px solid var(--border)}
/* Островок висит сверху и перекрывает ~72px. Без отступа переход по ссылке
   «о границах» ставит заголовок секции ровно под кнопку. */
/* На [id], а не на section[id]: якорь #cena — это div.pricing-box, и прежний
   селектор его не ловил (scrollMarginTop = 0), из-за чего островок накрывал
   заголовок «Сколько будет стоить» целиком. */
[id]{scroll-margin-top:88px}
section.plain{border-top:none}          /* первый экран: линии сверху нет     */
section.surface{background:var(--surface)}
section.sand{background:var(--sand)}    /* тёплая полоса, разбивает белый ряд */
@media(max-width:760px){
  section{padding:var(--s7) 0}
}

/* Шапка */
header{padding:var(--s5) 0 0}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap}
.logo{font-weight:700;font-size:20px;letter-spacing:-0.025em;color:var(--fg);
  text-decoration:none}
.logo b{color:var(--accent)}

/* Первый экран */
.hero{padding:var(--s7) 0 var(--s8)}
.hero-grid{display:grid;gap:var(--s7);align-items:center}
@media(min-width:940px){.hero-grid{grid-template-columns:1.02fr .98fr;gap:var(--s8)}}
@media(max-width:760px){.hero{padding:var(--s6) 0 var(--s7)}}
.cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);
  margin-top:var(--s6)}

/* =========================== Кнопки ====================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:52px;padding:14px 28px;border-radius:var(--radius);
  font-size:17px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;
  border:1px solid transparent;
  transition:background-color 180ms var(--ease-out),border-color 180ms var(--ease-out),
             color 180ms var(--ease-out),transform 160ms var(--ease-out)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--accent-dark);color:#fff}
.btn-primary:active{background:var(--accent-darker)}
.btn-ghost{background:var(--surface);border-color:var(--border-strong);color:var(--fg)}
.btn-ghost:hover{border-color:var(--fg-faint);color:var(--fg)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.6;cursor:default}
.btn svg{width:18px;height:18px;flex:none}
.btn-sm{min-height:44px;padding:10px 22px;font-size:15px}
/* Обводку фокуса рисуем outline'ом, радиус НЕ трогаем: у .btn он 12px, у
   кнопки в островке — пилюля, и общий radius-sm тут просто ломал бы форму
   ровно в момент фокуса. Outline и так повторяет скругление элемента. */
.btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:3px solid var(--accent-bright);outline-offset:2px}

/* Чип-плашка: «бесплатно, пока идёт пилот», пометки про Premium */
.badge{display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-dark);
  font-size:14px;font-weight:600;padding:6px 14px;border-radius:var(--radius-pill)}
.badge svg{width:16px;height:16px;flex:none}
.badge-quiet{background:var(--sand);border-color:var(--border);color:var(--fg-muted)}

/* Строка действия: всплывает сверху, когда кнопка первого экрана ушла из виду.
   Без подложки на всю ширину — кнопка яркая, логотип узнаваем, оба читаются. */
.dock{position:fixed;top:0;left:0;right:0;z-index:40;pointer-events:none;
  padding:14px 0;opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity 240ms var(--ease-in-out),transform 260ms var(--ease-in-out),
             visibility 240ms}
.dock.on{opacity:1;visibility:visible;transform:none;
  transition:opacity 220ms var(--ease-enter),transform 260ms var(--ease-enter),visibility 220ms}
.dock>*{pointer-events:auto}
.dock-inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.dock-logo{position:relative;isolation:isolate;font-weight:700;font-size:19px;
  letter-spacing:-0.025em;color:var(--fg);text-decoration:none;white-space:nowrap}
.dock-logo b{color:var(--accent)}
/* Полупрозрачная пилюля под логотипом: контраст на любом наложении */
.dock-logo::before{content:"";position:absolute;inset:-9px -14px;border-radius:var(--radius-pill);
  background:rgba(250,247,242,.66);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  z-index:-1}
/* Кнопка не возникает на месте, а прилетает сверху — оттуда, где осталась
   кнопка первого экрана, — и по дороге ужимается до размера шапки. */
/* Бюджет служебного перехода — 300 мс. Прежние 620/560 мс были нарративной
   длительностью на кнопке, которую скролл переключает сколько угодно раз;
   заодно ужат перелёт (scale 1.24 → 1.06, сдвиг 38 → 16 px). */
.dock .btn{min-height:44px;padding:10px 22px;font-size:15px;border-radius:var(--radius-pill);
  transform-origin:100% 50%;transform:translateY(-16px) scale(1.06);opacity:0;
  transition:transform 220ms var(--ease-in-out),opacity 180ms var(--ease-in-out),
             background-color 180ms var(--ease-out)}
.dock.on .btn{transform:none;opacity:1;
  transition:transform 260ms var(--ease-enter) 20ms,opacity 200ms var(--ease-enter) 20ms,
             background-color 180ms var(--ease-out)}
@media(max-width:520px){
  .dock{padding:12px 0}
  .dock .btn{padding:10px 18px}
}
@media(prefers-reduced-motion:reduce){
  .dock,.dock .btn{transition:opacity 1ms,visibility 1ms}
}

/* ======================== Сетки и карточки =============================== */
.grid{display:grid;gap:var(--s5)}
@media(min-width:780px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--s6) var(--s5);display:flex;flex-direction:column}
.card h3{margin-bottom:var(--s3)}
.card p{margin:0;color:var(--fg-muted);font-size:16px}
.card p + p{margin-top:var(--s3)}
/* Развязка сюжета — это про Сетку, а не про случай: отчёркнута и прижата к низу
   карточки, поэтому линия идёт на одной высоте во всех трёх. */
.card p:has(+ .fix){margin-bottom:var(--s5)}
.card .fix,.card p + .fix{margin-top:auto;padding-top:var(--s4);color:var(--fg);
  border-top:1px solid var(--border)}
/* Ряд без «коробок»: те же колонки, но карточка растворяется в фоне */
.grid.flat .card{background:transparent;border:none;padding:0 var(--s5) 0 0}
section.surface .card{background:var(--bg)}
section.sand .card{background:var(--surface)}

/* Значок и номер шага — один размер, разное содержимое */
.icon,.step-num{width:40px;height:40px;border-radius:10px;background:var(--sand);
  color:var(--accent-dark);display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--s4);flex:none}
.icon svg{width:22px;height:22px}
.step-num{font-weight:700;font-size:17px}
.icon.ok{background:var(--ok-soft);color:var(--ok)}

/* Список границ: «что видит и чего не видит» */
ul.limits{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3)}
@media(min-width:780px){ul.limits{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s6)}}
ul.limits li{display:flex;gap:var(--s3);align-items:flex-start;color:var(--fg-muted);
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:var(--s4)}
ul.limits svg{width:20px;height:20px;flex:none;color:var(--fg-faint);margin-top:2px}
ul.limits b{color:var(--fg)}

/* Простой список с галочками/точками, без коробок */
ul.points{list-style:none;padding:0;margin:0;display:grid;gap:10px}
ul.points li{display:flex;gap:10px;font-size:16px;color:var(--fg-muted);line-height:1.5;
  max-width:66ch}
ul.points svg{width:18px;height:18px;flex:none;color:var(--accent);margin-top:4px}

/* ============================ Вопросы ==================================== */
/* 760px — единственное место на странице, где строка иначе уходит в 127
   знаков: у всех остальных блоков ограничитель свой (.section-lead 660px,
   .aside 74ch, ul.points 66ch). */
.faq dl{margin:0;max-width:640px}
.faq dt{font-weight:600;font-size:18px;margin-top:var(--s6);padding-top:var(--s6);
  border-top:1px solid var(--border)}
.faq dt:first-of-type{margin-top:0;padding-top:0;border-top:none}
.faq dd{margin:var(--s3) 0 0;color:var(--fg-muted)}
.faq dd a{display:inline-block;padding:3px 0}
/* На телефоне 96 px между парами × 8 давали 768 px чистых разделителей —
   секция читалась стеной именно из-за них, а не из-за объёма текста. */
@media(max-width:760px){
  .faq dt{margin-top:var(--s5);padding-top:var(--s5)}
}

/* ============================= Подвал ==================================== */
footer{padding:var(--s7) 0 var(--s8);color:var(--fg-muted);font-size:15px;
  border-top:1px solid var(--border)}
.foot-grid{display:grid;gap:var(--s5)}
@media(min-width:780px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr;gap:var(--s6)}}
.foot-grid p{margin:0 0 4px;font-size:14px;line-height:1.55}
.foot-logo{font-weight:700;font-size:20px;letter-spacing:-0.025em;color:var(--fg);
  margin-bottom:var(--s2);display:inline-block;text-decoration:none}
.foot-logo b{color:var(--accent)}
.foot-name{font-weight:600;color:var(--fg);margin-bottom:var(--s2)}
/* Подчёркивание постоянное, а не по наведению: цвет ссылки совпадает с цветом
   окружающего текста, и без него ссылка не отличима от прозы ничем вообще
   (WCAG 1.4.1). Тон подчёркивания приглушён, чтобы подвал не зарябил.
   padding даёт тач-таргету высоту: голый inline давал 16 px при шаге 21. */
footer a{color:var(--fg-muted);text-decoration:underline;
  text-decoration-color:var(--border-strong);text-underline-offset:2px;
  display:inline-block;padding:9px 0}
footer a:hover{color:var(--fg);text-decoration-color:currentColor}
.made{margin:var(--s6) 0 0;padding-top:var(--s4);border-top:1px solid var(--border);
  font-size:14px}
.made-link{font-family:var(--font-mono);font-weight:700;color:var(--fg);text-decoration:none}
.made-link:hover{text-decoration:underline}

/* ========================= Уважение к настройкам ========================= */
/* Reduced motion — это «меньше движения», а не «ноль переходов»: смену цвета
   и прозрачности оставляем, иначе интерфейс отвечает рывком и состояние
   кнопки читается хуже. Движение (transform) и @keyframes снимаем целиком.
   Прежний тотальный `transition:none!important` перебивал в том числе
   аккуратное правило островка выше. */
@media(prefers-reduced-motion:reduce){
  *{transition-property:opacity,background-color,border-color,color,box-shadow !important;
    transition-duration:150ms !important;transition-delay:0ms !important;
    animation:none !important}
  html{scroll-behavior:auto}
}