/* =============================================================================
   /assets/styles/home-plus.css
   Loaded AFTER index.css and home.css on the homepage.

   WHY THIS FILE EXISTS
   The markup in index.php was renamed at some point but home.css was never
   updated, so several blocks had NO styles at all and rendered as raw text:

       markup used            home.css defines
       ─────────────────      ────────────────────
       .mmtSection--alt   →   .mmtSection--tint     (missing)
       .mmtFeatGrid       →   .mmtFeatureGrid       (missing)
       .mmtFeat*          →   .mmtFeature*          (missing)
       .mmtCtaBand*       →   .mmtCta*              (missing)

   This file supplies the missing names in the same visual language, adds the
   new FAQ block, and tightens responsive behaviour across phone/tablet/desktop.
   home.css is left untouched, so this is fully reversible — just remove the
   <link> tag in index.php.
============================================================================= */

/* =====================================================================
   1. SECTION TONES
===================================================================== */
.mmtSection--alt{
  background:
    radial-gradient(1000px 500px at 10% 100%, rgba(37,99,235,.05), transparent 60%),
    radial-gradient(800px 400px at 100% 0%,  rgba(124,58,237,.05), transparent 60%),
    #fafbff;
  border-top: 1px solid var(--mmt-border);
  border-bottom: 1px solid var(--mmt-border);
}

/* Consistent vertical rhythm between stacked sections */
.mmtSection + .mmtSection{ padding-top: 56px; }

/* =====================================================================
   2. FEATURE GRID  (.mmtFeatGrid / .mmtFeat)
===================================================================== */
.mmtFeatGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.mmtFeat{
  --tone: var(--mmt-primary);
  background: #fff;
  border: 1px solid var(--mmt-border);
  border-radius: var(--mmt-radius);
  padding: 26px 24px;
  box-shadow: var(--mmt-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mmtFeat:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--tone) 16%, rgba(2,6,23,.08));
  border-color: color-mix(in srgb, var(--tone) 32%, var(--mmt-border));
}
.mmtFeat__icon{
  width: 54px; height: 54px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tone) 12%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--tone) 26%, transparent);
  color: var(--tone);
  font-size: 21px;
  margin-bottom: 16px;
}
.mmtFeat__title{
  font-size: 17.5px; font-weight: 700;
  margin: 0 0 7px; color: var(--mmt-text);
}
.mmtFeat__text{
  font-size: 14.5px; line-height: 1.6;
  color: var(--mmt-muted); margin: 0;
}

/* =====================================================================
   3. CTA BAND  (.mmtCtaBand)
===================================================================== */
.mmtCtaBand{
  background: var(--mmt-grad);
  color: #fff;
  padding: 46px 0;
  position: relative;
  overflow: hidden;
}
.mmtCtaBand::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 260px at 15% 0%,   rgba(255,255,255,.18), transparent 60%),
    radial-gradient(500px 240px at 85% 100%, rgba(255,255,255,.12), transparent 62%);
}
.mmtCtaBand__inner{
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
/* NOTE ON SPECIFICITY
   home.css line 37 sets `body.mmtHome h1,h2,h3,h4 { color: var(--mmt-text) }`
   (specificity 0,0,1,2), which outranks a bare `.mmtCtaBand__title` (0,0,1,0)
   and painted this heading dark navy on the blue gradient. Qualifying with
   `body.mmtHome` (0,0,2,1) wins it back. Same trick below for the FAQ heading. */
body.mmtHome .mmtCtaBand__title{
  font-size: clamp(21px, 3vw, 31px);
  font-weight: 800; margin: 0 0 8px; color: #fff;
}
.mmtCtaBand__text{
  margin: 0; font-size: 15.5px; line-height: 1.55;
  color: rgba(255,255,255,.90); max-width: 620px;
}
.mmtCtaBand .mmtBtn--white{
  background: #fff; color: var(--mmt-primary);
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(2,6,23,.18);
  flex: 0 0 auto;
}
.mmtCtaBand .mmtBtn--white:hover{ background:#f5f7ff; box-shadow: 0 16px 34px rgba(2,6,23,.22); }

/* =====================================================================
   4. FAQ  (new block — fixes the dead #faq link in the header/drawer)
===================================================================== */
.mmtFaq{ display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.mmtFaq__item{
  background: #fff;
  border: 1px solid var(--mmt-border);
  border-radius: var(--mmt-radius-sm);
  box-shadow: var(--mmt-shadow-sm);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mmtFaq__item[open]{
  border-color: color-mix(in srgb, var(--mmt-primary) 32%, var(--mmt-border));
  box-shadow: 0 14px 32px rgba(37,99,235,.10);
}
.mmtFaq__q{
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px;
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  font-size: 16px; font-weight: 700; color: var(--mmt-text);
  -webkit-tap-highlight-color: transparent;
}
.mmtFaq__q::-webkit-details-marker{ display: none; }
.mmtFaq__q::after{
  content:''; flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--mmt-primary);
  border-bottom: 2px solid var(--mmt-primary);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .22s ease;
}
.mmtFaq__item[open] .mmtFaq__q::after{ transform: rotate(-135deg) translate(-2px,-2px); }
.mmtFaq__q:focus-visible{ outline: 2px solid var(--mmt-primary); outline-offset: -2px; }
.mmtFaq__a{
  padding: 0 20px 18px;
  font-size: 14.8px; line-height: 1.65; color: var(--mmt-muted);
  margin: 0;
}
.mmtFaq__a a{ color: var(--mmt-primary); font-weight: 600; }

/* =====================================================================
   5. RESPONSIVE POLISH
   home.css stops at 940/820/760 — these fill the real-world gaps.
===================================================================== */

/* --- Never let anything push the page sideways on any device --- */
html, body{ max-width: 100%; overflow-x: hidden; }
body.mmtHome img{ max-width: 100%; height: auto; }

/* --- Large tablets / small laptops --- */
@media (max-width: 1024px){
  .mmtSection{ padding: 48px 0; }
  .mmtSection + .mmtSection{ padding-top: 48px; }
  .mmtExamGrid{ grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
  .mmtFeatGrid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* --- Tablets (portrait) --- */
@media (max-width: 860px){
  .mmtSection__head{ align-items: flex-start; }
  .mmtCtaBand{ padding: 38px 0; }
  .mmtCtaBand__inner{ flex-direction: column; align-items: flex-start; gap: 20px; }
  .mmtCtaBand .mmtBtn--white{ width: 100%; }
}

/* --- Phones --- */
@media (max-width: 640px){
  .mmtSection{ padding: 38px 0; }
  .mmtSection + .mmtSection{ padding-top: 38px; }
  .mmtSection__head{ margin-bottom: 20px; }
  .mmtSection__head .mmtBtn--sm{ display: none; }   /* "View all" repeats below the grid */

  /* Two comfortable exam tiles per row instead of one giant card */
  .mmtExamGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mmtExamCard{ padding: 16px 13px 14px; }
  .mmtExamCard__title{ font-size: 14.5px; line-height: 1.35; }
  .mmtExamCard__cta{ font-size: 12.5px; }

  .mmtFeatGrid{ grid-template-columns: 1fr; gap: 12px; }
  .mmtFeat{ padding: 20px 18px; }
  .mmtFeat__icon{ width: 46px; height: 46px; border-radius: 13px; font-size: 18px; margin-bottom: 12px; }

  .mmtFaq__q{ font-size: 15px; padding: 15px 16px; }
  .mmtFaq__a{ padding: 0 16px 16px; font-size: 14.2px; }

  .mmtViewAll .mmtBtn{ width: 100%; }
  .mmtHero__cta .mmtBtn{ flex: 1 1 auto; justify-content: center; }
}

/* --- Small phones --- */
@media (max-width: 400px){
  .mmtExamGrid{ grid-template-columns: 1fr; }
  .mmtTrust{ gap: 10px; }
  .mmtCtaBand__text{ font-size: 14.5px; }
}

/* --- Accessibility floor --- */
@media (prefers-reduced-motion: reduce){
  .mmtFeat, .mmtFaq__item, .mmtFaq__q::after{ transition: none !important; }
  .mmtFeat:hover{ transform: none; }
}

/* =====================================================================
   6. BENTO FEATURE SECTION
   Replaces the flat 3x2 icon grid. One signature card (the question
   palette — the single most recognisable artefact in the aspirant's
   world) carries the weight; everything around it stays quiet.

   Grid is 12-col on desktop:
     row 1-2 :  hero (7)  +  analytics (5) / bilingual (5)
     row 3   :  three cards (4 + 4 + 4)
===================================================================== */
.mmtBento{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: stretch;
}
.mmtBento__card{
  --tone: var(--mmt-primary);
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mmt-border);
  border-radius: var(--mmt-radius);
  padding: 24px 22px;
  box-shadow: var(--mmt-shadow-sm);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* Tone wash bleeding in from the top-left corner — ties each card to its accent */
.mmtBento__card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(420px 200px at 0% 0%,
              color-mix(in srgb, var(--tone) 9%, transparent), transparent 70%);
}
.mmtBento__card > *{ position: relative; }
.mmtBento__card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 44px color-mix(in srgb, var(--tone) 18%, rgba(2,6,23,.09));
  border-color: color-mix(in srgb, var(--tone) 34%, var(--mmt-border));
}

.mmtBento__icon{
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: 14px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tone) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--tone) 26%, transparent);
  color: var(--tone);
  font-size: 19px;
  margin-bottom: 15px;
}
body.mmtHome .mmtBento__title{
  font-size: 18px; font-weight: 700; line-height: 1.3;
  margin: 0 0 8px; color: var(--mmt-text);
}
.mmtBento__text{
  font-size: 14.5px; line-height: 1.6;
  color: var(--mmt-muted); margin: 0;
}
.mmtBento__link{
  margin-top: auto; padding-top: 14px;
  font-size: 14px; font-weight: 700; color: var(--tone);
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
}
.mmtBento__link i{ font-size: 11px; transition: transform .18s ease; }
.mmtBento__card:hover .mmtBento__link i{ transform: translateX(3px); }

/* ---------- Card spans ---------- */
.mmtBento__card--hero { grid-column: span 7; grid-row: span 2; }
.mmtBento__card--wide { grid-column: span 5; }
.mmtBento__card--third{ grid-column: span 4; }

/* ---------- Hero card: copy left, palette right ---------- */
.mmtBento__card--hero{
  flex-direction: row; align-items: center; gap: 26px;
  padding: 28px 26px;
}
.mmtBento__copy{ flex: 1 1 auto; min-width: 0; }
body.mmtHome .mmtBento__card--hero .mmtBento__title{ font-size: 21px; }
.mmtBento__demo{ flex: 0 0 auto; width: 236px; }

/* ---------- The question palette ---------- */
.mmtPalette{
  background: linear-gradient(180deg,#f8fafc,#eef2f9);
  border: 1px solid rgba(15,23,42,.11);
  border-radius: 14px;
  padding: 11px;
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
}
.mmtPalette__bar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.mmtPalette__sec{
  font-size: 10.5px; font-weight: 700; color: #334155;
  letter-spacing: .02em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.mmtPalette__timer{
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: 11px; font-weight: 700; color: #b91c1c;
  background: #fee2e2; border: 1px solid #fecaca;
  padding: 3px 8px; border-radius: 999px;
}
.mmtPalette__timer i{ font-size: 9.5px; }
.mmtPalette__timer b{ font-variant-numeric: tabular-nums; }

.mmtPalette__grid{
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;
}
.mmtPalette__grid span{
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: 7px;
  font-size: 11px; font-weight: 700;
  background: #fff; color: #64748b;
  border: 1px solid rgba(15,23,42,.12);
}
.mmtPalette__grid .is-done{ background:#22c55e; border-color:#16a34a; color:#fff; }
.mmtPalette__grid .is-skip{ background:#ef4444; border-color:#dc2626; color:#fff; }
.mmtPalette__grid .is-mark{ background:#7c3aed; border-color:#6d28d9; color:#fff; }
.mmtPalette__grid .is-now{
  background:#fff; color:#2563eb; border-color:#2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.20);
}

.mmtPalette__key{
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(15,23,42,.09);
  font-size: 9.5px; color: #64748b; font-weight: 600;
}
.mmtPalette__key span{ display: inline-flex; align-items: center; gap: 4px; }
.mmtPalette__key .k{ width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
.mmtPalette__key .k--done{ background:#22c55e; }
.mmtPalette__key .k--skip{ background:#ef4444; }
.mmtPalette__key .k--mark{ background:#7c3aed; }

/* ---------- Analytics bars ---------- */
.mmtBars{ margin-top: 18px; display: grid; gap: 10px; }
.mmtBars__row{
  display: grid; grid-template-columns: 68px 1fr 38px;
  align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; color: var(--mmt-muted);
}
.mmtBars__row i{
  height: 8px; border-radius: 999px;
  background: rgba(15,23,42,.08);
  position: relative; overflow: hidden;
}
.mmtBars__row i::after{
  content:''; position: absolute; inset: 0 auto 0 0;
  width: var(--v);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 55%, #ec4899));
}
.mmtBars__row b{ text-align: right; color: var(--mmt-text); font-variant-numeric: tabular-nums; }
.mmtBars__row--weak b{ color: #dc2626; }
.mmtBars__row--weak i::after{ background: linear-gradient(90deg,#f97316,#dc2626); }

/* ---------- Bilingual demo ---------- */
.mmtLang{
  margin-top: 18px; padding: 13px 14px;
  background: #f8fafc; border: 1px solid rgba(15,23,42,.09);
  border-radius: 12px;
}
.mmtLang__toggle{
  display: inline-flex; padding: 3px; gap: 2px; margin-bottom: 10px;
  background: #e2e8f0; border-radius: 999px;
}
.mmtLang__toggle span{
  font-size: 11px; font-weight: 700; color: #64748b;
  padding: 4px 12px; border-radius: 999px;
}
.mmtLang__toggle .is-on{ background: #fff; color: var(--tone); box-shadow: 0 2px 6px rgba(2,6,23,.12); }
.mmtLang__q{ margin: 0; font-size: 12.5px; line-height: 1.5; color: #334155; }
.mmtLang__q b{ color: var(--mmt-text); }
.mmtLang__q--hi{ margin-top: 5px; color: #64748b; }

/* ---------- Year chips ---------- */
.mmtYears{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.mmtYears span{
  font-size: 11.5px; font-weight: 700; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--tone) 24%, transparent);
  padding: 4px 10px; border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Scroll reveal ---------- */
.mmtBento__card{ opacity: 1; }
.mmtBento.is-armed .mmtBento__card{ opacity: 0; transform: translateY(14px); }
.mmtBento.is-armed .mmtBento__card.is-in{
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.8,.3,1);
}

/* =====================================================================
   7. BENTO RESPONSIVE
===================================================================== */
@media (max-width: 1079px){
  .mmtBento__card--hero { grid-column: 1 / -1; grid-row: auto; }
  .mmtBento__card--wide { grid-column: span 6; }
  .mmtBento__card--third{ grid-column: span 4; }
  .mmtBento__demo{ width: 210px; }
}

@media (max-width: 860px){
  .mmtBento__card--wide { grid-column: span 6; }
  .mmtBento__card--third{ grid-column: span 6; }
  .mmtBento__card--third:last-child{ grid-column: 1 / -1; }
}

@media (max-width: 700px){
  .mmtBento{ gap: 12px; }
  .mmtBento__card,
  .mmtBento__card--hero,
  .mmtBento__card--wide,
  .mmtBento__card--third,
  .mmtBento__card--third:last-child{ grid-column: 1 / -1; }

  /* Hero stacks: copy first, palette below at full width */
  .mmtBento__card--hero{ flex-direction: column; align-items: stretch; gap: 18px; padding: 22px 18px; }
  .mmtBento__demo{ width: 100%; }
  .mmtPalette__grid{ grid-template-columns: repeat(9, 1fr); }

  .mmtBento__card{ padding: 20px 18px; }
  .mmtBento__icon{ width: 42px; height: 42px; border-radius: 12px; font-size: 17px; margin-bottom: 12px; }
  body.mmtHome .mmtBento__title{ font-size: 17px; }
  body.mmtHome .mmtBento__card--hero .mmtBento__title{ font-size: 19px; }
}

@media (max-width: 420px){
  .mmtPalette__grid{ grid-template-columns: repeat(6, 1fr); }
  .mmtBars__row{ grid-template-columns: 58px 1fr 34px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce){
  .mmtBento.is-armed .mmtBento__card{ opacity: 1; transform: none; }
  .mmtBento__card{ transition: none !important; }
  .mmtBento__card:hover{ transform: none; }
}