/* ==========================================================================
   M.I.H. Group — pricing-base.css
   Shared pricing-section styling used by every service landing page.
   The CONTENT (plans/prices/features) lives inside each service page's
   HTML — only this presentation layer is shared (spec §5).
   Extends tokens/motion from base.css.
   ========================================================================== */

.pricing { padding-block: clamp(56px, 6vw, 120px); border-top: 1px solid var(--c-stroke); }
.pricing-head { max-width: 62ch; margin-bottom: clamp(28px, 3vw, 52px); }
.pricing-head .h2 { margin-top: 10px; }
.pricing-note {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; color: var(--c-text-3); font-size: 14px;
}
.pricing-note i { color: var(--c-gold); }

.pricing-grid {
  display: grid; gap: clamp(18px, 2vw, 30px);
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
@media (max-width: 1000px) { .pricing-grid { grid-template-columns: 1fr; max-width: 560px; } }

/* Plan card — same hover language as project/blog cards:
   lift + gold border fill (.15s in / .1s out) + spotlight border. */
.plan-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.2vw, 40px);
  background: var(--c-surface);
  border: 1px solid var(--c-stroke);
  border-radius: var(--r-lg);
  transition: transform .35s var(--ease-slide),
              border-color var(--dur-hovercard-in) ease,
              box-shadow var(--dur-hovercard-in) ease;
}
.plan-card:hover {
  transform: translateY(-6px);
  border-color: rgba(197, 160, 89, .55);
  box-shadow: 0 24px 48px -26px rgba(0, 0, 0, .65);
}

.plan-card[data-featured="true"] {
  border-color: rgba(197, 160, 89, .65);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(197, 160, 89, .12), transparent 60%),
    var(--c-surface);
}
.plan-badge {
  position: absolute; top: -13px; left: clamp(24px, 2.2vw, 40px);
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--c-gold); color: var(--c-bg);
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}

.plan-name {
  font-size: clamp(20px, 1.7vw, 27px); font-weight: 800; letter-spacing: .01em;
}
.plan-for { color: var(--c-text-3); font-size: 14px; margin-top: 6px; min-height: 2.6em; }
.plan-price {
  display: flex; align-items: baseline; gap: 8px;
  margin: 22px 0 6px;
  font-size: clamp(30px, 2.6vw, 44px); font-weight: 800; line-height: 1;
}
.plan-price small { font-size: 15px; font-weight: 600; color: var(--c-text-3); }
.plan-price-note { color: var(--c-text-3); font-size: 13px; margin-bottom: 20px; }

.plan-features { display: grid; gap: 11px; margin-bottom: 28px; }
.plan-features li {
  display: flex; gap: 11px; align-items: baseline;
  color: var(--c-text-2); font-size: 15px; line-height: 1.55;
}
.plan-features li::before {
  content: "\f00c"; /* check */
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  color: var(--c-gold); font-size: 12px; flex: none; transform: translateY(-1px);
}
.plan-features li.is-off { color: var(--c-text-3); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.plan-features li.is-off::before { content: "\f00d"; color: var(--c-text-3); }

.plan-cta { margin-top: auto; }
.plan-cta .btn-inner { width: 100%; }