/* Pricing page styles (scoped with .pricing-*)
   Uses site variables from style.css and .reveal hooks from main.js
*/

:root {}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 420ms ease, transform 420ms cubic-bezier(.2,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Hero */
.pricing-hero { background: transparent; text-align: center; }
.pricing-hero__inner { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.pricing-hero .kicker { align-self: center; padding: .25rem .5rem; border-radius: 999px; font-size: .8125rem; background: rgba(1,147,202,0.08); color: var(--color-primary-600); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pricing-hero__title { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.12; font-weight: 800; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-600) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Plans grid */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; align-items: stretch; }

/* Plan card */
.plan { display: grid; grid-template-rows: auto 1fr auto; gap: .75rem; border-radius: var(--radius-lg); }
.plan__header { display: grid; gap: .25rem; }
.plan__name { font-size: 1.25rem; }
.plan__subtitle { color: var(--color-muted); margin: 0; }
.plan__price { display: flex; align-items: baseline; gap: .2rem; margin-top: .25rem; }
.plan__currency { font-weight: 800; color: var(--color-primary-600); }
.plan__amount { font-size: 2rem; font-weight: 800; letter-spacing: -.01em; color: var(--color-text); }
.plan__features { list-style: none; padding: 0; margin: .25rem 0 0; display: grid; gap: .4rem; }
.plan__features li { display: flex; gap: .5rem; align-items: center; color: rgba(11,33,48,.85); }
.plan__features li::before { content: '\2713'; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(1,147,202,0.1); color: var(--color-primary-600); font-weight: 700; font-size: .85rem; }
.plan__footer { margin-top: .25rem; display: flex; }
.plan__footer .btn { width: 100%; justify-content: center; }

/* Featured plan */
.plan--featured { position: relative; border-color: rgba(1,147,202,0.18) !important; }
.plan--featured .plan__amount { color: var(--color-primary-600); }
.plan__badge { position: absolute; top: -10px; right: 12px; background: var(--color-primary); color: #fff; font-weight: 700; font-size: .75rem; padding: .25rem .5rem; border-radius: 999px; box-shadow: var(--shadow-1); }

/* Ongoing costs */
.costs-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; margin-top: .75rem; }
.cost__price { font-size: 1.0625rem; color: var(--color-text); margin: .25rem 0; }
.costs-grid .card { border-radius: var(--radius-lg); }
@media (min-width: 640px) {
  .costs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .costs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Includes block */
.pricing-includes { display: grid; gap: .75rem; align-items: center; grid-template-columns: 1fr; }
.pricing-includes.card { padding: 1.25rem; border-radius: var(--radius-lg); }
.includes-list { list-style: none; padding: 0; margin: .25rem 0 0; display: grid; gap: .4rem; }
.includes-list li { display: flex; gap: .5rem; align-items: center; }
.includes-list li::before { content: '\2713'; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(1,147,202,0.1); color: var(--color-primary-600); font-weight: 700; font-size: .85rem; }
.pricing-includes__actions { display: inline-flex; gap: .75rem; flex-wrap: wrap; }

/* Notes */
.pricing-notes { margin-top: .75rem; color: var(--color-muted); }

/* Responsive adjustments */
@media (min-width: 760px) {
  .pricing-includes { grid-template-columns: 1fr auto; }
}