/* Disputa — лендинг.
 *
 * Собран из макетов фиксированной ширины (1440 и 390). Макеты — эталон
 * внешнего вида, здесь — одна адаптивная страница: порядок блоков тот
 * же, промежуточные ширины решены тут.
 *
 * Правила системы, которые легко нарушить правкой:
 *   — градиентов нет, цвет только плоскими заливками;
 *   — рамок нет, разделяют воздух и тон;
 *   — радиусы ровно три: 0 у блоков и фотографий, 6px у кнопок и полей,
 *     8px у окна интерфейса. Круглое — только точки-маркеры;
 *   — тень одна, под окном интерфейса;
 *   — тёмных блоков не больше двух на страницу;
 *   — движения нет, кроме hover и focus.
 */

@import url('fonts.css');

:root {
  --bg: #f7f6f3;
  --block: #efede8;
  --band: #e7ebf4;
  --surface: #ffffff;
  --ink: #14151a;
  --text: #454a59;
  --muted: #5b6070;
  --faint: #8a8fa0;
  --faintest: #a0a4b2;
  --action: #4b3fe4;
  --topic: #c3299b;
  --warn: #b26a22;
  --ok: #2e7d52;

  /* поверхности внутри окна интерфейса: тон, а не рамка */
  --ui-chrome: #f1f2f5;
  --ui-rail: #fafafb;
  --ui-sunk: #f7f8fa;
  --ui-idle: #edeef2;
  --on-dark: #c9ceda;
  --on-dark-faint: #8c93a6;
  --dark-chip: #23252d;

  --serif: 'Literata', Georgia, 'Times New Roman', serif;
  --sans: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --side: 64px;
  /* макет нарисован на 1440; на большом мониторе страница шире, но не
     бесконечно — дальше растут поля, а не содержимое */
  --page: 1600px;
  --gap-section: 130px;
  --shadow: 0 40px 70px -40px rgba(20, 21, 26, 0.35);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  /* ни один блок не уезжает вбок: горизонтальная прокрутка на телефоне
     выглядит как поломка вёрстки, даже если это один лишний пиксель */
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--action);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
}

p {
  margin: 0;
}

/* ── типографика ──────────────────────────────────────────────────── */

.serif {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.04em;
}

.mono {
  font-family: var(--mono);
}

/* служебная метка: ЗАСЧИТЫВАЕМ, 01 CORE, ПОВЕСТКА */
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--faint);
}

.lead {
  font-size: 20px;
  line-height: 1.62;
  color: var(--text);
}

.lead strong {
  font-weight: 400;
  color: var(--ink);
}

.note {
  font-size: 15px;
  line-height: 1.55;
  color: var(--faint);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 7px;
}

/* ── каркас ───────────────────────────────────────────────────────── */

.site-header,
.hero,
.wrap,
.author,
.site-footer {
  max-width: var(--page);
  margin-inline: auto;
}

.wrap {
  padding-inline: var(--side);
}

.section {
  padding-top: var(--gap-section);
}

.section--tight {
  padding-top: 110px;
}

/* полоса во всю ширину: секция продукта, документы, разговор. Заливка
   идёт от края до края, содержимое — по той же сетке, что и остальное */
.band {
  background: var(--band);
  padding: 80px var(--side);
  margin-top: 120px;
}

.band > * {
  max-width: calc(var(--page) - var(--side) * 2);
  margin-inline: auto;
}

.dark {
  background: var(--ink);
  color: #fff;
}

.dark p,
.dark .lead {
  color: var(--on-dark);
}

/* ── шапка ────────────────────────────────────────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 96px;
  padding-inline: var(--side);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.logo:hover {
  color: inherit;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-grow: 1;
}

.site-nav a,
.site-header .side-link {
  font-size: 15px;
  color: var(--muted);
}

.site-nav a[aria-current='page'] {
  color: var(--ink);
}

/* ── кнопки ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding-inline: 32px;
  border: none;
  border-radius: 6px;
  background: var(--action);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  cursor: pointer;
}

.btn:hover {
  background: #3d31d6;
  color: #fff;
}

.btn--sm {
  height: 42px;
  padding-inline: 22px;
  font-size: 15px;
}

.btn--wide {
  width: 100%;
}

.link-arrow {
  font-size: 17px;
  color: var(--text);
}

.dark .link-arrow {
  color: #a2a7b5;
}

/* ── первый экран ─────────────────────────────────────────────────── */

.hero {
  /* две колонки, а не текст с фотографией поверх него: при абсолютном
     позиционировании фотография наезжала на заголовок, как только
     страница становилась уже макетных 1440 */
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
  padding: 40px var(--side) 72px;
}

.hero__text {
  grid-column: 1;
  grid-row: 1;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(42px, 6vw, 86px);
  line-height: 0.99;
  letter-spacing: -0.046em;
  font-weight: 300;
}

.hero h1 em {
  font-style: italic;
}

.hero__lead {
  margin-top: 34px;
  max-width: 540px;
}

.hero__actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* фотография прижата к правому краю страницы и равна высоте секции:
   колонка выходит за поле отрицательным полем, а не всплытием */
.hero picture {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  margin-right: calc(var(--side) * -1);
}

.hero__photo {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: 50% 32%;
}

.stats {
  margin-top: 52px;
  display: flex;
  align-items: flex-start;
  gap: 44px;
}

.stats__value {
  font-family: var(--serif);
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 300;
}

.stats__note {
  margin-top: 12px;
  max-width: 190px;
  font-size: 15px;
  line-height: 1.5;
  color: #6b7180;
}

.hero__footnote {
  margin-top: 22px;
  max-width: 540px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--faint);
}

/* ── окно интерфейса ──────────────────────────────────────────────── */

.ui {
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.ui__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding-inline: 20px;
  background: var(--ui-chrome);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}

.ui__chip {
  color: var(--ink);
  background: var(--surface);
  padding: 5px 10px;
  border-radius: 4px;
}

.ui__spacer {
  flex-grow: 1;
}

.ui__tabs {
  display: flex;
  height: 46px;
  background: var(--ui-rail);
  font-size: 13px;
  color: var(--faint);
}

.ui__tab {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ui__tab--on {
  color: var(--ink);
  background: var(--surface);
}

.ui__body {
  display: flex;
  min-height: 440px;
}

.ui__rail {
  width: 262px;
  flex-shrink: 0;
  padding-top: 18px;
  background: var(--ui-rail);
}

.ui__rail--right {
  width: 250px;
  padding: 18px 22px;
}

.ui__rail-head {
  display: flex;
  align-items: baseline;
  padding: 0 20px 14px;
}

.ui__person {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 11px 20px;
}

.ui__person--on {
  background: var(--ui-chrome);
}

.ui__bar {
  width: 3px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ui__q {
  display: flex;
  gap: 9px;
  padding: 11px 20px 11px 32px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faintest);
}

.ui__q--on {
  background: var(--surface);
  color: var(--ink);
  padding-block: 12px;
}

.ui__main {
  flex-grow: 1;
  padding: 24px 28px;
}

.ui__card {
  border-radius: 8px;
  background: var(--ui-sunk);
  padding: 24px 26px;
}

.ui__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}

.ui__topic {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--topic);
  padding: 5px 9px;
  border-radius: 4px;
}

.ui__question {
  margin-top: 16px;
  font-size: 22px;
  line-height: 1.42;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.ui__expect {
  margin-top: 18px;
  padding-left: 16px;
}

.ui__expect p {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--muted);
}

.ui__source {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--faint);
}

.ui__warn {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--warn);
}

.ui__marks {
  margin-top: 18px;
  display: flex;
  gap: 12px;
}

.ui__mark {
  flex-grow: 1;
  height: 44px;
  border-radius: 6px;
  background: var(--ui-idle);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 14px;
}

.ui__mark--on {
  background: var(--ink);
  color: #fff;
}

.ui__next {
  margin-top: 18px;
}

.ui__next-card {
  margin-top: 10px;
  padding: 14px 18px;
  border-radius: 6px;
  background: var(--ui-rail);
  font-size: 13.5px;
  color: var(--muted);
}

.ui__pace {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ui__pace-value {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 300;
}

.ui__track {
  margin-top: 12px;
  height: 3px;
  border-radius: 2px;
  background: #e4e6ec;
}

.ui__track span {
  display: block;
  width: 30%;
  height: 3px;
  border-radius: 2px;
  background: var(--action);
}

.ui__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  font-size: 13.5px;
}

.ui__line span:first-child {
  flex-grow: 1;
}

.ui__input {
  margin-top: 12px;
  height: 40px;
  border-radius: 6px;
  background: var(--ui-chrome);
  display: flex;
  align-items: center;
  padding-inline: 13px;
  font-size: 13px;
  color: var(--faintest);
}

.ui__status {
  display: flex;
  align-items: center;
  height: 42px;
  padding-inline: 20px;
  background: var(--ui-chrome);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}

.ui__keys {
  color: var(--faintest);
}

/* легенда под окном: выстроена по его колонкам */
.legend {
  margin-top: 28px;
  display: flex;
  gap: 24px;
}

.legend__item {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
}

.legend__item:first-child {
  width: 262px;
  flex-shrink: 0;
}

.legend__item:nth-child(2) {
  flex-grow: 1;
}

.legend__item:last-child {
  width: 250px;
  flex-shrink: 0;
}

/* ── утверждение крупным шрифтом ──────────────────────────────────── */

.claim {
  max-width: 1020px;
  font-family: var(--serif);
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1.16;
  letter-spacing: -0.038em;
  font-weight: 300;
}

.claim span {
  color: #9a9faf;
}

/* ── слои продукта ────────────────────────────────────────────────── */

.h-section {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.16;
}

.h-page {
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: 300;
}

.h-band {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.038em;
  font-weight: 300;
}

.section__intro {
  margin-top: 18px;
  max-width: 620px;
  color: var(--muted);
}

.row {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.row--first {
  margin-top: 48px;
}

.card {
  flex-grow: 1;
  padding: 34px 36px;
  background: var(--block);
}

.card--fixed {
  width: 430px;
  flex-shrink: 0;
}

.card--band {
  background: var(--band);
}

.card__title {
  margin-top: 18px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.28;
}

.card p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.66;
  color: var(--muted);
}

.card--band p {
  color: var(--text);
}

.layer-dark {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  padding: 44px 48px;
  margin-top: 20px;
}

.layer-dark__side {
  width: 430px;
  flex-shrink: 0;
}

.layer-dark__title {
  margin-top: 18px;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.028em;
}

.layer-dark p {
  max-width: 700px;
  font-size: 18px;
  line-height: 1.66;
}

.chips {
  margin-top: 26px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chips span {
  padding: 9px 14px;
  border-radius: 4px;
  background: var(--dark-chip);
  font-size: 15px;
}

.dark .label {
  color: var(--on-dark-faint);
}

/* ── автор и фотографии ───────────────────────────────────────────── */

.author {
  margin-top: var(--gap-section);
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 380px);
  gap: 40px var(--side);
  align-items: start;
  padding-inline: var(--side);
}

/* точка обрезки — верхняя треть, а не центр: при любом кадрировании
   в кадре должно остаться лицо, а не стол с ноутбуком */
.author__photo-wide {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: 50% 22%;
}

.author__photo-tall {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: 50% 25%;
}

.author__title {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 400;
}

.author__text {
  margin-top: 18px;
  max-width: 480px;
  color: var(--text);
}

.author__quote {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.34;
  letter-spacing: -0.026em;
  font-weight: 400;
}

.author__name {
  margin-top: 20px;
  font-size: 16px;
}

.author__role {
  margin-top: 4px;
  font-size: 15px;
  color: var(--faint);
}

/* ── финальный призыв ─────────────────────────────────────────────── */

.final {
  margin-top: var(--gap-section);
  padding: 110px var(--side);
  text-align: center;
}

.final > * {
  max-width: calc(var(--page) - var(--side) * 2);
  margin-inline: auto;
}

.final__title {
  margin: 0 auto;
  max-width: 900px;
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.044em;
  font-weight: 300;
}

.final p {
  margin: 30px auto 0;
  max-width: 620px;
  font-size: 19px;
  line-height: 1.6;
  color: #a2a7b5;
}

.final__actions {
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.final .btn {
  height: 60px;
  padding-inline: 36px;
}

/* ── подвал ───────────────────────────────────────────────────────── */

.site-footer {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 34px var(--side);
  font-size: 15px;
  color: var(--faint);
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.site-footer__spacer {
  flex-grow: 1;
}

/* ── страница «Как работает» ──────────────────────────────────────── */

.timeline {
  margin-top: 60px;
  display: flex;
  align-items: stretch;
  gap: 56px;
}

.timeline__step {
  width: 250px;
  flex-shrink: 0;
}

.timeline__step--dark {
  flex-grow: 1;
  width: auto;
  padding: 30px 34px;
}

.timeline__when {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 300;
}

.timeline__what {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.5;
}

.timeline__step p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.64;
  color: var(--muted);
}

.split {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

.split__side {
  width: 440px;
  flex-shrink: 0;
}

.split__side--wide {
  width: 560px;
}

.split__main {
  flex-grow: 1;
  min-width: 0;
}

.split--end {
  align-items: flex-end;
}

.split--end p {
  margin-bottom: 8px;
  max-width: 580px;
  font-size: 18px;
  line-height: 1.66;
  color: var(--text);
}

.bullets {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bullets div {
  display: flex;
  gap: 12px;
  font-size: 17px;
  line-height: 1.5;
}

.history {
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 40px 70px -40px rgba(20, 21, 26, 0.3);
  overflow: hidden;
}

.history__head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding-inline: 24px;
  background: var(--ui-chrome);
  font-size: 14px;
  color: var(--faint);
}

.history__head b {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.history__body {
  padding: 28px 30px 32px;
}

.history__row {
  display: flex;
  gap: 20px;
  padding-bottom: 20px;
}

.history__date {
  width: 58px;
  flex-shrink: 0;
  padding-top: 3px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faintest);
}

.history__date--topic {
  color: var(--topic);
}

.history__what {
  font-size: 17px;
}

.history__meta {
  margin-top: 6px;
  font-size: 14px;
  color: var(--faint);
}

.history__meta--ok {
  color: var(--ok);
}

.history__meta--warn {
  color: var(--warn);
}

.history__flag {
  flex-grow: 1;
  padding: 18px 20px;
  background: #faf2f8;
  border-radius: 6px;
}

.history__flag-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.history__flag-head b {
  font-size: 17px;
  font-weight: 500;
}

.history__flag p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: #6b5560;
}

.history__agenda {
  margin-top: 30px;
  padding-top: 26px;
}

.history__agenda-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 19px;
  font-weight: 500;
}

.history__agenda-head span {
  flex-grow: 1;
}

.history__agenda-head em {
  font-style: normal;
  font-size: 15px;
  font-weight: 400;
  color: var(--faint);
}

.history__questions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history__questions div {
  display: flex;
  gap: 16px;
  padding: 16px 18px;
  background: var(--ui-sunk);
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.55;
}

.history__questions .mono {
  padding-top: 3px;
  font-size: 12px;
  color: var(--faintest);
}

/* ── страница «Где ошибается» ─────────────────────────────────────── */

.card__lead {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.facts {
  margin-top: 46px;
}

.facts__row {
  display: flex;
  gap: 40px;
  padding-block: 26px;
}

.facts__term {
  width: 240px;
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 500;
}

.facts__value {
  flex-grow: 1;
  max-width: 860px;
  font-size: 17px;
  line-height: 1.66;
  color: var(--text);
}

/* ── страница «Пилот» ─────────────────────────────────────────────── */

.included {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 17px;
  line-height: 1.5;
}

.terms {
  width: 440px;
  flex-shrink: 0;
  padding: 36px 38px;
}

.terms__item {
  margin-top: 30px;
}

.terms__item:first-of-type {
  margin-top: 28px;
}

.terms__when {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 300;
}

.terms__when--accent {
  color: #a79bff;
}

.terms__what {
  margin-top: 10px;
  font-size: 16px;
}

.terms__price {
  margin-top: 34px;
  font-size: 16px;
  line-height: 1.64;
  color: var(--on-dark-faint);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.doc {
  padding: 24px 26px;
  background: var(--surface);
}

.doc__num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faintest);
}

.doc p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.55;
}

.faq {
  margin-top: 44px;
}

.faq__item {
  padding: 28px 30px;
  background: var(--block);
}

.faq__q {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.35;
}

.faq__item p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.64;
  color: var(--muted);
}

.founder {
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

.founder img {
  width: 300px;
  height: 300px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: 50% 25%;
}

.founder__quote {
  max-width: 820px;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.26;
  letter-spacing: -0.03em;
  font-weight: 400;
}

.founder__name {
  margin-top: 26px;
  font-size: 17px;
}

.founder__role {
  margin-top: 5px;
  font-size: 16px;
  color: var(--faint);
}

.founder p {
  margin-top: 24px;
  max-width: 760px;
  color: var(--text);
}

/* ── липкая панель на мобильной ───────────────────────────────────── */

.sticky-cta {
  display: none;
}

/* ── адаптив ──────────────────────────────────────────────────────── */

/* от 1200 и 1360 поля растут ступенями: макетные 64 были полем жёсткой
   ширины, а на большом экране содержимое от них упирается в края */
@media (min-width: 1201px) {
  :root {
    --side: 96px;
  }
}

@media (min-width: 1360px) {
  :root {
    --side: 128px;
  }
}

/* 1200: фотография первого экрана перестаёт помещаться рядом с текстом,
   боковые поля сжимаются */
@media (max-width: 1200px) {
  :root {
    --side: 40px;
    --gap-section: 110px;
  }

  .card--fixed,
  .layer-dark__side,
  .split__side,
  .split__side--wide,
  .terms {
    width: 380px;
  }

  .timeline {
    gap: 32px;
  }

  .timeline__step {
    width: 210px;
  }
}

/* 900: всё двухколоночное становится одной колонкой, окно интерфейса
   теряет боковые колонки — в них справочные данные, не сам вопрос */
@media (max-width: 900px) {
  :root {
    --gap-section: 90px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 0;
  }

  /* на узком экране фотография уходит под текст и раскрывается во всю
     ширину: 100vw здесь нельзя — при видимом скроллбаре он шире
     страницы и тянет горизонтальную прокрутку */
  .hero picture {
    grid-column: 1;
    grid-row: 2;
    margin: 28px calc(var(--side) * -1) 0;
  }

  .hero__photo {
    height: 320px;
    min-height: 0;
    object-position: 50% 28%;
  }

  .stats {
    gap: 20px;
  }

  .stats__value {
    font-size: 34px;
  }

  .stats__note {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.45;
  }

  .ui__rail,
  .ui__rail--right,
  .ui__tabs,
  .ui__status {
    display: none;
  }

  .ui__body {
    min-height: 0;
  }

  .ui__main {
    padding: 18px;
  }

  .ui__question {
    font-size: 19px;
  }

  .legend {
    flex-direction: column;
    gap: 12px;
  }

  .legend__item,
  .legend__item:first-child,
  .legend__item:last-child {
    width: auto;
  }

  .row,
  .layer-dark,
  .split,
  .timeline,
  .founder {
    flex-direction: column;
    gap: 20px;
  }

  .card--fixed,
  .layer-dark__side,
  .split__side,
  .split__side--wide,
  .terms,
  .timeline__step {
    width: auto;
  }

  .split {
    gap: 32px;
  }

  .author {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* на телефоне кадр выше: чем ниже полоса, тем больше обрезается, и
     тем вероятнее, что от человека останутся руки и стол */
  .author__photo-wide,
  .author__photo-tall {
    height: 360px;
  }


  .layer-dark__title {
    font-size: 28px;
  }

  .h-section {
    font-size: 28px;
  }

  .facts__row {
    flex-direction: column;
    gap: 8px;
    padding-block: 18px;
  }

  .facts__term {
    width: auto;
  }

  .founder img {
    width: 100%;
    height: 340px;
  }
}

/* 620: телефон — поля по 20px, сетки в одну колонку, снизу липкая
   панель с единственным призывом */
@media (max-width: 620px) {
  :root {
    --side: 20px;
    --gap-section: 70px;
  }

  body {
    font-size: 16px;
  }

  .site-header {
    height: 64px;
    gap: 12px;
  }

  .site-nav,
  .site-header .side-link {
    display: none;
  }

  .hero {
    padding-top: 24px;
  }

  .hero__lead {
    margin-top: 22px;
    font-size: 17px;
  }

  .hero__actions .btn {
    width: 100%;
    height: 54px;
  }

  .hero__actions .link-arrow {
    display: none;
  }

  .stats {
    margin-top: 28px;
  }

  .band {
    padding: 28px var(--side) 32px;
    margin-top: 40px;
  }

  .grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .talk {
    padding: 24px 20px;
  }

  .talk .btn {
    width: 100%;
  }

  .final {
    padding-block: 70px;
  }

  .final .btn,
  .final__actions {
    width: 100%;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 96px;
  }

  .sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px var(--side);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--bg);
  }

  .sticky-cta .btn {
    flex-grow: 1;
    height: 48px;
    font-size: 16px;
  }

  .sticky-cta__tg {
    display: flex;
    align-items: center;
    height: 48px;
    padding-inline: 18px;
    border-radius: 6px;
    background: var(--block);
    font-size: 16px;
  }
}

/* ── мелкие модификаторы ──────────────────────────────────────────────
   Заведены, чтобы в разметке не осталось ни одного инлайнового стиля:
   иначе система живёт в двух местах и расходится при первой же правке. */

.ui__count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}

.ui__count--dim {
  color: var(--faintest);
}

.ui__count--ink {
  color: #6b7180;
}

.ui__bar--topic {
  background: var(--topic);
}

.ui__bar--action {
  background: var(--action);
}

.ui__person--next {
  margin-top: 16px;
}

.ui__q-mark {
  font-size: 11px;
  color: #b4b8c4;
}

.ui__q-mark--on {
  font-size: 10px;
  color: var(--topic);
}

.ui__hint {
  font-size: 12px;
  color: var(--faint);
}

.ui__pace-unit {
  font-size: 14px;
  color: var(--faint);
}

.ui__pace-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.ui__line--muted span:first-child {
  color: var(--muted);
}

.ui__rail-block {
  margin-top: 26px;
}

.dot--topic {
  background: var(--topic);
}

.dot--warn {
  background: var(--warn);
}

.dot--action {
  background: var(--action);
}

.legend__note {
  margin-top: 18px;
}

.label--onband {
  color: #6b7180;
}

.card__title--sm {
  font-size: 20px;
  letter-spacing: -0.018em;
}

.author__title--spaced {
  margin-top: 60px;
}

.author__quote {
  margin: 60px 0 0;
}

.ui__name {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
}

.ui__name--muted {
  color: #6b7180;
}

.page-lead {
  margin-top: 26px;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.66;
  color: var(--text);
}

.split__text {
  margin-top: 26px;
  font-size: 17px;
  line-height: 1.68;
  color: var(--text);
}

.split__text + .split__text {
  margin-top: 16px;
}

.card--roomy {
  padding: 36px 38px;
}

/* страница-заглушка: текст в одну колонку, читается как документ */
.doc-page {
  max-width: 720px;
  padding-block: 110px 0;
}

.doc-page h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.038em;
  font-weight: 300;
}

.doc-page p {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.68;
  color: var(--text);
}

/* блок разговора вместо формы заявки: пока приёмника нет, честнее
   отправить человека туда, где ему ответят */
.talk {
  padding: 40px;
  background: var(--surface);
}

.talk__lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text);
}

.talk .btn {
  margin-top: 26px;
}

.talk__hint {
  margin-top: 16px;
  font-size: 16px;
  color: var(--faint);
}

.site-footer__inn {
  font-size: 14px;
}

.talk__hint a {
  color: var(--action);
}


/* ── узкий экран: добор после модификаторов ───────────────────────────
   Эти правила стоят в конце файла намеренно. Модификаторы выше по тексту
   имеют ту же силу, и при равной силе побеждает тот, кто ниже, — поэтому
   мобильные поправки должны идти последними, иначе они молча не
   применяются. */

@media (max-width: 900px) {
  /* шестьдесят пикселей разводили фотографию и заголовок на широком
     экране; на узком между ними остаётся дыра в треть экрана */
  .author__title--spaced,
  .author__quote {
    margin-top: 28px;
  }

  .author__title {
    font-size: 26px;
  }

  .author__quote {
    font-size: 22px;
  }
}

.hero__whatfor {
  margin-top: 16px;
  max-width: 540px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--faint);
}

/* ── ещё раз узкий экран: кнопки ──────────────────────────────────────
   На телефоне призыв был в трёх местах разом: в шапке, в первом экране
   и в липкой панели. Три одинаковые кнопки на одном экране читаются не
   как настойчивость, а как неразбериха. Липкая панель никуда не
   девается при прокрутке — значит, в шапке кнопка лишняя. */

@media (max-width: 620px) {
  .site-header .btn {
    display: none;
  }

  .site-header {
    gap: 10px;
  }

  .site-header .side-link {
    display: inline-flex;
    margin-left: auto;
  }
}

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

.ui__crumbs-short {
  display: none;
}

@media (max-width: 900px) {
  .ui__chrome {
    height: 42px;
    padding-inline: 16px;
    gap: 8px;
    white-space: nowrap;
  }

  .ui__crumbs,
  .ui__chip--user {
    display: none;
  }

  .ui__crumbs-short {
    display: inline;
    margin-left: auto;
    font-size: 10px;
  }

  .ui__chip {
    font-size: 10px;
    padding: 4px 8px;
  }
}