/* ===============================
   Plans Section — Pure CSS Styles
   =============================== */

/* ---------- Brand Palette ---------- */
:root{
  --blue:#1ea7fd;
  --blue-dark:#0a84d6;
  --orange:#ff7a1a;
  --charcoal:#111827;
  --red:#e11d48;
  --green:#22c55e;
  --border:#e5e7eb;  /* gray-200 */
  --text:#374151;    /* gray-700 */
  --muted:#6b7280;   /* gray-500 */
  --bg:#ffffff;
  --table-head:#eff6ff; /* blue-50 */
  --success-tint:#eef8f0;
  --success-border:#cdebd6;
}

/* Smooth anchor scrolling */
html{ scroll-behavior:smooth; }

/* ---------- Layout helpers ---------- */
.plans-container{
  max-width: 72rem; /* ~1152px */
  margin: 0 auto;
  padding: 2.5rem 1rem;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.card{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 1rem; /* 16px */
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* ---------- Hero ---------- */
.hero {
	text-align:center; 
	margin-bottom:1rem;
	}
.hero-title{
  color: #4c5a7d ;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.2vw + 1rem, 2.575rem); /* ~text-3xl */
  margin: 0 0 .25rem;
}
.hero-tagline{
  color: var(--muted);
  font-style: italic;
  font-size: .875rem; /* text-sm */
  margin: 0 0 2rem;
}
.hero-body{
  max-width: 48rem;
  margin: 0 auto 1.5rem;
  line-height: 1.7;
  color: var(--text);
}
.hero-video{
  max-width: 48rem;
  margin: 0 auto 1.5rem;
}
.hero-video iframe, .hero-video video{
  width: 100%;
  height: clamp(12rem, 28vw, 16rem); /* similar to h-64 */
  border-radius: .75rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
  border: 0;
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  border-radius: .75rem;
  font-weight: 700;
  font-size: .875rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: filter .2s ease, transform .02s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-orange{
  background: #eea412;
  color: #fff;
}
.btn-orange:hover{ filter: brightness(.95); }

/* ---------- Comparison Table ---------- */
.plans-table-wrap{ overflow-x:auto; margin-bottom: 2rem; }
.plans-table{
  width: 100%;
  border: 1px solid var(--border);
  border-collapse: collapse;
  text-align: center;
  font-size: .925rem;
}
.plans-table thead th{
  background: #eef6ff; /* subtle blue tint */
  padding: .75rem .5rem;
  color: var(--charcoal);
  font-weight: 700;
}
.plans-table th:first-child,
.plans-table td:first-child{
  text-align: left;
}
.plans-table td{
  padding: .5rem .75rem;
  border-top: 1px solid var(--border);
}
/* Green check icon using pseudo-element */
.check{
  display:inline-block;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--green);
  line-height: 1.25rem;
  text-align: center;
  font-weight: 800;
}
.check::before{ content: "✓"; }

/* ---------- Free Plan Row/Card ---------- */
.free-plan{
  display:flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px){
  .free-plan{ flex-direction: row; align-items: center; justify-content: space-between; }
}
.free-plan h3{
  margin: 0;
  color: var(--charcoal);
  font-weight: 700;
  font-size: 1.25rem;
}

/* ---------- Intensive Plan Block ---------- */
.intensive h3{
  margin-top: 0;
  color: var(--charcoal);
  font-weight: 700;
  font-size: 1.25rem;
}
.price-list{
  display:flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1rem;
}
.price-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: .75rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .5rem .75rem;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.price-row:hover{
  border-color: #d1d5db; /* gray-300 */
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  background-color: #fffcf7;
}
.price-row .title{
  font-weight: 700;
  color: #111827;
  font-size: 1rem;
}
.price-row .total{
  font-size: .925rem;
  color: #1f2937;
  margin-left: .35rem;
}
.price-row .note{
  font-size: .78rem;
  color: var(--muted);
  margin-left: .5rem;
}
.price-row .right{
  display:flex;
  align-items:center;
  gap: .5rem;
  margin-left: auto;
}
.badge{
  display:inline-block;
  border-radius: 999px;
  padding: .15rem .5rem;
  font-size: .7rem;
  font-weight: 700;
  border: 1px solid var(--success-border);
  background: var(--success-tint);
  color: #1a7f37;
}
.badge.best{
  background: var(--red);
  color: #fff;
  border: none;
}

/* ---------- Checkout anchor spacing ---------- */
#checkout{ margin-top: 5rem; }

/* ---------- Utilities (optional) ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.mb-16{ margin-bottom: 4rem; }