/* Page-level CSS for MPP Home v2 (ported verbatim from the Claude Design source). */
@keyframes mppFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-7px) } }
html { scroll-behavior:smooth; }
body { margin:0; background:#F5F8FD; }
.mppx { --nav:#0B1457; --nav2:#16236E; --ink:#0C1538; --tx:#4C5670; --page:#F5F8FD; --line:#E4E9F2; --gold:#F0C31F; --blue:#2563EB; --cyan:#38BDF8; --purple:#7C3AED; --teal:#14B8A6; }
.wrap { max-width:1240px; margin-inline:auto; padding-inline:56px; }
a { text-decoration:none; }
.nl { color:rgba(255,255,255,.82); font:600 14px/1 var(--font-body); display:inline-flex; align-items:center; gap:5px; }
@media (hover: hover) and (min-width: 900px) { .nl:hover { color:#fff; } }
.nl.on { color:#fff; position:relative; }
.nl.on::after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:3px; background:var(--gold); border-radius:3px; }
.stile { transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.gcard { transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.gcard img { transition:transform var(--dur-slow) var(--ease-out); }
.ctabar span { transition:transform var(--dur-base) var(--ease-out); will-change:transform; }
.flink { color:rgba(255,255,255,.6); font:14px/2 var(--font-body); transition:color var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (min-width: 900px) { .flink:hover { color:#fff; } }
/* Gentle, tasteful float for the hero photo (disabled under reduced-motion by base.css). */
.hero-float { animation:mppFloat 6s var(--ease-in-out) infinite; }

/* Interaction states are pointer-only so touch devices don't get stuck hovers. */
@media (hover: hover) and (min-width: 900px){
  .stile:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
  .gcard:hover { transform:translateY(-4px); box-shadow:0 30px 60px rgba(11,20,87,.45); }
  .gcard:hover img { transform:scale(1.04); }
  .gcard:hover .ctabar { background:rgba(255,255,255,.18) !important; }
  .gcard:hover .ctabar span { transform:translateX(5px); }
  .ctabar:hover { background:rgba(255,255,255,.18) !important; }
}

/* ---- Extra section polish: Featured Curriculum · What's Included · Free library ---- */
.feat-cover img { transition:transform var(--dur-slow) var(--ease-out); }
.inc-tile img { transition:transform var(--dur-base) var(--ease-out); }
.inc-tile { transition:transform var(--dur-base) var(--ease-out); }
.lib-thumb img { transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
@media (hover: hover) and (min-width: 900px){
  .feat-cover:hover img { transform:scale(1.06); }
  .inc-tile:hover img { transform:translateY(-6px) scale(1.08); }
  .lib-thumb:hover img { transform:translateY(-4px) scale(1.03); box-shadow:0 16px 34px rgba(0,0,0,.34); }
  .mpp-unit:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
}

/* UnitBadge (solid variant) reproduced from the design system component */
.mpp-unit { display:inline-flex; align-items:stretch; border-radius:var(--radius-md); overflow:hidden; font-family:var(--font-display); box-shadow:var(--shadow-sm); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.mpp-unit__num { display:grid; place-items:center; font-weight:900; line-height:1; padding:0 .55em; background:var(--_c); color:var(--_fg); }
.mpp-unit__meta { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:.4em .85em; background:var(--surface-card); border:1px solid var(--border-subtle); border-left:none; }
.mpp-unit__kicker { font-family:var(--font-body); font-weight:700; font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.mpp-unit__title { font-weight:800; color:var(--text-strong); letter-spacing:-.01em; }
.mpp-unit--solid .mpp-unit__meta { background:var(--_c); border-color:transparent; }
.mpp-unit--solid .mpp-unit__kicker, .mpp-unit--solid .mpp-unit__title { color:var(--_fg); }

/* Responsive: collapse the multi-column grids on smaller screens (keeps the desktop design exact at >=980px) */
@media (max-width:980px){
  .wrap{ padding-inline:24px; }
}

/* ===== Mobile reflow (Phase 2) =========================================
   Inline grids/paddings can't be overridden by a plain class, so these use
   !important. Utilities stack the multi-column sections cleanly on phones. */
/* Generic m-stack / m-2 / m-3 / m-2to1 utilities live globally in MppLayout. */
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr !important; gap:34px !important; padding:44px 24px 52px !important; }
  .hero-h1{ font-size:clamp(38px, 8.5vw, 52px) !important; }
  .feat-pad{ padding:32px 24px !important; }
  .lib-pad{ padding:36px 26px !important; }
}
@media (max-width:560px){
  .hero-grid{ padding:30px 16px 40px !important; gap:26px !important; }
  .hero-h1{ font-size:clamp(30px, 8vw, 40px) !important; }
  .feat-pad{ padding:24px 18px !important; }
  .lib-pad{ padding:26px 18px !important; }
  .feat-cover{ width:100% !important; height:auto !important; aspect-ratio:1/1; }
}

/* ===== Mobile fixes (home punch-list) ===== */
@media (max-width:860px){
  .lib-thumbs{ margin-top:0 !important; }   /* kill the extra gap under "No spam" */
  /* Home "Hi, I'm Madi" bio → centered */
  .home-bio{ text-align:center; }
  .home-bio > div:last-child > div{ justify-content:center; }
  .home-bio p{ margin-left:auto; margin-right:auto; }
}
@media (max-width:560px){
  /* Trust strip → clean centered checklist (drop the • separators) */
  .trust-strip{ flex-direction:column; align-items:center; gap:13px !important; padding:22px 24px !important; }
  .trust-dot{ display:none !important; }
  .trust-strip > span{ white-space:normal !important; text-align:center; }
  /* (Section-header mobile rules moved to MppLayout global so all pages share them.) */
  /* Featured course price + buttons centered */
  .feat-price-row{ justify-content:center !important; }
  /* Unit tiles → 2-up, wrapping titles, auto height (no empty right space) */
  .unit-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .unit-grid .mpp-unit{ height:auto !important; min-height:54px; }
  .unit-grid .mpp-unit__title{ white-space:normal !important; }
  /* Business Minds band → keep only the tagline (smaller), drop the 3 items */
  .bm-items{ display:none !important; }
  .bm-h2{ font-size:clamp(18px,5.4vw,26px) !important; }
  .bm-wrap{ padding:34px 20px !important; }
}