/* Оформление тарифных карточек. Общее для открытой страницы /tarify/ и для
   кабинета — чтобы одни и те же карточки нигде не выглядели по-разному.
   Цвета берём из переменных темы: в кабинете они уже объявлены, на
   отдельной странице объявляются там же локально. */

.period{display:inline-flex; gap:2px; padding:4px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px}
.period button{
  border:0; background:none; color:var(--txt-2); cursor:pointer;
  font:500 13.5px var(--font); padding:8px 16px; border-radius:9px;
  transition:var(--t); white-space:nowrap;
}
.period button.on{background:var(--acc); color:var(--acc-ink); font-weight:600}
.period button:not(.on):hover{color:var(--txt)}
.period .save{font-size:11px; opacity:.75; margin-left:5px}

/* Колонки подстраиваются под ширину, а не под ширину окна: в кабинете
   рядом стоит боковое меню, и жёсткие четыре колонки там сплющивали
   карточку так, что цена переносилась на две строки. */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  gap:14px; margin-top:20px; align-items:start}

/* Карточки выравниваем по строкам, а не по верхнему краю.
   Раньше каждая карточка считала свою высоту сама: у бесплатной в списке
   «хватит примерно на» две строки, у остальных четыре — и все подписи
   ниже разъезжались по вертикали, как ступеньки. Subgrid отдаёт строки
   родительской сетке: у всех карточек «Токены» и «Что входит» встают на
   одну линию, чем бы они ни были заполнены.

   У каждой карточки ровно одиннадцать прямых потомков — имя, описание,
   цена, приписка, кнопка и три пары «заголовок + список». Порядок один и
   тот же у бесплатной и у платных, иначе выравнивать было бы нечего. */
.plans{grid-template-rows:repeat(11, auto); align-items:stretch}
.plan{
  display:grid; grid-template-rows:subgrid; grid-row:span 11;
  align-content:start;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:22px 20px; position:relative;
}
/* Пять карточек в один ряд на широком экране. Блок при этом выходит за
   рамки текстовой колонки (1180px): в пять колонок по 214px карточка
   становится теснее, чем читается цена. Только на открытых страницах —
   в кабинете сетка стоит внутри модального окна со своим меню, и
   центрирование по окну увело бы её вбок. */
@media (min-width:1240px){
  .lp-plansbox .plans,
  #plans .plans{
    grid-template-columns:repeat(5,1fr);
    width:min(1340px, calc(100vw - 48px));
    position:relative; left:50%; transform:translateX(-50%);
  }
}
/* Браузер без subgrid просто разложит потомков подряд — как было раньше.
   Выравнивания не будет, но и не сломается ничего. */
@supports not (grid-template-rows:subgrid){
  .plan{display:block}
}
.plan.best{border-color:var(--acc);
  background:linear-gradient(180deg,rgba(224,145,62,.07),transparent 240px)}
.plan.mine{border-color:var(--teal,#5ad1c2)}
.tag{
  position:absolute; top:-10px; left:20px; font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; padding:4px 10px;
  border-radius:999px; background:var(--acc); color:var(--acc-ink);
}
.tag-now{background:var(--teal,#5ad1c2); color:#04201c}
.pname{font-family:var(--display); font-size:16px; font-weight:600; margin:0}
.pwhy{color:var(--txt-2); font-size:13px; margin:5px 0 16px}
.price{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
.price .n{font-family:var(--display); font-size:clamp(24px,2.2vw,30px); font-weight:700;
  letter-spacing:-.02em; white-space:nowrap}
.price .per{color:var(--mut); font-size:13px}
.price .was{color:var(--mut); font-size:14px; text-decoration:line-through}
.gain{color:#69c495; font-size:12.5px; margin:7px 0 0}

.plan .cta{
  margin:16px 0 4px; width:100%; padding:11px 14px; border-radius:10px;
  font:600 14px var(--font); cursor:pointer; transition:var(--t);
  background:var(--panel-2); color:var(--txt); border:1px solid var(--line-2);
}
.plan .cta:hover:not([disabled]){border-color:var(--acc)}
.plan.best .cta{background:var(--acc); color:var(--acc-ink); border-color:transparent}
.plan.best .cta:hover:not([disabled]){background:var(--acc-2)}
.plan .cta[disabled]{opacity:.55; cursor:default}

.plan .head{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mut); margin:20px 0 9px; padding-top:16px; border-top:1px solid var(--line);
}
.plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.plan li{display:grid; grid-template-columns:16px 1fr; gap:8px;
  font-size:13.2px; color:var(--txt-2); line-height:1.42}
.plan li b{color:var(--txt); font-weight:600; font-variant-numeric:tabular-nums}
.plan li .m{color:#69c495; font-weight:700}
.plan li.no{color:var(--mut)}
.plan li.no .m{color:var(--mut); font-weight:400}