/* ==========================================================================
   OrgGuard Marketing Site — Pricing Page
   ========================================================================== */

.pricing-page {
  padding-bottom: var(--section-padding-y);
}

.pricing-fine-print {
  text-align: center;
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 1.5rem;
  padding: 0 var(--section-padding-x);
}

.pricing-page__toggle-wrap {
  text-align: center;
  padding: 3rem 1.5rem 1rem;
}

.pricing-grid--four {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
}

.pricing-grid--four .pricing-card {
  display: flex;
  flex-direction: column;
}

.pricing-grid--four .pricing-card__features {
  flex-grow: 1;
}

.pricing-card__cta-outline {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  background-color: transparent;
  color: var(--brand-700);
  border: 2px solid var(--brand-200);
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal);
  cursor: pointer;
  text-decoration: none;
  min-height: 2.75rem;
}

.pricing-card__cta-outline:hover {
  background-color: var(--brand-50);
  border-color: var(--brand-600);
}

/* Grid holds the 4 self-service tiers (Free, Pro, Pro+, Max). Enterprise lives
   in a dedicated full-width band below the grid so the sales-led tier isn't
   competing visually with the self-service tier cards. */
@media (min-width: 768px) {
  .pricing-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .pricing-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Switch from flex to subgrid so header/price/note/features/CTA row tracks
     are shared across all cards — aligns prices horizontally regardless of
     description length. Browsers without subgrid support (Samsung Internet ≤21)
     fall back to auto-sized grid rows; cards remain functional but lose
     cross-card alignment. */
  /* span 6, not 5: the Pro+ and Max cards carry a sixth child, the
     "Planned: not available in OrgGuard Pro 1.0" footnote. With only five
     row tracks reserved, that footnote fell outside the subgrid and rendered
     underneath the CTA button. Cards with no footnote leave row 5 empty and
     have their CTA pinned to row 6 below, so all four CTAs stay on one line. */
  .pricing-grid--four .pricing-card {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
  }

  .pricing-grid--four .pricing-card__cta-primary,
  .pricing-grid--four .pricing-card__cta-secondary {
    grid-row: 6;
  }

  /* flex-grow is a flex concept; subgrid row tracks handle height distribution. */
  .pricing-grid--four .pricing-card__features {
    flex-grow: unset;
  }
}

/* ==========================================================================
   Enterprise band — full-width sales-led tier below the 4-tier grid
   ========================================================================== */

.enterprise-band {
  max-width: var(--container-max);
  margin: 1.5rem auto 0;
  padding: 0 var(--section-padding-x);
}

.enterprise-band__inner {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .enterprise-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
  }
}

.enterprise-band__content {
  flex: 1 1 auto;
  min-width: 0;
}

.enterprise-band__name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--gray-900);
}

.enterprise-band__description {
  color: var(--gray-600);
  font-size: 0.9375rem;
  margin: 0 0 1rem;
  line-height: 1.5;
}

.enterprise-band__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
  color: var(--gray-700);
}

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

@media (min-width: 1024px) {
  .enterprise-band__features {
    grid-template-columns: repeat(3, 1fr);
  }
}

.enterprise-band__features li {
  position: relative;
  padding-left: 1.5rem;
}

.enterprise-band__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-600);
  font-weight: 700;
}

.enterprise-band__cta-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .enterprise-band__cta-wrap {
    align-items: flex-end;
    text-align: right;
    min-width: 200px;
  }
}

.enterprise-band__amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.enterprise-band__sub {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-bottom: 0.75rem;
}

.enterprise-band__cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  background-color: transparent;
  color: var(--brand-700);
  border: 2px solid var(--brand-200);
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal);
  cursor: pointer;
  text-decoration: none;
}

.enterprise-band__cta:hover {
  background-color: var(--brand-50);
  border-color: var(--brand-600);
}

/* ---------- Comparison table section ---------- */
.compare-section {
  padding: var(--section-padding-y) 0 0;
}

.compare-section h2 {
  text-align: center;
}

.compare-section > .container > p {
  text-align: center;
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--gray-600);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- CTA section ---------- */
.pricing-cta {
  padding: var(--section-padding-y) 0;
  background-color: var(--brand-900);
  text-align: center;
  color: #fff;
  margin-top: var(--section-padding-y);
}

.pricing-cta h2 {
  color: #fff;
}

.pricing-cta p {
  margin-top: 1rem;
  color: var(--brand-200);
  font-size: 1.125rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.pricing-cta__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.pricing-cta__actions .btn {
  width: 100%;
}

@media (min-width: 640px) {
  .pricing-cta__actions {
    flex-direction: row;
    justify-content: center;
  }

  .pricing-cta__actions .btn {
    width: auto;
  }
}