/* Pricing section — wave 4 redesign (M13: layout shell).
 *
 * 2-row, 5-card layout:
 *   - Top row    : 2 wide cards (.gs-pricing-card--wide)
 *   - Bottom row : 3 equal cards (.gs-pricing-card)
 *
 * Design tokens live as custom properties on the section root so M17 can
 * fine-tune teal / dark / divider hues without hunting through the file.
 * Card styling here is intentionally minimal — content (features, real
 * prices) lands in M14/M15, full visual styling + button colour alternation
 * lands in M17. M13 only proves the grid skeleton.
 */

section.gs-pricing.gs-pricing {
  /* Tokens (M17 may one-step adjust) */
  --gs-pricing-teal: #67b3b3;
  --gs-pricing-dark: #0a1416;
  --gs-pricing-card-bg: #ffffff;
  --gs-pricing-divider: #d8e0e2;
  --gs-pricing-text: #0a1416;
  --gs-pricing-text-muted: #6b7280;
  --gs-pricing-card-radius: 8px;
  --gs-pricing-card-pad-y: 32px;
  --gs-pricing-card-pad-x: 28px;
  --gs-pricing-row-gap: 24px;
  --gs-pricing-card-gap: 24px;

  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;

  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  padding: 24px 24px 80px !important;
  box-sizing: border-box !important;
  font-family: "DM Sans", "DM Sans Placeholder", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--gs-pricing-text) !important;
  scroll-margin-top: 80px !important;
}

section.gs-pricing .gs-pricing__inner {
  max-width: 1180px;
  margin: 0 auto;
}

section.gs-pricing .gs-pricing__head {
  text-align: center;
  margin-bottom: 44px;
}

section.gs-pricing .gs-pricing__head h2 {
  margin: 0 0 12px;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--gs-pricing-text);
}

section.gs-pricing .gs-pricing__head p {
  margin: 0;
  font-size: 16px;
  color: var(--gs-pricing-text-muted);
  line-height: 1.5;
}

/* === Rows === */
section.gs-pricing .gs-pricing__rows {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--gs-pricing-row-gap) !important;
}

section.gs-pricing .gs-pricing__row {
  display: grid !important;
  gap: var(--gs-pricing-card-gap) !important;
  align-items: stretch !important;
}

section.gs-pricing .gs-pricing__row--top {
  grid-template-columns: 1fr 1fr !important;
}

section.gs-pricing .gs-pricing__row--bottom {
  grid-template-columns: 1fr 1fr 1fr !important;
}

/* === Card (M18 layout) ===
 *
 * Vertical flex column:
 *   1. .gs-pricing-card__title   — bold uppercase, fixed at top
 *   2. .gs-pricing-card__features — flex:1, hairlined feature rows
 *   3. .gs-pricing-card__footer  — price + pill CTA, pinned to bottom
 *
 * The footer is pinned so CTAs align across all 5 cards regardless of
 * feature-list length differences.
 */
section.gs-pricing .gs-pricing-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--gs-pricing-card-bg) !important;
  border: 1px solid var(--gs-pricing-divider) !important;
  border-radius: var(--gs-pricing-card-radius) !important;
  padding: var(--gs-pricing-card-pad-y) var(--gs-pricing-card-pad-x) !important;
  box-sizing: border-box !important;
  color: var(--gs-pricing-text) !important;
}

/* Title at the top of the card — bold uppercase, large. Replaces the
   M14 teal eyebrow. */
section.gs-pricing .gs-pricing-card__title {
  margin: 0 0 18px !important;
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--gs-pricing-text);
}

/* === Features list (M18) === */
section.gs-pricing .gs-pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1; /* push the footer to the bottom of the card */
  min-height: 0;
}

section.gs-pricing .gs-pricing-card__feature {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* text left, check right */
  gap: 12px;
  padding: 12px 0;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--gs-pricing-text);
  border-top: 1px solid var(--gs-pricing-divider);
}

section.gs-pricing .gs-pricing-card__feature:first-child {
  border-top: 0;
  padding-top: 4px;
}

section.gs-pricing .gs-pricing-card__feature-text {
  display: block;
}

section.gs-pricing .gs-pricing-card__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--gs-pricing-teal); /* SVG uses stroke="currentColor" */
}

/* === Footer block (price + pill CTA), pinned to the bottom (M18) === */
section.gs-pricing .gs-pricing-card__footer {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px;
  margin-top: 24px; /* breathing room between last feature hairline and price */
  padding-top: 20px;
  border-top: 1px solid var(--gs-pricing-divider);
}

section.gs-pricing .gs-pricing-card__price {
  margin: 0 !important;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

section.gs-pricing .gs-pricing-card__price-amount {
  font-size: clamp(34px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--gs-pricing-text);
}

section.gs-pricing .gs-pricing-card__price-suffix {
  font-size: 13px;
  color: var(--gs-pricing-text-muted);
}

/* === Featured card (M18 refresh — Bronze is the "selling point") ===
 *
 * Dark-background variant for one card. The whole interior re-tints to
 * read on the dark base: title + features + price go white, hairlines
 * go translucent-white, check icons get a brighter teal so they pop.
 * The card sits slightly larger (translateY -8px + scale 1.03) with a
 * deeper shadow so it visibly elevates above its neighbours.
 *
 * The "RECOMMENDED" badge floats above the title; small teal pill on a
 * very subtle teal-tinted background so it reads on dark.
 */
section.gs-pricing .gs-pricing-card--featured {
  background: var(--gs-pricing-dark) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  position: relative;
  z-index: 1;
  transform: translateY(-8px) scale(1.03);
  box-shadow:
    0 24px 48px -16px rgba(10, 20, 22, 0.55),
    0 8px 18px -8px rgba(10, 20, 22, 0.35);
}

section.gs-pricing .gs-pricing-card--featured .gs-pricing-card__title,
section.gs-pricing .gs-pricing-card--featured .gs-pricing-card__feature,
section.gs-pricing .gs-pricing-card--featured .gs-pricing-card__price-amount {
  color: #ffffff !important;
}

section.gs-pricing .gs-pricing-card--featured .gs-pricing-card__feature {
  border-top-color: rgba(255, 255, 255, 0.10);
}

section.gs-pricing .gs-pricing-card--featured .gs-pricing-card__footer {
  border-top-color: rgba(255, 255, 255, 0.12);
}

section.gs-pricing .gs-pricing-card--featured .gs-pricing-card__check {
  /* Brighter teal so the check reads on the dark background. */
  color: #8fd4d4;
}

section.gs-pricing .gs-pricing-card--featured .gs-pricing-card__price-suffix {
  color: rgba(255, 255, 255, 0.6);
}

/* Hover lift on the featured card: keep the elevated baseline and add a
   little more rise / glow rather than starting from translateY(0). */
section.gs-pricing .gs-pricing-card--featured:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow:
    0 32px 60px -20px rgba(10, 20, 22, 0.6),
    0 12px 22px -10px rgba(10, 20, 22, 0.4);
}

/* "RECOMMENDED" pill above the title. */
section.gs-pricing .gs-pricing-card__badge {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(103, 179, 179, 0.18);
  color: #b3e0e0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* === CTA — M18 pill style, full-width, bold uppercase.
   Colour variant (.gs-pricing-card--cta-teal / --cta-dark) is applied per-card
   by js/pricing-section.js and styled in the variant rules below. === */
section.gs-pricing .gs-pricing-card__cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 999px; /* pill */
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  color: #ffffff !important;
  transition:
    background-color 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.22s ease;
}

section.gs-pricing .gs-pricing-card__cta:focus-visible {
  outline: 2px solid var(--gs-pricing-teal);
  outline-offset: 2px;
}

/* M17 teal/dark alternation. Variant classes are applied by
   js/pricing-section.js per-card: teal | dark. */
section.gs-pricing .gs-pricing-card--cta-teal .gs-pricing-card__cta {
  background: var(--gs-pricing-teal) !important;
}
section.gs-pricing .gs-pricing-card--cta-teal .gs-pricing-card__cta:hover {
  background: #4f9b9b !important;
  box-shadow: 0 8px 18px -8px rgba(103, 179, 179, 0.55);
}
section.gs-pricing .gs-pricing-card--cta-dark .gs-pricing-card__cta {
  background: var(--gs-pricing-dark) !important;
}
section.gs-pricing .gs-pricing-card--cta-dark .gs-pricing-card__cta:hover {
  background: #16352a !important;
  box-shadow: 0 8px 18px -8px rgba(10, 20, 22, 0.55);
}

/* === Card hover lift (M17) — subtle 4px rise + soft shadow. === */
section.gs-pricing .gs-pricing-card {
  transition:
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.32s ease,
    opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
}
section.gs-pricing .gs-pricing-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 40px -12px rgba(10, 20, 22, 0.18),
    0 6px 14px -6px rgba(10, 20, 22, 0.08);
  border-color: rgba(10, 20, 22, 0.12) !important;
}

/* === Entrance animation (M17) — IntersectionObserver-driven, runs once. ===
   Initial state set by .gs-pricing-card--enter; final state pinned by
   .gs-pricing-card--visible. JS stamps a per-card stagger via the
   --gs-pricing-stagger CSS variable. */
section.gs-pricing .gs-pricing-card--enter {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) var(--gs-pricing-stagger, 0ms),
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) var(--gs-pricing-stagger, 0ms),
    box-shadow 0.32s ease,
    border-color 0.32s ease;
}

/* Featured card starts a bit lower so the entrance lands at the elevated
   resting state without a visible "snap" at the end of the transition. */
section.gs-pricing .gs-pricing-card--featured.gs-pricing-card--enter {
  transform: translateY(24px) scale(1.03);
}
section.gs-pricing .gs-pricing-card--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Featured-card override: keep the -8px / scale(1.03) elevation once the
   entrance animation has settled. Without this, .gs-pricing-card--visible's
   `translateY(0)` would flatten the featured card back down to the row. */
section.gs-pricing .gs-pricing-card--featured.gs-pricing-card--visible {
  transform: translateY(-8px) scale(1.03);
}

/* prefers-reduced-motion: skip entrance + hover lift entirely.
   Featured card keeps its elevation (it's a static layout property, not
   an animation), but the translation/scale + transitions are pinned. */
@media (prefers-reduced-motion: reduce) {
  section.gs-pricing .gs-pricing-card,
  section.gs-pricing .gs-pricing-card--enter,
  section.gs-pricing .gs-pricing-card--visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  section.gs-pricing .gs-pricing-card--featured.gs-pricing-card--visible,
  section.gs-pricing .gs-pricing-card--featured.gs-pricing-card--enter,
  section.gs-pricing .gs-pricing-card--featured {
    transform: translateY(-8px) scale(1.03) !important;
  }
  section.gs-pricing .gs-pricing-card:hover {
    transform: none;
    box-shadow: none;
  }
  section.gs-pricing .gs-pricing-card--featured:hover {
    transform: translateY(-8px) scale(1.03);
  }
  section.gs-pricing .gs-pricing-card__cta {
    transition: background-color 0.18s ease;
  }
}

/* === Responsive ===
 *
 * - Desktop (>= 961px): top row 2 wide, bottom row 3 equal.
 * - Tablet (721 - 960px): top row stays 2 wide; bottom row collapses to
 *   1 column (a 3-col bottom row at 720-960 squashes the cards too narrow
 *   to read the feature labels comfortably).
 * - Mobile (<= 720px): all 5 cards stack full-width.
 */
@media (max-width: 960px) {
  section.gs-pricing .gs-pricing__row--bottom {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  section.gs-pricing.gs-pricing { padding: 12px 18px 56px !important; }
  section.gs-pricing .gs-pricing__head { margin-bottom: 32px; }
  section.gs-pricing .gs-pricing__row--top {
    grid-template-columns: 1fr !important;
  }
  section.gs-pricing .gs-pricing-card {
    padding: 28px 24px !important;
  }
  section.gs-pricing .gs-pricing-card__price-amount { font-size: 34px; }
}

/* Touch devices: disable hover lift (it sticks awkwardly after tap). */
@media (hover: none) {
  section.gs-pricing .gs-pricing-card:hover {
    transform: none;
    box-shadow: none;
  }
  section.gs-pricing .gs-pricing-card__cta:hover {
    transform: none;
    box-shadow: none;
  }
}