/* ============================================================
   MASEEL ACADEMICS — Luxury UI v2 (page.css)
   Detail pages + pricing. All JS hooks preserved.
   Tokens inherited from styles.css :root.
   ============================================================ */

/* ================= TOP LOADING PROGRESS LINE ================= */
.progress-line { position:fixed; top:0; left:0; height:3px; width:0; z-index:300; background:linear-gradient(90deg,#C96F4A,var(--gold-soft),var(--champagne)); box-shadow:0 0 14px rgba(216,188,126,.8); }

/* ================= DETAIL PAGE HEADER (Full-bleed background image + left shadow + text on top) ================= */
.page-header {
  position: relative;
  padding: 148px 0 116px;
  min-height: 580px;
  display: flex;
  align-items: center;
  background: #06170F;
  color: #FAF6EC;
  border-bottom: 1px solid rgba(216, 188, 126, 0.35);
  overflow: hidden;
}
.page-header::before,
.page-header::after {
  display: none;
}
.page-header .wrap {
  position: static;
  width: min(1180px, 90%);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
}

/* Professional in-flow Back Link (never fixed/floating over page content) */
.page-back {
  position: relative;
  top: auto;
  left: auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 7px;
  margin: 0 0 24px;
  border-radius: 999px;
  background: rgba(8, 28, 20, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(216, 188, 126, 0.42);
  color: #FAF6EC;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
  transition: transform 0.25s var(--ease), background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.page-back-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(216, 188, 126, 0.18);
  border: 1px solid rgba(216, 188, 126, 0.48);
  color: #F2D492;
  transition: transform 0.25s var(--ease), background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.page-back-ico svg {
  width: 14px;
  height: 14px;
  display: block;
}
.page-back:hover {
  background: rgba(14, 48, 35, 0.86);
  border-color: rgba(232, 204, 144, 0.88);
  color: #FFFDF7;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}
.page-back:hover .page-back-ico {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  color: #10261D;
  transform: translateX(-2px);
}

.page-hero-grid {
  display: block;
  position: static;
  margin-top: 0;
}
.page-hero-text {
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #E8CC8C;
  margin-bottom: 16px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.38);
}
.page-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
.page-title {
  font-family: var(--display);
  font-size: clamp(38px, 4.8vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #FFFDF7;
  max-width: 640px;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.42);
}
.page-title em {
  color: #F2D492;
  font-style: italic;
}
.page-lead {
  color: rgba(250, 246, 236, 0.92);
  font-size: 16.5px;
  max-width: 580px;
  margin-top: 18px;
  line-height: 1.75;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.36);
}
.page-cta-row {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
  align-items: center;
}

/* Stage image fills the entire .page-header section as its background */
.page-hero-img,
.page-hero-grid .page-hero-img {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  z-index: 0;
  pointer-events: none;
}
.page-hero-img img,
.page-hero-grid .page-hero-img img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
  display: block;
  animation: none !important;
}
/* Full-height directional shadow coming from the left side over the hero background image */
.page-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(4, 18, 13, 0.90) 0%,
    rgba(4, 18, 13, 0.78) 38%,
    rgba(4, 18, 13, 0.44) 62%,
    rgba(4, 18, 13, 0.14) 82%,
    rgba(4, 18, 13, 0.04) 100%
  );
  pointer-events: none;
}

/* ================= DETAIL CONTENT SECTIONS (Info band + Steps band) ================= */
.page-section {
  padding: 90px 0;
  position: relative;
}
.page-section.alt {
  background: linear-gradient(180deg, #FFFDF8, #F4EBDD);
  color: var(--text);
}
.page-section.alt h3.section-title {
  color: var(--text);
}
.page-section.alt h3.section-title em {
  color: var(--gold-deep);
}
.page-section.alt .section-sub {
  color: var(--muted);
}
.page-section.alt .page-list li {
  color: #3C443D;
}

/* Steps section on the dark green background: high-contrast ivory & champagne gold coloring */
.page-section:not(.alt) {
  background:
    radial-gradient(900px 440px at 50% 0%, rgba(216, 188, 126, 0.14), transparent 65%),
    linear-gradient(180deg, rgba(6, 24, 19, 0.92), rgba(5, 20, 15, 0.88)),
    url(maseel-reviewbg.jpg) center/cover no-repeat;
  color: #FAF6EC;
  border-top: 1px solid rgba(216, 188, 126, 0.25);
  border-bottom: 1px solid rgba(216, 188, 126, 0.25);
}
.page-section h3.section-title {
  font-family: var(--display);
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 500;
  color: #FFFDF7;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.page-section h3.section-title em {
  color: #F2D492;
  font-style: italic;
}
.page-section .section-sub {
  color: #D7E4DD;
  max-width: 600px;
  margin-bottom: 36px;
  font-size: 15.5px;
  line-height: 1.7;
}

.page-two-col { display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
@media (max-width:780px) { .page-two-col { grid-template-columns:1fr; } }

.page-info-card { background:linear-gradient(180deg,#FFFDF7,#FBF6E9); border:1px solid var(--line); outline:1px solid rgba(184,148,77,.22); outline-offset:5px; border-radius:var(--r-md); padding:30px 28px; box-shadow:0 12px 30px rgba(20,40,30,.07); transition:transform .35s var(--ease), box-shadow .35s ease; }
.page-info-card:hover { transform:translateY(-5px); box-shadow:0 20px 44px rgba(20,40,30,.13); }
.page-info-card h4 { font-family:var(--display); font-size:19px; color:var(--em); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.page-list { list-style:none; display:grid; gap:13px; }
.page-list li { position:relative; padding-left:32px; color:#3C443D; font-size:15px; line-height:1.6; }
.page-list li::before { content:"✓"; position:absolute; left:0; top:1px; width:21px; height:21px; border-radius:50%; background:linear-gradient(180deg,var(--gold-pale),#E4D3A6); color:var(--em); font-size:11px; font-weight:800; display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(184,148,77,.4); }

/* High-contrast Frosted Step Cards & Gold Step Badges on Dark Green Background */
.page-step-list {
  counter-reset: step;
  list-style: none;
  display: grid;
  gap: 18px;
}
.page-step-list li {
  counter-increment: step;
  position: relative;
  padding: 22px 26px 22px 80px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.065);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(216, 188, 126, 0.34);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s var(--ease), border-color 0.25s ease, background 0.25s ease;
}
.page-step-list li:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.095);
  border-color: rgba(232, 204, 144, 0.65);
}
.page-step-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 20px;
  top: 20px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: #F6DF9E;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(232, 204, 144, 0.65);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(216, 188, 126, 0.26), rgba(216, 188, 126, 0.10));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.26);
}
.page-step-list b {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: #FFFDF7 !important;
}
.page-step-list p {
  color: #DCE7E0 !important;
  font-size: 14.5px;
  line-height: 1.65;
  margin-top: 5px;
}

.page-quote {
  margin-top: 40px;
  padding: 26px 32px;
  border-left: 3px solid #E8CC8C;
  background: linear-gradient(90deg, rgba(216, 188, 126, 0.16), rgba(255, 255, 255, 0.04));
  border-radius: 0 16px 16px 0;
  color: #FFFDF7 !important;
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.72;
  position: relative;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
.page-quote::before {
  content: "❝";
  position: absolute;
  top: 10px;
  right: 22px;
  font-size: 44px;
  color: rgba(232, 204, 140, 0.28);
  font-family: Georgia, serif;
  line-height: 1;
}

/* ================= REVIEWS SLIDER (detail pages) ================= */
.page-reviews { padding:90px 0; background:radial-gradient(800px 380px at 50% 0%, rgba(216,188,126,.09), transparent 60%), var(--em-deep); color:var(--ivory); overflow:hidden; border-top:1px solid rgba(216,188,126,.18); border-bottom:1px solid rgba(216,188,126,.18); }
.page-reviews .section-title { font-family:var(--display); font-size:30px; font-weight:500; margin-bottom:8px; }
.page-reviews .section-title em { color:var(--gold-soft); font-style:italic; }
.page-reviews .section-sub { color:var(--ink-faint); max-width:580px; margin-bottom:36px; }

.page-review-slider-wrap { position:relative; }
.page-review-slider { display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none; padding:10px 2px 22px; cursor:grab; touch-action:pan-x; }
.page-review-slider::-webkit-scrollbar { display:none; }
.page-review-slider.dragging { scroll-snap-type:none; cursor:grabbing; }
.page-review-slider .page-review-card { flex:0 0 auto; width:calc(33.333% - 15px); min-width:285px; scroll-snap-align:start; transition:transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease; }
.page-review-slider .page-review-card:hover { transform:translateY(-6px) rotate(-.3deg); border-color:rgba(216,188,126,.62); box-shadow:0 24px 52px rgba(0,0,0,.38), 0 0 30px rgba(216,188,126,.18); }

.page-review-nav { display:flex; justify-content:center; gap:12px; margin-top:24px; }
.page-review-nav button { width:42px; height:42px; border-radius:50%; border:1px solid rgba(216,188,126,.45); background:rgba(255,255,255,.06); color:var(--gold-soft); display:grid; place-items:center; cursor:pointer; transition:.25s var(--ease); }
.page-review-nav button:hover { background:rgba(216,188,126,.2); border-color:var(--gold); transform:translateY(-2px); }
.page-review-nav button:disabled { opacity:.3; cursor:default; transform:none; }

.page-review-dots { display:flex; justify-content:center; gap:8px; margin-top:16px; }
.page-review-dot { width:8px; height:8px; border-radius:50%; background:rgba(216,188,126,.3); border:none; cursor:pointer; padding:0; transition:.3s var(--ease); }
.page-review-dot.active { background:var(--gold-soft); width:26px; border-radius:5px; box-shadow:0 0 10px rgba(216,188,126,.6); }

@media (max-width:860px) { .page-review-slider .page-review-card { width:calc(50% - 11px); } }
@media (max-width:560px) { .page-review-slider .page-review-card { width:85%; } }
.page-review-card { position:relative; overflow:hidden; background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03) 55%, rgba(216,188,126,.06)); border:1px solid rgba(216,188,126,.28); border-radius:20px; padding:28px 26px; display:flex; flex-direction:column; gap:14px; transition:transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease, background .3s ease; box-shadow:0 14px 32px rgba(0,0,0,.25); }
.page-review-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--terracotta),var(--gold-soft),var(--champagne)); opacity:.9; }
.page-review-card::after { content:"❝"; position:absolute; top:16px; right:22px; font-size:56px; color:rgba(216,188,126,.11); font-family:Georgia,serif; line-height:1; pointer-events:none; }
.page-review-card:hover { transform:translateY(-6px) rotate(-.3deg); border-color:rgba(216,188,126,.62); box-shadow:0 24px 52px rgba(0,0,0,.38), 0 0 30px rgba(216,188,126,.18); }
.page-review-stars { color:var(--gold); letter-spacing:.14em; font-size:13px; text-shadow:0 0 10px rgba(216,188,126,.4); }
.page-review-card p { color:#D9E0D4; font-size:14.5px; line-height:1.65; font-style:italic; flex:1; position:relative; z-index:1; }
.page-review-author { display:flex; align-items:center; gap:12px; border-top:1px solid rgba(216,188,126,.16); padding-top:15px; position:relative; z-index:1; }
.page-review-avatar { width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-size:13px; font-weight:800; color:#20241C; background:linear-gradient(150deg,var(--champagne),var(--gold)); box-shadow:0 4px 14px rgba(184,148,77,.4), 0 0 0 2px rgba(216,188,126,.22); }
.page-review-author b, .page-review-who b { display:block; color:var(--ivory); font-size:14.5px; font-family:var(--display); }
.page-review-author small, .page-review-who small { color:var(--ink-faint); font-size:12px; }

/* ================= PRICING BLOCK (detail pages) ================= */
.page-pricing { padding:90px 0; background:radial-gradient(800px 380px at 50% -10%, rgba(216,188,126,.1), transparent 60%), var(--em-deep); color:var(--ivory); border-top:1px solid rgba(216,188,126,.2); }
.page-pricing-head { text-align:center; margin-bottom:44px; }
.page-pricing-head h3 { font-family:var(--display); font-size:32px; font-weight:500; }
.page-pricing-head h3 em { color:var(--gold-soft); font-style:italic; }
.page-pricing-head p { color:var(--ink-faint); margin-top:10px; max-width:580px; margin-inline:auto; }
.page-pricing-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:920px; margin:0 auto; }
@media (max-width:860px) { .page-pricing-cards { grid-template-columns:1fr; max-width:420px; } }
.page-pricing-card { position:relative; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border:1px solid rgba(216,188,126,.26); border-radius:var(--r-md); padding:28px 26px; text-align:center; transition:transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease; display:flex; flex-direction:column; }
.page-pricing-card::before { content:""; position:absolute; top:0; left:26px; right:26px; height:1px; background:linear-gradient(90deg,transparent,rgba(246,234,198,.55),transparent); }
.page-pricing-card:hover { transform:translateY(-7px); border-color:var(--gold); box-shadow:0 20px 46px rgba(0,0,0,.4), var(--sh-gold); }
.page-pricing-card.current { border-color:var(--gold); background:linear-gradient(180deg, rgba(216,188,126,.18), rgba(255,255,255,.03)); box-shadow:0 26px 60px rgba(0,0,0,.48), 0 0 50px rgba(216,188,126,.3); transform:translateY(-14px) scale(1.03); }
.page-pricing-card.current:hover { transform:translateY(-19px) scale(1.03); box-shadow:0 30px 66px rgba(0,0,0,.52), 0 0 64px rgba(216,188,126,.38); }
.page-pricing-card.current .amt { color:var(--gold-soft); }
.page-pricing-card.current .plan-tag { color:var(--gold); }
.page-pricing-card:not(.current) { align-self:center; }
.page-pricing-card .plan-tag { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:12px; }
.page-pricing-card .amt { font-family:var(--display); font-size:38px; color:var(--ivory); letter-spacing:-.01em; }
.page-pricing-card .amt span { font-size:12px; color:var(--ink-faint); font-weight:400; }
.page-pricing-card ul { list-style:none; margin:20px 0 24px; display:grid; gap:11px; text-align:left; }
.page-pricing-card ul li { position:relative; padding-left:26px; color:#D9E0D4; font-size:13.5px; }
.page-pricing-card ul li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--gold-soft); font-weight:800; }
.page-pricing-cta { margin-top:auto; width:100%; display:inline-block; text-align:center; padding:13px 18px; border-radius:999px; border:1px solid rgba(216,188,126,.5); background:transparent; color:var(--gold-soft); font-weight:700; font-size:13.5px; cursor:pointer; transition:.25s var(--ease); }
.page-pricing-cta:hover { background:linear-gradient(180deg,var(--champagne),var(--gold)); color:#20241C; border-color:var(--gold); transform:translateY(-2px); box-shadow:0 10px 24px rgba(184,148,77,.35); }
.page-pricing-all { text-align:center; margin-top:34px; }
.page-pricing-all a { color:var(--gold-soft); font-weight:700; font-size:14.5px; display:inline-flex; align-items:center; gap:6px; }
.page-pricing-all a:not(.btn) { border:1px solid rgba(216,188,126,.5); padding:11px 24px; border-radius:999px; transition:.25s var(--ease); }
.page-pricing-all a:hover { background:rgba(216,188,126,.16); gap:10px; }

/* CTA banner */
.page-cta-banner { text-align:center; padding:100px 20px; color:var(--ivory); border-top:1px solid rgba(216,188,126,.18); position:relative; overflow:hidden; background-image:url(maseel-reviewbg.jpg); background-size:cover; background-position:center; }
.page-cta-banner::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,24,19,.82), rgba(6,24,19,.9)); z-index:0; }
.page-cta-banner h3 { font-family:var(--display); font-size:36px; font-weight:500; margin-bottom:12px; position:relative; z-index:1; text-wrap:balance; }
.page-cta-banner h3 em { color:var(--gold-soft); font-style:italic; }
.page-cta-banner p { color:#CDD6CA; max-width:540px; margin:0 auto 28px; position:relative; z-index:1; }
.page-cta-banner .btn { position:relative; z-index:1; }

.page-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:740px; margin:48px auto 0; }
@media (max-width:700px) { .page-stats { grid-template-columns:1fr; } }
.page-stat { text-align:center; padding:24px 10px; border:1px solid rgba(216,188,126,.28); border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
.page-stat b { display:block; font-family:var(--display); font-size:32px; color:var(--gold-soft); font-weight:500; }
.page-stat small { color:var(--ink-faint); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }

/* ================= PLATFORM (detail pages — matches index.html #platforms full-bleed classroom background + left shadow) ================= */
.page-platform,
.page-platform.gold-bg {
  position: relative;
  z-index: 30;
  padding: 112px 0;
  background: url("maseel-classroom.jpg") center center / cover no-repeat;
  color: #FAF6EC;
  border-top: 1px solid rgba(216, 188, 126, 0.35);
  border-bottom: 1px solid rgba(216, 188, 126, 0.35);
  overflow: hidden;
}
.page-platform::before,
.page-platform.gold-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(4, 18, 13, 0.88) 0%,
    rgba(4, 18, 13, 0.76) 36%,
    rgba(4, 18, 13, 0.42) 58%,
    rgba(4, 18, 13, 0.10) 78%,
    rgba(4, 18, 13, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.page-platform-flex {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  width: min(1180px, 90%);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
}
.page-platform-info {
  position: relative;
  z-index: 2;
  max-width: 560px;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.page-platform-info .page-eyebrow {
  margin-bottom: 12px;
  color: #E5C77D;
}
.page-platform-info h3 {
  font-size: clamp(30px, 3vw, 42px);
  color: #FFFDF7;
  margin-bottom: 14px;
  line-height: 1.14;
  font-family: var(--display);
  font-weight: 600;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}
.page-platform-info p {
  color: rgba(250, 246, 236, 0.92);
  font-size: 16px;
  line-height: 1.72;
  max-width: 520px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.32);
}
.page-platform-media {
  display: none !important;
}
.page-platform-badges {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 4px;
}
.page-platform-badge {
  background: rgba(10, 34, 25, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(216, 188, 126, 0.38);
  padding: 12px 18px;
  border-radius: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
  font-weight: 600;
  color: #FFFDF7;
  opacity: 1;
  transform: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
  transition: transform 0.25s var(--ease), border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.page-platform-badges.revealed .page-platform-badge {
  opacity: 1;
  transform: none;
}
.page-platform-badge:hover {
  background: rgba(16, 48, 36, 0.88);
  border-color: rgba(232, 204, 144, 0.72);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
  transform: translateY(-2px);
}
.page-platform-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 10px;
}
.page-platform-badge b {
  display: block;
  font-size: 14px;
  color: #FFFDF7;
}
.page-platform-badge small {
  display: block;
  color: #D5E2DA;
  font-weight: 500;
  font-size: 12px;
  margin-top: 2px;
}
@media (max-width: 860px) {
  .page-platform,
  .page-platform.gold-bg {
    padding: 76px 0;
  }
  .page-platform::before,
  .page-platform.gold-bg::before {
    background: linear-gradient(
      180deg,
      rgba(4, 18, 13, 0.84) 0%,
      rgba(4, 18, 13, 0.78) 60%,
      rgba(4, 18, 13, 0.88) 100%
    );
  }
}

/* ================= PRICING PAGE ================= */
.page-pricing-hero { padding:158px 0 60px; background:radial-gradient(700px 340px at 85% -10%, rgba(216,188,126,.14), transparent 65%), linear-gradient(180deg,#05130E,var(--em-deep) 70%); color:var(--ivory); position:relative; overflow:hidden; }
.page-pricing-hero::after { content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 80% -10%, rgba(216,188,126,.1), transparent 70%); pointer-events:none; }
.page-pricing-hero .wrap { position:relative; z-index:1; }
.page-pricing-hero .page-back { margin:8px 0 44px; }
.page-pricing-hero h1 { font-family:var(--display); font-size:clamp(40px,5.2vw,58px); font-weight:500; text-align:left; text-wrap:balance; }
.page-pricing-hero h1 em { color:var(--gold-soft); font-style:italic; }
.page-pricing-hero p { text-align:left; margin:16px 0 0; max-width:580px; color:#C2CDC0; font-size:16.5px; }
.page-pricing-hero .note { display:inline-flex; align-items:center; gap:8px; margin-top:24px; font-size:13px; font-weight:600; color:var(--gold-soft); border:1px solid rgba(216,188,126,.45); background:rgba(216,188,126,.12); padding:9px 20px; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.25); }

.pricing-full { background:var(--ivory); padding:90px 0; }
.pricing-full .pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:1000px; margin:0 auto; }
.pricing-full .pricing-card { background:linear-gradient(180deg,#FFFDF7,#FAF5E8); border-color:var(--line); outline:1px solid rgba(184,148,77,.22); outline-offset:5px; box-shadow:0 12px 32px rgba(20,40,30,.08); }
.pricing-full .pricing-card::before { background:linear-gradient(90deg,transparent,rgba(184,148,77,.5),transparent); }
.pricing-full .pricing-card.popular { border-color:var(--gold); outline-color:rgba(184,148,77,.55); box-shadow:0 26px 60px rgba(20,40,30,.16), 0 0 50px rgba(216,188,126,.32); transform:translateY(-14px) scale(1.03); }
.pricing-full .pricing-card.popular:hover { transform:translateY(-19px) scale(1.03); box-shadow:0 30px 66px rgba(20,40,30,.2), 0 0 64px rgba(216,188,126,.4); }
.pricing-full .pricing-card:not(.popular) { align-self:center; }
.pricing-full .pricing-card:not(.popular):hover { box-shadow:0 20px 46px rgba(20,40,30,.14), 0 0 30px rgba(216,188,126,.25); }
.pricing-full .pricing-plan { color:var(--em); }
.pricing-full .pricing-amt { color:var(--em); }
.pricing-full .pricing-card.popular .pricing-amt { color:var(--gold-deep); }
.pricing-full .pricing-desc { color:var(--muted); }
.pricing-full .pricing-features li { color:#3C443D; }
.pricing-full .pricing-flag { background:linear-gradient(180deg,var(--terracotta-soft),var(--terracotta)); }
.pricing-full .pricing-cta { color:var(--gold-deep); border-color:rgba(184,148,77,.55); }
.pricing-full .pricing-cta:hover { background:linear-gradient(180deg,var(--champagne),var(--gold)); color:#20241C; }
.pricing-full .pricing-card.popular .pricing-cta { color:#20241C; }

.pricing-guarantee { background:linear-gradient(180deg,var(--cream),#EFE7D2); padding:70px 0; }
.pricing-guarantee .wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1000px; }
.pricing-guarantee .pg { text-align:center; padding:30px 26px; border:1px solid var(--line); outline:1px solid rgba(184,148,77,.2); outline-offset:4px; background:linear-gradient(180deg,#FFFDF7,#FBF6E9); border-radius:var(--r-md); transition:transform .3s var(--ease), box-shadow .3s ease; }
.pricing-guarantee .pg:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(20,40,30,.12); }
.pricing-guarantee .pg b { display:block; font-family:var(--display); font-size:19px; color:var(--em); margin-bottom:8px; }
.pricing-guarantee .pg p { color:var(--muted); font-size:14px; }

.pricing-compare { background:var(--ivory); padding:90px 0 10px; }
.pricing-compare .comp-head { text-align:center; max-width:660px; margin:0 auto 48px; }
.pricing-compare .comp-head h2 { font-family:var(--display); font-size:clamp(30px,4vw,42px); font-weight:500; color:var(--em); }
.pricing-compare .comp-head h2 em { color:var(--terracotta); font-style:italic; }
.pricing-compare .comp-head p { color:var(--muted); margin-top:10px; }
.comp-table-wrap { overflow-x:auto; border-radius:20px; border:1px solid var(--line); outline:1px solid rgba(184,148,77,.22); outline-offset:5px; box-shadow:0 20px 50px rgba(20,40,30,.1); background:var(--white); }
.comp-table { width:100%; border-collapse:collapse; min-width:700px; }
.comp-table th, .comp-table td { padding:16px 18px; text-align:center; font-size:14px; }
.comp-table thead th { background:linear-gradient(180deg,var(--em-600),var(--em)); color:var(--ivory); font-family:var(--display); font-size:17px; font-weight:600; padding:22px 18px; }
.comp-table thead th.row-label { text-align:left; border-radius:0; }
.comp-table thead th .comp-plan-note { display:block; font-family:'Inter',sans-serif; font-size:11px; font-weight:500; letter-spacing:.06em; color:var(--gold-soft); margin-top:4px; }
.comp-table thead th.popular-col { background:linear-gradient(180deg,#20604C,#16493B); box-shadow:inset 0 -4px 0 var(--terracotta); position:relative; padding-top:34px; color:var(--gold-soft); }
.comp-table thead th.popular-col::before { content:"★ Most Chosen"; position:absolute; top:8px; left:50%; transform:translateX(-50%); background:linear-gradient(180deg,var(--terracotta-soft),var(--terracotta)); color:#fff; font-family:'Inter',sans-serif; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:4px 14px; border-radius:999px; white-space:nowrap; box-shadow:0 5px 14px rgba(201,111,74,.4); }
.comp-table td { color:var(--muted); }
.comp-table td.row-label { text-align:left; color:var(--em); font-weight:600; }
.comp-table tbody tr { transition:background .2s ease; }
.comp-table tbody tr:nth-child(even) { background:rgba(216,188,126,.07); }
.comp-table tbody tr:hover { background:rgba(216,188,126,.14); }
/* NOTE: .ic-yes/.ic-no live directly on the <td>, so the pill is drawn with
   ::after — changing the td's own display breaks table layout and the icons crash. */
.comp-table td.ic-yes, .comp-table td.ic-no { font-size:0; }
.comp-table td.ic-yes::after, .comp-table td.ic-no::after { content:"\2713"; display:inline-grid; place-items:center; width:27px; height:27px; border-radius:50%; font-size:14px; font-weight:800; vertical-align:middle; }
.comp-table td.ic-yes::after { background:rgba(46,139,87,.12); border:1px solid rgba(46,139,87,.45); color:#2E8B57; }
.comp-table td.ic-no::after { content:"\2715"; background:rgba(201,111,74,.1); border:1px solid rgba(201,111,74,.4); color:#C96F4A; font-size:12px; }
/* Inner-span icons (current markup): pill on the span, td untouched — crash-proof */
.comp-table .ic { display:inline-grid; place-items:center; width:27px; height:27px; border-radius:50%; font-size:14px; font-weight:800; vertical-align:middle; }
.comp-table .ic.ic-yes { background:rgba(46,139,87,.12); border:1px solid rgba(46,139,87,.45); color:#2E8B57; }
.comp-table .ic.ic-no { background:rgba(201,111,74,.1); border:1px solid rgba(201,111,74,.4); color:#C96F4A; font-size:12px; }
.comp-table td.popular-cell { background:rgba(216,188,126,.1); }
@media (max-width:860px) {
  .pricing-full .pricing-grid, .pricing-guarantee .wrap { grid-template-columns:1fr; max-width:430px; }
  .pricing-compare { padding-top:64px; }
  .comp-table { min-width:600px; }
  .comp-table th, .comp-table td { padding:13px 10px; font-size:13px; }
  .comp-table thead th { font-size:15px; padding:18px 10px; }
  .comp-table thead th.popular-col { padding-top:32px; }
  /* Sticky feature column: labels stay put while scrolling sideways */
  .comp-table thead th.row-label, .comp-table tbody td.row-label { position:sticky; left:0; z-index:2; }
  .comp-table thead th.row-label { box-shadow:10px 0 14px -10px rgba(0,0,0,.4); }
  .comp-table tbody td.row-label { background:#fff; box-shadow:10px 0 14px -10px rgba(20,40,30,.35); }
  .comp-table tbody tr:nth-child(even) td.row-label { background:#FAF4E4; }
  .page-back { position:relative; top:auto; left:0; margin:0 0 22px; }
}

@media (max-width:700px) {
  .page-header { padding:114px 0 68px; min-height:440px; }
  .page-hero-img::after {
    background: linear-gradient(
      180deg,
      rgba(4, 18, 13, 0.85) 0%,
      rgba(4, 18, 13, 0.80) 60%,
      rgba(4, 18, 13, 0.88) 100%
    );
  }
  .page-title { font-size:35px; }
  .page-lead { font-size:15px; }
  .page-section { padding:64px 0; }
  .page-reviews, .page-pricing { padding:64px 0; }
  .page-step-list li { padding:20px 20px 20px 70px; }
  .page-step-list li::before { left:16px; top:18px; width:38px; height:38px; font-size:14px; }
  .page-pricing-hero { padding:128px 0 48px; }
  .page-pricing-hero h1 { font-size:34px; }
}


/* ================= MOBILE BACKGROUND FIT: COURSE PAGES ================= */
@media (max-width: 700px) {
  .page-hero-img img,
  .page-hero-grid .page-hero-img img {
    object-fit: cover;
    object-position: center 54%;
  }
  .page-section:not(.alt) {
    background-position: center top, center center, center 44%;
    background-size: auto, auto, auto 100%;
    background-repeat: no-repeat, no-repeat, no-repeat;
  }
  .page-cta-banner {
    background-position: center 44%;
    background-size: auto 100%;
    background-repeat: no-repeat;
  }
}

@media (max-width: 650px) {
  .page-platform,
  .page-platform.gold-bg {
    background-image: url("maseel-classroom-mobile.jpg");
    background-position: center 52%;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .page-platform::before,
  .page-platform.gold-bg::before {
    background: linear-gradient(180deg,
      rgba(4, 18, 13, .52) 0%,
      rgba(4, 18, 13, .68) 42%,
      rgba(4, 18, 13, .9) 100%);
  }
  .page-platform-flex { width: min(1180px, 92%); padding-inline: 10px; }
}

/* ================= 2026 COURSE PAGE CLEANUP ================= */
.page-eyebrow { gap: 0; }
.page-eyebrow::before { content: none; }
.page-review-card {
  background: #0B261E;
  border-color: rgba(216,188,126,.2);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transform: none;
}
.page-review-card::before,
.page-review-card::after { content: none; }
.page-review-card:hover {
  transform: translateY(-2px);
  border-color: rgba(216,188,126,.36);
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
}
.page-review-card p { font-style: normal; }
.page-review-stars { display: none !important; }
.page-pricing-card.current,
.page-pricing-card.current:hover { transform: none; box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.pricing-notes { padding: 22px 0; background: #F5F1E6; }
.pricing-notes .wrap { max-width: 920px; }
.pricing-notes p { margin: 0; text-align: center; color: var(--muted); font-size: 14px; }
.page-pricing-card {
  align-self: stretch;
  background: #0B261E;
  border-color: rgba(216,188,126,.2);
  border-radius: 16px;
  box-shadow: none;
}
.page-pricing-card::before { content: none; }
.page-pricing-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.22); }
.page-pricing-card:not(.current) { align-self: stretch; }
.page-pricing-cta {
  font: inherit;
  font-weight: 600;
  border-radius: 10px;
}
.page-pricing-cta:focus-visible,
.page-pricing-all a:focus-visible,
.page-review-nav button:focus-visible,
.page-review-dot:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

/* ================= 2026 PROGRAM DETAIL EXPERIENCE ================= */
body.program-noorani { --program-accent: #C7A45F; }
body.program-tajweed { --program-accent: #7FA991; }
body.program-mastery { --program-accent: #C79A5A; }
body.program-islamic { --program-accent: #8EA99A; }
body.program-tafseer { --program-accent: #A88B62; }

.program-detail .page-title::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin-top: 17px;
  border-radius: 2px;
  background: var(--program-accent, var(--gold-soft));
}
.program-detail .page-eyebrow { color: var(--program-accent, var(--gold-soft)); }

.program-facts {
  position: relative;
  z-index: 4;
  margin-top: -30px;
  padding: 0 0 30px;
  background: linear-gradient(180deg, transparent 0, #F5F2E9 30px);
}
.program-facts .wrap { width: min(1100px, 92%); }
.program-facts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #E5DFD2;
  border-top: 3px solid var(--program-accent, var(--gold-soft));
  border-radius: 16px;
  background: #FFFEFA;
  box-shadow: 0 12px 28px rgba(20, 40, 30, .08);
}
.program-fact { min-width: 0; padding: 19px 22px; }
.program-fact + .program-fact { border-left: 1px solid #E8E2D6; }
.program-fact span {
  display: block;
  margin-bottom: 5px;
  color: #68746A;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.35;
  text-transform: uppercase;
}
.program-fact strong {
  display: block;
  color: #17372B;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}

.program-detail .page-section.alt {
  background: #F5F2E9;
}
.program-detail .page-two-col { align-items: stretch; gap: 18px; }
.program-detail .page-info-card {
  height: 100%;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid #E5DFD2;
  border-top: 3px solid var(--program-accent, var(--gold-soft));
  border-radius: 17px;
  outline: 0;
  background: #FFFEFA;
  box-shadow: 0 8px 24px rgba(20, 40, 30, .055);
  transition: box-shadow .22s ease, transform .22s ease;
}
.program-detail .page-info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(20, 40, 30, .09);
}
.program-detail .page-info-card h4 {
  margin-bottom: 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid #E8E2D6;
  color: #17372B;
  font-size: 21px;
}
.program-detail .page-list { gap: 12px; }
.program-detail .page-list li { padding-left: 29px; font-size: 14px; line-height: 1.55; }
.program-detail .page-list li::before {
  width: 19px;
  height: 19px;
  background: #F0E9D9;
  background: color-mix(in srgb, var(--program-accent, var(--gold-soft)) 28%, white);
  color: #18372B;
  box-shadow: none;
}

.program-detail .page-section:not(.alt) {
  border-block: 1px solid #E5DFD2;
  background: #F1EEE5;
  color: #23392D;
}
.program-detail .page-section:not(.alt) h3.section-title { color: #17372B; }
.program-detail .page-section:not(.alt) .section-sub { color: #5C6A60; }
.program-detail .page-step-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 15px;
}
.program-detail .page-step-list li {
  min-height: 112px;
  padding: 21px 20px 20px 72px;
  border: 1px solid #E2DCCF;
  border-radius: 15px;
  background: #FFFEFA;
  box-shadow: 0 7px 20px rgba(20, 40, 30, .055);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.program-detail .page-step-list li:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--program-accent, var(--gold-soft)) 55%, #E2DCCF);
  background: #FFFEFA;
  box-shadow: 0 11px 24px rgba(20, 40, 30, .08);
}
.program-detail .page-step-list li::before {
  top: 20px;
  left: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--program-accent, var(--gold-soft));
  background: #F0E9D9;
  background: color-mix(in srgb, var(--program-accent, var(--gold-soft)) 24%, white);
  box-shadow: none;
  color: #17372B;
  font-size: 13px;
}
.program-detail .page-step-list b { color: #17372B !important; font-size: 17px; }
.program-detail .page-step-list p { color: #58665C !important; font-size: 13.5px; line-height: 1.55; }
.program-detail .page-step-list li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc((100% - 15px) / 2);
  justify-self: center;
}

.program-detail .page-platform-flex { align-items: flex-start; }
.program-detail .page-platform-badge { border-radius: 12px; box-shadow: none; }
.program-detail .page-platform-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .2); }
.program-detail .page-pricing-head { margin-bottom: 32px; }
.program-detail .page-pricing-head h3 { font-size: clamp(27px, 3vw, 34px); }
.program-detail .page-pricing-head p { max-width: 620px; line-height: 1.6; }
.program-detail .page-pricing-cards { align-items: stretch; gap: 16px; }
.program-detail .page-pricing-card {
  padding: 25px 22px 22px;
  text-align: left;
  background: #0B261E;
  border-color: rgba(216, 188, 126, .22);
}
.program-detail .page-pricing-card .plan-tag { letter-spacing: .12em; }
.program-detail .page-pricing-card .amt { text-align: left; }
.program-detail .page-pricing-card ul { flex: 1; margin: 17px 0 22px; }
.program-detail .page-pricing-cta { text-align: center; }
.program-detail .page-pricing-all { margin-top: 25px; }
.program-detail .page-reviews { background: #071B15; }
.program-detail .page-review-slider .page-review-card { scroll-snap-align: start; }
.program-detail .page-review-nav button { min-height: 42px; }

@media (min-width: 561px) and (max-width: 860px) {
  .program-detail .page-pricing-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 680px;
  }
  .program-detail .page-pricing-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 16px) / 2);
    justify-self: center;
  }
}

@media (max-width: 700px) {
  .program-facts { margin-top: -16px; padding-bottom: 22px; }
  .program-facts-grid { grid-template-columns: 1fr; border-radius: 13px; }
  .program-fact { display: grid; grid-template-columns: 98px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 15px; }
  .program-fact + .program-fact { border-left: 0; border-top: 1px solid #E8E2D6; }
  .program-fact span { margin: 1px 0 0; font-size: 9px; letter-spacing: .09em; }
  .program-fact strong { font-size: 13.5px; }
  .program-detail .page-step-list { grid-template-columns: 1fr; gap: 12px; }
  .program-detail .page-step-list li:last-child:nth-child(odd) { grid-column: auto; width: 100%; }
  .program-detail .page-section:not(.alt) { padding-block: 56px; }
  .program-detail .page-info-card { height: auto; }
}

@media (max-width: 560px) {
  .program-detail .page-pricing-cards { grid-template-columns: 1fr; max-width: 420px; }
  .program-detail .page-pricing-card:last-child:nth-child(odd) { grid-column: auto; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .program-detail .page-info-card,
  .program-detail .page-step-list li,
  .program-detail .page-platform-badge,
  .program-detail .page-pricing-card,
  .program-detail .page-pricing-cta { transition: none; }
}