/* ===== /Users/pahul/Documents/CODE/TM_designs/MAY26_TM_web_mock_trial/apex-hsc-mock-exams/styles.css ===== */
/* ============ Apex HSC Mock Exams — styles ============ */

.mt-root {
  /* Mathologists palette — refined green + cream */
  --bg: #FAF8F3;
  --bg-card: #FFFFFF;
  --bg-deep: #0F0F0F;
  --ink: #1A1A1A;
  --ink-soft: #555555;
  --ink-mute: #888888;
  --line: #E5E5E5;
  --line-soft: #EEEEEE;
  --accent: #3FB54A;
  --accent-deep: #2E8B3A;
  --accent-soft: #E8F5E9;
  --accent-tint: #F1FAF1;
  --on-deep: #FAF8F3;
  --on-deep-mute: #A0A0A0;
  --positive: #2E8B3A;

  --brand-grad: linear-gradient(135deg, #3FB54A 0%, #E8F5E9 100%);

  --serif: "Newsreader", "Source Serif 4", Georgia, serif;
  --sans: "DM Sans", "Söhne", system-ui, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --maxw: 1280px;
  --pad: clamp(20px, 4vw, 56px);
}

.mt-root [data-palette="forest"] {
  --bg: #EEEAE0;
  --bg-card: #F6F2E7;
  --bg-deep: #1B3326;
  --ink: #142219;
  --ink-soft: #4A5A4E;
  --line: #D7CFBE;
  --line-soft: #E5DECC;
  --accent: #B8843A;
  --accent-deep: #87601F;
  --accent-soft: #E8D6B1;
  --on-deep: #EEEAE0;
  --on-deep-mute: #A8BAA7;
}

.mt-root [data-palette="ink"] {
  --bg: #ECEAE4;
  --bg-card: #F6F4EE;
  --bg-deep: #0B0B0A;
  --ink: #0B0B0A;
  --ink-soft: #3A3A38;
  --line: #D2CEC2;
  --line-soft: #E2DED0;
  --accent: #C8E03B;
  --accent-deep: #93A82A;
  --accent-soft: #EBF2B5;
  --on-deep: #ECEAE4;
  --on-deep-mute: #9A9A95;
}

.mt-root [data-display="instrument"] {
  --serif: "Instrument Serif", Georgia, serif;
}
.mt-root [data-display="cormorant"] {
  --serif: "Cormorant Garamond", Georgia, serif;
}

.mt-root * { box-sizing: border-box; }
.mt-root, .mt-root { margin: 0; padding: 0; }
.mt-root {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
}

.mt-root img, .mt-root svg { display: block; max-width: 100%; }

.mt-root .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ----------- Type ----------- */
.mt-root .eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mt-root .eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  display: inline-block;
}
.mt-root .eyebrow.solo::before { display: none; }

.mt-root h1, .mt-root h2, .mt-root h3, .mt-root h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
  line-height: 1.04;
}

.mt-root .h-display {
  font-size: clamp(48px, 7.4vw, 104px);
  letter-spacing: -0.025em;
  line-height: 0.96;
}
.mt-root .h-section {
  font-size: clamp(36px, 4.6vw, 64px);
  letter-spacing: -0.02em;
}
.mt-root .h-card {
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.01em;
}

.mt-root .lead {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 60ch;
  text-wrap: pretty;
}
.mt-root .italic { font-style: italic; }

/* ----------- Buttons ----------- */
.mt-root .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.mt-root .btn:active { transform: translateY(1px); }
.mt-root .btn-primary {
  background: var(--ink);
  color: var(--on-deep);
}
.mt-root .btn-primary:hover { background: var(--accent-deep); }
.mt-root .btn-accent {
  background: var(--accent);
  color: var(--ink);
}
.mt-root .btn-accent:hover { background: var(--accent-deep); color: #fff; }
.mt-root .btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.mt-root .btn-ghost:hover { background: var(--ink); color: var(--on-deep); }
.mt-root .btn-on-deep {
  background: var(--on-deep);
  color: var(--ink);
}
.mt-root .btn-on-deep:hover { background: var(--accent); color: #fff; }
.mt-root .btn-on-deep-ghost {
  background: transparent;
  color: var(--on-deep);
  border-color: var(--on-deep-mute);
}
.mt-root .btn-on-deep-ghost:hover { background: var(--on-deep); color: var(--ink); }
.mt-root .btn .arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.mt-root .btn:hover .arrow { transform: translateX(3px); }

/* ----------- Nav ----------- */
.mt-root .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px) saturate(1.4);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.mt-root .nav.scrolled {
  border-color: var(--line);
}
.mt-root .nav-dark {
  background: var(--bg-deep);
  border-bottom: 1px solid rgba(63, 181, 74, 0.25);
  backdrop-filter: none;
  box-shadow:
    0 0 60px 0 rgba(63, 181, 74, 0.4),
    0 0 120px 0 rgba(63, 181, 74, 0.18);
}
.mt-root .nav-dark.scrolled {
  border-bottom-color: rgba(63, 181, 74, 0.35);
}
.mt-root .nav-accent-bar {
  display: none;
}
.mt-root .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  position: relative;
  z-index: 1;
}
.mt-root .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.mt-root .nav-dark .logo { color: #fff; }
.mt-root .logo-img {
  height: 50px;
  width: auto;
  display: block;
}
.mt-root .nav-dark .logo-img {
  filter: brightness(0) invert(1);
}
.mt-root .logo-mark {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--ink);
  display: grid;
  place-items: center;
  color: var(--on-deep);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
}
.mt-root .nav-dark .logo-mark {
  background: var(--accent);
  color: #000;
}
.mt-root .logo-word-em {
  font-style: italic;
  color: var(--accent-deep);
}
.mt-root .nav-dark .logo-word-em {
  color: var(--accent);
}
.mt-root .nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.mt-root .nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .15s;
}
.mt-root .nav-links a:hover { color: var(--ink); }
.mt-root .nav-dark .nav-links a { color: #fff; }
.mt-root .nav-dark .nav-links a:hover { color: var(--accent); }
.mt-root .nav-cta {
  display: flex;
  align-items: center;
  gap: 24px;
}
.mt-root .nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color .15s;
  white-space: nowrap;
}
.mt-root .nav-phone:hover { color: var(--accent); }
.mt-root .nav-phone svg { color: #fff; opacity: 0.85; }
.mt-root .btn-book {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 100px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background .2s, transform .15s;
  font-family: var(--sans);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.mt-root .btn-book:hover {
  background: var(--accent-deep);
  color: #fff;
}
@media (max-width: 1079px) {
  .mt-root .nav-links { display: none; }
  .mt-root .nav-phone span { display: none; }
}

/* ----------- Hero ----------- */
.mt-root .hero {
  padding-top: clamp(48px, 8vw, 112px);
  padding-bottom: clamp(56px, 8vw, 120px);
  position: relative;
  overflow: hidden;
}
.mt-root .hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
@media (max-width: 1079px) {
  .mt-root .hero-grid { grid-template-columns: 1fr; align-items: start; }
}
.mt-root .hero-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  align-items: center;
}
.mt-root .hero-meta .dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 999px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.2); }
}
.mt-root .hero-meta-item {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.mt-root .hero h1 .accent {
  font-style: italic;
  color: var(--accent-deep);
}
.mt-root .hero-sub {
  margin-top: 28px;
  max-width: 52ch;
}
.mt-root .hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.mt-root .hero-side {
  border-left: 1px solid var(--line);
  padding-left: clamp(20px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (max-width: 1079px) {
  .mt-root .hero-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 32px; }
}
.mt-root .hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mt-root .hero-stat .n {
  font-family: var(--serif);
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.mt-root .hero-stat .l {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.mt-root .hero-marquee {
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  display: flex;
  gap: 48px;
  overflow: hidden;
  white-space: nowrap;
}
.mt-root .hero-marquee .track {
  display: flex;
  gap: 48px;
  animation: scroll 40s linear infinite;
}
@keyframes scroll {
  to { transform: translateX(-50%); }
}
.mt-root .hero-marquee .sep { color: var(--accent); }

/* ----------- Section base ----------- */
.mt-root .section {
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(80px, 10vw, 140px);
}
.mt-root .section.tight { padding-top: clamp(64px, 7vw, 96px); padding-bottom: clamp(64px, 7vw, 96px); }
.mt-root .section.deep {
  background: var(--bg-deep);
  color: var(--on-deep);
}
.mt-root .section.deep .eyebrow { color: var(--on-deep-mute); }
.mt-root .section.deep .lead { color: var(--on-deep-mute); }

.mt-root .section-head {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
  margin-bottom: clamp(48px, 6vw, 80px);
  align-items: end;
}
@media (max-width: 1079px) {
  .mt-root .section-head { grid-template-columns: 1fr; gap: 16px; }
}

/* ----------- Why (value props) ----------- */
.mt-root .why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 1079px) { .mt-root .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mt-root .why-grid { grid-template-columns: 1fr; } }
.mt-root .why-card {
  background: var(--bg-card);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
}
.mt-root .why-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--accent-deep);
}
.mt-root .why-card h3 {
  font-size: 26px;
  line-height: 1.05;
}
.mt-root .why-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
}
.mt-root .why-card .icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--accent-deep);
  margin-top: auto;
}

/* ----------- How it works ----------- */
.mt-root .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--on-deep-mute);
  border-bottom: 1px solid var(--on-deep-mute);
  position: relative;
}
@media (max-width: 1079px) { .mt-root .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mt-root .steps { grid-template-columns: 1fr; } }
.mt-root .step {
  padding: 36px 28px 36px 0;
  border-right: 1px solid var(--on-deep-mute);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mt-root .step:last-child { border-right: 0; }
.mt-root .step .step-n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
}
.mt-root .step h3 {
  font-size: 28px;
  color: var(--on-deep);
}
.mt-root .step p { color: var(--on-deep-mute); font-size: 14.5px; margin: 0; }
.mt-root .step .when {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-top: auto;
}

/* ----------- Subjects (tabs) ----------- */
.mt-root .subj-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.mt-root .subj-tab {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
}
.mt-root .subj-tab:hover { color: var(--ink); border-color: var(--ink); }
.mt-root .subj-tab.active {
  background: var(--ink);
  color: var(--on-deep);
  border-color: var(--ink);
}
.mt-root .subj-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 1079px) { .mt-root .subj-panel { grid-template-columns: 1fr; } }
.mt-root .subj-info h3 {
  font-size: clamp(32px, 3.4vw, 44px);
  margin-bottom: 12px;
}
.mt-root .subj-info .lead { margin-bottom: 24px; }
.mt-root .subj-info .meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 24px;
}
.mt-root .subj-info .meta > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  padding-right: 16px;
  border-right: 1px solid var(--line);
}
.mt-root .subj-info .meta > div:nth-child(2n) { border-right: 0; padding-right: 0; padding-left: 16px; }
.mt-root .subj-info .meta .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.mt-root .subj-info .meta .v {
  font-family: var(--serif);
  font-size: 20px;
}
.mt-root .subj-paper {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  position: relative;
}
.mt-root .subj-paper::before {
  content: "MOCK PAPER PREVIEW";
  position: absolute;
  top: -10px; left: 24px;
  background: var(--bg);
  padding: 0 10px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.mt-root .subj-paper .topic {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.mt-root .subj-paper .topic:last-child { border-bottom: 0; }
.mt-root .subj-paper .topic .marks { color: var(--accent-deep); }

/* ----------- Report mockup ----------- */
.mt-root .report {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 1079px) { .mt-root .report { grid-template-columns: 1fr; } }
.mt-root .report-doc {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 36px;
  box-shadow: 0 30px 60px -30px rgba(14, 27, 44, 0.25);
  transform: rotate(-1deg);
  transition: transform .3s;
  position: relative;
}
.mt-root .report-doc:hover { transform: rotate(0); }
.mt-root .report-doc::after {
  content: "";
  position: absolute;
  inset: 12px 12px auto auto;
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: 999px;
}
.mt-root .report-doc .doc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.mt-root .report-doc .doc-head h4 {
  font-family: var(--serif);
  font-size: 24px;
}
.mt-root .report-doc .doc-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mt-root .report-doc .score-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 22px;
}
.mt-root .report-doc .big-score {
  font-family: var(--serif);
  font-size: 76px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.mt-root .report-doc .big-score sub {
  font-size: 22px;
  color: var(--ink-mute);
  vertical-align: super;
  letter-spacing: 0;
}
.mt-root .report-doc .rank-meta {
  font-size: 13px;
  color: var(--ink-soft);
}
.mt-root .report-doc .rank-meta strong { color: var(--ink); }
.mt-root .report-doc .bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.mt-root .report-doc .bar {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.mt-root .report-doc .bar .label { color: var(--ink-soft); }
.mt-root .report-doc .bar .track {
  background: var(--line-soft);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}
.mt-root .report-doc .bar .fill {
  background: var(--ink);
  height: 100%;
  border-radius: 999px;
}
.mt-root .report-doc .bar .fill.accent { background: var(--accent); }
.mt-root .report-doc .bar .val {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  width: 36px;
  text-align: right;
}
.mt-root .report-doc .markup {
  margin-top: 22px;
  border-top: 1px dashed var(--line);
  padding-top: 16px;
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}
.mt-root .report-doc .markup strong { color: var(--accent-deep); font-style: normal; }

.mt-root .report-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mt-root .report-list .item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 18px;
  align-items: start;
}
.mt-root .report-list .item .n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--accent-deep);
}
.mt-root .report-list .item h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 4px;
}
.mt-root .report-list .item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
}

/* ----------- Schedule ----------- */
.mt-root .sched {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1079px) { .mt-root .sched { grid-template-columns: 1fr; } }
.mt-root .sched-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.mt-root .sched-card .pill {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.mt-root .sched-card .pill.ghost { background: transparent; color: var(--ink-mute); border: 1px solid var(--line); }
.mt-root .sched-card .date {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.mt-root .sched-card .date small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-top: 6px;
}
.mt-root .sched-card h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  margin: 0;
}
.mt-root .sched-card .where {
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.mt-root .sched-card .where .seats {
  color: var(--accent-deep);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ----------- Pricing ----------- */
.mt-root .price {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1079px) { .mt-root .price { grid-template-columns: 1fr; } }
.mt-root .price-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.mt-root .price-card.featured {
  background: var(--bg-deep);
  border-color: var(--bg-deep);
  color: var(--on-deep);
}
.mt-root .price-card.featured .price-amount { color: var(--on-deep); }
.mt-root .price-card.featured .price-label,
.mt-root .price-card.featured .price-incl li { color: var(--on-deep-mute); }
.mt-root .price-card.featured .price-incl li::before { color: var(--accent); }
.mt-root .price-card.featured .badge { background: var(--accent); color: #fff; }
.mt-root .price-card .badge {
  position: absolute;
  top: -10px; left: 24px;
  background: var(--ink);
  color: var(--on-deep);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.mt-root .price-card h3 {
  font-family: var(--serif);
  font-size: 28px;
}
.mt-root .price-tag {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.mt-root .price-amount {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.mt-root .price-currency {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-mute);
}
.mt-root .price-label {
  font-size: 13px;
  color: var(--ink-soft);
}
.mt-root .price-incl {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mt-root .price-incl li {
  font-size: 14px;
  color: var(--ink-soft);
  position: relative;
  padding-left: 22px;
}
.mt-root .price-incl li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-deep);
}

/* ----------- Testimonials ----------- */
.mt-root .testi-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1079px) { .mt-root .testi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mt-root .testi-grid { grid-template-columns: 1fr; } }
.mt-root .testi {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mt-root .testi.big {
  background: var(--bg-deep);
  color: var(--on-deep);
  border-color: var(--bg-deep);
  grid-row: span 2;
}
.mt-root .testi.big q {
  font-family: var(--serif);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  flex: 1;
}
.mt-root .testi q {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.3;
  quotes: '\\201C' '\\201D';
  flex: 1;
}
.mt-root .testi-attrib {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.mt-root .testi.big .testi-attrib { border-color: rgba(255,255,255,0.15); }
.mt-root .testi-avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
}
.mt-root .testi.big .testi-avatar { background: var(--accent); color: #fff; }
.mt-root .testi-name {
  font-size: 13px;
  font-weight: 500;
}
.mt-root .testi-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mt-root .testi.big .testi-meta { color: var(--on-deep-mute); }

.mt-root .rank-up {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--positive);
  padding: 4px 8px;
  background: color-mix(in oklab, var(--positive) 12%, transparent);
  border-radius: 999px;
  letter-spacing: 0.06em;
}
.mt-root .testi.big .rank-up { background: rgba(47,107,78,0.25); color: #88c4a4; }

/* ----------- FAQ ----------- */
.mt-root .faq {
  border-top: 1px solid var(--line);
}
.mt-root .faq-item {
  border-bottom: 1px solid var(--line);
}
.mt-root .faq-q {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 24px 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: color .15s;
}
.mt-root .faq-q:hover { color: var(--accent-deep); }
.mt-root .faq-q .plus {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  flex-shrink: 0;
  transition: transform .25s ease, background .15s, color .15s;
}
.mt-root .faq-item.open .faq-q .plus {
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--on-deep);
  border-color: var(--ink);
}
.mt-root .faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.mt-root .faq-item.open .faq-a {
  max-height: 400px;
}
.mt-root .faq-a-inner {
  padding-bottom: 24px;
  max-width: 70ch;
  color: var(--ink-soft);
  font-size: 15px;
}

/* ----------- Final CTA ----------- */
.mt-root .final {
  position: relative;
  overflow: hidden;
}
.mt-root .final-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
}
@media (max-width: 1079px) { .mt-root .final-inner { grid-template-columns: 1fr; } }
.mt-root .final h2 .accent { font-style: italic; color: var(--accent); }
.mt-root .final .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.mt-root .final-side {
  border-left: 1px solid var(--on-deep-mute);
  padding-left: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  color: var(--on-deep-mute);
}
@media (max-width: 1079px) {
  .mt-root .final-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--on-deep-mute); padding-top: 24px; }
}
.mt-root .final-side strong { color: var(--on-deep); display: block; margin-bottom: 4px; font-weight: 500; }

/* ----------- Trust strip ----------- */
.mt-root .trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 1079px) { .mt-root .trust { grid-template-columns: 1fr; } }
.mt-root .trust .label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.mt-root .trust-logos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 56px);
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.mt-root .trust-logos span { opacity: 0.75; }

/* ----------- Footer ----------- */
.mt-root .footer {
  background: var(--bg-deep);
  color: var(--on-deep);
  padding: 64px 0 36px;
}
.mt-root .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (max-width: 1079px) {
  .mt-root .footer-grid { grid-template-columns: 1fr 1fr; }
}
.mt-root .footer h5 {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--on-deep-mute);
  margin: 0 0 16px;
  font-weight: 500;
}
.mt-root .footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mt-root .footer a {
  color: var(--on-deep);
  text-decoration: none;
  font-size: 14px;
  opacity: 0.85;
}
.mt-root .footer a:hover { opacity: 1; color: var(--accent); }
.mt-root .footer .colophon {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-deep-mute);
}
.mt-root .footer .brand-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mt-root .footer .brand-block .logo {
  color: var(--on-deep);
}
.mt-root .footer .brand-block .logo-mark {
  background: var(--accent);
  color: var(--ink);
}
.mt-root .footer .brand-block p {
  color: var(--on-deep-mute);
  font-size: 14px;
  max-width: 32ch;
}

/* ----------- Visual hero placeholder ----------- */
.mt-root .hero-visual {
  margin-top: 56px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--brand-grad, var(--bg-card));
  aspect-ratio: 16 / 5.5;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 24px;
  position: relative;
}
.mt-root .hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.18) 0 1px,
      transparent 1px 14px
    );
  pointer-events: none;
}
.mt-root .hero-visual .ph-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: rgba(255,255,255,0.85);
  padding: 4px 8px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-xs);
  position: relative;
  z-index: 1;
}

/* ----------- Visible-on-scroll ----------- */.mt-root .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.mt-root .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============ Course Hero (Matrix-style) ============ */
.mt-root .course-hero {
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 72px);
  background: var(--bg);
  position: relative;
}
.mt-root .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 28px;
}
.mt-root .breadcrumb a {
  color: var(--ink-mute);
  text-decoration: none;
}
.mt-root .breadcrumb a:hover { color: var(--accent-deep); }
.mt-root .breadcrumb .current { color: var(--ink); }
.mt-root .breadcrumb span { color: var(--line); }

.mt-root .course-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 1079px) {
  .mt-root .course-hero-grid { grid-template-columns: 1fr; gap: 32px; }
}

.mt-root .course-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding: 6px 12px;
  background: var(--accent-soft);
  border-radius: 999px;
  margin-bottom: 24px;
}
.mt-root .course-title {
  font-family: var(--serif);
  font-size: clamp(44px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.mt-root .course-lede {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 0 32px;
  text-wrap: pretty;
}
.mt-root .course-hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.mt-root .course-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
}
.mt-root .course-hero-meta strong {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--serif);
  font-style: italic;
}

.mt-root .course-hero-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 28px 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 84px;
  box-shadow: 0 30px 60px -40px rgba(0,0,0,0.15);
}
.mt-root .course-card-head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.mt-root .course-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mt-root .course-card-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}
.mt-root .course-card-list li:last-child { border-bottom: 0; }
.mt-root .course-card-list li span {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.mt-root .course-card-list li strong {
  text-align: right;
  color: var(--ink);
  font-weight: 500;
  font-size: 13.5px;
}
.mt-root .course-card-foot {
  margin: 16px -28px 0;
  padding: 22px 28px 28px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mt-root .course-card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.mt-root .course-card-price .cur {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
}
.mt-root .course-card-price .amt {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.mt-root .course-card-price .per {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-left: 6px;
}

/* ============ Anchor bar ============ */
.mt-root .anchor-bar {
  position: sticky;
  top: 50px;
  z-index: 40;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.mt-root .anchor-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
}
.mt-root .anchor-bar-links {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mt-root .anchor-bar-links::-webkit-scrollbar { display: none; }
.mt-root .anchor-bar-links a {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.mt-root .anchor-bar-links a:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.mt-root .anchor-bar-cta {
  padding: 8px 16px !important;
  font-size: 12px !important;
}
@media (max-width: 720px) {
  .mt-root .anchor-bar-cta { display: none; }
}

/* ============ Program at a glance ============ */
.mt-root .glance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 1079px) { .mt-root .glance-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mt-root .glance-grid { grid-template-columns: 1fr; } }
.mt-root .glance-card {
  background: var(--bg-card);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
}
.mt-root .glance-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 18px;
  margin-bottom: 8px;
}
.mt-root .glance-k {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.mt-root .glance-v {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: auto;
}

/* ============ Overview ============ */
.mt-root .overview-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 1079px) { .mt-root .overview-grid { grid-template-columns: 1fr; gap: 32px; } }
.mt-root .overview-prose .lead + .lead { margin-top: 20px; }
.mt-root .overview-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
@media (max-width: 560px) { .mt-root .overview-meta { grid-template-columns: 1fr; } }
.mt-root .overview-meta-k {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.mt-root .overview-meta-v {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.45;
}
.mt-root .overview-aside {
  position: sticky;
  top: 100px;
}
.mt-root .overview-aside-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mt-root .overview-aside-k {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.mt-root .overview-aside-date {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.mt-root .overview-aside-date .d {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.mt-root .overview-aside-date .m {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.mt-root .overview-aside-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13.5px;
}
.mt-root .overview-aside-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.mt-root .overview-aside-meta > div > span {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.mt-root .overview-aside-meta strong {
  text-align: right;
  color: var(--ink);
  font-weight: 500;
  font-size: 13.5px;
}

/* ============ Course tabs (sidebar) ============ */
.mt-root .tabs-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 1079px) {
  .mt-root .tabs-shell { grid-template-columns: 1fr; gap: 24px; }
  .mt-root .tabs-nav { position: static !important; }
}
.mt-root .tabs-nav {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--line);
  padding-left: 0;
}
.mt-root .tabs-nav-item {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 14px 18px 14px 20px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  position: relative;
  margin-left: -1px;
  border-left: 1px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.mt-root .tabs-nav-item:hover {
  color: var(--ink);
  background: var(--bg-card);
}
.mt-root .tabs-nav-item.active {
  color: var(--ink);
  background: var(--bg-card);
  border-left-color: var(--accent);
}
.mt-root .tabs-nav-item.active .tabs-nav-num {
  color: var(--accent-deep);
}
.mt-root .tabs-nav-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.mt-root .tabs-nav-arr {
  opacity: 0;
  transition: opacity .15s, transform .15s;
  color: var(--accent-deep);
}
.mt-root .tabs-nav-item.active .tabs-nav-arr { opacity: 1; transform: translateX(2px); }
.mt-root .tabs-nav-foot {
  margin-top: 24px;
  padding: 18px 18px 18px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mt-root .tabs-nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
}
.mt-root .tabs-nav-phone:hover { color: var(--accent-deep); }

.mt-root .tabs-panel {
  min-height: 400px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 48px);
}

.mt-root .tab-content .tab-h {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.mt-root .tab-content .tab-h-sub {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ink-soft);
}
.mt-root .tab-content .lead {
  margin-bottom: 32px;
}

.mt-root .tab-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 720px) { .mt-root .tab-grid-2 { grid-template-columns: 1fr; } }

.mt-root .tab-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mt-root .tab-list li {
  font-size: 14.5px;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.mt-root .tab-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-deep);
}
.mt-root .tab-list li strong {
  color: var(--ink);
  font-weight: 500;
}
.mt-root .tab-list.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
@media (max-width: 480px) { .mt-root .tab-list.two-col { grid-template-columns: 1fr; } }

.mt-root .tab-table {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-size: 13.5px;
}
.mt-root .tab-row {
  display: grid;
  grid-template-columns: 1fr 3fr auto 1fr;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.mt-root .tab-row:last-child { border-bottom: 0; }
.mt-root .tab-row.head {
  background: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.mt-root .tab-row span:nth-child(3) {
  text-align: right;
  font-family: var(--mono);
  color: var(--accent-deep);
}
.mt-root .tab-row span:nth-child(4) {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-align: right;
}
.mt-root .tab-row.head span:nth-child(3),
.mt-root .tab-row.head span:nth-child(4) {
  color: var(--ink-mute);
}

.mt-root .tab-deliv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
}
@media (max-width: 720px) { .mt-root .tab-deliv { grid-template-columns: 1fr; } }
.mt-root .tab-deliv-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
}
.mt-root .tab-deliv-n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  padding-top: 4px;
}
.mt-root .tab-deliv-item h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 6px;
}
.mt-root .tab-deliv-item p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.mt-root .tab-sched {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.mt-root .tab-sched-row {
  display: grid;
  grid-template-columns: 100px 1fr 110px 110px 80px;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.mt-root .tab-sched-row:last-child { border-bottom: 0; }
.mt-root .tab-sched-row:hover { background: var(--bg); }
@media (max-width: 720px) {
  .mt-root .tab-sched-row { grid-template-columns: 80px 1fr; grid-template-areas: "date body" "date seats" "date pill" "cta cta"; row-gap: 8px; }
  .mt-root .tab-sched-date { grid-area: date; }
  .mt-root .tab-sched-body { grid-area: body; }
  .mt-root .tab-sched-seats { grid-area: seats; text-align: left; }
  .mt-root .tab-sched-pill { grid-area: pill; }
  .mt-root .tab-sched-cta { grid-area: cta; text-align: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); }
}
.mt-root .tab-sched-date {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.mt-root .tab-sched-date .d {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.mt-root .tab-sched-date .m {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  line-height: 1.2;
}
.mt-root .tab-sched-subj {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.mt-root .tab-sched-where {
  font-size: 13px;
  color: var(--ink-soft);
}
.mt-root .tab-sched-seats {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: right;
}
.mt-root .tab-sched-pill { text-align: right; }
.mt-root .pill-tag {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 999px;
}
.mt-root .tab-sched-cta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  text-align: right;
  font-weight: 500;
}
.mt-root .tab-sched-cta:hover { color: var(--accent-deep); }

.mt-root .tab-price {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1079px) { .mt-root .tab-price { grid-template-columns: 1fr; } }
.mt-root .tab-price-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.mt-root .tab-price-card.featured {
  background: var(--bg-deep);
  border-color: var(--bg-deep);
  color: var(--on-deep);
}
.mt-root .tab-price-card.featured h4,
.mt-root .tab-price-card.featured .amt,
.mt-root .tab-price-card.featured .cur { color: var(--on-deep); }
.mt-root .tab-price-card.featured p,
.mt-root .tab-price-card.featured ul li { color: var(--on-deep-mute); }
.mt-root .tab-price-card.featured ul li::before { color: var(--accent); }
.mt-root .tab-price-badge {
  position: absolute;
  top: -10px; left: 22px;
  background: var(--accent);
  color: #000;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  font-weight: 700;
}
.mt-root .tab-price-card h4 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0;
}
.mt-root .tab-price-tag {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.mt-root .tab-price-tag .cur {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
}
.mt-root .tab-price-tag .amt {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.mt-root .tab-price-card p {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0;
}
.mt-root .tab-price-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mt-root .tab-price-card ul li {
  font-size: 13px;
  color: var(--ink-soft);
  padding-left: 18px;
  position: relative;
}
.mt-root .tab-price-card ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-deep);
}
.mt-root .tab-price-card > .btn {
  margin-top: auto;
}

.mt-root .tab-team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) { .mt-root .tab-team { grid-template-columns: 1fr; } }
.mt-root .tab-team-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.mt-root .tab-team-avatar {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
}
.mt-root .tab-team-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.mt-root .tab-team-sub {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  margin-top: 2px;
}
.mt-root .tab-team-meta {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ============================================================
   QUICK OVERVIEW — 3 feature cards (sections/03b-quick-overview.jsx)
   ============================================================ */
.mt-root .qo-section {
  background: var(--bg);
  padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 40px) clamp(20px, 2.5vw, 30px);
}
.mt-root .qo-wrap {
  max-width: 1240px;
  margin: 0 auto;
}

.mt-root .qo-head {
  max-width: 680px;
  margin: 0 auto clamp(28px, 3.5vw, 44px);
  text-align: center;
}
.mt-root .qo-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 12px;
}
.mt-root .qo-title {
  font-family: "Inter", var(--sans);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}
.mt-root .qo-grad {
  background: linear-gradient(135deg, #38D430 0%, #087802 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mt-root .qo-lede {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}

.mt-root .qo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}
@media (max-width: 1079px) { .mt-root .qo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .mt-root .qo-grid { grid-template-columns: 1fr; } }

.mt-root .qo-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.mt-root .qo-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(8, 120, 2, 0.18);
}

.mt-root .qo-photo {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  display: block;
}
.mt-root .qo-photo.padded {
  padding: 14px;
  background: var(--bg-card);
}
.mt-root .qo-photo.flush {
  padding: 0;
  background: var(--bg);
}
.mt-root .qo-photo image-slot {
  display: block;
  width: 100%;
  height: 100%;
}
.mt-root .qo-photo.padded image-slot {
  border-radius: 10px;
  overflow: hidden;
}

.mt-root .qo-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mt-root .qo-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 10px;
}
.mt-root .qo-h3 {
  font-family: var(--sans);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 10px;
  min-height: 2.3em;
}
.mt-root .qo-p {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.mt-root .qo-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.mt-root { background: var(--bg-deep); }

/* ---- Hero ---- */
.mt-root .m-hero {
  background: var(--bg-deep);
  padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px);
}
.mt-root .m-hero-card {
  background: #F0F7F0;
  border-radius: 24px;
  padding: clamp(40px, 5vw, 64px) clamp(32px, 5vw, 64px) 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(32px, 4vw, 56px);
  row-gap: 24px;
  align-items: stretch;
  border-top: 5px solid var(--accent);
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1079px) {
  .mt-root .m-hero-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 40px 28px 0;
  }
}
.mt-root .m-hero-content {
  /* Header section uses Inter — overrides --sans for everything inside
     (chip, headline, tagline, body). Watermark sits outside, so it's untouched. */
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mt-root .m-hero-right {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  min-height: 0;
}
@media (max-width: 1079px) {
  .mt-root .m-hero-content { grid-column: 1; grid-row: 1; }
  .mt-root .m-hero-right { grid-column: 1; grid-row: 2; }
  /* watermark sits below the photo once stacked (instead of overlapping it).
     Extra specificity so it beats the base `grid-row: 2` defined later in the file. */
  .mt-root .m-hero-card .m-hero-bg-text { grid-row: 3; grid-column: 1; margin-top: 4px; margin-bottom: 10px; }
}
.mt-root .m-hero-left { position: relative; z-index: 1; }
.mt-root .m-hero-chip {
  display: inline-block;
  border: 0;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #38D430 0%, #087802 100%);
  color: #fff;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(8, 120, 2, 0.35);
}
.mt-root .m-hero-tagline {
  font-family: var(--sans);
  margin: 0 0 22px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.4;
  max-width: 48ch;
}
.mt-root .m-hero-tagline .m-sep {
  margin: 0 0.5em;
  color: var(--accent);
  font-weight: 700;
}
.mt-root .m-tag-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  transform: translateY(2px);
}
.mt-root .m-hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 3px 9px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 3px;
  margin-bottom: 14px;
}
.mt-root .m-hero-headline {
  font-family: var(--sans);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: balance;
}
.mt-root .m-hero-green {
  background: linear-gradient(135deg, #38D430 0%, #087802 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mt-root .m-hero-body {
  font-family: var(--sans); /* Inter inside .m-hero-content */
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--ink);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 0 32px;
}
/* Desktop shows the full description; phone swaps to the short one */
.mt-root .m-hero-body .hero-body-short { display: none; }
.mt-root .m-hero-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.mt-root .m-hero-cta {
  background: linear-gradient(135deg, #38D430 0%, #087802 100%);
  color: #fff;
  width: 170px;
  height: 45px;
  padding: 0;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter .2s, transform .15s, box-shadow .2s;
  font-family: "Inter", var(--sans);
  box-shadow: 0 6px 18px -6px rgba(8, 120, 2, 0.45);
}
.mt-root .m-hero-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(8, 120, 2, 0.55);
}
.mt-root .m-hero-ghost {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .2s;
}
.mt-root .m-hero-ghost:hover { color: var(--accent-deep); }
.mt-root .m-hero-bg-text {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 8px;
  margin-bottom: -8px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.mt-root .m-bg-bold {
  font-family: var(--sans);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(63, 181, 74, 0.18);
  line-height: 1;
}
.mt-root .m-bg-script {
  font-family: "Allura", "Pinyon Script", cursive;
  font-size: clamp(56px, 7vw, 92px);
  color: rgba(63, 181, 74, 0.22);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.7;
  transform: translateY(0);
}
.mt-root .m-hero-img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: block;
  border-radius: 12px;
  overflow: hidden;
}

/* ----------- Hero · phone (≤560px) ----------- */
@media (max-width: 560px) {
  .mt-root .m-hero-card { padding: 32px 22px 0 !important; }
  /* let the text column shrink to the card instead of overflowing it */
  .mt-root .m-hero-content { min-width: 0; max-width: 100%; }

  /* 1 · "Mock HSC Trial" on one line, "Exam Program" below */
  .mt-root .m-hero-headline { font-size: 22px !important; }
  .mt-root .m-hero-green { font-size: 27px !important; white-space: nowrap; }

  /* 2 · All three subjects on a single line (sized to fit, no forced nowrap) */
  .mt-root .m-hero-tagline {
    font-size: 11.5px;
    letter-spacing: -0.015em;
  }
  .mt-root .m-hero-tagline .m-sep { margin: 0 0.3em; }

  /* 3 · Shorter description on phone */
  .mt-root .m-hero-body .hero-body-full { display: none; }
  .mt-root .m-hero-body .hero-body-short { display: inline; }
  .mt-root .m-hero-body { margin-bottom: 24px; }

  /* use the full width: stack the CTAs, primary button spans the row */
  .mt-root .m-hero-cta-row { width: 100%; align-self: stretch; flex-direction: column; align-items: stretch; gap: 14px; }
  .mt-root .m-hero-cta { width: 100%; }
  .mt-root .m-hero-ghost { align-self: flex-start; }
}
.mt-root .m-hero-img-ph {
  width: 100%;
  flex: 1;
  min-height: 280px;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 14px),
    #DCE5DC;
  border-radius: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 20px;
  position: relative;
}
.mt-root .m-hero-img-label,
.mt-root .m-hero-img-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: rgba(255,255,255,0.9);
  padding: 4px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}

/* ---- Marquee ---- */
.mt-root .m-marquee {
  background: var(--accent);
  color: #fff;
  padding: 14px 0;
  overflow: hidden;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mt-root .m-marquee-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: m-scroll 28s linear infinite;
}
.mt-root .m-marquee-track span { display: inline-flex; align-items: center; gap: 16px; }
.mt-root .m-marquee-track em { font-style: normal; opacity: 0.7; font-size: 20px; }
@keyframes m-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- Course section ---- */
.mt-root .m-course {
  /* Whole program/details section uses Inter — overrides every font token so the
     filter, badges, tabs, labels, title and hints all match (no mono/serif here). */
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "Inter", system-ui, -apple-system, sans-serif;
  --serif: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  padding: clamp(16px, 2vw, 28px) clamp(20px, 4vw, 40px) clamp(60px, 7vw, 96px);
}
.mt-root .m-course-wrap {
  max-width: 1240px;
  margin: 0 auto;
}

/* Sticky tab bar */
.mt-root .m-tabbar {
  background: var(--bg-card);
  border-radius: 100px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  margin-bottom: 40px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  z-index: 30;
}
.mt-root .m-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.mt-root .m-tabs::-webkit-scrollbar { display: none; }

/* Inline centre selector (Schedule tab) */
.mt-root .m-centre-inline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 24px;
  padding: 6px 6px 6px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.mt-root .m-centre-inline-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.mt-root .m-centre-inline-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-align-last: center;
  padding: 6px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4FD650 0%, #38D430 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--sans);
  border: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(135deg, #4FD650 0%, #38D430 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center, right 8px center;
  background-size: 100% 100%, 12px;
  box-shadow: 0 4px 12px -4px rgba(56, 212, 48, 0.5);
  text-shadow: 0 1px 1px rgba(0,0,0,0.12);
}
.mt-root .m-tab {
  padding: 10px 18px;
  border-radius: 100px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--sans);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.mt-root .m-tab:hover { background: var(--line-soft); }
.mt-root .m-tab.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.mt-root .m-centre-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 4px;
}
.mt-root .m-centre-label {
  font-size: 13px;
  color: var(--ink-soft);
  font-family: var(--sans);
}
.mt-root .m-centre-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  padding-right: 28px;
  border-radius: 100px;
  background: linear-gradient(90deg, #FF8C42, #FF6B35);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--sans);
  border: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(90deg, #FF8C42, #FF6B35),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center, right 8px center;
  background-size: 100% 100%, 12px;
}
@media (max-width: 720px) {
  .mt-root .m-centre-selector { display: none; }
}

/* Course title */
.mt-root .m-course-title {
  font-family: var(--sans);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mt-root .m-course-sep { color: var(--ink-mute); font-weight: 300; }
.mt-root .m-subject-select {
  font-family: var(--sans);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  color: var(--accent-deep);
  background: transparent;
  border: 0;
  border-bottom: 2px dashed var(--accent);
  cursor: pointer;
  padding: 2px 4px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%232E8B3A'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 22px;
}

/* Layout: sidebar + content */
.mt-root .m-course-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 1079px) {
  .mt-root .m-course-layout { grid-template-columns: 1fr; }
}

/* Sidebar */
.mt-root .m-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 144px;
}

/* ── Step filter block ── */
.mt-root .m-filter-block {
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px 12px;
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}
.mt-root .m-filter-heading {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.mt-root .m-filter-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: opacity .2s;
}
.mt-root .m-filter-step.locked {
  opacity: 0.38;
  pointer-events: none;
}
/* Number badge */
.mt-root .m-filter-num {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background .2s, color .2s;
}
.mt-root .m-filter-num.inactive { background: var(--line); color: var(--ink-mute); }
.mt-root .m-filter-num.current  { background: var(--ink);  color: #fff; }
/* Bigger checkmark inside — outer circle stays 22px */
.mt-root .m-filter-num.done     { background: var(--accent); color: #fff; font-size: 15px; font-weight: 900; line-height: 1; }

.mt-root .m-filter-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 10px;
}
.mt-root .m-filter-step-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
/* Subject select */
.mt-root .m-filter-select {
  width: 100%;
  padding: 7px 28px 7px 10px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--bg-card);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
  transition: border-color .15s;
}
.mt-root .m-filter-select:hover   { border-color: var(--ink-soft); }
.mt-root .m-filter-select:focus   { outline: none; border-color: var(--accent); }
.mt-root .m-filter-select.chosen  {
  border-color: var(--accent);
  color: var(--accent-deep);
  font-weight: 600;
}
/* Campus pill buttons */
.mt-root .m-filter-campus-row {
  display: flex;
  gap: 6px;
}
.mt-root .m-filter-campus-btn {
  flex: 1;
  padding: 6px 6px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--bg-card);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.mt-root .m-filter-campus-btn:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}
.mt-root .m-filter-campus-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 700;
}
.mt-root .m-filter-campus-btn:disabled { cursor: default; }
/* ── Stepper: steps wrapper, row, left track, vertical line ── */
.mt-root .m-filter-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mt-root .m-filter-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  transition: opacity .2s;
}
.mt-root .m-filter-row.locked {
  opacity: 0.38;
  pointer-events: none;
}
.mt-root .m-filter-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 22px;
}
/* Vertical connecting line between badge 1 and badge 2 */
.mt-root .m-filter-vline {
  flex: 1;
  width: 2px;
  background: var(--line);
  border-radius: 1px;
  margin: 5px 0 0;
  min-height: 14px;
}

/* Legacy connector — kept for safety, no longer rendered */
.mt-root .m-filter-connector {
  width: 2px;
  height: 10px;
  background: var(--line);
  margin: 4px 0 4px 10px;
  border-radius: 1px;
}

/* ── Locked placeholder card ── */
.mt-root .ses-locked-card {
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  background: var(--bg);
  margin-bottom: 18px;
}
.mt-root .ses-locked-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.mt-root .ses-locked-msg {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.mt-root .ses-locked-hint {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin: 0;
}

/* ── Week divider inside timetable (legacy) ── */
.mt-root .ses-week-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
.mt-root .ses-week-header:first-child { padding-top: 6px; }
.mt-root .ses-week-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  white-space: nowrap;
}
.mt-root .ses-week-dates {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

/* ── Redesigned timetable — ses-tt-* ── */
/* 5-column grid: Date | Day | Session | Time | Duration */
.mt-root .ses-timetable {
  padding: 4px 24px 12px;
}

/* Column header row */
.mt-root .ses-tt-head {
  display: grid;
  grid-template-columns: 58px 88px 1fr 110px 58px;
  gap: 0 14px;
  padding: 12px 10px 10px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 2px;
}
.mt-root .ses-tt-head span {
  font-family: 'Inter', var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  font-weight: 700;
}

/* Week divider row */
.mt-root .ses-tt-week {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  margin-top: 6px;
  background: var(--accent-soft);
  border-radius: 6px;
}
.mt-root .ses-tt-week-badge {
  font-family: 'Inter', var(--sans);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
  white-space: nowrap;
}

/* Data row */
.mt-root .ses-tt-row {
  display: grid;
  grid-template-columns: 58px 88px 1fr 110px 58px;
  gap: 0 14px;
  align-items: center;
  padding: 11px 10px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 6px;
  transition: background .12s;
}
.mt-root .ses-tt-row:last-child { border-bottom: 0; }
.mt-root .ses-tt-row:hover { background: var(--bg); }
.mt-root .ses-tt-row.even { background: color-mix(in oklab, var(--bg) 60%, var(--bg-card)); }
.mt-root .ses-tt-row.even:hover { background: var(--bg); }

.mt-root .ses-tt-date {
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.mt-root .ses-tt-day {
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.mt-root .ses-tt-type {
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.mt-root .ses-tt-time {
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-deep);
  white-space: nowrap;
}
.mt-root .ses-tt-dur {
  font-family: 'Inter', var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 540px) {
  .mt-root .ses-tt-head,
  .mt-root .ses-tt-row {
    grid-template-columns: 50px 1fr 90px;
  }
  .mt-root .ses-tt-head span:nth-child(2),
  .mt-root .ses-tt-row .ses-tt-day { display: none; }
  .mt-root .ses-tt-head span:last-child,
  .mt-root .ses-tt-row .ses-tt-dur { display: none; }
}
@media (max-width: 1079px) {
  .mt-root .m-sidebar { position: static; }
}
.mt-root .m-side-item {
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-family: var(--sans);
}
.mt-root .m-side-item:hover { border-color: var(--accent); }
.mt-root .m-side-item.active {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(63, 181, 74, 0.14);
}
.mt-root .m-side-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mt-root .m-side-label {
  font-size: 13px;
  color: var(--ink-soft);
}
.mt-root .m-side-sub {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  line-height: 1.2;
}
.mt-root .m-side-arr {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  background: transparent;
  border: 1.5px solid var(--accent);
  border-radius: 100%;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.mt-root .m-side-arr svg {
  display: block;
  width: 16px;
  height: 16px;
}
.mt-root .m-side-item.active .m-side-arr { opacity: 1; }

/* Content pane */
.mt-root .m-pane {
  background: var(--bg-card);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  font-family: var(--sans);
}
.mt-root .m-content-label {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 8px;
  font-family: var(--sans);
}
.mt-root .m-content-title {
  font-family: var(--sans);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  color: var(--ink);
}
.mt-root .m-content p {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.65;
}
.mt-root .m-content strong { font-weight: 700; }
.mt-root .m-content h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  margin: 32px 0 16px;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* Table */
.mt-root .m-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 14.5px;
}
.mt-root .m-table thead {
  background: var(--ink);
  color: #fff;
}
.mt-root .m-table th,
.mt-root .m-table td {
  padding: 14px 18px;
  text-align: left;
  border: 1px solid var(--line);
}
.mt-root .m-table th { font-weight: 600; font-family: var(--sans); }
.mt-root .m-table td:first-child { font-weight: 500; }
.mt-root .m-table small { color: var(--ink-mute); font-size: 12px; }
.mt-root .m-table.highlight-row tbody tr:first-child {
  background: var(--accent-soft);
}
.mt-root .m-table.highlight-row tbody tr:first-child td:first-child {
  font-weight: 700;
}

/* Bullets */
.mt-root .m-bullets {
  list-style: none;
  margin: 16px 0 24px;
  padding: 0;
}
.mt-root .m-bullets li {
  padding-left: 28px;
  margin-bottom: 12px;
  position: relative;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
}
.mt-root .m-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
}

/* Note box */
.mt-root .m-note {
  background: var(--accent-tint);
  border-left: 4px solid var(--accent);
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 14.5px;
  border-radius: 0 8px 8px 0;
  color: var(--ink);
}

/* CTA */
.mt-root .m-cta {
  background: var(--accent);
  color: #fff;
  padding: 16px 36px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-block;
  margin-top: 16px;
  font-family: var(--sans);
  transition: background .2s, transform .15s;
}
.mt-root .m-cta:hover { background: var(--accent-deep); }

/* Centre cards (Location body) */
.mt-root .m-centre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 24px;
}
@media (max-width: 720px) { .mt-root .m-centre-grid { grid-template-columns: 1fr; } }
.mt-root .m-centre {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  background: var(--bg);
}
.mt-root .m-centre.active {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.mt-root .m-centre-badge {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
  color: var(--ink);
}
.mt-root .m-centre-addr {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.mt-root .m-centre-times {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  font-size: 13px;
}
.mt-root .m-centre-times span {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.mt-root .m-centre-times strong {
  color: var(--ink);
  font-weight: 500;
  font-size: 13px;
}

/* FAQ (inside pane) */
.mt-root .m-faq {
  margin: 16px 0 24px;
  border-top: 1px solid var(--line);
}
.mt-root .m-faq-item { border-bottom: 1px solid var(--line); }
.mt-root .m-faq-q {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 20px 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--ink);
  transition: color .15s;
}
.mt-root .m-faq-q:hover { color: var(--accent-deep); }
.mt-root .m-faq-plus {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1.5px solid var(--accent-soft);
  border-radius: 999px;
  flex-shrink: 0;
  transition: transform .25s ease, background .15s, color .15s, border-color .15s;
}
.mt-root .m-faq-plus svg {
  display: block;
  width: 16px;
  height: 16px;
}
/* Hover the question row → ring firms up to full green */
.mt-root .m-faq-q:hover .m-faq-plus { border-color: var(--accent); }
.mt-root .m-faq-item.open .m-faq-plus {
  transform: rotate(45deg);
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.mt-root .m-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.mt-root .m-faq-item.open .m-faq-a { max-height: 400px; }
.mt-root .m-faq-a-inner {
  padding-bottom: 20px;
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---- Footer ---- */
.mt-root .m-footer {
  background: var(--bg-deep);
  color: var(--on-deep);
  padding: 64px 0 32px;
  font-family: var(--sans);
}
.mt-root .m-footer-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.mt-root .m-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 1079px) { .mt-root .m-footer-grid { grid-template-columns: 1fr 1fr; } }
.mt-root .m-footer-brand p {
  color: var(--on-deep-mute);
  font-size: 14px;
  line-height: 1.6;
  max-width: 38ch;
  margin: 16px 0 0;
}
.mt-root .m-footer-logo {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
}
.mt-root .m-footer h5 {
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-deep);
  margin: 0 0 18px;
  font-weight: 700;
}
.mt-root .m-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mt-root .m-footer li,
.mt-root .m-footer a {
  color: var(--on-deep-mute);
  text-decoration: none;
  font-size: 14px;
}
.mt-root .m-footer a:hover { color: var(--accent); }
.mt-root .m-footer-colophon {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-deep-mute);
}

/* =====================================================
   SESSION — Schedule + Pricing merged tab (ses-*)
   ===================================================== */

/* Controls row */
.mt-root .ses-controls {
  display: flex;
  gap: 20px 32px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 20px;
}
.mt-root .ses-ctrl-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mt-root .ses-ctrl-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}

/* Subject segmented pill */
.mt-root .ses-subject-pill {
  display: flex;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.mt-root .ses-subject-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.mt-root .ses-subject-btn:hover { color: var(--ink); }
.mt-root .ses-subject-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* Location toggle */
.mt-root .ses-location-toggle {
  display: flex;
  gap: 8px;
}
.mt-root .ses-loc-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg-card);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.mt-root .ses-loc-btn:hover { border-color: var(--accent); color: var(--ink); }
.mt-root .ses-loc-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
@media (max-width: 480px) {
  .mt-root .ses-subject-btn { padding: 7px 12px; font-size: 12.5px; }
  .mt-root .ses-loc-btn     { padding: 7px 14px; font-size: 12.5px; }
}

/* Preview toggle (A / B / C) */
.mt-root .ses-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.mt-root .ses-preview-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-right: 2px;
}
.mt-root .ses-preview-btn {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.mt-root .ses-preview-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.mt-root .ses-preview-btn.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ── Session card ── */
.mt-root .ses-card {
  /* Whole session card / timetable uses Inter — overrides both font tokens so
     the cohort title, seats, prices and bundle line match the Inter rows. */
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "Inter", system-ui, -apple-system, sans-serif;
  border: 1.5px solid var(--accent);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
  margin-bottom: 18px;
}
.mt-root .ses-card--filling { border-color: #D97706; }

/* Card header */
.mt-root .ses-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--line);
}
/* Session-time toggle (Advanced only) */
.mt-root .ses-slot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 24px 2px;
}
.mt-root .ses-slot-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.mt-root .ses-slot-toggle { display: inline-flex; gap: 6px; }
.mt-root .ses-slot-btn {
  padding: 6px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--bg-card);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.mt-root .ses-slot-btn:hover { border-color: var(--accent); color: var(--ink); }
.mt-root .ses-slot-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.mt-root .ses-card-head-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mt-root .ses-period {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.mt-root .ses-cohort {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mt-root .ses-spots {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-deep);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 3px;
}
.mt-root .ses-spots--hot {
  color: #fff;
  background: #D97706;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
}

/* Timetable — intentionally plain */
.mt-root .ses-timetable {
  padding: 6px 24px 10px;
}
.mt-root .ses-row {
  display: grid;
  grid-template-columns: 118px 1fr 126px 32px;
  gap: 8px 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mt-root .ses-row:last-child { border-bottom: 0; }
.mt-root .ses-row-type {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.mt-root .ses-row-day  { font-size: 13px; font-weight: 600; color: var(--ink); }
.mt-root .ses-row-time { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.mt-root .ses-row-dur  { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); text-align: right; }
@media (max-width: 480px) {
  .mt-root .ses-row { grid-template-columns: 1fr auto; }
  .mt-root .ses-row-type { display: none; }
  .mt-root .ses-row-dur  { display: none; }
}

/* Price + book footer */
.mt-root .ses-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px 18px;
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--accent-soft) 28%, var(--bg-card));
}
.mt-root .ses-price-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mt-root .ses-price-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.mt-root .ses-price-eb {
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.mt-root .ses-price-was {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-mute);
  text-decoration: line-through;
}
.mt-root .ses-eb-note {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #B45309;
}
.mt-root .ses-bundle-line {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.mt-root .ses-book-btn {
  background: #fff;
  color: var(--accent-deep);
  padding: 13px 26px;
  border-radius: 10px;
  border: 1.5px solid var(--accent-deep);
  font-family: 'Inter', var(--sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, transform .15s;
  flex-shrink: 0;
}
.mt-root .ses-book-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}

/* Location detail card */
.mt-root .ses-loc-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  margin-top: 20px;
  margin-bottom: 24px;
}
.mt-root .ses-loc-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-deep);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 1px;
}
.mt-root .ses-loc-addr {
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* =====================================================
   ENQUIRY MODAL + SIDEBAR NUDGE + INLINE LINK
   ===================================================== */

/* Overlay */
.mt-root .enq-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  animation: enq-fade .18s ease;
}
@keyframes enq-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Modal card */
.mt-root .enq-modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 32px 80px -20px rgba(0,0,0,0.32);
  overflow: hidden;
  animation: enq-up .2s ease;
}
@keyframes enq-up {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Header */
.mt-root .enq-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 26px 20px;
  border-bottom: 1px solid var(--line);
}
.mt-root .enq-title {
  font-family: 'Inter', var(--sans);
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.mt-root .enq-subject-chip {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.mt-root .enq-close {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.mt-root .enq-close:hover { background: var(--ink); color: #fff; }

/* Form */
.mt-root .enq-form {
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mt-root .enq-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mt-root .enq-label {
  font-family: 'Inter', var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.mt-root .enq-optional {
  font-weight: 400;
  color: var(--ink-mute);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}
.mt-root .enq-req { color: var(--accent-deep); font-weight: 700; }
.mt-root .enq-input,
.mt-root .enq-textarea {
  font-family: 'Inter', var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color .15s;
  outline: none;
  resize: none;
  width: 100%;
  box-sizing: border-box;
}
.mt-root .enq-input:focus,
.mt-root .enq-textarea:focus { border-color: var(--accent); }
.mt-root .enq-note {
  font-family: 'Inter', var(--sans);
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: -2px;
}
.mt-root .enq-submit {
  background: linear-gradient(135deg, #38D430 0%, #087802 100%);
  color: #fff;
  padding: 14px 28px;
  border-radius: 10px;
  border: 0;
  font-family: 'Inter', var(--sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .18s, transform .15s;
  letter-spacing: 0.02em;
  text-align: center;
}
.mt-root .enq-submit:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* Success state */
.mt-root .enq-success {
  padding: 48px 28px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.mt-root .enq-success-icon {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.mt-root .enq-success-title {
  font-family: 'Inter', var(--sans);
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}
.mt-root .enq-success-msg {
  font-family: 'Inter', var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
}
.mt-root .enq-done-btn {
  margin-top: 8px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 10px 28px;
  font-family: 'Inter', var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s;
}
.mt-root .enq-done-btn:hover { background: var(--line-soft); }

/* ── Sidebar nudge card (Option B) ── */
.mt-root .m-enquiry-nudge {
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mt-root .m-enquiry-nudge-icon {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: 'Inter', var(--sans);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mt-root .m-enquiry-nudge-body {
  flex: 1;
  min-width: 0;
}
.mt-root .m-enquiry-nudge-title {
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.mt-root .m-enquiry-nudge-sub {
  font-family: 'Inter', var(--sans);
  font-size: 11px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.mt-root .m-enquiry-nudge-btn {
  background: transparent;
  border: 1.5px solid var(--accent-deep);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'Inter', var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-deep);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.mt-root .m-enquiry-nudge-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* locked-placeholder hint: "on the left" on desktop, "above" once stacked */
.mt-root .ses-locked-hint .locked-hint-sm { display: none; }

/* ── Stacked layout (≤880): schedule sits under the filter; FAQ expands under its tab ── */
@media (max-width: 1079px) {
  /* dissolve the sidebar AND pane boxes so the filter, schedule, FAQ tab,
     FAQ panel and nudge all share one column and can be interleaved */
  .mt-root .m-course-layout { gap: 16px; }
  .mt-root .m-sidebar, .mt-root .m-pane { display: contents; }

  /* each visible panel becomes its own card (the .m-pane card box is gone) */
  .mt-root .m-pane-body {
    background: var(--bg-card);
    border-radius: 16px;
    padding: clamp(22px, 5vw, 32px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  }

  .mt-root .m-filter-block                    { order: 1; }
  .mt-root .m-pane-body[data-body="schedule"] { order: 2; }
  .mt-root .m-side-item[data-tab="faq"]       { order: 3; }
  .mt-root .m-pane-body[data-body="faq"]      { order: 4; }   /* expands directly under the FAQ tab */
  .mt-root .m-enquiry-nudge                   { order: 5; }

  /* no "Schedule" tab needed; schedule panel always stays visible */
  .mt-root .m-side-item[data-tab="schedule"]          { display: none; }
  .mt-root .m-pane-body[data-body="schedule"][hidden] { display: block; }
  /* FAQ's "Check schedule →" link is redundant when schedule is right above */
  .mt-root .m-pane-body[data-body="faq"] .m-cta { display: none; }

  /* timetable session — location card on phone */
  .mt-root .ses-enquire-row { margin-bottom: 12px; }   /* 1 · gap before the location box */
  .mt-root .ses-loc-card {
    flex-direction: column;                   /* 2 · icon + campus on top, full address below */
    gap: 5px;
    margin-bottom: 4px;                        /* 3 · tighter gap after the box (to the FAQ tab) */
  }

  /* selector is now above the panel, not to the left */
  .mt-root .ses-locked-hint .locked-hint-lg { display: none; }
  .mt-root .ses-locked-hint .locked-hint-sm { display: inline; }
}

/* ── Inline enquire link below session card (Option A) ── */
.mt-root .ses-enquire-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 2px 4px;
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  color: var(--ink-mute);
  flex-wrap: wrap;
}
.mt-root .ses-enquire-link {
  background: transparent;
  border: 0;
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-deep);
  cursor: pointer;
  padding: 0;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color .15s;
}
.mt-root .ses-enquire-link:hover { color: var(--accent); }

/* Section header row (h3 + direction toggle) */
.mt-root .sc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 14px;
}

/* Direction toggle pill */
.mt-root .sc-dir-toggle {
  display: flex;
  gap: 3px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.mt-root .sc-dir-btn {
  padding: 5px 14px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.mt-root .sc-dir-btn.active {
  background: var(--ink);
  color: #fff;
}

/* Stack wrapper */
.mt-root .sc-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

/* ── BASE card (shared across all directions) ── */
.mt-root .sc-card {
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
  font-family: var(--sans);
  transition: box-shadow .2s, border-color .2s, opacity .2s;
}

/* Head */
.mt-root .sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  transition: background .2s;
}
.mt-root .sc-head-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mt-root .sc-cohort {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.mt-root .sc-timing {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.mt-root .sc-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Status badge */
.mt-root .sc-badge {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.mt-root .sc-badge--open     { background: var(--accent-soft); color: var(--accent-deep); }
.mt-root .sc-badge--filling  { background: #FFF3E0; color: #B45309; }
.mt-root .sc-badge--sold-out { background: var(--bg); color: var(--ink-mute); border: 1px solid var(--line); }
.mt-root .sc-badge--locked   { background: var(--bg); color: var(--ink-mute); border: 1px solid var(--line); }

/* Spots counter */
.mt-root .sc-spots {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.mt-root .sc-spots--open     { color: var(--accent-deep); }
.mt-root .sc-spots--filling  { color: #B45309; }
.mt-root .sc-spots--sold-out { color: var(--ink-mute); }

/* Timetable (inside open / filling cards) */
.mt-root .sc-timetable {
  border-top: 1px solid var(--line);
  padding: 6px 20px 10px;
}
.mt-root .sc-row {
  display: grid;
  grid-template-columns: 116px 1fr 128px 34px;
  gap: 8px 14px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 13.5px;
}
.mt-root .sc-row:last-child { border-bottom: 0; }
.mt-root .sc-row-type {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.mt-root .sc-row-day  { font-weight: 600; color: var(--ink); font-size: 13px; }
.mt-root .sc-row-time { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.mt-root .sc-row-dur  {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-deep);
  text-align: right;
}
@media (max-width: 500px) {
  .mt-root .sc-row { grid-template-columns: 1fr auto; }
  .mt-root .sc-row-type { display: none; }
  .mt-root .sc-row-dur  { display: none; }
  .mt-root .sc-row-time { color: var(--ink-mute); font-size: 11px; }
}

/* Collapsed summary (sold-out / locked) */
.mt-root .sc-collapse {
  padding: 11px 20px 13px;
  font-size: 13px;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-soft);
}
.mt-root .sc-collapse-dot { opacity: 0.4; }
.mt-root .sc-collapse-full { font-weight: 600; }
.mt-root .sc-collapse--locked {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.mt-root .sc-lock-icon {
  display: inline-flex;
  align-items: center;
  color: var(--ink-mute);
  flex-shrink: 0;
  margin-right: 2px;
}
.mt-root .sc-locked-opens {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}

/* Book footer */
.mt-root .sc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--accent-soft) 35%, var(--bg-card));
}
.mt-root .sc-book-btn {
  background: linear-gradient(135deg, #38D430 0%, #087802 100%);
  color: #fff;
  padding: 11px 22px;
  border-radius: 8px;
  border: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: filter .2s, transform .15s, box-shadow .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px -4px rgba(8,120,2,0.38);
}
.mt-root .sc-book-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(8,120,2,0.48);
}
.mt-root .sc-foot-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Location cards */
.mt-root .sc-locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0 32px;
}
@media (max-width: 620px) { .mt-root .sc-locations { grid-template-columns: 1fr; } }
.mt-root .sc-loc {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s;
}
.mt-root .sc-loc:hover { border-color: var(--accent); }
.mt-root .sc-loc-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mt-root .sc-loc-pin {
  color: var(--accent-deep);
  flex-shrink: 0;
}
.mt-root .sc-loc-addr {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ======================================================
   DIRECTION 1 — Outline
   Cards differentiated by border style + opacity
   ====================================================== */
.mt-root .sc-stack--dir1 .sc-card {
  border: 1.5px solid var(--line);
}
.mt-root .sc-stack--dir1 .sc-card--open,
.mt-root .sc-stack--dir1 .sc-card--filling {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent),
              0 8px 24px -12px rgba(63,181,74,0.22);
}
.mt-root .sc-stack--dir1 .sc-card--filling .sc-timing {
  color: #B45309;
}
.mt-root .sc-stack--dir1 .sc-card--sold-out {
  opacity: 0.58;
  border-style: dashed;
}
.mt-root .sc-stack--dir1 .sc-card--locked {
  opacity: 0.38;
}

/* ======================================================
   DIRECTION 2 — Contrast
   Open/filling get a strong green header band
   ====================================================== */
.mt-root .sc-stack--dir2 .sc-card {
  border: 1px solid var(--line);
}
/* Green header for open / filling */
.mt-root .sc-stack--dir2 .sc-card--open .sc-head,
.mt-root .sc-stack--dir2 .sc-card--filling .sc-head {
  background: linear-gradient(135deg, #38D430 0%, #087802 100%);
  padding-top: 18px;
  padding-bottom: 18px;
}
.mt-root .sc-stack--dir2 .sc-card--open .sc-cohort,
.mt-root .sc-stack--dir2 .sc-card--filling .sc-cohort {
  color: rgba(255,255,255,0.6);
}
.mt-root .sc-stack--dir2 .sc-card--open .sc-timing,
.mt-root .sc-stack--dir2 .sc-card--filling .sc-timing {
  color: #fff;
}
.mt-root .sc-stack--dir2 .sc-card--open .sc-spots--open,
.mt-root .sc-stack--dir2 .sc-card--filling .sc-spots--filling {
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
  padding: 3px 10px;
}
.mt-root .sc-stack--dir2 .sc-card--open .sc-badge--open,
.mt-root .sc-stack--dir2 .sc-card--filling .sc-badge--filling {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
}
/* Striped head for sold-out */
.mt-root .sc-stack--dir2 .sc-card--sold-out {
  opacity: 0.55;
}
.mt-root .sc-stack--dir2 .sc-card--sold-out .sc-head {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,0.025) 0 1px,
      transparent 1px 9px
    ),
    var(--bg);
}
/* Muted head for locked */
.mt-root .sc-stack--dir2 .sc-card--locked {
  opacity: 0.38;
}
.mt-root .sc-stack--dir2 .sc-card--locked .sc-head {
  background: var(--bg);
}

/* ======================================================
   DIRECTION 3 — Track
   Vertical timeline connector with status dots
   ====================================================== */
.mt-root .sc-stack--dir3 {
  position: relative;
  padding-left: 40px;
  gap: 0;
}
/* Vertical line */
.mt-root .sc-stack--dir3::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: linear-gradient(to bottom,
    var(--accent) 0%,
    var(--accent) 25%,
    var(--line) 35%,
    var(--line) 100%);
}
.mt-root .sc-stack--dir3 .sc-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  position: relative;
  margin-bottom: 12px;
}
.mt-root .sc-stack--dir3 .sc-card:last-child { margin-bottom: 0; }
/* Timeline dot */
.mt-root .sc-stack--dir3 .sc-card::before {
  content: "";
  position: absolute;
  left: -31px;
  top: 20px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--bg);
  border: 2.5px solid var(--line);
  z-index: 1;
}
.mt-root .sc-stack--dir3 .sc-card--open::before,
.mt-root .sc-stack--dir3 .sc-card--filling::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(63,181,74,0.22);
}
.mt-root .sc-stack--dir3 .sc-card--sold-out::before {
  background: var(--ink-mute);
  border-color: var(--ink-mute);
}
.mt-root .sc-stack--dir3 .sc-card--open,
.mt-root .sc-stack--dir3 .sc-card--filling {
  border-color: var(--accent);
  box-shadow: 0 4px 18px -8px rgba(63,181,74,0.2);
}
.mt-root .sc-stack--dir3 .sc-card--sold-out { opacity: 0.55; }
.mt-root .sc-stack--dir3 .sc-card--locked   { opacity: 0.38; }
@media (max-width: 500px) {
  .mt-root .sc-stack--dir3 { padding-left: 28px; }
  .mt-root .sc-stack--dir3::before { left: 9px; }
  .mt-root .sc-stack--dir3 .sc-card::before { left: -22px; width: 13px; height: 13px; }
}

/* ===== /Users/pahul/Documents/CODE/TM_designs/MAY26_TM_web_mock_trial/apex-hsc-mock-exams/pay.css ===== */
/* ============ The Mathologists — Booking & Payment page ============ */
/* Builds on styles.css (palette + tokens + nav + footer). Pay-specific only. */

.mt-root .pay-body {
  /* Pay page uses a single clean typeface: Inter (overrides the site tokens
     for this page only — the landing page keeps DM Sans + JetBrains Mono). */
  --sans: "Inter", system-ui, sans-serif;
  --mono: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

/* ----------- Page header strip ----------- */
.mt-root .pay-head {
  background: var(--bg);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: clamp(22px, 3vw, 32px) 0 clamp(18px, 2.5vw, 24px);
}
.mt-root .pay-head-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.mt-root .pay-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
  transition: color .15s;
}
.mt-root .pay-back:hover { color: var(--accent-deep); }
.mt-root .pay-head h1 {
  font-family: var(--sans);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 6px 0 0;
}
.mt-root .pay-head h1 .grad {
  background: linear-gradient(135deg, #38D430 0%, #087802 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mt-root .pay-head p {
  color: var(--on-deep-mute);
  font-size: 15px;
  margin: 0;
  max-width: 60ch;
}

/* Step indicator */
.mt-root .pay-steps {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mt-root .pay-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--on-deep-mute);
}
.mt-root .pay-step b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.25);
  font-weight: 600;
  font-size: 11px;
}
.mt-root .pay-step.is-active { color: var(--on-deep); }
.mt-root .pay-step.is-active b {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.mt-root .pay-step + .pay-step::before {
  content: "";
  width: 18px;
  height: 1px;
  background: rgba(255,255,255,0.2);
  margin-right: 2px;
}

/* ----------- Main layout ----------- */
.mt-root .pay-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 40px) clamp(56px, 7vw, 88px);
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
/* Stop the two-column grid forcing horizontal page overflow: grid items default
   to min-width:auto, so the 1fr/380px tracks couldn't shrink below the wide,
   fixed-column timetable. Let them shrink, and let the timetable scroll inside
   its own card instead of pushing the whole page wider than the screen. */
.mt-root .pay-left { min-width: 0; }
.mt-root .summary { min-width: 0; }
.mt-root .pay-body .ses-timetable { overflow-x: auto; }
@media (max-width: 1079px) {
  .mt-root .pay-main { grid-template-columns: 1fr; }
}

/* Generic outlined block (matches landing-page card style) */
.mt-root .pay-block {
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: clamp(22px, 3vw, 30px);
  margin-bottom: 22px;
}
.mt-root .pay-block-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 12px;
  margin-bottom: 4px;
}
.mt-root .pay-kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.mt-root .pay-block h2 {
  font-family: var(--sans);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 6px 0 4px;
  color: var(--ink);
}
.mt-root .pay-block .hint {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0 0 18px;
  line-height: 1.55;
}

/* ----------- Session overview ----------- */
.mt-root .session-card { border-top: 4px solid var(--accent); }
.mt-root .session-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 10px 0 18px;
}
.mt-root .session-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.mt-root .session-chip .lab {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}

/* Timetable */
.mt-root .tt {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 4px 0 16px;
}
.mt-root .tt-week {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: var(--bg);
  padding: 8px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.mt-root .tt-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr auto;
  gap: 6px 16px;
  align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.mt-root .tt-row:last-child { border-bottom: 0; }
.mt-root .tt-row.is-mock { background: var(--accent-tint); }
.mt-root .tt-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
}
.mt-root .tt-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--accent); flex-shrink: 0;
}
.mt-root .tt-row.is-rev .tt-dot { background: var(--ink-mute); }
.mt-root .tt-date, .mt-root .tt-time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
}
.mt-root .tt-time { color: var(--ink-soft); }
.mt-root .tt-dur {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .mt-root .tt-row {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }
  .mt-root .tt-label { grid-column: 1 / -1; }
  .mt-root .tt-dur { grid-row: 1; grid-column: 2; }
}

.mt-root .session-loc {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.mt-root .session-loc .pin { font-size: 15px; line-height: 1.4; }

/* Change-session toggle + panel */
.mt-root .change-btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-deep);
  background: var(--bg-card);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.mt-root .change-btn:hover { background: var(--accent-tint); }
.mt-root .change-btn[aria-expanded="true"] {
  background: var(--accent);
  color: #fff;
}

.mt-root .change-panel {
  margin-top: 18px;
  border-top: 1px dashed var(--line);
  padding-top: 18px;
  display: grid;
  gap: 18px;
}
.mt-root .change-panel[hidden] { display: none; }
.mt-root .change-field > span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 9px;
}
/* Inline dropdown that lives inside a .session-chip — looks like the chip's
   value text, with a small green caret to signal it's editable. */
.mt-root .session-chip { transition: border-color .15s, background .15s; }
/* Green hover affordance only while editing — not in the read-only view */
.mt-root .session-summary.is-editing .session-chip:hover { border-color: var(--accent); }
.mt-root .chip-select {
  display: none; /* shown only in edit mode (.is-editing) */
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%232E8B3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 9px 6px;
  border: 0;
  margin: 0;
  padding: 0 15px 0 0;
  line-height: 1.3;
  cursor: pointer;
}
.mt-root .chip-select:focus { outline: none; }
.mt-root .session-summary.is-editing .chip-val { display: none; }
.mt-root .session-summary.is-editing .chip-select { display: inline-block; }

/* ── Phone: tidy the "change session" row + widen the timetable ── */
@media (max-width: 560px) {
  /* "Change" sits on its own line; the three chips share the next line */
  .mt-root .session-summary { gap: 8px; }
  .mt-root .change-btn { order: -1; flex: 0 0 100%; align-self: flex-start; }
  /* drop the tiny labels so subject · campus · session fit one line */
  .mt-root .session-chip { padding: 6px 11px; }
  .mt-root .session-chip .lab { display: none; }

  /* timetable uses more of the card width */
  .mt-root .pay-body .ses-timetable { padding-left: 6px; padding-right: 6px; }
}

/* "What's included" disclosure */
.mt-root .incl-wrap { padding: 4px 24px 8px; }
.mt-root .incl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-deep);
  padding: 6px 0;
}
.mt-root .incl-toggle .incl-caret { transition: transform .2s; }
.mt-root .incl-toggle[aria-expanded="true"] .incl-caret { transform: rotate(180deg); }
.mt-root .incl-list {
  list-style: none;
  margin: 4px 0 6px;
  padding: 0;
}
.mt-root .incl-list[hidden] { display: none; }
.mt-root .incl-list li {
  position: relative;
  padding: 5px 0 5px 24px;
  font-size: 13.5px;
  color: var(--ink);
}
.mt-root .incl-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--accent);
  font-weight: 800;
}

/* Location card is a link to Google Maps */
.mt-root a.ses-loc-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.mt-root a.ses-loc-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px -8px rgba(8, 120, 2, 0.35); }
.mt-root .ses-loc-dir { color: var(--accent-deep); font-weight: 600; white-space: nowrap; }

/* Seats count shown next to the price footer — plain red text, no box */
.mt-root .ses-seats {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: #D64545;
  white-space: nowrap;
  align-self: center;
}

/* Segmented pill controls */
.mt-root .seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mt-root .seg-pill {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.mt-root .seg-pill:hover { border-color: var(--accent); color: var(--ink); }
.mt-root .seg-pill.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px -6px rgba(8,120,2,0.5);
}
.mt-root .seg-pill[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.mt-root .seg.seg-lg .seg-pill { padding: 12px 22px; font-size: 14px; }

/* Plan cards */
.mt-root .plan-grid { display: grid; gap: 10px; }
.mt-root .plan {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.mt-root .plan:hover { border-color: var(--accent); }
.mt-root .plan.is-on { border-color: var(--accent); background: var(--accent-tint); }
.mt-root .plan-radio {
  width: 20px; height: 20px;
  border-radius: 999px;
  border: 2px solid var(--line);
  position: relative;
}
.mt-root .plan.is-on .plan-radio { border-color: var(--accent); }
.mt-root .plan.is-on .plan-radio::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--accent); border-radius: 999px;
}
.mt-root .plan-name { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.mt-root .plan-desc { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; line-height: 1.4; }
.mt-root .plan-price {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-align: right;
}
.mt-root .plan-price s { color: var(--ink-mute); font-weight: 400; font-size: 12px; display: block; }

/* ----------- Forms ----------- */
.mt-root .field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
@media (max-width: 560px) { .mt-root .field-grid { grid-template-columns: 1fr; } }
.mt-root .field { display: flex; flex-direction: column; }
.mt-root .field.col-2 { grid-column: 1 / -1; }
.mt-root .field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.mt-root .field label .req { color: var(--accent-deep); }
.mt-root .field input,
.mt-root .field select {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.mt-root .field input::placeholder { color: var(--ink-mute); }
.mt-root .field input:focus,
.mt-root .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.mt-root .field.has-error input,
.mt-root .field.has-error select { border-color: #D64545; }
.mt-root .field-err {
  font-size: 12px;
  color: #D64545;
  margin-top: 6px;
  min-height: 0;
  display: none;
}
.mt-root .field.has-error .field-err { display: block; }

.mt-root .consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.mt-root .consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.mt-root .consent a { color: var(--accent-deep); }
.mt-root .consent.has-error { color: #D64545; }

/* ----------- Order summary (sticky) ----------- */
.mt-root .summary {
  position: sticky;
  top: 70px;
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 1079px) { .mt-root .summary { position: static; } }
.mt-root .summary-head {
  background: var(--bg-deep);
  color: var(--on-deep);
  padding: 18px 22px;
}
.mt-root .summary-head .lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-deep-mute);
}
.mt-root .summary-head .prog { font-size: 17px; font-weight: 700; margin-top: 4px; }
.mt-root .summary-body { padding: 20px 22px 22px; }
.mt-root .summary-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mt-root .summary-line .v { color: var(--ink); font-weight: 600; text-align: right; }
.mt-root .summary-line .v small { display: block; font-weight: 400; color: var(--ink-mute); font-size: 12px; }

.mt-root .seats {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 4px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.mt-root .seats .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.mt-root .seats.is-low { color: #C2410C; font-weight: 600; }
.mt-root .seats.is-low .dot { background: #EA580C; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.mt-root .summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 16px 0 2px;
  padding-top: 16px;
  border-top: 1.5px solid var(--line);
}
.mt-root .summary-total .lab { font-size: 14px; font-weight: 600; color: var(--ink); }
.mt-root .summary-total .amt {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
}
.mt-root .summary-total .amt s { font-size: 14px; color: var(--ink-mute); font-weight: 400; margin-right: 8px; }
.mt-root .summary-save {
  font-size: 12.5px;
  color: var(--accent-deep);
  font-weight: 600;
  margin: 0 0 16px;
}

.mt-root .pay-btn {
  width: 100%;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #38D430 0%, #087802 100%);
  color: #fff;
  font-family: "Inter", var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 16px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: filter .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 8px 20px -8px rgba(8,120,2,0.5);
}
.mt-root .pay-btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.mt-root .pay-btn:disabled { opacity: 0.55; cursor: progress; }
.mt-root .pay-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-mute);
}
.mt-root .pay-trust svg { color: var(--accent-deep); }
.mt-root .pay-demo-flag {
  margin-top: 14px;
  background: #FFF7E6;
  border: 1px solid #F5D58A;
  color: #8A6300;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
}
.mt-root .pay-demo-flag b { color: #6B4D00; }

/* ----------- Success screen ----------- */
.mt-root .pay-success {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 40px) clamp(64px, 8vw, 96px);
  text-align: center;
}
.mt-root .pay-success .tick {
  width: 64px; height: 64px;
  margin: 0 auto 22px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: grid;
  place-items: center;
}
.mt-root .pay-success h1 {
  font-family: var(--sans);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.mt-root .pay-success .lede { color: var(--ink-soft); font-size: 15.5px; margin: 0 auto 28px; max-width: 50ch; line-height: 1.6; }
.mt-root .pay-ref {
  display: inline-block;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 22px;
  margin-bottom: 28px;
}
.mt-root .pay-ref .lab { color: var(--ink-mute); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; display: block; margin-bottom: 4px; }
.mt-root .pay-ref b { color: var(--ink); font-weight: 600; font-size: 18px; }
.mt-root .pay-recap {
  text-align: left;
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 24px 26px;
  margin: 0 auto 24px;
}
.mt-root .pay-recap h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); margin: 0 0 14px; font-family: var(--mono); font-weight: 500; }
.mt-root .pay-recap .summary-line:last-child { border-bottom: 0; }
.mt-root .pay-next {
  text-align: left;
  max-width: none;          /* match the summary box width */
  margin: 0 auto 28px;
  list-style: none;         /* no bullet */
  padding-left: 0;          /* flush with the summary box's left edge */
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.mt-root .pay-next li { margin-bottom: 8px; }
.mt-root .pay-next a { color: var(--ink); font-weight: 700; }

/* ----------- Copy Link, Pay Later ----------- */
.mt-root .pay-later { margin-top: 18px; }
.mt-root .pay-later-sep {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink-mute); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 14px;
}
.mt-root .pay-later-sep::before,
.mt-root .pay-later-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mt-root .pay-later-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--bg-card);
  border: 1.5px solid var(--accent);
  color: var(--accent-deep);
  font-family: "Inter", var(--sans);
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  padding: 13px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.mt-root .pay-later-btn:hover:not(:disabled) { background: var(--accent-tint); transform: translateY(-1px); }
.mt-root .pay-later-btn:disabled { opacity: 0.55; cursor: progress; }
.mt-root .pay-later-hint { margin: 10px 2px 0; font-size: 12px; color: var(--ink-mute); line-height: 1.5; text-align: center; }

.mt-root .pay-later-result {
  margin-top: 14px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
  border-radius: 12px;
  padding: 12px;
  animation: conf-fade .25s ease-out both;
}
.mt-root .pay-later-linkrow { display: flex; gap: 8px; }
.mt-root .pay-later-link {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: #fff;
}
.mt-root .pay-later-copy {
  flex-shrink: 0;
  border: 0; cursor: pointer;
  background: var(--accent-deep); color: #fff;
  font-family: "Inter", var(--sans); font-weight: 700; font-size: 13px;
  padding: 0 16px; border-radius: 8px;
  transition: filter .15s;
}
.mt-root .pay-later-copy:hover { filter: brightness(1.08); }
.mt-root .pay-later-note { margin: 9px 2px 0; font-size: 12px; color: var(--accent-deep); line-height: 1.5; }

/* ----------- Toast (sonner-style, top-of-screen, dependency-free) -----------
   Mounted inside .mt-root (no transformed ancestor, so position:fixed still pins
   to the viewport). Positioned below the site's fixed nav (~54-60px tall). */
.mt-root .mt-toaster {
  position: fixed; top: 76px; left: 50%; transform: translateX(-50%);
  z-index: 99999; display: flex; flex-direction: column; gap: 10px; align-items: center;
  width: max-content; max-width: calc(100vw - 32px); pointer-events: none;
}
.mt-root .mt-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 11px;
  background: #FFFFFF; color: #1A1A1A;
  border: 1px solid #ECE7DD; border-radius: 13px;
  box-shadow: 0 4px 12px -2px rgba(0,0,0,.10), 0 18px 36px -14px rgba(0,0,0,.26);
  padding: 13px 17px; min-width: 260px; max-width: 440px;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; font-weight: 600; line-height: 1.4; cursor: default;
  animation: mt-toast-in .28s cubic-bezier(.21, 1.02, .73, 1) both;
}
.mt-root .mt-toast-out { animation: mt-toast-out .2s ease-in forwards; }
.mt-root .mt-toast-ic { flex-shrink: 0; width: 20px; height: 20px; color: #D99A00; display: flex; }
.mt-root .mt-toast-ic svg { width: 20px; height: 20px; }
@keyframes mt-toast-in { from { opacity: 0; transform: translateY(-16px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes mt-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px) scale(.97); } }

/* ----------- Bank-transfer details (success screen) ----------- */
.mt-root .bank-block {
  text-align: left;
  max-width: 520px;
  margin: 0 auto 24px;
  background: var(--accent-tint);
  border: 1.5px solid var(--accent-soft);
  border-radius: 16px;
  padding: 22px 24px;
}
.mt-root .bank-block h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-family: var(--sans);
}
.mt-root .bank-rows { display: grid; gap: 0; margin-bottom: 14px; }
.mt-root .bank-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(63, 181, 74, 0.22);
  font-size: 14px;
}
.mt-root .bank-rows > div:last-child { border-bottom: 0; }
.mt-root .bank-rows span { color: var(--ink-soft); }
.mt-root .bank-rows b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.mt-root .bank-note { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.55; }

/* ----------- Bank-transfer popup ----------- */
.mt-root .bank-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 15, 15, 0.55);
  backdrop-filter: blur(2px);
}
.mt-root .bank-overlay[hidden] { display: none; }
.mt-root .bank-dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border-radius: 16px;
  padding: 28px 26px 24px;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.4);
}
.mt-root .bank-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}
.mt-root .bank-close:hover { background: var(--line); color: var(--ink); }
.mt-root .bank-dialog h2 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.mt-root .bank-modal-sub {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 16px;
}
.mt-root .bank-dialog .bank-rows {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 14px;
  margin-bottom: 14px;
}
.mt-root .bank-modal-note {
  font-size: 12.5px;
  color: var(--accent-deep);
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.mt-root .bank-dialog .pay-btn { margin-top: 0; }
/* Success tick inside a modal: solid green circle, white tick (matches the brand) */
.mt-root .bank-dialog .tick {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

/* "Email this to a parent" link under the order summary */
.mt-root .send-parent-link {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 6px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-deep);
  text-align: center;
}
.mt-root .send-parent-link:hover { text-decoration: underline; }

/* ===================================================================
   Phase 2 fidelity fixes (2026-05-25) — appended last so they win.
   Reconciles the static port with the TRUE source design.
=================================================================== */

/* 1 · Nav clearance — the site nav bar is position:fixed (~54px desktop,
   taller on mobile) and floats over content, so .mt-root content was
   sliding underneath it. Push everything below the fixed bar. */
.mt-root { padding-top: 56px; }
@media (max-width: 991px) { .mt-root { padding-top: 70px; } }

/* 2 · Hero image crop. The source uses an <image-slot> custom element
   (a non-replaced, position:relative host with an absolutely-positioned
   inner <img>), so the photo is cover-cropped and never balloons the
   card. A plain <img> is a replaced element and stretches the grid row
   to its intrinsic (portrait) aspect ratio — making the card too tall.
   Mirror the source: .m-hero-img is the host, the inner <img> covers it. */
.mt-root .m-hero-img { position: relative; }
.mt-root .m-hero-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}

/* 3 · Honour the [hidden] attribute on the toggled schedule elements.
   Their base rules set display:flex / block (specificity 0,2,0), which
   overrides the UA `[hidden]{display:none}` (0,1,0) — so the JS toggling
   `el.hidden = true` had no visual effect (locked card + session card +
   enquire row + blank location box all showed at once). */
.mt-root .ses-locked-card[hidden],
.mt-root .ses-card[hidden],
.mt-root .ses-slot-row[hidden],
.mt-root .ses-enquire-row[hidden],
.mt-root .ses-loc-card[hidden] { display: none !important; }

/* 4 · Non-landing pages (pay / confirmation / terms) use the cream page
   background. The source distinguishes `body` (dark, landing) from
   `body.pay-body` (cream); the scoped build collapsed both into a dark
   .mt-root, so the cream form sat on a near-black page. */
.mt-root.mt-page-light { background: var(--bg); }

/* =====================================================
   CONFIRMATION PAGE  (#mt-confirmation / .conf-*)
   Built on the design tokens to match the booking pages.
   ===================================================== */
.mt-root .conf-root {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 80px) var(--pad) 80px;
  min-height: 58vh;
}

/* ---- Loading ---- */
.mt-root .conf-loading {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 72px 0; color: var(--ink-soft);
  font-family: var(--sans); font-size: 15px;
}
.mt-root .conf-spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: conf-spin .8s linear infinite;
}
@keyframes conf-spin { to { transform: rotate(360deg); } }

/* ---- Panel ---- */
.mt-root .conf-panel { text-align: center; animation: conf-fade .45s ease-out; }
@keyframes conf-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Icon badge ---- */
.mt-root .conf-icon {
  width: 86px; height: 86px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
}
.mt-root .conf-icon--success  { background: var(--accent-soft); color: var(--accent-deep); }
.mt-root .conf-icon--pending  { background: #FFF3D4; color: #B7860B; }
.mt-root .conf-icon--transfer { background: #E7F0FB; color: #2A6BD0; }
.mt-root .conf-icon--neutral  { background: #EDEDED; color: #777; }

/* ---- Title + subtext ---- */
.mt-root .conf-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(28px, 5vw, 42px); line-height: 1.08; color: var(--ink);
  letter-spacing: -0.015em; margin: 0 0 14px;
  /* site.css gives bare <h1> text-align:left, which overrides the panel's
     inherited center — re-assert center here. */
  text-align: center;
}
.mt-root .conf-sub {
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  color: var(--ink-soft); margin: 0 auto 10px; max-width: 470px;
}
.mt-root .conf-sub a { color: var(--accent-deep); font-weight: 600; }
.mt-root .conf-sub strong { color: var(--ink); font-weight: 700; }

/* ---- "We'll see you on …" ---- */
.mt-root .conf-seeyou {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(18px, 2.6vw, 22px); color: var(--accent-deep);
  margin: 6px auto 0; text-align: center;
}

/* ---- Detail card ---- */
.mt-root .conf-card {
  text-align: left; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 22px 48px -32px rgba(0,0,0,.30);
  padding: 6px 24px; margin: 30px auto 0; max-width: 500px;
}
.mt-root .conf-row,
.mt-root .conf-class-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid var(--line-soft);
}
.mt-root .conf-card > .conf-row:last-child,
.mt-root .conf-card > #confClasses:last-child .conf-class-row:last-child { border-bottom: none; }
.mt-root .conf-lab {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--ink-mute); text-transform: uppercase; letter-spacing: .045em;
  white-space: nowrap; flex-shrink: 0;
}
.mt-root .conf-val {
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink);
  text-align: right;
}
.mt-root .conf-class-row .conf-val { font-weight: 500; color: var(--ink-soft); font-size: 14px; }
.mt-root .conf-class-row .conf-lab { text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--accent-deep); }
.mt-root .conf-ref {
  font-family: var(--mono); font-size: 13.5px; font-weight: 700;
  color: var(--accent-deep); background: var(--accent-tint);
  padding: 3px 9px; border-radius: 6px; letter-spacing: .02em;
}
.mt-root .conf-amt { font-size: 18px; font-weight: 800; color: var(--ink); }

/* ---- Sessions table (consolidated program / campus / cohort / dates) ---- */
.mt-root .conf-table {
  width: 100%; border-collapse: collapse; margin: 2px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mt-root .conf-table td { padding: 14px 0; border-top: 1px solid var(--line-soft); vertical-align: top; }
.mt-root .conf-table tr:first-child td { border-top: none; }
.mt-root .conf-td-main { text-align: left; padding-right: 16px; }
.mt-root .conf-td-prog { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); }
.mt-root .conf-td-meta { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--accent-deep); margin-top: 3px; }
.mt-root .conf-td-dates {
  text-align: right; font-family: var(--sans); font-size: 13px;
  color: var(--ink-soft); line-height: 1.5;
}

/* Highlighted rows on the bank-transfer card (amount / reference) */
.mt-root .conf-row--highlight {
  background: var(--accent-tint); border-bottom: none;
  border-radius: var(--r-sm); margin: 6px 0;
  padding-left: 12px; padding-right: 12px;
}

/* ---- Note + back link ---- */
.mt-root .conf-note {
  font-family: var(--sans); font-size: 13px; color: var(--ink-mute);
  max-width: 470px; margin: 18px auto 0; line-height: 1.6;
}
.mt-root .conf-back-link {
  display: inline-block; margin-top: 34px;
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  color: #fff; background: var(--accent); text-decoration: none;
  padding: 13px 30px; border-radius: 999px;
  box-shadow: 0 8px 20px -8px rgba(63, 181, 74, .75);
  transition: background .15s, transform .15s;
}
.mt-root .conf-back-link:hover { background: var(--accent-deep); transform: translateY(-1px); }

@media (max-width: 1079px) {
  .mt-root .conf-row, .mt-root .conf-class-row { gap: 12px; }
}

/* The display rules above (e.g. .conf-loading{display:flex}) outrank the UA
   [hidden]{display:none}, so honour [hidden] explicitly or the loader/panels
   would never hide once JS resolves the booking state. */
.mt-root .conf-loading[hidden],
.mt-root .conf-panel[hidden],
.mt-root #confClasses[hidden] { display: none !important; }