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; --ca-ink:#0E8478; --ca-accent:#12A695; --ca-bright:#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); }
  .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); }
  .flink:hover { color:#fff; }
  .ucard { display:block; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 6px 16px rgba(12,21,56,.05); }
  .ucard-link { text-decoration:none; color:inherit; cursor:pointer; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  @media (hover: hover) and (min-width: 900px){ .ucard-link:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); } }

  /* ===== Course hero + 4-thumbnail gallery ===== */
  .ct-hero { display:grid; grid-template-columns:400px 1fr; gap:48px; align-items:center; }
  .ct-gallery-main { border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 18px 44px rgba(12,21,56,.16); background:#fff; }
  .ct-gallery-main img { display:block; width:100%; height:auto; }
  .ct-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
  .ct-thumb { padding:0; border:2px solid var(--line); border-radius:11px; 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); }
  .ct-thumb img { display:block; width:100%; height:auto; }
  @media (hover: hover) and (min-width: 900px){ .ct-thumb:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(12,21,56,.16); } }
  .ct-thumb.on { border-color:var(--ca-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--ca-bright) 18%, transparent); }

  /* ===== Year-long project arcs (optional, course-specific) ===== */
  .proj-card { background:var(--page); border:1px solid var(--line); border-radius:16px; padding:26px 28px; }

  /* ===== Course-wide bonus boxes (inside the dark bonus card) ===== */
  .bonus-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:10px; }
  .bonus-chip { display:flex; gap:9px; align-items:flex-start; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:11px 14px; font:600 14px/1.35 var(--font-body); color:#EAF0FB; }
  .bonus-chip::before { content:""; flex:0 0 7px; width:7px; height:7px; margin-top:5px; border-radius:50%; background:var(--gold); }

  /* ===== "What's in every lesson" cards ===== */
  .li-card { transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  @media (hover: hover) and (min-width: 900px){ .li-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); } }

  /* ===== Zig-zag PDF preview rows ===== */
  .zz-row { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; margin-bottom:50px; }
  .zz-row:last-child { margin-bottom:0; }
  .zz-row.rev .zz-shot { order:-1; }
  .zz-shot { display:flex; justify-content:center; }
  .zz-shot img { width:100%; max-width:330px; height:auto; border-radius:14px; border:1px solid var(--line); box-shadow:0 18px 40px rgba(12,21,56,.16); transition:transform var(--dur-slow) var(--ease-out); }
  @media (hover: hover) and (min-width: 900px){ .zz-shot img:hover { transform:scale(1.02); } }

  @media (max-width:900px){
    .ct-hero { grid-template-columns:1fr; gap:30px; }
    .zz-row { grid-template-columns:1fr; gap:22px; }
    .zz-row .zz-shot { order:-1; }
  }

  /* ===== Mobile polish (shared 860/560 breakpoints) ===== */
  @media (max-width:860px){
    .ct-hero-pad { padding:40px 24px 40px !important; }
    .ct-cta-pad { padding:56px 24px !important; }
    .ct-bonus { padding:26px 24px !important; }
    .ct-h1 { font-size:clamp(30px,6vw,42px) !important; }
    .ct-cta-h2 { font-size:clamp(28px,5vw,38px) !important; }
    .ct-sec-h2 { font-size:clamp(22px,3.6vw,27px) !important; }
  }
  @media (max-width:560px){
    .ct-hero-pad { padding:28px 16px 32px !important; }
    .ct-cta-pad { padding:44px 16px !important; }
    .ct-bonus { padding:22px 18px !important; }
    .ct-h1 { font-size:clamp(26px,8vw,40px) !important; }
    .ct-price { font-size:clamp(30px,9vw,38px) !important; }
    .ct-cta-h2 { font-size:clamp(24px,7.5vw,36px) !important; }
    .ct-sec-h2 { font-size:clamp(20px,6vw,26px) !important; }
    /* Hero buy row: stack price + CTAs, full-width buttons */
    .ct-buy-row { flex-direction:column; align-items:stretch; }
    .ct-buy-btns { margin-left:0 !important; }
    .ct-buy-btns button { flex:1 1 auto; justify-content:center; }
    /* Center the buy box price/label block + CTA row */
    .ct-buy-row > div:first-child { justify-content:center; }
    .ct-buy-btns { justify-content:center; }
    /* ===== Center product content on phones ===== */
    /* Hero info column: title, subtitle, blurb, badge pills, checklist */
    .p-info { text-align:center; }
    .p-info p { margin-left:auto; margin-right:auto; }
    .p-info > div:first-child { justify-content:center; }   /* badge/chip pill row */
    /* Checklist ✓ rows stay LEFT-aligned (centered icon-left rows read ragged) */
    .p-info .m-2to1 > span { justify-content:flex-start; text-align:left; }
    /* Feature cards: "What's in every lesson" + "Why teachers choose it" */
    .li-card, .why-card { text-align:center; }
    /* Zig-zag "see the actual pages" text column + FAQ centered */
    .zz-text { text-align:center; }
    .zz-text li { justify-content:center; }   /* exception: short, even-length rows → centered reads well here */
    .faq-list { text-align:center; }
  }