html { scroll-behavior:smooth; }
body { margin:0; background:#F5F8FD; }
.mppx { --nav:#0B1457; --ink:#0C1538; --tx:#4C5670; --page:#F5F8FD; --line:#E4E9F2; --gold:#F0C31F; --blue:#2563EB; --cyan:#38BDF8; --purple:#7C3AED; --teal:#14B8A6; --fd-accent:#2563EB; --fd-ink:#2563EB; --fd-bright:#38BDF8; }
.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); }
@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; }
.flink { color:rgba(255,255,255,.6); }
@media (hover: hover) and (min-width: 900px) { .flink:hover { color:#fff; } }

/* ===== Gallery ===== */
.fd-gallery { position:sticky; top:100px; }
.fd-main { position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 18px 44px rgba(12,21,56,.12); background:#fff; }
.fd-main img { display:block; width:100%; height:auto; transition:transform var(--dur-slow) var(--ease-out); }
.fd-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; }
.fd-thumb { padding:0; border:2px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer; background:#fff; transition:border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.fd-thumb img { display:block; width:100%; height:auto; }
@media (hover: hover) and (min-width: 900px){
  .fd-main:hover img { transform:scale(1.03); }
  .fd-thumb:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(12,21,56,.16); }
}
.fd-thumb.on { border-color:var(--fd-accent); box-shadow:0 0 0 3px rgba(12,21,56,.09); }

/* ===== Chips / badges ===== */
.fchip { display:inline-flex; align-items:center; gap:7px; font:700 12px/1 var(--font-body); padding:7px 12px; border-radius:999px; }
.fchip-free { background:var(--gold); color:var(--nav); }
.fchip-soft { background:#EEF2FB; color:#46506B; }

/* ===== Highlights mini-grid ===== */
.fd-hi { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.fd-hi-row { display:flex; gap:10px; align-items:flex-start; }
.fd-hi-row b { font:800 13px/1.2 var(--font-body); color:var(--ink); display:block; }
.fd-hi-row span { font:13px/1.3 var(--font-body); color:var(--tx); }

/* ===== Section heading ===== */
.fd-h2 { font-family:var(--font-display); font-weight:800; font-size:28px; line-height:1.1; color:var(--ink); margin:0 0 6px; letter-spacing:-.01em; }
.fd-kicker { font:800 12px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--fd-ink); }

/* ===== Optional escape-hatch section body ===== */
.fd-prose { font:16px/1.7 var(--font-body); color:var(--tx); }
.fd-prose :is(h3) { font-family:var(--font-display); color:var(--ink); }

/* ===== What's Included ===== */
.inc-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.inc-group { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:0 6px 18px rgba(12,21,56,.05); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
@media (hover: hover) and (min-width: 900px){ .inc-group:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); } }
.inc-group h3 { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--ink); margin:0 0 12px; }
.inc-group h3 img { width:30px; height:30px; }
.inc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.inc-list li { display:flex; gap:9px; font:14px/1.4 var(--font-body); color:var(--tx); }
.inc-list li::before { content:""; flex:0 0 7px; width:7px; height:7px; margin-top:6px; border-radius:50%; background:var(--fd-accent); }

/* ===== Why it stands out ===== */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.why-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 6px 18px rgba(12,21,56,.05); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
@media (hover: hover) and (min-width: 900px){ .why-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); } }
.why-card img { width:40px; height:40px; margin-bottom:12px; }
.why-card b { display:block; font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--ink); margin-bottom:6px; }
.why-card p { margin:0; font:14px/1.5 var(--font-body); color:var(--tx); }

/* ===== FAQ ===== */
.faq-item { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 22px; margin-bottom:12px; }
.faq-item h3 { font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink); margin:0 0 8px; }
.faq-item p { margin:0; font:15px/1.6 var(--font-body); color:var(--tx); }

/* ===== "Save when you bundle" cross-sell (paid lessons) ===== */
.ls-bundle { display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:#F1F5FF; border:1px solid var(--line); border-radius:16px; padding:22px 26px; }

/* ===== Scenario card ===== */
.scn-card { position:relative; overflow:hidden; border-radius:18px; padding:32px 34px; background:linear-gradient(135deg,#101C4E,#3B0873); color:#fff; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
@media (hover: hover) and (min-width: 900px){ .scn-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-brand); } }
.scn-card .dots { position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px, rgba(56,189,248,.16) 1.5px, transparent 0); background-size:30px 30px; }

/* ===== Icon placeholder (where no unique custom icon fits yet) ===== */
.ph-ic { display:inline-flex; align-items:center; justify-content:center; border-radius:9px; background:#F1F4FB; border:1.5px dashed #C7D0E4; box-sizing:border-box; flex:0 0 auto; vertical-align:middle; }
.ph-ic::after { content:""; width:36%; height:36%; border-radius:4px; border:1.5px dashed #AEB7CC; }

/* ===== Responsive ===== */
@media (max-width:980px){
  .wrap { padding-inline:24px; }
  .fd-grid { grid-template-columns:1fr !important; }
  .fd-gallery { position:static; }
  .inc-grid, .why-grid, .fd-hi { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .why-grid { grid-template-columns:1fr; }
}

/* ===== Mobile polish (shared 860/560 breakpoints) ===== */
@media (max-width:860px){
  .fd-gallery { position:static !important; }
  .fd-h2 { font-size:clamp(22px,4.5vw,28px); }
  .scn-card { padding:32px 26px; }
}
@media (max-width:560px){
  .fd-h1 { font-size:clamp(28px,8vw,40px) !important; }
  .fd-h2 { font-size:clamp(21px,6vw,28px); }
  .scn-card { padding:26px 18px; }
  .scn-card h2 { font-size:clamp(20px,5.5vw,26px) !important; }
  .ls-bundle { flex-direction:column; align-items:stretch; text-align:left; }
  .ls-bundle > div:last-child { flex-direction:column; align-items:stretch; }
  .ls-bundle > div:last-child a { justify-content:center; width:100%; box-sizing:border-box; }

  /* ===== Center product-page content on phones ===== */
  /* Hero info column: title, kicker, blurb, chip row, highlights */
  .p-info { text-align:center; }
  .p-info > p { margin-left:auto; margin-right:auto; }
  .p-info > div[style*="flex-wrap:wrap"] { justify-content:center; }
  .fd-hi-row { justify-content:flex-start; text-align:left; }   /* icon-left rows stay left */

  /* Buy box (LessonPage): center price/label block + CTA row */
  .ls-buy-row { text-align:center; }
  .ls-buy-btns { justify-content:center; }

  /* Unlock box (FreebieDetail): center the get/download area */
  #fd-get { text-align:center; }
  #fd-get .mpp-sub-row, #fd-get .mpp-unlock-row { justify-content:center; }

  /* Feature cards: "What's Included" has an icon-left h3 + bullet list → keep LEFT.
     "Why" cards have an icon on TOP → keep centered. */
  .inc-group { text-align:left; }
  .inc-group h3 { justify-content:flex-start; }
  .why-card { text-align:center; }
  .why-card img { margin-left:auto; margin-right:auto; }

  /* FAQ items centered */
  .faq-item { text-align:center; }

  /* "What does this lesson cover?" body paragraphs centered (just prose) */
  .fd-covers p { text-align:center; }

  /* Section headings + kickers centered (What does this cover / Everything included / Why teachers love / Questions teachers ask, etc.) */
  .fd-kicker, .fd-h2 { text-align:center; }
  /* "Save when you bundle" cross-sell box centered */
  .ls-bundle { text-align:center !important; }
}