/* Страница /price: навигатор по тарифам модулей. Маскот и токены — из 404.css, здесь только отличия. */
body[data-page="price"] {
  color: #fff;
  background: var(--nf-graphite-deep);
}

.price-stub__badge {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: linear-gradient(135deg, var(--nf-purple) 0%, var(--brand) 100%);
  border-radius: 999px;
}

.price-hero {
  padding: 140px 0 40px;
  text-align: center;
  background: radial-gradient(ellipse 80% 70% at 50% 20%, #2a2850 0%, var(--nf-graphite-deep) 70%);
}

.price-hero h1 {
  max-width: 820px;
  margin: 0 auto 20px;
  font-family: var(--font-h), Comfortaa, sans-serif;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.2;
  text-wrap: balance;
}

.price-intro {
  max-width: 680px;
  margin: 0 auto 32px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--nf-text-muted);
}

.price-model {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 860px;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

.price-model li {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  text-align: left;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 14px;
}

.price-model b { font-size: 15px; }
.price-model span { font-size: 13px; color: var(--nf-text-muted); }

.price-modules { padding: 48px 0 32px; }

.price-modules__title {
  margin-bottom: 24px;
  font-family: var(--font-h), Comfortaa, sans-serif;
  font-size: clamp(22px, 3vw, 30px);
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.price-card {
  --card-accent: var(--nf-purple);

  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  color: #fff;
  text-decoration: none;
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 22px;
  transition: border-color .2s, transform .2s, background .2s;
}

.price-card--ai { --card-accent: var(--nf-purple); background: linear-gradient(155deg, #29263a, #2d2541); }
.price-card--traffic { --card-accent: var(--brand); background: linear-gradient(155deg, #2a2a33, #3a2c2a); }

a.price-card:hover,
a.price-card:focus-visible {
  border-color: var(--card-accent);
  transform: translateY(-2px);
}

a.price-card:focus-visible { outline: 2px solid var(--card-accent); outline-offset: 3px; }

.price-card__kicker {
  font-size: 12px;
  font-weight: 700;
  color: var(--card-accent);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.price-card h3 {
  margin: 0;
  font-family: var(--font-h), Comfortaa, sans-serif;
  font-size: 22px;
  line-height: 1.3;
}

.price-card p { margin: 0; line-height: 1.65; color: var(--nf-text-muted); }

.price-card__tiers {
  display: grid;
  margin: 4px 0 0;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 12px;
}

.price-card__tiers div {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.price-card__tiers div + div { border-top: 1px solid rgb(255 255 255 / 10%); }
.price-card__tiers dt { color: var(--nf-text-muted); }
.price-card__tiers dd { margin: 0; font-weight: 700; white-space: nowrap; }

.price-card__more {
  padding-top: 6px;
  margin-top: auto;
  font-weight: 600;
  color: var(--card-accent);
}

.price-card--soon { border-style: dashed; }
.price-card--soon .price-card__kicker { color: rgb(255 255 255 / 70%); }

.price-card__status {
  align-self: flex-start;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  background: rgb(255 255 255 / 8%);
  border-radius: 999px;
}

.price-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: auto;
}

.price-card__links a { font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.price-card__links a:hover { color: var(--brand); }

.price-later { padding: 24px 0 80px; }

.price-later__inner {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 28px 32px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 22px;
}

.price-later__mascot { display: flex; justify-content: center; }
.price-later .mascot-wrap { width: 160px; height: 172px; }

.price-later__text h2 {
  margin: 0 0 10px;
  font-family: var(--font-h), Comfortaa, sans-serif;
  font-size: clamp(20px, 2.6vw, 26px);
}

.price-later__text p { max-width: 520px; margin: 0 0 20px; line-height: 1.7; color: var(--nf-text-muted); }

@media (width <= 820px) {
  .price-model { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .price-later__inner { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .price-later__text p { margin-right: auto; margin-left: auto; }
}

@media (width <= 480px) {
  .price-hero { padding-top: 120px; }
  .price-card { padding: 22px; }
  .price-later__inner { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .price-card { transition: none; }
  a.price-card:hover, a.price-card:focus-visible { transform: none; }
}