/* ============================================================
   Главная страница.
   Длинная — потому что незнакомец приходит с десятком вопросов,
   и оставить их без ответа это ровно то, что делает короткая.
   ============================================================ */

.pa-home { padding-block-start: var(--s-7); }

/* ---------- полосы во всю ширину ---------- */

/* ---------- раздел ---------- */

.pa-sec { margin-block-end: var(--s-9); }

.pa-sec__head { max-width: 54ch; margin-block-end: var(--s-6); }

.pa-sec__head h2 {
  font-size: var(--t-3xl);
  margin: 0 0 var(--s-3);
}

.pa-sec__head p {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-lg);
}

/* ---------- герой ---------- */

.pa-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s-8);
  align-items: center;
  margin-block-end: var(--s-8);
}

@media (max-width: 900px) {
  .pa-hero { grid-template-columns: 1fr; gap: var(--s-7); }
}

.pa-hero__title {
  font-size: var(--t-hero);
  margin: var(--s-4) 0 var(--s-5);
}

.pa-hero__sub {
  margin: 0 0 var(--s-6);
  color: var(--c-muted);
  font-size: var(--t-lg);
  max-width: 46ch;
}

.pa-hero__do {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin: 0 0 var(--s-6);
}

.pa-button--big {
  font-size: var(--t-base);
  padding: var(--s-4) var(--s-6);
}

/* ---------- доказательство: было и стало ---------- */

/*
 * Оба окна — одинаковые квадраты.
 *
 * Прежде каждая картинка шла со своим соотношением: слева портрет 2:3, справа
 * квадрат. Правая половина оставалась наполовину пустой, и пара читалась как
 * две несвязанные картинки, а не как «до и после» одного товара.
 *
 * Квадрат выбран не ради симметрии. Справа — то, что покупатель получает:
 * витринный снимок 2000 × 2000. Он квадратный на самом деле, и обрезать его
 * ради красивой раскладки значило бы показать не то, что выдаёт машина. При
 * соотношении 1:1 он не теряет ни пикселя.
 *
 * Слева обрезается наше отображение стокового снимка — а это ничего не
 * обещает: принимаются снимки любой формы, и об этом сказано словами. Сдвиг
 * вниз (`object-position`) оставляет в кадре бутылку целиком: центральный
 * квадрат срезал бы ей донышко.
 */
/* Выход не обрезается вовсе — он уже квадратный. */
/* ---------- четыре числа ---------- */

.pa-numbers {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-6);
}

.pa-numbers li { display: flex; flex-direction: column; gap: var(--s-2); }

.pa-numbers b {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}

.pa-numbers b i {
  font-style: normal;
  font-size: 0.45em;
  color: var(--c-muted);
  margin-inline-start: 0.1em;
}

.pa-numbers span { color: var(--c-muted); font-size: var(--t-sm); }

.pa-numbers__note {
  margin: 0;
  padding-block-start: var(--s-5);
  border-block-start: var(--border);
  color: var(--c-muted);
  font-size: var(--t-sm);
  max-width: 62ch;
}

/* ---------- комплект ---------- */

/* ---------- зачем и как ---------- */

/*
 * Врезка «зачем». Слева розовая грань — единственное место на странице, где
 * говорится не что машина делает, а почему это вообще кому-то нужно.
 */
/*
 * Врезка, а не карточка. Прежде это был белый прямоугольник с рамкой и
 * скруглением внутри плиты — рамка в рамке, самый частый признак самоделки.
 * Осталась одна зелёная черта слева: она и говорит «это в сторону от
 * рассказа», а коробка вокруг ничего не добавляла.
 */
.pa-why {
  border-inline-start: 2px solid var(--c-accent);
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
  margin-block-end: var(--s-8);
  max-inline-size: 68ch;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.pa-why__k {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.pa-why p:not(.pa-why__k) {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-base);
  line-height: 1.7;
}

/*
 * Шаги. Раньше стояли решёткой в один ряд — четыре ячейки, коротко и не видно,
 * что одно следует за другим. Теперь столбцом, с рельсом слева.
 */
/* Сам рельс: серая линия от середины первого кружка до середины последнего. */
/*
 * Розовая доля рельса. Высоту ставит скрипт по мере прокрутки; по умолчанию
 * ноль — не сработает скрипт, останется ровная серая линия, и раздел от этого
 * ничего не теряет.
 */
/* Кружок того шага, до которого дочитали. Метку вешает тот же скрипт. */
/* Где в этот момент находится фотография. Это не украшение: весь смысл
   раздела в том, что до второго шага она не покидает телефон. */
@media (max-width: 640px) {
  .pa-why { padding: var(--s-5); margin-block-end: var(--s-7); }
}

/* ---------- пределы ---------- */

.pa-halves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: var(--border);
}

.pa-half { background: var(--c-surface); padding: var(--s-6); }
.pa-half h3 { font-size: var(--t-xl); margin: 0 0 var(--s-4); }
.pa-half.is-good h3 { color: var(--c-ok); }
.pa-half.is-bad h3 { color: var(--c-error); }

.pa-half ul {
  margin: 0;
  padding-inline-start: var(--s-5);
  color: var(--c-muted);
  font-size: var(--t-sm);
}

.pa-half li { margin-block-end: var(--s-3); }

.pa-half__note {
  margin: var(--s-5) 0 0;
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* ---------- тарифы ---------- */

/*
 * Ступени цен по образцу сравнения у apex: под рядом лежит мягкая подложка,
 * отступив сверху и снизу, а выбранная ступень залита акцентом и выступает
 * над остальными со скруглённым верхом.
 *
 * Прежде это была решётка с зазором в пиксель — ряд ячеек, читавшийся
 * таблицей. Ради того и меняли: владелец сказала, что страница выглядит
 * «просто таблицами».
 */
/*
 * Ступени без подложки. Прежде это была серая плита со скруглением, внутри
 * которой сидели пять ячеек, а шестая заливалась зелёным — коробка внутри
 * плиты, то есть та же рамка в рамке. Осталась строка чисел на бумаге,
 * разделённая волосяными линиями: считает её глаз, а не рамка.
 */
.pa-tiers {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
}

.pa-tier {
  padding: var(--s-5) var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border-block-start: 2px solid transparent;
}

/*
 * Линия делит ступени, но не обводит их: первой она не нужна. Пока ступени
 * стоят в строку, линия вертикальная; когда решётка переносит их в столбик,
 * вертикальная линия оказалась бы слева у первой ступени новой строки —
 * поэтому ниже 900 она становится горизонтальной.
 */
.pa-tier + .pa-tier { border-inline-start: var(--border); }

@media (max-width: 900px) {
  .pa-tiers { grid-template-columns: minmax(0, 1fr); }
  .pa-tier { padding-inline: 0; }
  .pa-tier + .pa-tier {
    border-inline-start: 0;
    border-block-start: var(--border);
  }
  .pa-tier.is-pick { border-block-start: 2px solid var(--c-accent); }
}

/*
 * На какую ступень мы показываем — сказано цветом числа и чертой над ним, а
 * не заливкой. Зелёный прямоугольник был самым громким пятном страницы и
 * кричал громче собственной цены.
 */
.pa-tier.is-pick {
  border-block-start-color: var(--c-accent);
}

.pa-tier.is-pick .pa-tier__price { color: var(--c-accent-text); }

.pa-tier__price {
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: var(--t-2xl);
  line-height: 1;
}

.pa-tier__what { margin: 0; font-size: var(--t-sm); color: var(--c-muted); }
.pa-tier__what b { color: var(--c-text); }

.pa-tier__rate {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- вопросы ---------- */

/*
 * Вопросы без коробок. Прежде это была рамка вокруг восьми белых
 * прямоугольников, стоящих на белой же плите: рамка внутри рамки, и восемь
 * одинаковых коробок подряд. Остались волосяные линии между строками —
 * вопросы и так читаются списком.
 */
/*
 * Ширина списка ограничена. Без коробки строка тянулась во всю плиту — от
 * вопроса до знака «плюс» глаз шёл сотню с лишним знаков впустую.
 */
.pa-faq {
  border-block-start: var(--border);
  max-inline-size: 76ch;
  margin-inline: auto;
}

.pa-faq__item { border-block-end: var(--border); }

.pa-faq__item summary {
  padding: var(--s-5) 0;
  cursor: pointer;
  font-size: var(--t-lg);
  font-weight: var(--fw-semi);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  transition: color var(--dur-base) var(--ease);
}

.pa-faq__item summary::-webkit-details-marker { display: none; }

.pa-faq__item summary::after {
  content: '+';
  font-family: var(--f-mono);
  color: var(--c-accent-text);
  flex: none;
}

.pa-faq__item[open] summary::after { content: '−'; }

/* Под курсором меняется сам вопрос, а не подложка под ним. */
.pa-faq__item summary:hover { color: var(--c-accent-text); }

.pa-faq__answer {
  padding: 0 0 var(--s-5);
  color: var(--c-muted);
  max-width: var(--w-text);
}

.pa-faq__answer p { margin: 0; }

/* ---------- призыв ---------- */

.pa-call { max-width: 54ch; }
.pa-call h2 { font-size: var(--t-3xl); margin: 0 0 var(--s-4); }
.pa-call p { color: var(--c-muted); font-size: var(--t-lg); margin: 0 0 var(--s-6); }

/* ---------- телефон ---------- */

@media (max-width: 640px) {
  /* Меньше пустоты над первым экраном: на телефоне она съедает половину
     того, что человек видит, не пролистывая. */
  .pa-home { padding-block-start: var(--s-5); }

  .pa-sec { margin-block-end: var(--s-7); }

  /* «Было и стало» столбиком: в две колонки по 160 точек не видно ни того,
     ни другого, а вся суть этой пары именно в разглядывании. */
  .pa-hero { gap: var(--s-6); }
  .pa-hero__do { gap: var(--s-3); }
  .pa-button--big { inline-size: 100%; text-align: center; }
  .pa-plain { margin-inline-start: 0; }
}

/* ---------- ещё примеры ---------- */

/* ============================================================
   Глубина и движение

   «Верстак» — про точность, а не про игривость: всё движется
   ровно, без пружин и подскоков. Каждое правило ниже
   выключается системной настройкой «меньше движения».
   ============================================================ */

/* ---------- бегущая строка ---------- */

/* Разделитель — квадратик акцентом, а не точка: у нас прямые углы. */
@keyframes pa-run {
  from { transform: translate3d(0, 0, 0); }
  /* Ровно половина: вторая лента встаёт на место первой, шва не видно. */
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- кнопка со стрелкой ---------- */

.pa-button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    filter var(--dur-fast) var(--ease);
}

.pa-button__arrow {
  font-style: normal;
  display: inline-block;
  transition: transform var(--dur-base) var(--ease);
}

.pa-button:hover { transform: translateY(-2px); }
.pa-button:hover .pa-button__arrow { transform: translateX(4px); }
/* Нажатие отвечает: кнопка уходит на пиксель вниз, как у apex. */
.pa-button:active { transform: translateY(1px); }

/* Блик, проходящий по кнопке один раз при наведении. */
.pa-button::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 40%;
  background: linear-gradient(100deg,
    transparent, color-mix(in srgb, var(--c-accent-in) 42%, transparent), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start 520ms var(--ease);
  pointer-events: none;
}

.pa-button:hover::after { inset-inline-start: 120%; }

/* Кнопка на первом экране приподнята тенью, а не свечением: на бумаге
   светится только брак печати. Тень чернильная, не зелёная — цветная тень
   под цветной кнопкой мылит её край. */
.pa-button--big {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-text) 12%, transparent);
}

.pa-button--big:hover {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--c-text) 18%, transparent);
}

/* ---------- карточки оживают под курсором ---------- */

.pa-tier,
.pa-faq__item {
  transition:
    border-color var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

/* Наведение на ступень ничего не подсвечивает: ступень не нажимается. */

/* ---------- появление при прокрутке ---------- */

/*
 * Устроено так, что сломаться нечему.
 *
 * Раздел **виден всегда**. Когда он въезжает в окно, скрипт вешает метку, и
 * проигрывается короткое появление — анимация, а не переключение видимости.
 *
 * Сперва было наоборот: скрипт прятал разделы и показывал по мере прокрутки.
 * Проверить это в здешнем браузере не удалось — он не прокручивается
 * программно и наблюдатель в нём не срабатывает ни разу. Ставить видимость
 * всей страницы в зависимость от того, чего нельзя проверить, нельзя: не
 * загрузился файл, устарел кэш, выключен JavaScript — и ниже первого экрана
 * пустота.
 *
 * Теперь худшее, что бывает: разделы просто появляются без анимации.
 */
@keyframes pa-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

[data-reveal='in'] {
  animation: pa-rise 620ms var(--ease) both;
}

/* ---------- меньше движения ---------- */

@media (prefers-reduced-motion: reduce) {
  .pa-button::after { display: none; }
  .pa-button:hover { transform: none; }
  .pa-button:hover .pa-button__arrow { transform: none; }
  [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Отделка
   ============================================================ */

/* ---------- фактура ---------- */


/* ---------- заголовок раздела ---------- */

/* Короткая малиновая черта над каждым заголовком: ряд разделов получает
   ритм, а акцент — работу помимо кнопок. */
.pa-sec__head h2,
.pa-call h2 { position: relative; padding-block-start: var(--s-4); }

/* ---------- главное число ---------- */

.pa-numbers .is-key b { color: var(--c-accent-text); }

.pa-numbers .is-key span { color: var(--c-text); }

/* ---------- меню ---------- */

.pa-nav__list a {
  position: relative;
  padding-block-end: 2px;
}

.pa-nav__list a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}

.pa-nav__list a:hover::after { transform: scaleX(1); }

/* ---------- вопросы ---------- */

.pa-faq__item summary::after {
  transition: transform var(--dur-base) var(--ease);
}

.pa-faq__item[open] summary { color: var(--c-text); }

/* ---------- ссылки в примерах ---------- */

@media (prefers-reduced-motion: reduce) {
  .pa-nav__list a::after { transition: none; }
}

/* ---------- скругление ---------- */

/*
 * Панели, склеенные из ячеек.
 *
 * «Что умеет / что не проверено», ступени цен и панель «до/после» устроены
 * одинаково: решётка с зазором в один пиксель, зазор просвечивает цветом
 * рамки. Своих углов у ячеек нет — скруглять надо оболочку и резать по ней.
 * Скруглив сами ячейки, получаешь вырезы в середине ряда, где две круглые
 * ячейки стоят впритык.
 */
.pa-halves {
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Крупные блоки первой страницы. У списка вопросов рамки больше нет, и
   скруглять ему нечего. */
.pa-call {
  border-radius: var(--r-lg);
}

/* Ни врезка, ни полоса с числами больше не карточки: скругление им не нужно. */

/* Плашки и подписи. */
.pa-tier__rate {
  border-radius: var(--r-sm);
}

/* Снимок внутри ячейки скругляется сам: у ячейки углов нет, а прямой угол
   картинки посреди мягкой панели видно сразу. */


/* Врезка «зачем» держит розовую грань слева — скругляем только справа,
   иначе грань превращается в дугу и перестаёт читаться линией. */
.pa-why {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/*
 * Тонкая светлая грань по верхнему ребру.
 *
 * На тёмном фоне тень не видна вовсе, а свет по ребру делает ту же работу:
 * карточка читается лежащей на странице, а не вырезанной в ней.
 */
/* Верхняя грань карточки — рамкой, а не подсветкой внутрь. На тёмном белая
   линия читалась как свет сверху; на бумаге светлое на светлом не видно
   вовсе, а тёмное внутрь выглядит грязью по краю. */
/* Та же тёплая грань, что и у карточек в components.css. Полосы с числами и
   врезки здесь нет: обе лежат прямо на плите, и вторая грань внутри первой
   читалась как вторая рамка. */
.pa-half {
  border-block-start: var(--border);
}

/*
 * Полоска над заголовком раздела — приём прежнего сайта. Там, где есть
 * надстрочная строка с чертой (приём apex), она лишняя: получались две черты
 * подряд, и владелец это заметила. Гасим полоску именно в таком случае, а не
 * убираем вовсе: на about надстрочных строк нет, и без полоски её заголовки
 * остались бы совсем без акцента.
 */
.pa-sec__head:not(:has(.pa-eyebrow)) h2,
.pa-call h2 { position: relative; padding-block-start: var(--s-5); }

.pa-sec__head:not(:has(.pa-eyebrow)) h2::before,
.pa-call h2::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 34px;
  block-size: 3px;
  background: var(--c-accent);
}