/* ═══════════════════════════════════════════════════════════════════════════
   PRICING PAGE — page-unique rules
   2026 design system — Geomage Website (www.geomage.com)

   Loaded by frontend/pricing_g-viewer.html and frontend/pricing_g-space.html
   ALONGSIDE main.css. The plan cards are the design system's .pkg cards; only
   the price line, the feature list's placement inside the card, and the
   full-width call-to-action are new:

     · .plan__price / .plan__price-unit — the FREE / $300 per-year line
     · .plan__features                  — .mod__features re-placed inside a .pkg
     · .plan__cta                       — the card-foot download button
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── PRICE LINE ──────────────────────────────────────────────────────────── */
/* Sits between .pkg__name and the .pkg__cores pill, so it needs its own
   rhythm: .pkg__name already carries 10px below it. */
.plan__price {
  font-family: var(--font-head);
  font-size: 34px; font-weight: 800; line-height: 1;
  color: var(--text-dark); letter-spacing: -.02em;
  margin-bottom: 14px;
}
.plan__price-unit { font-size: 15px; font-weight: 600; color: var(--text-light); letter-spacing: 0; }
.pkg--full .plan__price { color: var(--orange); }

/* ── FEATURE LIST ────────────────────────────────────────────────────────── */
/* .mod__features (components/mod-cards.css) supplies the orange bullet dots.
   Inside a module card it is pinned to the foot with margin-top:auto; inside a
   plan card it follows the price directly and the button takes the foot. */
.plan__features { margin-top: 4px; margin-bottom: 24px; }

/* ── CARD CALL TO ACTION ─────────────────────────────────────────────────── */
/* Full-width button anchored to the bottom of the card, so both plans' buttons
   line up however long their feature lists are.
   The button also carries the legacy .button__orange hook classes that
   downloads.js binds to. Every visual property those two declare is already
   re-declared later in the cascade by .btn / .btn-orange (main.css imports
   download-modals.css before components/buttons-2026.css) except the margins,
   which .button__orange--gviewer itself zeroes — so nothing leaks. This rule
   loads after main.css and wins the margin-top back. */
.plan__cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  text-transform: none;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .plan__price { font-size: 30px; }
}