/* ---------- 1–2. Первый экран и карточки ---------- */
.tf-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-top: clamp(48px, 6vw, 80px);
}
.tf-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.tf-plan--featured {
  border-color: color-mix(in srgb, var(--violet) 34%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--violet) 18%, transparent), var(--shadow-window);
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--violet) 7%, transparent), transparent 70%),
    var(--surface);
}
.tf-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.tf-name { margin-top: 26px; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.03em; }
.tf-for { margin-top: 10px; color: var(--ink-500); font-size: 15px; line-height: 1.55; min-height: 3.1em; }
.tf-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 22px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tf-amount {
  font-family: var(--font-display);
  font-size: clamp(34px, 3.2vw, 44px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tf-period { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); }
.tf-list { margin-top: 22px; gap: 11px; font-size: 14.5px; }
.tf-list li.tf-plus { padding-left: 0; font-weight: 550; color: var(--ink-900); }
.tf-list li.tf-plus::before { display: none; }
.tf-btn { margin-top: auto; justify-content: center; }
.tf-list + .tf-btn { margin-top: 28px; }
.tf-plan .tf-list { margin-bottom: auto; }
.tf-note { margin: 28px auto 0; max-width: 78ch; text-align: center; font-size: 14px; line-height: 1.6; color: var(--ink-500); }
@media (max-width: 1024px) {
  .tf-plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
  .tf-for { min-height: 0; }
}

/* ---------- 3. Таблица сравнения ---------- */
.tf-compare tbody th { width: 34%; }
.tf-compare td, .tf-compare thead th:not(:first-child) { width: 22%; }
.tf-compare .tf-group th {
  padding-top: 22px;
  padding-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--violet-ink);
  background: var(--surface);
}
.tf-compare .tf-total th, .tf-compare .tf-total td { font-weight: 600; color: var(--ink-900); background: var(--surface-2); }
.tf-compare .tf-total .is-prb { background: color-mix(in srgb, var(--violet) 8%, var(--surface-2)); }
/* Телефон: одна колонка тарифа за раз, строки на месте — переключатель над таблицей */
.tf-pick { display: none; }
@media (max-width: 760px) {
  .tf-pick { display: inline-flex; margin-bottom: 16px; }
  .tf-compare { min-width: 0; font-size: 13.5px; }
  .tf-compare th, .tf-compare td { padding: 12px 14px; }
  .tf-compare tbody th { width: 56%; }
  .tf-compare td, .tf-compare thead th:not(:first-child) { width: auto; }
  [data-tf-col] .tf-compare tr > :nth-child(2),
  [data-tf-col] .tf-compare tr > :nth-child(3),
  [data-tf-col] .tf-compare tr > :nth-child(4) { display: none; }
  [data-tf-col="2"] .tf-compare tr > :nth-child(2),
  [data-tf-col="3"] .tf-compare tr > :nth-child(3),
  [data-tf-col="4"] .tf-compare tr > :nth-child(4) { display: table-cell; }
  .tf-compare .tf-group th { display: table-cell !important; }
}

/* ---------- 4. Начните с аудита ---------- */
.tf-start {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.tf-start-text { display: grid; gap: 24px; justify-items: start; }
.tf-flow { grid-template-columns: 1fr; background: var(--bg); }
.tf-flow .flow-step + .flow-step { border-left: 0; border-top: 1px solid var(--line); }
.tf-flow .flow-step + .flow-step::before { top: -5px; left: 28px; transform: rotate(135deg); background: var(--bg); }
@media (max-width: 960px) { .tf-start { grid-template-columns: 1fr; } }