/* Страница тарифов. Карточки тарифов и переключатели — общие
   (shared/plans.css), здесь только раскладка самой страницы.

   Ширину задаёт содержимое, а не рамка: рамка общая со всем сайтом. Разбор —
   у `.prose` в legal.css. */

.pricing { overflow-x: hidden; }
.pricing-page { padding-top: 48px; padding-bottom: 64px; }
/* Потолка нет: страница занимает рамку целиком. */

.pricing-head { margin-bottom: 40px; }
.pricing-head h1 { margin: 6px 0 12px; font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.pricing-head .lead { margin: 0; max-width: 100%; }

/* Бесплатное и платное — рядом, а не одно под другим: сравнение и есть
   содержание этого блока. На узком экране колонки складываются в столбик. */
.pricing-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.pricing-split h2 { margin: 0 0 14px; font-size: 1.1rem; }
.pricing-split ul { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.pricing-split li { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; }
.pricing-split p { margin: 0; font-size: 0.85rem; line-height: 1.6; }
.side-free li::marker { color: var(--success); }
.side-paid li::marker { color: var(--accent-hover); }

.pricing-section { margin-top: 48px; }
.pricing-section h2 { margin: 0 0 12px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.pricing-section p { margin: 0 0 16px; color: var(--text-secondary); line-height: 1.7; }
.pricing-section .lead { margin-bottom: 20px; max-width: 100%; }

/* Что сколько стоит: две колонки строкой, цена прижата вправо и выровнена
   по всем строкам — иначе числа не сравниваются, а это и есть смысл списка. */
.cost-list { list-style: none; margin: 0 0 16px; padding: 0; }
.cost-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
  color: var(--text-secondary);
  font-size: 0.94rem;
}
.cost-list li:last-child { border-bottom: 0; }
.cost-list b { color: var(--text-primary); white-space: nowrap; font-size: 0.94rem; }

.pricing-cta { margin-top: 48px; }

@media (max-width: 760px) {
  .pricing-head h1 { font-size: 1.9rem; }
  .pricing-split { grid-template-columns: 1fr; }
}