/* ==========================================================================
   THE PROJECT MBBS - FEATURES, COOKING, Q-BANK & QUESTIONS
   ========================================================================== */

/* Q-Bank features & counts */
.feature-count{display:block;font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--ink);margin-bottom:14px}
.feature-count em{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--muted);margin-top:3px}
.coming-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:750;letter-spacing:1.4px;color:#b45309;background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.35);padding:6px 13px;border-radius:99px;margin-bottom:18px}
.landing-feature.is-coming{cursor:default;text-align:center;align-items:center;justify-content:flex-start}
.landing-feature.is-coming h3{color:var(--muted)}
/* ==========================================================================
   DESKTOP CARD ALIGNMENT & HARMONIZATION (min-width: 641px)
   Aligns section panels, feature cards, and Q-Bank cards on desktop.
   Mobile (@media max-width: 640px) is unaffected and preserved.
   ========================================================================== */
@media (min-width: 641px) {
  #landingCooking{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:24px;
    padding:clamp(32px, 4.5vw, 52px);
    box-shadow:var(--shadow-sm);
    margin-bottom:24px;
  }

  #landingFeatures .public-section-head h2,
  #landingCooking .public-section-head h2 {
    font-size: clamp(24px, 2.8vw, 32px);
    line-height: 1.25;
  }

  .qb-title {
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.25;
    color: #f43f5e;
    margin: 0;
  }

  .qbank-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .qbank-features article {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

  .qbank-features article::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #f43f5e, #8b5cf6);
  }

  .qbank-features article:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(244,63,94,.14);
    border-color: rgba(244,63,94,.35);
  }

  .qfeat-tick {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f43f5e, #8b5cf6);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 14px;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(244,63,94,.32);
  }

  .qbank-features h3 {
    font-size: 14.5px;
    font-weight: 750;
    margin: 0 0 8px 0;
    color: var(--ink);
    letter-spacing: -0.2px;
    min-height: 20px;
  }

  .qbank-features p {
    font-size: 12px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
    flex: 1;
  }

  /* Section Panels Uniform Dimensions */
  #landingFeatures.public-section,
  #landingCooking,
  #landingPreview.public-preview,
  .public-steps.public-section,
  #landingReviews.public-section,
  #landingFaq.public-faq,
  .public-final-cta,
  .footer-card {
    border-radius: 24px !important;
    padding: clamp(32px, 4.5vw, 52px) !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
  }

  /* 4-column feature grid on desktop with matching 16px gap */
  .landing-feature-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  /* Harmonized feature cards across active and coming soon */
  .landing-feature {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: flex-start !important;
    padding: 26px 20px !important;
    border-radius: 18px !important;
    min-height: 245px !important;
    box-sizing: border-box !important;
  }

  .landing-feature.is-coming {
    justify-content: flex-start !important;
    cursor: default !important;
  }

  /* Fixed height slot for top badge / count so titles line up horizontally across all columns */
  .landing-feature .feature-count {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 56px !important;
    margin: 0 0 12px 0 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
  }

  .landing-feature .feature-count em {
    display: block !important;
    font-style: normal !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    margin-top: 3px !important;
    color: var(--muted) !important;
  }

  .landing-feature .coming-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    margin: 14px 0 !important;
    padding: 6px 14px !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    border-radius: 99px !important;
  }

  /* Fixed height slot for card titles across all 4 columns */
  .landing-feature h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    letter-spacing: -0.3px !important;
    text-align: center !important;
    margin: 0 0 8px 0 !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    line-height: 1.3 !important;
  }

  /* Fixed height slot for card descriptions across all 4 columns */
  .landing-feature p {
    font-size: 12px !important;
    color: var(--muted) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    text-align: center !important;
    max-width: 230px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Button slot in active cards pushed to bottom */
  .landing-feature .feature-cta {
    margin-top: auto !important;
    padding: 8px 18px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  /* Q-Bank features cards equal min-height on desktop */
  .qbank-features article {
    min-height: 175px !important;
  }

  /* Reviews marquee cards equal height */
  .reviews-track .review-card {
    min-height: 230px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
}
@media(max-width:900px) and (min-width:641px){
  .landing-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .qbank-features{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
.cooking-art{flex-shrink:0;filter:drop-shadow(0 8px 14px rgba(249,115,22,.22))}
.flames{transform-box:fill-box;transform-origin:50% 100%;animation:flameFlick 1s ease-in-out infinite}
.flames.f2{animation-delay:.22s;animation-duration:1.25s}
.flames.f3{animation-delay:.45s;animation-duration:.85s}
@keyframes flameFlick{0%,100%{transform:scale(1,1)}30%{transform:scale(.96,1.16)}60%{transform:scale(1.03,.93)}}
.fire-glow{animation:glowPulse 1.7s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.65}50%{opacity:1}}
.steam{opacity:0;animation:steamRise 2.8s ease-in-out infinite}
.steam.s2{animation-delay:1.4s}
@keyframes steamRise{0%{opacity:0;transform:translateY(7px)}35%{opacity:.75}100%{opacity:0;transform:translateY(-11px)}}
@media(prefers-reduced-motion:reduce){.flames,.steam,.fire-glow{animation:none}.steam{opacity:.45}}
/* Q-Bank cards keep their subtle tints */
.qbank-features article:nth-child(6n+1){background-color:rgba(244,63,94,.06)}
.qbank-features article:nth-child(6n+2){background-color:rgba(139,92,246,.06)}
.qbank-features article:nth-child(6n+3){background-color:rgba(20,184,166,.06)}
.qbank-features article:nth-child(6n+4){background-color:rgba(245,158,11,.07)}
.qbank-features article:nth-child(6n+5){background-color:rgba(59,130,246,.06)}
.qbank-features article:nth-child(6n+6){background-color:rgba(16,185,129,.06)}
/* Beautiful feature cards — per-card accent variety */
.landing-feature{position:relative;overflow:hidden;border-radius:20px!important}
.landing-feature::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--acc,#f43f5e),var(--acc2,#fda4af))}
.landing-feature:hover{transform:translateY(-6px)!important;border-color:var(--acc,#f43f5e)!important;box-shadow:0 18px 36px -14px var(--acc-soft,rgba(244,63,94,.28))!important}
#landingFeatures .landing-feature:nth-child(6n+1),#landingCooking .landing-feature:nth-child(6n+1){--acc:#f43f5e;--acc2:#fda4af;--acc-soft:rgba(244,63,94,.28)}
#landingFeatures .landing-feature:nth-child(6n+2),#landingCooking .landing-feature:nth-child(6n+2){--acc:#8b5cf6;--acc2:#c4b5fd;--acc-soft:rgba(139,92,246,.28)}
#landingFeatures .landing-feature:nth-child(6n+3),#landingCooking .landing-feature:nth-child(6n+3){--acc:#0d9488;--acc2:#5eead4;--acc-soft:rgba(13,148,136,.25)}
#landingFeatures .landing-feature:nth-child(6n+4),#landingCooking .landing-feature:nth-child(6n+4){--acc:#d97706;--acc2:#fcd34d;--acc-soft:rgba(217,119,6,.25)}
#landingFeatures .landing-feature:nth-child(6n+5),#landingCooking .landing-feature:nth-child(6n+5){--acc:#2563eb;--acc2:#93c5fd;--acc-soft:rgba(37,99,235,.25)}
#landingFeatures .landing-feature:nth-child(6n+6),#landingCooking .landing-feature:nth-child(6n+6){--acc:#059669;--acc2:#6ee7b7;--acc-soft:rgba(5,150,105,.25)}
.landing-feature .feature-count{color:var(--acc,#f43f5e)}
.landing-feature .feature-cta{color:var(--acc,#f43f5e)}
.landing-feature .coming-badge{color:var(--acc,#b45309);background:var(--acc-soft,rgba(245,158,11,.13));border-color:var(--acc,#f43f5e)}
.tick-anim{display:inline-block;width:16px;height:16px;margin-right:7px;vertical-align:-3px}
.tick-anim circle,.tick-anim path{fill:none;stroke:#f43f5e;stroke-width:2;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round;stroke-linejoin:round;animation:tickDraw 2.8s ease-in-out infinite}
.tick-anim path{animation-delay:.25s}
@keyframes tickDraw{0%{stroke-dashoffset:100;opacity:0}12%{opacity:1}38%{stroke-dashoffset:0;opacity:1}72%{stroke-dashoffset:0;opacity:1}88%{opacity:0}100%{stroke-dashoffset:100;opacity:0}}
@media(prefers-reduced-motion:reduce){.tick-anim circle,.tick-anim path{animation:none;stroke-dashoffset:0;opacity:1}}

/* FAQ section */
.faq-view-all{margin-top:18px}
.faq-page-list{max-width:780px}
.faq-page-list details{background:var(--surface);border:1px solid var(--line)!important;border-radius:14px;padding:18px 20px!important;margin-bottom:12px}
.faq-page-list details summary{font-size:14px}
.faq-page-list details p{max-width:none}

/* Attractive Premium Final CTA */
/* Attractive Premium CTA */
.public-final-cta{position:relative;overflow:hidden;background:linear-gradient(120deg,#0d2831 0%,#143b45 50%,#1b2c4e 100%);border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:46px 42px;display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:0 26px 60px -22px rgba(8,35,45,.55)}
.public-final-cta::before{content:"";position:absolute;width:360px;height:360px;right:-100px;top:-130px;background:radial-gradient(circle,rgba(244,63,94,.30),transparent 65%);pointer-events:none}
.public-final-cta::after{content:"";position:absolute;width:320px;height:320px;left:-90px;bottom:-150px;background:radial-gradient(circle,rgba(45,212,191,.20),transparent 65%);pointer-events:none}
.public-final-cta>div{position:relative;z-index:1}
.public-final-cta .eyebrow{color:#fbbf24;font-size:9px}
.public-final-cta h2{font-size:clamp(26px,3vw,34px);font-weight:750;letter-spacing:-.5px;color:#fff}
.public-final-cta h2 .grad{background:linear-gradient(90deg,#fda4af,#fbbf24);-webkit-background-clip:text;background-clip:text;color:transparent}
.public-final-cta p:not(.eyebrow){font-size:13px;color:#c3d8d2;margin-top:10px;max-width:520px;line-height:1.8}
.public-final-cta .primary-btn{position:relative;z-index:1;background:linear-gradient(135deg,#f43f5e,#ec4899);color:#fff;font-size:14px;font-weight:700;padding:16px 30px;border-radius:14px;border:0;box-shadow:0 14px 30px -10px rgba(244,63,94,.6);white-space:nowrap}
.public-final-cta .primary-btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px -10px rgba(244,63,94,.7);background:linear-gradient(135deg,#f43f5e,#ec4899)}
@media(max-width:560px){.public-final-cta{padding:34px 24px;flex-direction:column;align-items:stretch}.public-final-cta .primary-btn{width:100%;justify-content:center}}