/* ============================================================
   component: pricing
   購入プランカード（枠線 + 価格 + CTA）を 3 列で並べる
   ============================================================ */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}

.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}

.plan__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.3;
}

.plan__for {
  margin-top: 4px;
  font-size: var(--fs-body);
  color: var(--c-muted);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-block: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 28px);
}

.plan__amount {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1;
  letter-spacing: -0.01em;
}

.plan__unit {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.plan__cta { margin-top: auto; }

@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
}