/**
 * StreamVerse — Pricing / Plans
 *
 * Visual language matched deliberately to trust-banner.css and
 * guarantee-banner.css: solid elevated surfaces (no glass/blur), the
 * site's own --radius-lg, the same ambient-glow shadow token, the
 * same violet accent, and the same 13px/#A3AED0 secondary-text
 * treatment used sitewide. Structurally it's a real 4-card grid
 * rather than one shared strip with dividers — pricing cards need
 * their own edges/shadows to read as separate, comparable offers —
 * but every color, radius, spacing and glow value is reused, not
 * reinvented.
 *
 * No new tokens: --color-accent is StreamVerse's actual primary
 * accent (Electric Violet), reused instead of introducing a separate
 * "electric blue" that has no token in tokens.css. Prices are the
 * confirmed real values — nothing here is a placeholder.
 */

.pricing {
  padding-block: var(--space-8);
  /* Pulls this section slightly closer to the Guarantee Banner above it,
     per explicit request — a targeted negative margin rather than
     touching padding-block (which would change this section's own
     height/design), so the section's box is exactly the same size and
     only its position shifts up into the empty space between the two.
     -24px (--space-5) lands inside the requested 20-30px reduction,
     leaving a comfortable gap rather than letting the sections touch. */
  margin-top: calc(-1 * var(--space-5));
}

.pricing__container {
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .pricing__container {
    padding-inline: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .pricing__container {
    padding-inline: var(--space-7);
  }
}

.pricing__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.pricing__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: var(--text-h2-line-height);
  font-weight: 700;
  color: var(--color-text-primary);
}

.pricing__subtitle {
  /* base.css sets a global `p { max-width: 75ch; }`, which would
     otherwise narrow this paragraph's own box — max-width: none
     overrides that so nothing forces it to wrap. width: fit-content
     + margin-inline: auto center the box itself on its own (actual)
     content width, rather than centering text inside a wider or
     narrower box than the content needs; text-align: center is the
     belt on top, so this is never dependent on inheriting it
     correctly from a parent. */
  max-width: none;
  width: fit-content;
  margin-top: var(--space-1);
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: #A3AED0;
}

/* One line on desktop/tablet, per request — comfortably above the
   width this line actually needs at any site breakpoint, so it never
   risks causing horizontal page overflow. Below that, mobile keeps
   normal (default) wrapping, which is white-space's initial value,
   so no override is needed for the narrow case. */
@media (min-width: 700px) {
  .pricing__subtitle {
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------
 * Grid — 1 column (mobile) -> 2x2 (tablet) -> 4-across (desktop),
 * matching the site's own existing 768px/1024px breakpoint tokens
 * rather than inventing new ones. Enough top padding to leave room for
 * the featured card's badge, which overlaps the card's own top edge,
 * and enough row-gap that its slight lift never collides with the row
 * above it.
 * ------------------------------------------------------------------ */
.pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-5);
  padding-top: var(--space-4); /* clearance for the featured badge */
  align-items: stretch;
}

@media (min-width: 768px) {
  .pricing__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pricing__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

/* ------------------------------------------------------------------
 * Card — same solid elevated surface + subtle border + --radius-lg
 * language as the Trust & Guarantee banners.
 * ------------------------------------------------------------------ */
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6) var(--space-5);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
  transition:
    border-color var(--duration-micro) var(--ease-standard),
    box-shadow var(--duration-micro) var(--ease-standard),
    transform var(--duration-micro) var(--ease-standard);
}

/* Subtle hover only — a soft border/glow lift, no scale, no motion. */
.pricing-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card-hover);
}

.pricing-card__duration {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #A3AED0;
}

.pricing-card__price {
  font-family: var(--font-heading);
  font-size: var(--text-h1); /* 44px — strong price typography */
  line-height: var(--text-h1-line-height);
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Old/original price — sits directly below the current price, on its
   own line, with clearly lower visual weight: smaller size, the
   design system's own muted-gray text token (not the accent-adjacent
   #A3AED0 used for descriptions/duration, so it never reads as a
   subtitle), a strikethrough, and regular weight against the price's
   bold 700. .pricing-card is display:flex/column, so this — like
   .pricing-card__duration next to it — stacks as its own flex item
   without needing an explicit display override. */
.pricing-card__old-price {
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.pricing-card__features {
  flex: 1; /* absorbs the leftover height so every card's CTA lines up
              on the same baseline, even the featured card's extra
              5th feature line */
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}

.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.4;
  color: var(--color-text-primary);
}

.pricing-card__feature-icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.pricing-card__cta {
  margin-top: var(--space-6);
  width: 100%;
}

/* ------------------------------------------------------------------
 * Featured — 12 Months, the only highlighted plan. Brighter surface
 * (one existing token up from the others), a real violet border
 * instead of the neutral subtle one, the same ambient-glow shadow
 * token used by the Trust & Guarantee banners, and a slight lift on
 * the 4-across desktop row only (in a single column or 2x2 grid a
 * vertical offset would just look like a stray gap, not "elevated").
 *
 * Premium gradient, per explicit request — scoped to this one card
 * only (every other pricing card keeps its plain solid surface).
 * Diagonal wash from the card's own existing solid tone
 * (--color-bg-elevated-hover, unchanged for most of the card, so
 * text/features/CTA sit on the same surface they always have) into
 * the site's secondary brand accent — Electric Cyan
 * (--color-highlight / --color-highlight-glow, already reserved in
 * tokens.css for exactly this kind of "sparingly-used quality/premium
 * accent" moment, e.g. the 4K badges on Movies/Sports) — rather than
 * the primary Electric Violet, so it reads as a distinct "electric
 * blue" premium tier per the request, not a brighter version of the
 * violet used everywhere else on the page. Only the last ~60% of the
 * diagonal blooms into that tint, and it's the token's own existing
 * translucent value (0.30 alpha), so most of the card stays exactly
 * as readable/dark as before — a corner glow, not a color block.
 *
 * Border/glow "slightly enhanced" per request: border 1.5px -> 2px,
 * and a second, softer box-shadow layer using that same Electric Cyan
 * glow token added alongside the existing violet ambient glow (both
 * base and hover states) — an extra, subtle blue companion glow that
 * ties back to the new gradient, without altering the violet
 * border/glow identity already used to mark this as the highlighted
 * card sitewide. */
.pricing-card--featured {
  background: linear-gradient(
    135deg,
    var(--color-bg-elevated-hover) 0%,
    var(--color-bg-elevated-hover) 40%,
    var(--color-highlight-glow) 100%
  );
  border: 2px solid var(--color-accent);
  box-shadow:
    var(--shadow-hero-media-glow),
    0 0 40px var(--color-highlight-glow),
    var(--shadow-modal);
}

.pricing-card--featured:hover {
  border-color: var(--color-accent-hover);
  box-shadow:
    0 0 56px var(--color-accent-glow),
    0 0 48px var(--color-highlight-glow),
    var(--shadow-modal);
}

@media (min-width: 1024px) {
  .pricing-card--featured {
    transform: translateY(-12px);
  }

  .pricing-card--featured:hover {
    transform: translateY(-14px);
  }
}

.pricing-card--featured .pricing-card__price {
  font-size: var(--text-display); /* 56px — the clear focal point */
}

.pricing-card--featured .pricing-card__feature-icon {
  color: var(--color-accent-hover);
}

/* Badge — compact uppercase pill, violet accent, subtle glow.
   Overlaps the card's own top edge rather than sitting inside the
   padding, so it reads as a tag placed ON the card. */
.pricing-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--space-1) var(--space-4);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-full);
  box-shadow: 0 0 16px var(--color-accent-glow);
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .pricing-card--featured {
    transition: none;
    transform: none;
  }
}