/* ==========================================================================
   Прайс: раскладка секции и тарифы обслуживания
   ========================================================================== */

.prices {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 940px) { .prices { grid-template-columns: 1fr; } }

.prices__aside { display: grid; gap: var(--sp-5); align-content: start; }

/* --- Типовые сметы ----------------------------------------------------
   Вместо сравнения с чужими ценами показываем состав работ для трёх
   ситуаций, с которыми приходят чаще всего: клиенту нужен итог, а не
   рейтинг сервисов. ------------------------------------------------------ */

.estimates { display: grid; gap: var(--sp-4); }

.estimate {
  display: grid;
  gap: var(--sp-3);
  padding: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease);
}
.estimate:hover { border-color: var(--c-accent-line); }

.estimate__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}
.estimate__title { font-size: var(--fs-h4); font-weight: 700; }
.estimate__sum {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.estimate__sum small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-align: right;
}
.estimate__when { font-size: var(--fs-sm); color: var(--c-muted); }

.estimate__rows { display: grid; gap: 0; }
.estimate__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: 0.4375rem;
  border-bottom: 1px dashed var(--c-line);
  font-size: var(--fs-sm);
}
.estimate__row:last-child { border-bottom: 0; }
.estimate__row b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.estimate__row--extra { color: var(--c-muted); }
.estimate__row--extra b { font-weight: 500; }

.estimate__note {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-line);
}

/* --- Тарифы обслуживания ---------------------------------------------- */

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(1.375rem, 1rem + 1.2vw, 2rem);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  position: relative;
}
.plan--featured {
  border-color: var(--c-ink);
  box-shadow: 0 0 0 4px rgba(14, 22, 34, .06);
}
.plan__flag {
  position: absolute;
  top: -11px;
  left: clamp(1.375rem, 1rem + 1.2vw, 2rem);
  padding: 0.25rem 0.6875rem;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan__name { font-size: var(--fs-h3); }
.plan__desc { font-size: var(--fs-sm); color: var(--c-muted); }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  border-block: 2px dashed var(--c-line);
}
.plan__price b {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}
.plan__price span { font-size: var(--fs-xs); color: var(--c-muted); }
/* Тариф без цифры. «по договору» в 32-м моноширинном не влезает в карточку
   и ломается пополам, поэтому словесная цена набирается как подзаголовок. */
.plan__price--text { display: block; }
.plan__price--text b {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  letter-spacing: normal;
}
.plan__price--text span { display: block; margin-top: var(--sp-1); }
.plan .btn { margin-top: auto; }