/* pricing-shared.css -- pricing card styles shared between the homepage
   pricing switcher and the four dedicated pricing pages (itin-pricing.html,
   llc-pricing.html, bookkeeping-pricing.html, uk-ltd-pricing.html). Also
   carries the hero/CTA layout the dedicated pages share with each other,
   since it's identical apart from copy -- not worth four near-duplicate
   page files.

   NOTE: uk-company-registration.html also uses ".price-card", but its
   included-service lists use ".ra-check-list" (a different, unrelated
   component) rather than ".compact", so the rules below that target
   ".compact" specifically do not reach it. */

.pricing-grid {
  grid-template-columns: repeat(3, 1fr);
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: 21px 28px 17px;
  min-height: 188px;
}

/* The hover motion itself (mouse-tracking 3-D tilt + lift + scale) is
   wired up in card-tilt.js, which attaches the exact same tilt recipe
   used by itin-application.html's .itin-price-card -- the reference for
   this animation (see PRICING-CARD-ANIMATION-SPEC.md). That reference
   card has no CSS box-shadow/border-color hover rule of its own (its
   look only changes via the JS-driven transform + the icon scale below),
   so .price-card intentionally doesn't declare one either. */

/* uk-ltd-pricing.html and uk-company-registration.html's cards have a
   .round-icon in their header row (the other .price-card consumers do
   not) -- scales the same way the reference's .package-icon does on
   card hover. */
.price-card:hover .round-icon {
  transform: scale(1.1);
}

.price-card p {
  margin: 3px 0 16px;
  color: var(--muted);
  font-size: 14px;
}

.compact {
  font-size: 15px;
  line-height: 1.78;
  min-height: 78px;
  clear: both;
}

/* Included-feature checkmark, matching the reference treatment used by
   itin-application.html's own ".check-list" (same glyph, same color,
   same weight) -- just re-declared explicitly here since ".compact"
   overrides the base list-item padding that the checkmark depends on. */
.price-card .compact li {
  padding-left: 23px;
}

.price-card .compact li::before {
  display: block;
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--cyan);
  font-weight: 900;
}

/* Guarantees a clear gap between the last feature and the CTA button
   even when a card's content is already tall enough to fill the card
   (leaving margin-top: auto on .full, below, nothing to distribute).
   The auto margin is kept too, so cards with fewer features (stretched
   to match a taller sibling in the same row) still align their buttons
   on the same baseline. */
.price-card .compact {
  margin-bottom: 22px;
}

.price-card > .full {
  margin-top: auto;
}

/* At narrow widths, the shared .popular-badge (position: absolute with
   only "left" set) shrink-to-fits within the space from its own left
   edge to the card's right edge, which is narrower than "MOST POPULAR"
   needs -- wrapping it to 2 lines and overlapping the card's heading
   just below it. Keeping the label on one line lets the badge grow to
   whatever width the text actually needs instead. Scoped to the homepage
   and the dedicated pricing-page shell specifically (not bare
   ".price-card"), since uk-company-registration.html also uses
   ".price-card" and is out of scope for this change. */
.home-page .popular-badge,
.pricing-page-shell .popular-badge {
  white-space: nowrap;
}

.popular {
  border-color: var(--cyan);
  box-shadow: 0 0 23px rgba(0, 192, 255, .45), inset 0 1px 0 rgba(255,255,255,.1);
}

/* ITIN dropped its Basic tier, so its grid is 2 cards instead of 3 --
   scoped to just the ITIN panel/page so LLC and Bookkeeping keep 3. */
#pricing-panel-itin,
[aria-label="ITIN pricing plans"] {
  grid-template-columns: repeat(2, 1fr);
}

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

/* ---- dedicated pricing-page layout (hero + cards + CTA) ---- */

.pricing-page-shell::before {
  background:
    radial-gradient(ellipse at 78% 8%, rgba(59, 102, 255, .3), transparent 31rem),
    radial-gradient(circle at 9% 42%, rgba(0, 156, 255, .13), transparent 25rem),
    linear-gradient(105deg, rgba(0, 12, 38, .18), rgba(0, 0, 0, 0) 45%);
}

.pricing-page-hero {
  width: min(100% - 48px, 720px);
  margin: 10px auto 0;
  text-align: center;
}

.pricing-page-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(36px, 4vw, 49px);
  line-height: 1.14;
  font-weight: 900;
}

.pricing-page-hero h1 span {
  color: var(--cyan);
}

.pricing-page-hero .hero-subtitle {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.pricing-page-cards {
  margin: 36px 0 44px;
}

.pricing-page-cta {
  width: 100%;
  margin: 40px 0 13px;
}