/* ══ КАРТОЧКИ ТАРИФОВ ═══════════════════════════════════════════════
   Разметку карточек рисует landing/pricing.js — тот самый код, который
   разговаривает с платёжной системой, знает страну посетителя и открывает
   окно оплаты. Трогать его ради вида нельзя: там деньги.

   Поэтому правила его разметки перенесены как есть, а имена токенов
   переведены на словарь новой витрины ОДНИМ блоком ниже. Пятьдесят
   правок в правилах — пятьдесят возможностей ошибиться; один мост —
   одна. --line намеренно НЕ переопределяем: у новой витрины он свой и
   тоньше, и карточкам он идёт.                                        */
:root{
  --brass:      var(--accent);
  /* --brass-dim носит и рамку переключателя, и ТЕКСТ строки налога.
     Первый мост отдал его границе (--hair, девять процентов
     непрозрачности) — строка «+ VAT 21 % €46.20» стала невидимой на
     странице, которая берёт деньги. Токен границы нельзя отдавать
     тексту: измерено, 0.09 альфы. */
  --brass-dim:  color-mix(in srgb, var(--accent) 45%, var(--mute));
  --brass-wash: color-mix(in srgb, var(--accent) 12%, transparent);
  --on-brass:   var(--accent-ink);
  --sheet:      var(--surface-2);
  --hull:       var(--surface);
  --hull-hi:    var(--surface-3);
  --film-lo:    var(--surface-2);
  --paper:      var(--text);
  --ink2:       var(--dim);
  --water-hi:   var(--accent-2);
  --over-hi:    var(--over);
}

/* ── Страница цен ───────────────────────────────────────────────────────
   Тот же корпус и та же латунь, что на первом экране. Карточка тарифа —
   не «карточка товара» с тенью, а плита с приборной шкалой: подпись,
   крупное показание, кнопка. Выделен один тариф, и выделен сдержанно:
   рамка латунью и одна строка над именем. Три ярких карточки рядом
   означают, что выбор не сделан ни за кого. */
.band-price { padding-bottom: 8px; }
.pr-lede { max-width: 62ch; }
.pr-switch {
  display: inline-flex;
  margin: 26px 0 30px;
  border: 1px solid var(--brass-dim);
  border-radius: 999px;
  padding: 3px;
  background: var(--sheet);
}
.pr-per {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
}
.pr-per.on { background: var(--brass); color: var(--on-brass); font-weight: 700; }
.pr-grid {
  display: grid;
  /* Карточки с ответом «сколько» стоят В ОДНУ ЛИНИЮ на любом экране:
     видны разом, без прокрутки и догадок. Custom — ниже на всю ширину: у
     него нет цены, ему не с кем соревноваться в этой линии.

     Колонок ДВЕ, а не три. Их было три, пока платных тарифов было два
     (Standard и Enterprise). Шесть пакетов схлопнулись в одну карточку с
     плитками — и третья колонка осталась пустой дырой справа. Число
     колонок обязано следовать за числом карточек, иначе сетка врёт о
     составе витрины. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.pr-card.pr-k-custom { grid-column: 1 / -1; }
.pr-wait { color: var(--mute); font-family: var(--mono); font-size: 12.5px; }
.pr-bad { color: var(--over-hi); }
.pr-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 22px 26px;
  background: linear-gradient(180deg, var(--hull-hi) 0%, var(--hull) 62%);
}
.pr-best { border-color: var(--brass-dim); }
.pr-flag {
  position: absolute;
  top: -10px; left: 22px;
  background: var(--brass);
  color: var(--on-brass);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.pr-name {
  margin: 0 0 4px;
  font-family: var(--disp);
  font-variation-settings: 'wdth' 88, 'wght' 780;
  font-size: 25px;
  letter-spacing: -.02em;
}
.pr-desc { margin: 0 0 18px; color: var(--ink2); font-size: 15px; min-height: 3em; }
/* Показание, а не «цена со скидкой»: одно число, крупно, и подпись под
   ним. Зачёркнутых цен здесь не будет — годовая дешевле сама по себе, и
   доказывать это перечёркиванием месячной значит считать за посетителя. */
.pr-sum {
  margin: 0 0 2px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.pr-sum b {
  font-family: var(--mono);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: clamp(26px, 3.4vw, 34px);
  color: var(--brass);
  letter-spacing: -.02em;
}
.pr-sum i { font-style: normal; color: var(--mute); font-size: 13px; }
.pr-dash { color: var(--idle) !important; }
.pr-seats {
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--water-hi);
}
.pr-buy { width: 100%; justify-content: center; text-align: center; }
.pr-buy[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
/* Слово вместо суммы — у пробного и индивидуального. Тем же кеглем, что
   цена, но не латунью: латунь на этой странице означает «столько денег», и
   красить ею «Let’s talk» значит обещать цену там, где её нет. */
/* «2 months free» рядом с годовой суммой. Зелёным (вода), а не латунью:
   латунь на этой странице означает «столько денег», и красить ею выгоду
   значит спорить с самой ценой за внимание. */
.pr-save {
  display: inline-block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-brass);
  background: var(--water-hi);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.pr-word { color: var(--paper) !important; font-size: clamp(22px, 2.6vw, 27px) !important; }
.pr-list { margin: 20px 0 0; padding: 0; list-style: none; }
.pr-list li {
  position: relative;
  padding: 7px 0 7px 20px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink2);
}
.pr-list li::before {
  content: '';
  position: absolute;
  left: 2px; top: 15px;
  width: 8px; height: 2px;
  background: var(--brass-dim);
}
/* Выгода — одной строкой в подвале карточки, вода под чертой. Это не
   ещё один пункт списка: список отвечает «что входит», а эта строка —
   «зачем оно вам». Поэтому она отделена и набрана иначе. */
.pr-gain {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--water-hi);
  font-size: 14px;
  line-height: 1.5;
}
.pr-seats:empty { display: none; }
/* Пробный и индивидуальный стоят тише платных: рамка глуше, фона нет.
   Иначе четыре одинаково ярких карточки означают, что выбор не сделан ни
   за кого — а он сделан, и он посередине. */
.pr-k-trial, .pr-k-custom { background: none; }
.pr-foot { margin: 26px 0 0; color: var(--mute); font-size: 13.5px; max-width: 72ch; }
/* Кнопка «What's included» живёт только на телефоне: на широком экране
   список открыт всегда, и кнопка была бы рычагом без груза. */
.pr-more { display: none; }
@media (max-width: 760px) {
.pr-grid { gap: 8px; }
.pr-card { padding: 14px 10px 12px; border-radius: 10px; }
.pr-name { font-size: 16px; }
.pr-desc { display: none; }
.pr-sum { gap: 5px; }
/* Кегль подстраивается под ширину колонки, а рвать число посередине
     нельзя: «€2,000.\n00» читается как две суммы. Перенос разрешён
     только между валютой и числом — там, где пробел. */
  .pr-sum b { font-size: clamp(12.5px, 3.5vw, 16px); letter-spacing: -.02em; word-break: keep-all; }
.pr-word { font-size: 15px !important; }
.pr-save { font-size: 8px; padding: 2px 6px; }
.pr-seats { font-size: 9px; margin-bottom: 12px; min-height: 2.4em; }
/* Флаг «Most take this» в узкой колонке переносился на две строки и
     ложился на имя тарифа. Одна строка, мельче, и сетке дан верхний
     отступ под него. */
  .pr-grid { margin-top: 14px; }
.pr-flag { left: 8px; font-size: 7px; letter-spacing: .04em; padding: 2px 6px; white-space: nowrap; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; }
.pr-buy { padding: 10px 6px; font-size: 10px; letter-spacing: .03em; }
.pr-body { display: none; }
.pr-card.open .pr-body { display: block; }
.pr-list li { font-size: 13px; }
.pr-more {
    display: block;
    width: 100%;
    margin-top: 10px;
    appearance: none;
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
    padding: 9px 0 2px;
    color: var(--brass);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
  }
/* Custom внизу и так на всю ширину — ему сжатие не нужно. */
  .pr-card.pr-k-custom { padding: 20px 18px; }
.pr-card.pr-k-custom .pr-desc { display: block; }
.pr-card.pr-k-custom .pr-body { display: block; }
.pr-card.pr-k-custom .pr-more { display: none; }
.pr-card.pr-k-custom .pr-word { font-size: 20px !important; }
}
/* Разбивка налога под ценой. Итог МЕЛЬЧЕ самой цены — решение
   владельца: крупным остаётся то, что он продаёт, а налог виден, но не
   спорит с ценой за внимание. */
.pr-tax{display:flex;flex-direction:column;gap:1px;margin:2px 0 10px;
  font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--mute)}
.pr-tax .pr-tax-add{color:var(--brass-dim)}
.pr-tax b{font-size:12px;color:var(--paper);font-variation-settings:'wdth' 100,'wght' 600}
@media (max-width:760px){
.pr-tax{font-size:9.5px;margin-bottom:8px}
.pr-tax b{font-size:10px}
}
/* ── ВЫБОР РАЗМЕРА ПАКЕТА ───────────────────────────────────────────
   Пакеты отличаются только числом людей, поэтому карточка одна, а размер
   выбирают здесь — ПЛИТКАМИ, а не выпадающим списком.

   Список прятал пять пакетов из шести за щелчком, и владелец сказал
   ровно это: «интуитивно непонятно, как выбрать своё количество
   человек». Плитка несёт две цифры — сколько людей и сколько денег, —
   поэтому шесть плиток и есть прайс целиком, видимый одним взглядом.

   Три в ряд: карточка занимает треть витрины (~310px внутри отступов),
   и «€2 900» моноширинным в 10.5px укладывается в ячейку 97px. */
.pr-sizes { margin: 12px 0 8px; }
.pr-sizes-q { margin: 0 0 7px; font-size: 12px; color: var(--mute); letter-spacing: .02em; }
.pr-size-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.pr-size {
  appearance: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 7px 3px;
  background: var(--film-lo);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--paper);
  transition: border-color .12s ease, background .12s ease;
}
/* Имя пакета — тише всего: выбирают по числу людей и по цене, имя лишь
   называет выбранное. На узком экране его нет вовсе. */
.pr-size em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--idle);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-size.on em { color: var(--brass-dim); }
.pr-size b {
  font-family: var(--mono);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: 13px;
  line-height: 1;
}
/* Цена на плитке — приглушённая: крупное число над списком остаётся
   единственной «ценой», а здесь это подпись к выбору. Выбранная
   загорается латунью, и тогда две цифры совпадают. */
.pr-size i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1;
  color: var(--mute);
  white-space: nowrap;
}
.pr-size:hover { border-color: var(--brass-dim); }
.pr-size:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.pr-size.on { border-color: var(--brass); background: var(--brass-wash); }
.pr-size.on i { color: var(--brass); }
@media (max-width: 760px) {
.pr-sizes { margin: 8px 0 6px; }
.pr-sizes-q { font-size: 9.5px; margin-bottom: 5px; line-height: 1.3; }
.pr-size-row { grid-template-columns: 1fr; gap: 4px; }
.pr-size {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px;
    padding: 6px 6px;
    border-radius: 7px;
  }
.pr-size em { display: none; }
.pr-size b { font-size: 10.5px; }
.pr-size i { font-size: 9px; }
}
/* Строка про пробный период — под кнопкой оплаты. Тише кнопки и тише
   цены: это условие сделки, а не предложение. */
.pr-trialnote{margin:8px 2px 0;font-size:11.5px;line-height:1.4;color:var(--mute)}
@media (max-width:760px){
.pr-trialnote{font-size:9px;line-height:1.35}
}