/* =====================================================
   1) Hero / Intro Section
   ===================================================== */
.pricing-hero {
  background: #000;
  color: #fff;
  padding: 5rem 1rem;
  min-height: 800px;
  display: flex;               /* make the section a flex container */
  flex-direction: column;      /* stack its single child (.container) */
  justify-content: center;     /* vertically center the container */
}

.pricing-hero .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 130px gutters on each side, but never exceed 1200px total */
  width: 100%;
  max-width: min(1200px, calc(100% - 260px));
  margin: 0 auto;
  gap: 2rem;
}

.intro-left {
  flex: 1 1 50%;
  min-width: 280px;
}

.intro-left h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.intro-left p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  max-width: 450px;
  line-height: 1.5;
}

.intro-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.intro-right {
  flex: 1 1 50%;
  text-align: right;
  min-width: 280px;
}

.intro-right img {
  max-width: 100%;
  border-radius: 0.5rem;
}

/* =====================================================
   Responsive tweaks
   ===================================================== */
@media (max-width: 1200px) {
  .pricing-hero .container {
    flex-direction: column;
    text-align: center;
  }
  .intro-right {
    text-align: center;
  }
}
@media (max-width: 900px) {
  .pricing-hero .container {
    flex-direction: column;
    text-align: center;
  }
  .intro-ctas .btn {
    display: block;
    margin: 0 auto 1rem;
  }
  .intro-right {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .pricing-toggle .container {
    flex-direction: column;
  }
  .toggle-btn {
    padding: 0.75rem 0;
  }
}

@media (max-width: 480px) {
  .card-panel {
    padding: 1.5rem 1rem;
  }
}
















/* =====================================================
   2) Toggle Section (enhanced)
   ===================================================== */
.pricing-toggle {
  background: #000;
  padding: 2.5rem 1rem;     /* extra vertical breathing room */
}
.pricing-toggle .container {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  border-radius: 9999px;
  overflow: hidden;
  background: #333;         /* slightly darker for contrast */
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

/* Base button */
.toggle-btn {
  flex: 1 1 0;
  padding: 1.25rem 0;       /* taller buttons */
  background: transparent;
  border: none;
  color: #ddd;
  font-size: 1.125rem;      /* larger text */
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.4s ease,
    color 0.4s ease;
}

/* Hover state */
.toggle-btn:hover:not(.active) {
  background: rgba(255,255,255,0.05);
}

/* Active state */
.toggle-btn.active {
  background: #f0f0f0;      /* very light grey */
  color: #111;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
}

/* =====================================================
   3) Pricing Cards
   ===================================================== */
.pricing-cards {
  background: #000;
  padding: 4rem 1rem;
  
}
.pricing-cards .container {
  max-width: 1000px;
  margin: 0 auto;
  
}

/* Base card styles */
.card-panel {
  background: #fff;
  padding: 2rem;
  border-radius: 0.5rem;
    min-height: 480px;
  display: flex;               /* make the section a flex container */
  flex-direction: column;      /* stack its single child (.container) */
  justify-content: center;     /* vertically center the container */
  /* remove text-align: left so grid alignment works naturally */
}
.card-panel.hidden {
  display: none;
}

/* Heading & price centered */
.card-panel h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
  color: #000;
  text-align: center;
}
.card-panel .price {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: #000;
  text-align: center;
}

/* 3a) Two-column layout wrapper */
.card-content {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem 3rem; /* 2rem row-gap, 3rem column-gap */
  margin: 0 50px;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  
}

/* Description column */
.card-content .desc {
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
}

/* Features column */
.card-content .features {
  list-style: none;
  padding: 0;
  margin: 0;
}
.card-content .features li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: #000;
}


/* Footnote spans full width */
.card-panel .note {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  color: #666;
  text-align: center;
  margin: 0;
}

/* ===== Responsive: stack columns ===== */
@media (max-width: 768px) {
  .card-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .card-panel .note {
    margin-top: 1rem;
  }
}