/* ── Страница цен ───────────────────────────────────────────────────────
   Тот же корпус и та же латунь, что на первом экране. Карточка тарифа —
   не «карточка товара» с тенью, а плита с приборной шкалой: подпись,
   крупное показание, кнопка. Выделен один тариф, и выделен сдержанно:
   рамка латунью и одна строка над именем. Три ярких карточки рядом
   означают, что выбор не сделан ни за кого. */
.band-price { padding-bottom: 8px; }
.pr-lede { max-width: 62ch; }

/* Ссылка в шапке рядом с «Ask for access»: страница цен, до которой надо
   доскроллить, для проверяющего платёжной системы не существует. */
.top-link {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
}
.top-link:hover { color: var(--brass); }
.top .btn { margin-left: 0; }

.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; }
}

/* ── Спасибо за оплату ──────────────────────────────────────────────── */
.wel { text-align: center; max-width: 44ch; margin: 0 auto; }
.wel-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--water-hi);
}


/* ═══ ТЕМА «DARK» ════════════════════════════════════════════════════
   Приборная панель на борту: тёмная сталь корпуса, латунь разметки,
   холодная вода. Была базовой до 29.08.2026 и осталась ровно той же —
   ни один оттенок не тронут, изменилось только то, что теперь её
   выбирают, а не получают по умолчанию.

   Меняются ТОЛЬКО переменные. Ни одного правила ниже не переписано: если
   тема требует правки разметки или отступов, значит это не тема, а второй
   дизайн — и он разъедется с первым на первой же правке. */
:root[data-theme="dark"] {
  --deep:      #04100f;
  --hull:      #08191a;
  --hull-hi:   #0d2426;
  --brass:     #c9a464;
  --brass-dim: #7a6337;
  --water:     #1c534f;
  --water-hi:  #43a596;
  --over:      #b8493c;
  --over-hi:   #d9705f;
  --idle:      #56686e;
  --idle-hi:   #9db0b6;
  --paper:     #e9e7e0;
  --mute:      #8a9a95;
  --line:      #1a2f30;

  --ink2:        #c2c9c5;
  --on-brass:    #10201f;
  --brass-hi:    #ddba7c;
  --mark:        #c9a464;
  --brand-ink:   #e9e7e0;
  --brass-wash:  rgba(201,164,100,.12);
  --water-wash:  rgba(28,83,79,.14);
  --over-wash:   rgba(184,73,60,.10);
  --over-glow:   rgba(216,131,77,.65);
  --glow-a:      #0b2224;
  --glow-b:      #0a1d20;
  --pit:         #061415;
  --well:        #0a1c1d;
  --well-hi:     #0e2426;
  --sheet:       #071718;
  --shadow:      #000;
  --shadow-hard: rgba(0,0,0,.85);
  --ring:        rgba(4,16,15,.9);
  --paper-72:    rgba(233,231,224,.72);
  --paper-45:    rgba(233,231,224,.45);
  --film-hi:      rgba(255,255,255,.14);
  --film-lo:      rgba(255,255,255,.045);
  --film-edge:    rgba(255,255,255,.16);
  --film-edge-hi: rgba(255,255,255,.2);
  --film-top:     rgba(255,255,255,.06);
  --film-top-hi:  rgba(255,255,255,.3);
  --film-dark-hi: rgba(10,20,20,.5);
  --film-dark-lo: rgba(10,20,20,.3);
  --water-band-hi: rgba(67,165,150,.22);
  --water-band-lo: rgba(67,165,150,.06);
  --water-edge:    rgba(67,165,150,.5);
  --over-edge:     rgba(184,73,60,.55);
  --brass-edge:    rgba(201,164,100,.28);
  --idle-edge:     rgba(86,104,110,.5);

  --wave-over-top:   184, 73, 60;
  --wave-over-bot:   86, 25, 23;
  --wave-over-crest: 235, 152, 132;
  --wave-good-top:   42, 130, 120;
  --wave-good-bot:   11, 50, 48;
  --wave-good-crest: 120, 214, 198;
  --wave-idle-top:   86, 104, 110;
  --wave-idle-bot:   22, 36, 40;
  --wave-idle-crest: 150, 170, 176;
}