/*
 * Author: Andrey Morozov
 * Confidential. Proprietary and confidential. Unauthorized copying or distribution is prohibited.
 *
 * IAM.Bot pricing surface — plan cards, the limits table and the payment notice.
 *
 * Loaded only by /pricing/ and /en/pricing/, on top of theme.css, so the two
 * language versions of the tariff page cannot drift apart visually. Every rule
 * here is scoped to a class that exists nowhere else on the landing.
 *
 * Out of scope: brand tokens, buttons, topbar, sections and footer — those
 * belong to theme.css and must not be redefined here.
 */

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); align-items: stretch; }
.plan-card { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-8) var(--sp-6); border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)); border: 1px solid var(--iam-stroke); transition: all var(--t-base) var(--ease-out-soft); }
.plan-card:hover { border-color: var(--iam-stroke-strong); transform: translateY(-2px); }
.plan-card.is-featured { border-color: rgba(139,92,246,0.42); background: radial-gradient(600px 260px at 50% 0%, rgba(139,92,246,0.16), transparent 65%), linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008)); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.plan-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bot-accent-hi); }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-amount { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--iam-ink); }
.plan-period { font-size: 14px; color: var(--iam-ink-dim); }
.plan-for { color: var(--iam-ink-mute); font-size: 14.5px; line-height: 1.6; margin: 0; min-height: 3.2em; }
.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14.5px; color: var(--iam-ink-mute); line-height: 1.5; }
.plan-list li b { color: var(--iam-ink); font-weight: 600; }
.plan-list .tick { color: var(--iam-success); }
.plan-list .dash { color: var(--iam-ink-faint); }
.plan-list svg { width: 15px; height: 15px; margin-top: 3px; }
.plan-card .btn { justify-content: center; margin-top: auto; }
.plan-note { font-size: 12.5px; color: var(--iam-ink-dim); text-align: center; margin: 0; }
/* Annual price under the monthly one: the cheaper option has to be readable
   next to the headline figure, not compete with it. */
.plan-annual { font-size: 12.5px; line-height: 1.5; color: var(--iam-ink-dim); margin: -6px 0 2px; }
.plan-annual b { color: var(--iam-ink); }

.limits-wrap { overflow-x: auto; border: 1px solid var(--iam-stroke); border-radius: var(--r-lg); background: rgba(14,22,42,0.4); }
.limits { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14.5px; }
.limits th, .limits td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--iam-divider); }
.limits thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--iam-ink-dim); font-weight: 500; background: rgba(255,255,255,0.02); }
.limits tbody tr:last-child th, .limits tbody tr:last-child td { border-bottom: 0; }
.limits tbody th { font-weight: 500; color: var(--iam-ink-mute); }
.limits td { color: var(--iam-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.limits td.featured { background: rgba(139,92,246,0.07); }
.limits .off { color: var(--iam-ink-faint); }

.pay-note { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-lg);
  background: rgba(245,166,35,0.06); border: 1px solid rgba(245,166,35,0.28); }
.pay-note svg { width: 20px; height: 20px; color: var(--iam-warning); margin-top: 2px; }
.pay-note h4 { font-size: 16px; margin-bottom: 6px; }
.pay-note p { margin: 0; color: var(--iam-ink-mute); font-size: 14.5px; line-height: 1.65; }
.pay-note a { color: var(--bot-accent-hi); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1024px) {
  .plan-grid { grid-template-columns: 1fr; }
  .plan-for { min-height: 0; }
}
@media (max-width: 768px) {
  .plan-amount { font-size: 36px; }
  .pay-note { grid-template-columns: 1fr; }
  .pay-note svg { display: none; }
}

/* The hero and the plan grid read as one block. The landing's responsive layer
   re-applies a section gap with !important below 768px, so the pricing pages
   restate the intent at the same weight instead of leaving a dead band above
   the first card. */
#plans { padding-top: 0 !important; }