/* ══════════════════════════════════════════════════════════════
   PRICING PAGE
   Standalone /pricing route. One Premium tier, three billing periods.
   Reuses base tokens (.glass-card, .glass-root CTA, --maxw) and the
   fixed page-bg mesh. Centred header + 3-up plan grid + trial note.
   ══════════════════════════════════════════════════════════════ */

.pricing {
  max-width: var(--maxw);
  width: 100%;
  margin-inline: auto;
  padding: clamp(140px, 18vh, 200px) 24px clamp(64px, 10vh, 120px);
  text-align: center;
}

/* — Header — */
.pricing-head { max-width: 720px; margin-inline: auto; }
.pricing-title {
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 22px rgba(0,0,0,0.18);
}
.pricing-sub {
  margin-top: 18px;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 12px rgba(0,0,0,0.18);
}

/* — Plan grid — */
.plan-grid {
  margin: clamp(48px, 7vh, 80px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 36px 28px;
  text-align: left;
}

/* Featured (yearly) — best value. Slightly lifted, brighter rim. */
.plan-featured {
  background: rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.6),
    inset 0 -1px 1px rgba(0,0,0,0.05);
}

.plan-badge {
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}
/* Keep vertical rhythm aligned across cards that have no badge. */
.plan:not(.plan-featured) .plan-badge {
  visibility: hidden;
}

.plan-name {
  font-size: 20px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}

.plan-price {
  margin-top: 10px;
  font-size: clamp(40px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.plan-price small {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}

.plan-equiv {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  min-height: 1.2em;       /* reserve a line so cards stay aligned */
}

.plan-trial {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
}

.plan-cta { margin-top: 28px; align-self: stretch; }
.plan-cta .glass-surface { width: 100%; }

/* — Pricing FAQ — reuses faq.css; just tightens the top spacing and
   resets the inherited centre-alignment so the accordion reads left. */
.pricing-faq {
  margin-top: clamp(32px, 5vh, 60px);
  padding-inline: 0;
  text-align: left;
}
.pricing-faq .faq-title {
  font-size: clamp(26px, 3.6vw, 40px);
}

/* — Fine print — */
.pricing-fine {
  margin: clamp(28px, 4vh, 44px) auto 0;
  max-width: 620px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
}
.pricing-fine a { text-decoration: underline; }
.pricing-fine a:hover { color: #fff; }

/* — Responsive — */
@media (max-width: 860px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 420px; }
  .plan:not(.plan-featured) .plan-badge { display: none; }
}