/*
 * Витрина тарифов лендинга — карточка перенесена из приложения «Тарифы и оплаты»
 * (frontend/billing.html): медаль-значок по уровню, бейдж «Рекомендуем»/«Топ»,
 * акцентная рамка и тень у топового, кружки-галочки на акцентном фоне, крупная
 * типографика. Токены дизайн-системы; медальные тона — те же кастомные oklch,
 * что в billing.html (по решению PO, гейтом хардкода не считаются).
 */

.ps-toggle { text-align: center; margin-bottom: var(--space-6); }
.ps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }

.plan {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-5); display: flex; flex-direction: column; position: relative; box-shadow: var(--elev-1);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.plan:hover { box-shadow: var(--elev-2); transform: translateY(-2px); }

/* Медаль-значок благородного металла по уровню (бронза → серебро → золото). */
.plan__medal {
  width: var(--space-16); height: var(--space-16); border-radius: var(--radius-pill);
  display: grid; place-items: center; --size-icon: var(--space-8); margin-bottom: var(--space-4);
}
.plan__medal.is-free { background: oklch(0.92 0.045 62); color: oklch(0.56 0.085 55); }
.plan__medal.is-std  { background: oklch(0.935 0.022 252); color: oklch(0.56 0.045 252); }
.plan__medal.is-pro  { background: oklch(0.94 0.06 92); color: oklch(0.64 0.128 88); }

.plan--top { box-shadow: var(--elev-3); border-color: oklch(0.64 0.128 88); }
.plan--top .chip--top { background: oklch(0.945 0.055 92); color: oklch(0.46 0.11 86); }

.plan__badge-row { min-height: var(--space-6); margin-bottom: var(--space-3); display: flex; align-items: flex-start; }

.plan__name { font: 800 var(--text-lg)/1.1 var(--font-display); color: var(--color-text); margin: 0 0 var(--space-1); }
.plan__tagline {
  font: var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); margin: 0 0 var(--space-4);
  height: calc(var(--text-sm) * 1.4 * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.plan__price { display: flex; align-items: baseline; gap: var(--space-1); margin-bottom: var(--space-2); min-height: var(--text-2xl); }
.plan__amount { font: 900 var(--text-2xl)/1 var(--font-display); color: var(--color-text); letter-spacing: -.03em; }
.plan__amount.is-request { font-size: var(--text-xl); }
.plan__per { font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-muted); }
.plan__discount { margin: 0 0 var(--space-4); font: 600 var(--text-xs)/1.3 var(--font-body); color: var(--color-success); }
.plan__seats { margin: 0 0 var(--space-4); font: 600 var(--text-xs)/1 var(--font-body); color: var(--color-accent); }
.plan__cta { margin-bottom: var(--space-5); }
.plan__feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.plan__feats li { display: flex; align-items: flex-start; gap: var(--space-2); font: var(--text-sm)/1.4 var(--font-body); color: var(--color-text); }
.plan__check { width: var(--space-4); height: var(--space-4); border-radius: var(--radius-pill); background: var(--color-accent-weak); display: grid; place-items: center; flex: none; margin-top: 1px; }
.plan__check .icon { --size-icon: var(--space-3); color: var(--color-accent); }
/* Метка ещё не готовой возможности — честно «скоро», без обещания несуществующего. */
.plan__soon { display: inline-block; margin-left: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-info-weak); color: var(--color-info); font: 600 var(--text-xs)/1.6 var(--font-body); vertical-align: middle; }

@media (max-width: 1100px) { .ps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .ps-grid { grid-template-columns: 1fr; } }