/* ============================================================================
   site/pricing.css — только страница «Тарифы».

   Что здесь и почему не в style.css: цена «от» на карточке (три слова
   разной гарнитуры в одной строке), разбор стандартного пакета «Макс» и
   случаи, когда сумма другая. Другим страницам эти правила не нужны, а
   style.css и так за тысячу строк. Подключается через head в build.mjs
   ПОСЛЕ style.css и ДО palette.css — цвета берутся токенами.

   Порядок слов в цене задаёт словарь, а не CSS: по-русски «от 1 500 000
   сум / мес», по-узбекски «oyiga 1 500 000 soʻmdan». Приставка и хвост
   приезжают отдельными ключами (p.from / p.unit), число стоит между ними.
   ========================================================================== */

/* ─────────────── цена на карточке ─────────────── */

.plan-p{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.32em; row-gap:9px;
  margin:12px 0 14px; font-size:clamp(23px,2vw,32px); line-height:1 }
.plan-p .num{ font-family:var(--disp); font-weight:700; font-size:inherit; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; white-space:nowrap }
.plan-from,.plan-unit{ font-family:Manrope, system-ui, sans-serif; font-weight:600;
  color:var(--muted); letter-spacing:0; white-space:nowrap }
.plan-from{ font-size:.58em }
.plan-unit{ font-size:.5em }

/* Подсказка под ценой — вход в разбор пакета ниже по странице, поэтому
   стрелка смотрит вниз. Своя строка внутри .plan-p (см. pages/pricing.html);
   подчёркивание — только под словами, не во всю строку. */
.plan-hint{ flex-basis:100%; display:block;
  font:600 13px/1.35 Manrope, system-ui, sans-serif; color:var(--acc-lit) }
.plan-hint > span{ border-bottom:1px solid transparent; transition:border-color .18s var(--e-micro) }
.plan-hint:hover > span{ border-bottom-color:currentColor }
/* Стрелка — строчная, идёт за последним словом. Флексом она уезжала к
   правому краю колонки, когда подсказка переносилась на две строки. */
.plan-hint .ic{ display:inline-block; vertical-align:-3px; margin-left:5px;
  width:14px; height:14px; stroke-width:2.2; rotate:90deg;
  transition:translate .18s var(--e-micro) }
.plan-hint:hover .ic{ translate:0 2px }

/* Средняя раскладка (строка «картинка · имя · цена · описание»): колонке
   цены нужно место под число с приставкой и хвостом, отступы у строки —
   ноль, как и у соседей в style.css. */
@media (min-width:960px) and (max-width:1399px){
  .plan{ grid-template-columns:minmax(0,270px) minmax(0,150px) minmax(0,250px) minmax(0,1fr) }
  .plan-p{ margin:0 }
}

/* Якорь из приложения (#max) приезжает под фиксированную шапку. */
.plan{ scroll-margin-top:calc(var(--tab-lift) + 108px) }

/* Подпись под карточками — про суммы, а не примечание мелким серым:
   читаться должна с первого взгляда. */
.plans-note{ color:var(--muted); font-size:14.5px; max-width:70ch }

/* ─────────────── разбор «от 3 000 000» ─────────────── */

.pack{ display:grid; gap:var(--gap); margin-top:clamp(30px,3.4vw,52px) }
@media (min-width:960px){
  .pack{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:start }
}

/* Чек стандартного пакета: шапка с ценой, три строки состава, итог. */
.pack-spec{ display:grid; gap:20px; padding:clamp(22px,2vw,32px) }
.pack-spec-h{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:8px 18px; padding-bottom:18px; border-bottom:1px dashed var(--sand-line) }
.pack-spec-h .kicker{ margin:0 0 6px }
.pack-price{ display:flex; align-items:baseline; column-gap:.32em; font-size:clamp(24px,2.1vw,34px);
  line-height:1; color:var(--sand-ink) }
.pack-price .num{ font-family:var(--disp); font-weight:700; font-size:inherit; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; white-space:nowrap }
.pack-price .plan-from,.pack-price .plan-unit{ color:var(--sand-mut) }

.pack-rows{ display:grid; gap:16px }
.pack-rows li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start }
.pack-rows .ic{ width:22px; height:22px; margin-top:1px; stroke-width:1.8; color:var(--acc-d) }
.pack-rows b{ display:block; font-weight:700; font-size:clamp(15.5px,1.1vw,17px); letter-spacing:-.015em;
  color:var(--sand-ink); line-height:1.3 }
.pack-rows span{ display:block; margin-top:4px; font-size:14px; line-height:1.45; color:var(--sand-mut) }

.pack-foot{ display:flex; align-items:flex-start; gap:10px; padding-top:18px;
  border-top:1px dashed var(--sand-line); font-size:14px; line-height:1.45; color:var(--sand-mut) }
.pack-foot .ic{ width:18px; height:18px; margin-top:2px; stroke-width:2.3; color:var(--acc-d) }

/* Три случая, когда сумма другая: номер как у шагов, текст рядом. */
.pack-when{ display:grid; gap:var(--gap); align-content:start }
.pack-case{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start;
  padding:clamp(18px,1.6vw,26px) }
.pack-n{ font-family:var(--disp); font-weight:800; font-size:clamp(20px,1.6vw,26px); line-height:1.15;
  letter-spacing:0; color:var(--acc-d); min-width:2.2ch }
.pack-case h3{ font-size:clamp(17px,1.25vw,21px); letter-spacing:-.02em; color:var(--sand-ink) }
.pack-case p{ margin-top:7px; font-size:14.5px; line-height:1.5; color:var(--sand-mut) }

/* ─────────────── телефон ─────────────── */

@media (max-width:640px){
  .plan-p{ font-size:24px; margin:10px 0 12px }
  .pack-spec{ gap:16px }
  .pack-price{ font-size:26px }
  .pack-rows{ gap:13px }
  .pack-case{ gap:13px }
}

/* ─────────────── «Подключить» ───────────────
   Дверь с тарифа ведёт на «Как начать» (start.html), а не в личный Telegram
   владельца: кнопка под ценой в три миллиона обязана открывать страницу с
   шагами и ответами, а не переписку один на один. Написать по-прежнему можно
   — внизу «Как начать» и в подвале любой страницы.

   На карточке — строчная кнопка внутри описания (лишний ребёнок сломал бы
   среднюю раскладку display:contents), в хвосте — большая кнопка действия.

   Кнопка живёт ВНУТРИ <p class="plan-d">, но data-i18n стоит не на абзаце, а
   на <span> с текстом описания: перевод присваивается через textContent и
   снёс бы кнопку вместе с текстом при первом же переключении языка. */
.plan-cta{ display:flex; width:fit-content; align-items:center; gap:8px; margin-top:14px;
  padding:9px 14px; border-radius:999px; font:700 13.5px/1 Manrope, system-ui, sans-serif;
  color:var(--cta-ink); background:var(--cta); box-shadow:0 8px 20px -10px var(--cta-glow);
  transition:transform .18s var(--e-micro), filter .18s var(--e-micro) }
.plan-cta:hover{ transform:translate3d(0,-1px,0); filter:brightness(1.06) }
.plan-cta .ic{ width:14px; height:14px; stroke-width:2.4 }
.cta-big{ padding:13px 20px; font-size:15px }
@media (min-width:960px) and (max-width:1399px){ .plan-cta{ margin-top:10px } }