/* classes.css - the subject class pages (/maths-classes.html, /physics-classes.html,
   /cs-classes.html). Site tokens from styles.css; page-only tokens below. */
:root {
  --mc-hero-a: #2E1B4A; --mc-hero-b: #4C2E72; --mc-hero-ink: #fff; --mc-hero-sub: rgba(255,255,255,.8);
  --mc-gold: #E8913A; --mc-gold-ink: #2b1606; --mc-wa: #25D366; --mc-wa-ink: #06301a;
  --mc-glass: rgba(255,255,255,.08); --mc-glass-line: rgba(255,255,255,.16);
  --mc-price: #B0541C; --mc-shadow: 0 10px 30px rgba(46,27,74,.08);
}
html[data-theme="dark"] { --mc-hero-a: #1a1530; --mc-hero-b: #33245a; --mc-price: #fdc58a; --mc-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* hero */
.mc-hero { background: radial-gradient(900px 500px at 90% -20%, var(--mc-hero-b), transparent 70%), var(--mc-hero-a); color: var(--mc-hero-ink); padding: 60px 0 70px; overflow: hidden; }
.mc-hero .eyebrow { color: var(--mc-gold); font-family: Archivo, sans-serif; font-weight: 800; }
.mc-hero h1 { font-family: "Playfair Display", serif; font-weight: 900; font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1.02; margin: 12px 0 16px; color: var(--mc-hero-ink); }
.mc-hero h1 em { color: var(--mc-gold); font-style: italic; font-weight: 700; }
.mc-hero-sub { color: var(--mc-hero-sub); font-size: 1.12rem; max-width: 660px; line-height: 1.55; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.mc-chip { background: var(--mc-glass); border: 1px solid var(--mc-glass-line); padding: 7px 13px; border-radius: 999px; font-weight: 600; font-size: .92rem; }
.mc-chip.is-gold { background: var(--mc-gold); border-color: var(--mc-gold); color: var(--mc-gold-ink); }

.mc-offers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; margin-top: 34px; align-items: stretch; }
.mc-offer { background: var(--white); color: var(--ink); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); }
.mc-offer .tag { font: 800 .72rem/1 Archivo, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--lav-ink); background: var(--lav); padding: 6px 10px; border-radius: 999px; align-self: flex-start; }
.mc-offer h2 { font-family: "Playfair Display", serif; font-size: 1.6rem; color: var(--purple); margin-top: 4px; }
.mc-offer .codes { color: var(--grey); font-weight: 600; font-size: .92rem; }
.mc-price { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 0; color: var(--mc-price); font-family: Archivo, sans-serif; flex-wrap: wrap; }
.mc-price small { font-weight: 700; font-size: .9rem; }
.mc-price b { font-weight: 900; font-size: 2.6rem; letter-spacing: -1px; line-height: 1; }
.mc-price span { color: var(--grey); font-weight: 600; font-size: .95rem; }
.mc-was { color: var(--grey); font-size: .88rem; }
.mc-offer ul { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 6px; }
.mc-offer li::before { content: "✓"; color: var(--green-ink); font-weight: 800; margin-right: 8px; }
.mc-btns { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }

.mc-papers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 6px; }
.mc-paper { border-radius: 16px; padding: 12px 14px; border: 1px solid; display: flex; flex-direction: column; gap: 2px; text-decoration: none; transition: transform .15s; }
.mc-paper:hover { transform: translateY(-2px); }
.mc-paper b { font: 900 1.5rem/1 Archivo, sans-serif; }
.mc-paper span { font-weight: 700; font-size: .9rem; color: var(--ink); }
.mc-paper small { color: var(--grey); font-size: .8rem; font-weight: 600; }
.mc-paper.t-lav b { color: var(--lav-ink); } .mc-paper.t-orange b { color: var(--orange-ink); }
.mc-paper.t-green b { color: var(--green-ink); } .mc-paper.t-blue b { color: var(--blue-ink); }

.mc-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 12px 20px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; font-size: .95rem; }
.mc-btn-wa { background: var(--mc-wa); color: var(--mc-wa-ink); }
.mc-btn-ghost { background: var(--accent-soft); color: var(--accent); }
html[data-theme="dark"] .mc-btn-ghost { color: var(--lav-ink); background: var(--lav); }
.mc-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.mc-btn svg { width: 18px; height: 18px; }

/* sections */
.mc-sec { padding: 64px 0; }
.mc-sec.is-band { background: var(--cream); }
.mc-sec h2.mc-h { font-family: "Playfair Display", serif; font-size: clamp(1.8rem, 4vw, 2.5rem); color: var(--purple); line-height: 1.1; }
.mc-sec h2.mc-h em { color: var(--mc-gold); font-style: italic; }
.mc-lede { color: var(--grey); font-size: 1.05rem; max-width: 680px; margin-top: 10px; line-height: 1.6; }

.mc-guarantee { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; background: var(--orange); border: 1px solid var(--orange-line); border-radius: var(--radius-lg); padding: 28px; }
.mc-seal { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 35% 30%, #f6b26b, #E8913A 55%, #c86f1d); color: #fff; font: 900 2rem/1 "Playfair Display", serif; box-shadow: inset 0 0 0 6px rgba(255,255,255,.25); }
.mc-seal small { display: block; font: 800 .62rem/1.2 Archivo, sans-serif; letter-spacing: .14em; color: #3a1d05; margin-top: 4px; }
.mc-guarantee h2 { font-family: "Playfair Display", serif; color: var(--orange-ink); font-size: 1.7rem; line-height: 1.15; }
.mc-guarantee p { color: var(--ink); margin-top: 8px; line-height: 1.55; }

/* the plan */
.mc-phases { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.mc-phase { border-radius: var(--radius-lg); padding: 24px; border: 1px solid; }
.mc-phase.p1 { background: var(--lav); border-color: var(--lav-line); }
.mc-phase.p2 { background: var(--orange); border-color: var(--orange-line); }
.mc-phase .when { display: inline-block; font: 900 .78rem/1 Archivo, sans-serif; letter-spacing: .12em; text-transform: uppercase; background: var(--white); padding: 7px 11px; border-radius: 999px; }
.mc-phase.p1 .when, .mc-phase.p1 h3 { color: var(--lav-ink); }
.mc-phase.p2 .when, .mc-phase.p2 h3 { color: var(--orange-ink); }
.mc-phase h3 { font-family: Archivo, sans-serif; font-size: 1.35rem; margin: 12px 0 8px; }
.mc-phase ul { list-style: none; padding: 0; display: grid; gap: 8px; color: var(--ink); line-height: 1.5; }
.mc-phase li { padding-left: 26px; position: relative; }
.mc-phase li::before { content: "✓"; position: absolute; left: 0; font-weight: 900; color: var(--green-ink); }

.mc-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; }
.mc-day { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 8px; text-align: center; }
.mc-day small { display: block; font: 800 .7rem/1 Archivo, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.mc-day b { display: block; font-size: 1.7rem; margin: 8px 0 4px; }
.mc-day span { font: 800 .95rem/1 Archivo, sans-serif; color: var(--ink); }
.mc-day.is-test { background: var(--mc-gold); border-color: var(--mc-gold); }
.mc-day.is-test small, .mc-day.is-test span { color: var(--mc-gold-ink); }
.mc-week-note { color: var(--grey); margin-top: 12px; font-size: .95rem; }

.mc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 22px; counter-reset: s; }
.mc-step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.mc-step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 900 1rem Archivo, sans-serif; margin-bottom: 12px; }
.mc-step:nth-child(2)::before { background: var(--mc-gold); color: var(--mc-gold-ink); }
.mc-step:nth-child(3)::before { background: var(--green-ink); color: var(--white); }
.mc-step:nth-child(4)::before { background: var(--blue-ink); color: var(--white); }
.mc-step b { display: block; font-family: Archivo, sans-serif; font-size: 1.05rem; margin-bottom: 4px; color: var(--ink); }
.mc-step p { color: var(--grey); font-size: .95rem; line-height: 1.5; }

/* syllabus tabs */
.mc-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.mc-panel-head h3 { font-family: "Playfair Display", serif; font-size: 1.5rem; color: var(--purple); }
.mc-panel-head p { color: var(--grey); font-weight: 600; }
.mc-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.mc-topic { border-radius: var(--radius); padding: 18px 20px; border: 1px solid; }
.mc-topic h4 { font-family: Archivo, sans-serif; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.mc-topic h4 span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; background: var(--white); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.mc-topic ul { margin: 10px 0 0 18px; color: var(--ink); line-height: 1.55; font-size: .95rem; }
.mc-topic.is-wide { grid-column: 1 / -1; }
.t-lav { background: var(--lav); border-color: var(--lav-line); } .t-lav h4 { color: var(--lav-ink); }
.t-orange { background: var(--orange); border-color: var(--orange-line); } .t-orange h4 { color: var(--orange-ink); }
.t-green { background: var(--green); border-color: var(--green-line); } .t-green h4 { color: var(--green-ink); }
.t-blue { background: var(--blue); border-color: var(--blue-line); } .t-blue h4 { color: var(--blue-ink); }
.mc-note { color: var(--grey); font-size: .9rem; margin-top: 14px; }

.mc-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.mc-stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 20px; }
.mc-stat b { display: block; font: 900 2.2rem/1 Archivo, sans-serif; color: var(--mc-price); }
.mc-stat span { color: var(--grey); font-weight: 600; font-size: .9rem; }

/* FAQ: two columns, numbered accordion */
.mc-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 40px; align-items: start; }
.mc-faq-side { position: sticky; top: 90px; }
.mc-help { margin-top: 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--mc-shadow); }
.mc-help b { display: block; font-family: Archivo, sans-serif; font-size: 1.1rem; color: var(--ink); }
.mc-help p { color: var(--grey); margin: 6px 0 14px; line-height: 1.5; }
.mc-qs { display: grid; gap: 12px; counter-reset: q; }
.mc-q { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s, box-shadow .2s; counter-increment: q; }
.mc-q:hover { border-color: var(--lav-line); }
.mc-q[open] { border-color: var(--lav-line); box-shadow: var(--mc-shadow); }
.mc-q summary { list-style: none; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 20px; cursor: pointer; font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.mc-q summary::-webkit-details-marker { display: none; }
.mc-q summary::before { content: counter(q, decimal-leading-zero); font: 800 .8rem/1 Archivo, sans-serif; color: var(--lav-ink); background: var(--lav); border-radius: 10px; padding: 8px 9px; }
.mc-q summary::after { content: ""; width: 30px; height: 30px; border-radius: 50%; background-color: var(--cream); background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: center; background-size: 12px 2px, 2px 12px; color: var(--purple); transition: transform .25s, background-color .2s; }
html[data-theme="dark"] .mc-q summary::after { color: var(--lav-ink); }
.mc-q[open] summary::after { transform: rotate(45deg); background-color: var(--lav); }
.mc-q summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }
.mc-a { padding: 0 20px 20px 70px; color: var(--grey); line-height: 1.65; }
.mc-q[open] .mc-a { animation: mc-in .25s ease; }
@keyframes mc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.mc-final { text-align: center; }
.mc-final .mc-btns { justify-content: center; margin-top: 22px; }

@media (max-width: 900px) {
  .mc-offers, .mc-phases, .mc-faq-grid { grid-template-columns: 1fr; }
  .mc-faq-side { position: static; }
  .mc-topics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mc-hero { padding: 44px 0 52px; }
  .mc-guarantee { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .mc-topics { grid-template-columns: 1fr; }
  .mc-week { gap: 6px; }
  .mc-day { padding: 10px 4px; }
  .mc-day b { font-size: 1.3rem; }
  .mc-a { padding-left: 20px; }
}
@media (prefers-reduced-motion: reduce) { .mc-q[open] .mc-a { animation: none; } .mc-q summary::after { transition: none; } }

/* other subjects, linked from each page */
.mc-also { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; color: var(--mc-hero-sub); font-size: .9rem; font-weight: 600; }
.mc-also a { color: var(--mc-hero-ink); text-decoration: none; background: var(--mc-glass); border: 1px solid var(--mc-glass-line); padding: 6px 12px; border-radius: 999px; }
.mc-also a:hover { border-color: var(--mc-gold); color: var(--mc-gold); }
.mc-papers.is-two { grid-template-columns: 1fr 1fr; }

/* ── generated blocks (scripts/class_pages.py) ─────────────────────────── */
/* how we teach: screenshot rows */
.cp-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 46px; }
.cp-row.is-flip .cp-shot { order: 2; }
.cp-shot { margin: 0; border-radius: 18px; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: var(--mc-shadow); }
.cp-frame { display: flex; gap: 6px; padding: 9px 12px; background: var(--cream); border-bottom: 1px solid var(--line); }
.cp-frame span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.cp-frame span:nth-child(1) { background: #f28b82; } .cp-frame span:nth-child(2) { background: #fbcc5c; } .cp-frame span:nth-child(3) { background: #7fd29a; }
.cp-shot img { display: block; width: 100%; height: auto; }
.cp-kick { font: 800 .72rem/1 Archivo, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--mc-price); margin: 0 0 8px; }
.cp-copy h3 { font-family: "Playfair Display", serif; font-size: 1.6rem; line-height: 1.15; color: var(--purple); margin: 0 0 10px; }
.cp-copy > p { color: var(--grey); line-height: 1.65; margin: 0 0 14px; }
.cp-copy ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cp-copy li { padding-left: 28px; position: relative; color: var(--ink); font-weight: 600; font-size: .95rem; }
.cp-copy li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: var(--green-ink); font-size: .75rem; display: grid; place-items: center; font-weight: 900; }

/* parents / students + outcomes */
.cp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.cp-who { border-radius: var(--radius-lg); padding: 24px; border: 1px solid; }
.cp-who.is-parents { background: var(--blue); border-color: var(--blue-line); }
.cp-who.is-students { background: var(--yellow); border-color: var(--yellow-line); }
.cp-who h3 { font-family: Archivo, sans-serif; font-size: 1.3rem; margin: 0 0 12px; }
.cp-who.is-parents h3 { color: var(--blue-ink); } .cp-who.is-students h3 { color: var(--yellow-ink); }
.cp-who ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cp-who li { background: var(--white); border-radius: 12px; padding: 11px 14px 11px 40px; position: relative; color: var(--ink); line-height: 1.45; font-size: .95rem; }
.cp-who li::before { content: "✓"; position: absolute; left: 14px; top: 11px; font-weight: 900; }
.cp-who.is-parents li::before { color: var(--blue-ink); } .cp-who.is-students li::before { color: var(--yellow-ink); }
.cp-out-h { font-family: "Playfair Display", serif; font-size: 1.5rem; color: var(--purple); text-align: center; margin: 40px 0 16px; }
.cp-out { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cp-out li { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; }
.cp-out li span { grid-row: span 2; font-size: 1.8rem; }
.cp-out b { font-family: Archivo, sans-serif; color: var(--ink); }
.cp-out small { color: var(--grey); font-size: .85rem; line-height: 1.4; }

/* week-by-week syllabus: level switch, A Level course chips, months, weeks */
.cp-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; max-width: 860px; }
.cp-level { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; border-radius: 20px; border: 2px solid var(--line);
  background: var(--white); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.cp-level:hover { border-color: var(--lav-line); transform: translateY(-1px); }
.cp-level-ic { font-size: 1.7rem; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--cream); flex: none; }
.cp-level b { display: block; font: 800 1.12rem/1.2 Archivo, sans-serif; }
.cp-level small { display: block; color: var(--grey); font-size: .82rem; font-weight: 600; margin-top: 3px; line-height: 1.35; }
.cp-level[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); box-shadow: var(--mc-shadow); }
.cp-level[aria-pressed="true"] small { color: inherit; opacity: .82; }
.cp-level[aria-pressed="true"] .cp-level-ic { background: rgba(255,255,255,.18); }
html[data-theme="dark"] .cp-level[aria-pressed="true"] { background: var(--lav); border-color: var(--lav-ink); color: var(--lav-ink); }
.cp-level:focus-visible, .cp-papers button:focus-visible { outline: 3px solid var(--mc-gold); outline-offset: 2px; }

.cp-al { margin-top: 16px; padding: 16px; border-radius: 20px; background: var(--cream); border: 1px solid var(--line); }
.cp-al-lbl { margin: 0 0 10px; color: var(--ink); font-weight: 700; font-size: .92rem; }
.cp-papers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.cp-papers button { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--line); background: var(--white);
  color: var(--ink); cursor: pointer; font: inherit; transition: border-color .15s; }
.cp-papers button:hover { border-color: var(--lav-line); }
.cp-papers b { font: 900 1.35rem/1 Archivo, sans-serif; color: var(--lav-ink); }
.cp-papers span { font-weight: 700; font-size: .9rem; line-height: 1.3; }
.cp-papers small { color: var(--grey); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cp-papers button[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--mc-shadow); }
html[data-theme="dark"] .cp-papers button[aria-selected="true"] { border-color: var(--lav-ink); box-shadow: inset 0 0 0 1px var(--lav-ink); }

.cp-panel { margin-top: 26px; }
.cp-panel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cp-panel-lvl { margin: 0 0 4px; font: 800 .72rem/1 Archivo, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--mc-price); }
.cp-panel-head h3 { font-family: "Playfair Display", serif; font-size: 1.7rem; color: var(--purple); margin: 0; }
.cp-panel-price { margin: 0; font-weight: 700; color: var(--ink); background: var(--orange); border: 1px solid var(--orange-line); padding: 7px 12px; border-radius: 999px; font-size: .88rem; }

.cp-phase { display: flex; align-items: center; gap: 12px; margin: 24px 0 12px; }
.cp-phase-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 900 1rem/1 Archivo, sans-serif; flex: none; }
.cp-phase.is-pp .cp-phase-n { background: var(--mc-gold); color: var(--mc-gold-ink); }
.cp-phase b { display: block; font-family: Archivo, sans-serif; color: var(--ink); font-size: 1.05rem; }
.cp-phase small { color: var(--grey); font-weight: 600; font-size: .85rem; }

.cp-month { --m-bg: var(--lav); --m-line: var(--lav-line); --m-ink: var(--lav-ink);
  background: var(--white); border: 1px solid var(--line); border-left: 6px solid var(--m-ink); border-radius: var(--radius); margin-top: 12px; overflow: hidden; }
.cp-m-green { --m-bg: var(--green); --m-line: var(--green-line); --m-ink: var(--green-ink); }
.cp-m-blue { --m-bg: var(--blue); --m-line: var(--blue-line); --m-ink: var(--blue-ink); }
.cp-month summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 140px 1fr 32px; gap: 16px; align-items: center; padding: 16px 18px; }
.cp-month summary::-webkit-details-marker { display: none; }
.cp-month[open] summary { background: var(--m-bg); }
.cp-month summary:focus-visible { outline: 3px solid var(--mc-gold); outline-offset: -3px; }
.cp-mon b { display: block; font: 900 1.15rem/1.1 Archivo, sans-serif; color: var(--m-ink); }
.cp-mon small { color: var(--grey); font-weight: 700; font-size: .78rem; }
.cp-mon-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-mon-chips span { font-size: .8rem; font-weight: 700; color: var(--m-ink); background: var(--white); border: 1px solid var(--m-line); padding: 4px 10px; border-radius: 999px; }
.cp-mon-tog { width: 32px; height: 32px; border-radius: 50%; background: var(--cream); position: relative; }
.cp-mon-tog::before, .cp-mon-tog::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--m-ink); transform: translate(-50%, -50%); transition: transform .2s; }
.cp-mon-tog::after { transform: translate(-50%, -50%) rotate(90deg); }
.cp-month[open] .cp-mon-tog { background: var(--white); }
.cp-month[open] .cp-mon-tog::after { transform: translate(-50%, -50%) rotate(0deg); }

.cp-wks { list-style: none; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; background: var(--white); }
.cp-wk { border-radius: 16px; padding: 16px; background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 1px 0 var(--line); transition: border-color .15s, transform .15s; }
.cp-wk:hover { border-color: var(--m-line); transform: translateY(-2px); }
.cp-wk-top { display: flex; align-items: center; gap: 10px; }
.cp-wk-n { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--m-bg); color: var(--m-ink); font: 900 1rem/1 Archivo, sans-serif; flex: none; }
.cp-wk-lbl { display: block; font: 800 .7rem/1 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--m-ink); }
.cp-wk-d { display: block; font-size: .78rem; color: var(--grey); font-weight: 600; margin-top: 3px; }
.cp-wk b { font: 800 1.02rem/1.3 Archivo, sans-serif; color: var(--ink); }
.cp-wk-subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.cp-wk-subs li { position: relative; padding-left: 20px; color: var(--grey); font-size: .86rem; line-height: 1.45; }
.cp-wk-subs li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px; border-left: 2px solid var(--m-ink); border-bottom: 2px solid var(--m-ink); transform: rotate(-45deg); }
.cp-wk-test { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); font-size: .76rem; font-weight: 700; color: var(--grey); }

.cp-pp { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; counter-reset: pp; }
.cp-pp li { background: var(--white); border: 1px solid var(--orange-line); border-top: 5px solid var(--mc-gold); border-radius: 16px; padding: 14px 16px; }
.cp-pp-w { display: inline-block; font: 900 .7rem/1 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); background: var(--orange); padding: 5px 8px; border-radius: 999px; }
.cp-pp b { display: block; font-family: Archivo, sans-serif; color: var(--ink); margin: 8px 0 4px; }
.cp-pp p { margin: 0; color: var(--grey); font-size: .86rem; line-height: 1.5; }
.cp-every { margin-top: 24px; background: var(--white); border: 1px dashed var(--lav-line); border-radius: var(--radius); padding: 18px 20px; }
.cp-every b { font-family: Archivo, sans-serif; color: var(--ink); }
.cp-every ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; color: var(--grey); font-size: .92rem; }

/* /courses: level switch + course cards */
.cl-hero h1 { max-width: 16ch; }
.cl-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 820px; margin: 0 auto; }
.cl-lvl { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left;
  padding: 18px 20px; border-radius: 22px; border: 2px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .15s, transform .15s; }
.cl-lvl:hover { border-color: var(--lav-line); transform: translateY(-1px); }
.cl-lvl span { grid-row: span 2; font-size: 2rem; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--cream); }
.cl-lvl b { font: 900 1.25rem/1.15 Archivo, sans-serif; }
.cl-lvl small { color: var(--grey); font-weight: 600; font-size: .85rem; }
.cl-lvl[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--mc-shadow); }
.cl-lvl[aria-pressed="true"] small { color: inherit; opacity: .82; }
.cl-lvl[aria-pressed="true"] span { background: rgba(255,255,255,.18); }
html[data-theme="dark"] .cl-lvl[aria-pressed="true"] { background: var(--lav); border-color: var(--lav-ink); color: var(--lav-ink); }
.cl-lvl:focus-visible { outline: 3px solid var(--mc-gold); outline-offset: 2px; }
.cl-view { margin-top: 26px; }
.cl-view-lede { text-align: center; color: var(--grey); max-width: 64ch; margin: 0 auto 22px; line-height: 1.6; }
.cl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cl-card { border-radius: 26px; padding: 22px; border: 1px solid; display: flex; flex-direction: column; gap: 14px; }
.cl-lav { background: var(--lav); border-color: var(--lav-line); --cl-ink: var(--lav-ink); }
.cl-green { background: var(--green); border-color: var(--green-line); --cl-ink: var(--green-ink); }
.cl-pink { background: var(--pink); border-color: var(--pink-line); --cl-ink: var(--pink-ink); }
.cl-card-head, .cl-al-head { display: flex; gap: 12px; align-items: center; }
.cl-ic { font-size: 1.8rem; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--white); flex: none; }
.cl-card h3, .cl-al-head h3 { font-family: "Playfair Display", serif; font-size: 1.55rem; color: var(--cl-ink); margin: 0; }
.cl-al-head h3 span { font: 800 .9rem/1 Archivo, sans-serif; color: var(--grey); margin-left: 6px; }
.cl-card-head p, .cl-al-head p { margin: 2px 0 0; color: var(--grey); font-size: .85rem; font-weight: 600; }
.cl-price { background: var(--white); border-radius: 16px; padding: 12px 14px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cl-price small, .cl-price span { color: var(--grey); font-weight: 700; font-size: .78rem; }
.cl-price b { font: 900 1.9rem/1 Archivo, sans-serif; color: var(--mc-price); }
.cl-months { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cl-months li { background: var(--white); border-radius: 12px; padding: 9px 12px; font-size: .85rem; line-height: 1.45; color: var(--ink); }
.cl-months li span { display: inline-block; min-width: 54px; font: 900 .72rem/1 Archivo, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--cl-ink); margin-right: 6px; }
.cl-months.is-mini li { padding: 6px 10px; font-size: .8rem; }
.cl-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.cl-btn { flex: 1; text-align: center; padding: 11px 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; text-decoration: none; white-space: nowrap; font-size: .9rem; }
.cl-btn.is-wa { background: var(--mc-wa); color: var(--mc-wa-ink); flex: 0 0 auto; }
.cl-btn:hover { filter: brightness(1.06); }
.cl-al-group { border-radius: 26px; padding: 20px; border: 1px solid; margin-top: 18px; }
.cl-al-head { margin-bottom: 14px; }
.cl-al-head > div { flex: 1; }
.cl-al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cl-al-card { background: var(--white); border-radius: 18px; padding: 16px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 6px;
  border: 2px solid transparent; transition: border-color .15s, transform .15s; }
.cl-al-card:hover { border-color: var(--cl-ink); transform: translateY(-2px); }
.cl-al-code { font: 900 1.8rem/1 Archivo, sans-serif; color: var(--cl-ink); }
.cl-al-card b { font-family: Archivo, sans-serif; font-size: 1rem; }
.cl-al-card small { color: var(--grey); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.cl-al-card .cl-months li { background: var(--cream); }
.cl-al-go { margin-top: auto; padding-top: 6px; font-weight: 800; font-size: .86rem; color: var(--cl-ink); }
.cl-plan { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cl-plan li { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; display: grid; gap: 4px; }
.cl-plan span { font: 800 .7rem/1 Archivo, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--mc-price); }
.cl-plan b { font-family: Archivo, sans-serif; color: var(--ink); }
.cl-plan small { color: var(--grey); font-size: .86rem; line-height: 1.45; }

@media (max-width: 900px) {
  .cp-row, .cp-two { grid-template-columns: 1fr; gap: 18px; }
  .cp-row.is-flip .cp-shot { order: 0; }
  .cp-out { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .cl-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .cl-plan { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cp-out, .cp-every ul { grid-template-columns: 1fr; }
  .cp-levels, .cl-switch { grid-template-columns: 1fr; }
  .cp-month summary { grid-template-columns: 1fr 32px; gap: 10px; padding: 14px; }
  .cp-mon-chips { grid-column: 1 / -1; grid-row: 2; }
  .cp-wks { padding: 12px; }
  .cl-plan { grid-template-columns: 1fr; }
  .cl-al-head { flex-wrap: wrap; }
}