/* Тарифы: главное отличие планов видно сразу, будущие функции помечены. */

body { background: #fff; }
.тарифы { padding-top: 52px; padding-bottom: 46px; }

.вступление-тарифов { text-align: center; margin-bottom: 28px; }
.вступление-тарифов .надпись {
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: #55749a;
}
.вступление-тарифов h1 {
  margin: 15px 0;
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -1.5px;
}
.вступление-тарифов h1 span { color: var(--акцент); }
.вступление-тарифов p {
  max-width: 650px;
  margin: 0 auto;
  font-size: 15px;
  color: var(--тусклый);
}

.статус-тарифов {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 28px;
  padding: 14px 18px;
  border: 1px solid #c8ddfa;
  border-radius: 10px;
  background: #f3f8ff;
  font-size: 13px;
  line-height: 1.55;
}
.статус-тарифов strong { color: #12569d; white-space: nowrap; }
.статус-тарифов span { color: #4b6484; }

.срок-доступа {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 4px;
  border: 1px solid var(--рамка);
  border-radius: 12px;
  background: #f5f9ff;
}
.кнопка-срока {
  min-width: 132px;
  padding: 10px 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--текст);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.кнопка-срока[aria-pressed="true"] { background: var(--акцент); color: #fff; }
.кнопка-срока span { font-size: 11px; font-weight: 700; }
.кнопка-срока:focus-visible { outline: 3px solid #88b8ff; outline-offset: 2px; }
.пояснение-срока {
  margin: 10px 0 30px;
  color: var(--тусклый);
  font-size: 12px;
  text-align: center;
}

.планы {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.план {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border: 1px solid var(--рамка);
  border-radius: 14px;
  background: #fff;
}
.план.выделенный {
  border: 2px solid #123b70;
  padding: 27px 23px;
  background: linear-gradient(150deg, #10284c, #174678);
  color: #fff;
  box-shadow: 0 18px 42px rgb(16 40 76 / 22%);
  transform: translateY(-7px);
}
.плашка-выбора {
  align-self: flex-start;
  margin: -8px 0 18px;
  padding: 6px 10px;
  border-radius: 5px;
  background: #c7f4e6;
  color: #135c48;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .7px;
}
.надпись-плана {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--тусклый);
  font-weight: 700;
}
.план.выделенный .надпись-плана { color: #a9d4ff; }
.план h2 {
  margin: 12px 0 8px;
  font-size: 23px;
  letter-spacing: -.6px;
}
.описание-плана {
  min-height: 66px;
  margin: 0 0 18px;
  color: var(--тусклый);
  font-size: 13px;
  line-height: 1.7;
}
.план.выделенный .описание-плана { color: #dbe9ff; }
.цена-плана {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -1px;
  white-space: nowrap;
}
.цена-плана strong { font-weight: 700; }
.цена-плана span {
  color: var(--тусклый);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}
.план.выделенный .цена-плана span { color: #cee3ff; }
.детали-цены {
  min-height: 38px;
  margin: 5px 0 0;
  color: #3b608d;
  font-size: 12px;
  line-height: 1.5;
}
.план.выделенный .детали-цены { color: #b9efd8; font-weight: 700; }
.объём-плана {
  padding: 14px 0 20px;
  border-bottom: 1px solid var(--рамка);
  color: var(--тусклый);
  font-size: 12px;
}
.объём-плана strong { display: block; color: var(--акцент); font-size: 16px; }
.план.выделенный .объём-плана {
  color: #cee3ff;
  border-color: rgb(255 255 255 / 24%);
}
.план.выделенный .объём-плана strong { color: #fff; }
.план ul { flex: 1; list-style: none; padding: 0; margin: 22px 0 28px; }
.план li {
  position: relative;
  padding-left: 23px;
  margin-bottom: 16px;
  color: #526b8d;
  font-size: 13px;
  line-height: 1.65;
}
.план li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #16845f;
  font-weight: 700;
}
.план li.нет { color: #667b99; }
.план li.нет::before { content: "—"; color: #8194ac; }
.план.выделенный li { color: #e5f0ff; }
.план.выделенный li::before { color: #8fe5c0; }
.план .кнопка { width: 100%; min-height: 46px; font-size: 13px; }
.план.выделенный .кнопка {
  color: #123b70;
  background: #fff;
  border-color: #fff;
}
.план.выделенный .кнопка:hover { background: #ecf6ff; }

.сравнение { margin-top: 52px; }
.сравнение h2, .дальше h2 { margin: 0 0 8px; font-size: 24px; }
.сравнение > p { margin: 0 0 18px; color: var(--тусклый); font-size: 13px; }
.сравнение .подсказка-прокрутки { display: none; }
.прокрутка-сравнения {
  overflow-x: auto;
  border: 1px solid var(--рамка);
  border-radius: 12px;
}
.сравнение table {
  width: 100%;
  min-width: 730px;
  border-collapse: collapse;
  font-size: 13px;
}
.сравнение caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.сравнение th, .сравнение td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--рамка);
  text-align: left;
}
.сравнение thead th { background: #f4f8ff; font-size: 12px; }
.сравнение tbody tr:last-child th,
.сравнение tbody tr:last-child td { border-bottom: 0; }
.сравнение tbody th { width: 32%; font-weight: 600; }
.сравнение .акцент-таблицы { background: #edf5ff; color: #0d4d92; font-weight: 700; }
.сравнение thead .акцент-таблицы { background: #ddecff; }

.дальше {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 12px 32px;
  margin-top: 34px;
  padding: 28px;
  border-radius: 12px;
  background: #f5f9ff;
}
.дальше h2 { margin-top: 10px; }
.дальше ul { margin: 0; padding-left: 20px; color: #3d587b; font-size: 13px; line-height: 1.8; }
.дальше li { margin-bottom: 6px; }
.дальше > p { grid-column: 1 / -1; margin: 0; color: var(--тусклый); font-size: 12px; }
.пояснения-тарифов { margin-top: 24px; }
.пояснения-тарифов p { margin: 8px 0; color: var(--тусклый); font-size: 12px; }

.окно-тарифа {
  max-width: 460px;
  width: calc(100% - 32px);
  padding: 28px;
  border: 1px solid var(--рамка);
  border-radius: 14px;
  color: var(--текст);
}
.окно-тарифа::backdrop { background: rgb(16 40 76 / 40%); }
.окно-тарифа h2 { margin-top: 0; font-size: 23px; }
.окно-тарифа p { color: var(--тусклый); font-size: 14px; }
.окно-тарифа #стоимость-тарифа { color: var(--текст); font-weight: 700; }
.действия-окна { display: flex; flex-wrap: wrap; gap: 10px; }
.действия-окна form { margin: 0; }

@media (max-width: 900px) {
  .планы { gap: 12px; }
  .план { padding: 22px 16px; }
  .план.выделенный { padding: 21px 15px; }
  .цена-плана { font-size: 27px; }
  .план h2 { font-size: 20px; }
  .статус-тарифов { display: block; }
  .статус-тарифов strong { display: block; margin-bottom: 5px; }
}
@media (max-width: 740px) {
  .планы, .дальше { grid-template-columns: 1fr; }
  .сравнение .подсказка-прокрутки { display: block; margin-top: -8px; color: #0d4d92; }
  .вступление-тарифов h1 { font-size: 34px; }
  .вступление-тарифов p { font-size: 13px; }
  .описание-плана { min-height: 0; }
  .тарифы { padding-top: 32px; }
  .план.выделенный { transform: none; }
  .дальше > p { grid-column: auto; }
}