/* ===========================================================================
   pages.css — the static landing pages and board pages
   ---------------------------------------------------------------------------
   Loaded ONLY on those pages (see $load_pages_css in site/partials/head.php),
   so the homepage and the blog are not made to pay for it.

   Everything here uses the tokens already declared in site.css — --n, --g,
   --m, --b, --ink, --card-r, --sec-y. Nothing redefines them, so a brand
   change still happens in one place.

   Class prefix is mm- throughout to keep these out of the way of the classes
   site.css and blog.css already own.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   TOP OF PAGE
   A quieter hero than the homepage's: no illustration, no floating cards.
   These pages are entered from a search result, so the job is to confirm in
   two seconds that the visitor is in the right place, not to perform.
   --------------------------------------------------------------------------- */
.mm-top{
  padding:calc(var(--h) + clamp(26px,4vw,44px)) 0 clamp(34px,4.5vw,54px);
  background:
    radial-gradient(760px 320px at 88% -10%, rgba(47,145,105,.10), transparent 62%),
    linear-gradient(180deg,#f7f9fc 0%,#fff 100%);
  border-bottom:1px solid var(--b);
}
.mm-top .crumb{margin:0 0 clamp(14px,2vw,20px)}
.mm-top .eyebrow{margin:0 0 12px}
.mm-top h1{
  margin:0 0 16px;
  font-size:clamp(29px,4.6vw,50px);
  line-height:1.14;
  letter-spacing:-.5px;
  color:var(--n);
  max-width:19ch;
}
.mm-top .lead{
  margin:0;
  font-size:clamp(15.5px,1.75vw,18.5px);
  color:#41506b;
  max-width:62ch;
}
.mm-top .lead a{color:var(--g);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.mm-top .actions{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(22px,3vw,30px) 0 0}
.mm-top .checks{
  display:grid;gap:10px 26px;margin:clamp(22px,3vw,30px) 0 0;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  font-family:"Poppins",sans-serif;font-size:14px;color:#43516a;
}
.mm-top .checks div{display:flex;align-items:flex-start;gap:9px}
.mm-top .checks b{color:var(--g);flex:none;line-height:1.55}

/* A Hindi headline in Baloo 2 sits tight; Devanagari needs the extra room. */
html[lang^="hi"] .mm-top h1{line-height:1.3;max-width:22ch}
html[lang^="hi"] .mm-top .lead{line-height:1.8}
html[lang^="hi"] .sub,
html[lang^="hi"] .mm-card p,
html[lang^="hi"] .mm-steps p{line-height:1.85}

/* ---------------------------------------------------------------------------
   PROSE
   The unboxed sibling of .answer, for body copy that should not look like a
   pull-quote. Same measure, so the two read as one page.
   --------------------------------------------------------------------------- */
.mm-prose{max-width:74ch;margin-inline:auto}
.mm-prose p{margin:0 0 15px;font-size:clamp(15px,1.6vw,16.5px);color:#3c4a63}
.mm-prose p:last-child{margin-bottom:0}
.mm-prose a{color:var(--g);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.mm-prose em{color:var(--n)}

/* ---------------------------------------------------------------------------
   CARDS
   --------------------------------------------------------------------------- */
.mm-cards{
  display:grid;gap:clamp(14px,1.8vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  margin-top:clamp(24px,3vw,34px);
}
.mm-card{
  background:#fff;border:1px solid var(--b);border-radius:var(--card-r);
  padding:clamp(20px,2.4vw,26px);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.mm-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,39,91,.09);border-color:#d3ddec}
.mm-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:13px;margin-bottom:14px;
  background:linear-gradient(135deg,#eef3fb,#e3f2ea);font-size:22px;line-height:1;
}
.mm-card h3{margin:0 0 8px;font-size:clamp(17px,1.9vw,19px);color:var(--n)}
.mm-card p{margin:0;font-size:14.5px;color:var(--m);line-height:1.7}

/* ---------------------------------------------------------------------------
   NUMBERED STEPS
   Used for "how it runs" on a landing page and for the month-by-month plan
   on a board page, which is why the number is a date-sized chip rather than
   a small bullet: on the board pages it carries real meaning.
   --------------------------------------------------------------------------- */
.mm-steps{
  list-style:none;margin:clamp(24px,3vw,34px) 0 0;padding:0;
  display:grid;gap:clamp(12px,1.6vw,16px);
}
.mm-steps li{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  background:#fff;border:1px solid var(--b);border-radius:var(--card-r);
  padding:clamp(17px,2.1vw,22px) clamp(18px,2.3vw,24px);
}
.mm-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;flex:none;
  background:linear-gradient(135deg,var(--n2),var(--n));color:#fff;
  font-family:"Poppins",sans-serif;font-weight:700;font-size:15px;
}
.mm-steps h3{margin:0 0 5px;font-size:clamp(16.5px,1.85vw,18.5px);color:var(--n)}
.mm-steps p{margin:0;font-size:14.5px;color:var(--m);line-height:1.7}

/* ---------------------------------------------------------------------------
   COMPARISON TABLE
   Collapses to stacked cards under 760px, using the data-label attribute the
   template writes on every cell — the same pattern the homepage table uses,
   so the two behave identically on a phone.
   --------------------------------------------------------------------------- */
.mm-table{width:100%;border-collapse:collapse;background:#fff;font-size:14.5px}
.mm-table th,.mm-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--b);vertical-align:top}
.mm-table thead th{
  background:var(--n);color:#fff;font-family:"Poppins",sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.2px;border-bottom:0;
}
.mm-table thead th:first-child{border-radius:12px 0 0 0}
.mm-table thead th:last-child{border-radius:0 12px 0 0}
.mm-table tbody th{color:var(--n);font-weight:600;width:22%}
.mm-table tbody td{color:#46546d}
/* Last column is the one we are arguing for — tinted, not shouted. */
.mm-table tbody td:last-child{background:#f4faf7;color:var(--ink);font-weight:500}
.mm-table tbody tr:last-child th,
.mm-table tbody tr:last-child td{border-bottom:0}

@media(max-width:760px){
  .mm-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mm-table,.mm-table tbody,.mm-table tr,.mm-table th,.mm-table td{display:block;width:auto}
  .mm-table tr{border:1px solid var(--b);border-radius:14px;margin-bottom:12px;overflow:hidden}
  .mm-table tbody th{background:#f7f9fc;width:auto;font-size:15px;border-bottom:1px solid var(--b)}
  .mm-table tbody td{padding-top:9px}
  .mm-table tbody td::before{
    content:attr(data-label);display:block;
    font-family:"Poppins",sans-serif;font-size:11.5px;letter-spacing:.4px;
    text-transform:uppercase;color:#8a94a6;margin-bottom:3px;
  }
  .mm-table tbody td:last-child{background:#f4faf7}
}

/* ---------------------------------------------------------------------------
   TWO-COLUMN SPLIT  (this is for you / this is not)
   The "no" column is deliberately not red. It is not a warning, it is an
   honest boundary, and colouring it like an error reads as a scare tactic.
   --------------------------------------------------------------------------- */
.mm-split{
  display:grid;gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:clamp(24px,3vw,34px);
}
.mm-col{border:1px solid var(--b);border-radius:var(--card-r);padding:clamp(20px,2.4vw,28px);background:#fff}
.mm-col.yes{border-color:#cfe7dc;background:linear-gradient(180deg,#f5fbf8,#fff 55%)}
.mm-col.no{background:linear-gradient(180deg,#f8f9fc,#fff 55%)}
.mm-col-head{margin-bottom:14px}
.mm-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;margin-bottom:10px;
  font-weight:700;font-family:"Poppins",sans-serif;
  background:#eef2f8;color:var(--m);
}
.mm-col.yes .mm-badge{background:#e7f4ed;color:var(--g)}
.mm-col-head h3{margin:0;font-size:clamp(17px,1.95vw,19.5px);color:var(--n)}
.mm-col-note{
  margin:4px 0 0;font-family:"Poppins",sans-serif;
  font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:#8a94a6;
}
.mm-col ul{margin:0;padding:0;list-style:none}
.mm-col li{
  position:relative;padding:9px 0 9px 22px;
  font-size:14.5px;color:#45536c;line-height:1.7;
  border-top:1px solid rgba(0,0,0,.05);
}
.mm-col li:first-child{border-top:0}
.mm-col li::before{
  content:"";position:absolute;left:2px;top:17px;
  width:7px;height:7px;border-radius:50%;background:#c4cedd;
}
.mm-col.yes li::before{background:var(--g)}
.mm-col li strong{color:var(--n)}

/* ---------------------------------------------------------------------------
   LINK GRID  (board lists, related pages)
   --------------------------------------------------------------------------- */
.mm-links{
  display:grid;gap:clamp(11px,1.5vw,14px);
  grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  margin-top:clamp(24px,3vw,34px);
}
.mm-link{
  display:block;background:#fff;border:1px solid var(--b);
  border-radius:14px;padding:16px 18px;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.mm-link:hover{transform:translateY(-2px);border-color:var(--g);box-shadow:0 10px 26px rgba(16,39,91,.08)}
.mm-link strong{display:block;color:var(--n);font-family:"Baloo 2",sans-serif;font-size:16.5px;line-height:1.35}
.mm-link span{display:block;margin-top:4px;font-size:13.5px;color:var(--m);line-height:1.6}
.mm-link::after{content:" →";color:var(--g);font-weight:700}

/* ---------------------------------------------------------------------------
   FACT LIST  (board pages)
   --------------------------------------------------------------------------- */
.mm-facts{
  display:grid;gap:0;margin:clamp(24px,3vw,34px) 0 0;
  background:#fff;border:1px solid var(--b);border-radius:var(--card-r);overflow:hidden;
}
.mm-facts>div{
  display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:10px 22px;
  padding:15px clamp(18px,2.2vw,24px);border-top:1px solid var(--b);
}
.mm-facts>div:first-child{border-top:0}
.mm-facts dt{
  margin:0;font-family:"Poppins",sans-serif;font-size:12.5px;
  letter-spacing:.3px;text-transform:uppercase;color:#8a94a6;align-self:center;
}
.mm-facts dd{margin:0;font-size:15px;color:var(--ink);font-weight:500;line-height:1.65}
/* Devanagari labels do not suit uppercase or letter-spacing. */
html[lang^="hi"] .mm-facts dt{text-transform:none;letter-spacing:0;font-size:13.5px;font-family:inherit}
@media(max-width:620px){
  .mm-facts>div{grid-template-columns:1fr;gap:3px}
}

/* ---------------------------------------------------------------------------
   CALLOUT
   --------------------------------------------------------------------------- */
.mm-note{
  max-width:74ch;margin-inline:auto;
  background:linear-gradient(135deg,#f4faf7,#f7f9fc);
  border:1px solid #cfe7dc;border-left:4px solid var(--g);
  border-radius:14px;padding:clamp(18px,2.2vw,24px) clamp(20px,2.4vw,28px);
  font-size:15px;color:#3c4a63;line-height:1.75;
}
.mm-note strong{color:var(--n)}
.mm-note a{color:var(--g);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------------------
   UTILITIES
   --------------------------------------------------------------------------- */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  .mm-card,.mm-link{transition:none}
  .mm-card:hover,.mm-link:hover{transform:none}
}