/* public/styles/clariiapricing.css */

/* === THE NUCLEAR GRID FIX === */
.pricing-grid-container {
  display: grid;
  /* This MAGIC rule forces columns to wrap if they get smaller than 320px. 
     No more squashing. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  width: 100%;
  margin-bottom: 3rem;
}

/* --- Card Components --- */
.tier-card {
  transition: transform 0.2s ease-in-out;
  border-radius: 1.5rem;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  height: 100%; /* Fills the grid cell height */
  display: flex;
  flex-direction: column;
  /* Safety overflow to prevent internal content blowing it out */
  overflow: hidden; 
}

.tier-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(176, 138, 72, 0.15) !important;
}

/* --- Plan Specifics --- */
.featured-plan {
  border: 2px solid #b08a48 !important;
  background-color: #fdfaf4;
  position: relative; /* For badges */
}

.personal-plan-card {
  border-top: 5px solid #dee2e6 !important;
}

/* --- Typography & Branding --- */
.text-clariia { color: #b08a48 !important; }
.bg-clariia { background-color: #b08a48 !important; color: white !important; }
.bg-clariia-light { background-color: rgba(176, 138, 72, 0.08) !important; }

.plan-price {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #000;
}

/* --- Buttons --- */
.btn-clariia {
  background-color: #b08a48;
  color: white;
  border: none;
  transition: 0.3s;
}
.btn-clariia:hover {
  background-color: #96753d;
  color: white;
  transform: scale(1.02);
}

/* --- Comparison Table --- */
.table-card { border-radius: 1rem; border: 1px solid #eee; }
.table-section-head {
  background: #f8f9fa;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: #555;
  text-transform: uppercase;
}

.check-icon { color: #b08a48; font-size: 1.1rem; }

/* --- Text Utilities --- */
.hero-text { max-width: 700px; }
.footer-text { max-width: 650px; margin: 0 auto; }