/* ============ Apex HSC Mock Exams — styles ============ */

.hp-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);
}

.hp-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;
}

.hp-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;
}

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

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

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

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

/* ----------- Type ----------- */
.hp-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;
}
.hp-root .eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  display: inline-block;
}
.hp-root .eyebrow.solo::before { display: none; }

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

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

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

/* ----------- Buttons ----------- */
.hp-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;
}
.hp-root .btn:active { transform: translateY(1px); }
.hp-root .btn-primary {
  background: var(--ink);
  color: var(--on-deep);
}
.hp-root .btn-primary:hover { background: var(--accent-deep); }
.hp-root .btn-accent {
  background: var(--accent);
  color: var(--ink);
}
.hp-root .btn-accent:hover { background: var(--accent-deep); color: #fff; }
.hp-root .btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.hp-root .btn-ghost:hover { background: var(--ink); color: var(--on-deep); }
.hp-root .btn-on-deep {
  background: var(--on-deep);
  color: var(--ink);
}
.hp-root .btn-on-deep:hover { background: var(--accent); color: #fff; }
.hp-root .btn-on-deep-ghost {
  background: transparent;
  color: var(--on-deep);
  border-color: var(--on-deep-mute);
}
.hp-root .btn-on-deep-ghost:hover { background: var(--on-deep); color: var(--ink); }
.hp-root .btn .arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.hp-root .btn:hover .arrow { transform: translateX(3px); }

/* ----------- Nav ----------- */
.hp-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;
}
.hp-root .nav.scrolled {
  border-color: var(--line);
}
.hp-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);
}
.hp-root .nav-dark.scrolled {
  border-bottom-color: rgba(63, 181, 74, 0.35);
}
.hp-root .nav-accent-bar {
  display: none;
}
.hp-root .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  position: relative;
  z-index: 1;
}
.hp-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;
}
.hp-root .nav-dark .logo { color: #fff; }
.hp-root .logo-img {
  height: 50px;
  width: auto;
  display: block;
}
.hp-root .nav-dark .logo-img {
  filter: brightness(0) invert(1);
}
.hp-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;
}
.hp-root .nav-dark .logo-mark {
  background: var(--accent);
  color: #000;
}
.hp-root .logo-word-em {
  font-style: italic;
  color: var(--accent-deep);
}
.hp-root .nav-dark .logo-word-em {
  color: var(--accent);
}
.hp-root .nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.hp-root .nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .15s;
}
.hp-root .nav-links a:hover { color: var(--ink); }
.hp-root .nav-dark .nav-links a { color: #fff; }
.hp-root .nav-dark .nav-links a:hover { color: var(--accent); }
.hp-root .nav-cta {
  display: flex;
  align-items: center;
  gap: 24px;
}
.hp-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;
}
.hp-root .nav-phone:hover { color: var(--accent); }
.hp-root .nav-phone svg { color: #fff; opacity: 0.85; }
.hp-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;
}
.hp-root .btn-book:hover {
  background: var(--accent-deep);
  color: #fff;
}
@media (max-width: 880px) {
  .hp-root .nav-links { display: none; }
  .hp-root .nav-phone span { display: none; }
}

/* ----------- Hero ----------- */
.hp-root .hero {
  padding-top: clamp(48px, 8vw, 112px);
  padding-bottom: clamp(56px, 8vw, 120px);
  position: relative;
  overflow: hidden;
}
.hp-root .hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
@media (max-width: 980px) {
  .hp-root .hero-grid { grid-template-columns: 1fr; align-items: start; }
}
.hp-root .hero-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  align-items: center;
}
.hp-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); }
}
.hp-root .hero-meta-item {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.hp-root .hero h1 .accent {
  font-style: italic;
  color: var(--accent-deep);
}
.hp-root .hero-sub {
  margin-top: 28px;
  max-width: 52ch;
}
.hp-root .hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hp-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: 980px) {
  .hp-root .hero-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 32px; }
}
.hp-root .hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hp-root .hero-stat .n {
  font-family: var(--serif);
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hp-root .hero-stat .l {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.hp-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;
}
.hp-root .hero-marquee .track {
  display: flex;
  gap: 48px;
  animation: scroll 40s linear infinite;
}
@keyframes scroll {
  to { transform: translateX(-50%); }
}
.hp-root .hero-marquee .sep { color: var(--accent); }

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

.hp-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: 880px) {
  .hp-root .section-head { grid-template-columns: 1fr; gap: 16px; }
}

/* ----------- Why (value props) ----------- */
.hp-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: 980px) { .hp-root .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hp-root .why-grid { grid-template-columns: 1fr; } }
.hp-root .why-card {
  background: var(--bg-card);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
}
.hp-root .why-card .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--accent-deep);
}
.hp-root .why-card h3 {
  font-size: 26px;
  line-height: 1.05;
}
.hp-root .why-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
}
.hp-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 ----------- */
.hp-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: 980px) { .hp-root .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hp-root .steps { grid-template-columns: 1fr; } }
.hp-root .step {
  padding: 36px 28px 36px 0;
  border-right: 1px solid var(--on-deep-mute);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hp-root .step:last-child { border-right: 0; }
.hp-root .step .step-n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
}
.hp-root .step h3 {
  font-size: 28px;
  color: var(--on-deep);
}
.hp-root .step p { color: var(--on-deep-mute); font-size: 14.5px; margin: 0; }
.hp-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) ----------- */
.hp-root .subj-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.hp-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;
}
.hp-root .subj-tab:hover { color: var(--ink); border-color: var(--ink); }
.hp-root .subj-tab.active {
  background: var(--ink);
  color: var(--on-deep);
  border-color: var(--ink);
}
.hp-root .subj-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 880px) { .hp-root .subj-panel { grid-template-columns: 1fr; } }
.hp-root .subj-info h3 {
  font-size: clamp(32px, 3.4vw, 44px);
  margin-bottom: 12px;
}
.hp-root .subj-info .lead { margin-bottom: 24px; }
.hp-root .subj-info .meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  margin-top: 24px;
}
.hp-root .subj-info .meta > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  padding-right: 16px;
  border-right: 1px solid var(--line);
}
.hp-root .subj-info .meta > div:nth-child(2n) { border-right: 0; padding-right: 0; padding-left: 16px; }
.hp-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;
}
.hp-root .subj-info .meta .v {
  font-family: var(--serif);
  font-size: 20px;
}
.hp-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;
}
.hp-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);
}
.hp-root .subj-paper .topic {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.hp-root .subj-paper .topic:last-child { border-bottom: 0; }
.hp-root .subj-paper .topic .marks { color: var(--accent-deep); }

/* ----------- Report mockup ----------- */
.hp-root .report {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) { .hp-root .report { grid-template-columns: 1fr; } }
.hp-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;
}
.hp-root .report-doc:hover { transform: rotate(0); }
.hp-root .report-doc::after {
  content: "";
  position: absolute;
  inset: 12px 12px auto auto;
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: 999px;
}
.hp-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;
}
.hp-root .report-doc .doc-head h4 {
  font-family: var(--serif);
  font-size: 24px;
}
.hp-root .report-doc .doc-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hp-root .report-doc .score-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 22px;
}
.hp-root .report-doc .big-score {
  font-family: var(--serif);
  font-size: 76px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.hp-root .report-doc .big-score sub {
  font-size: 22px;
  color: var(--ink-mute);
  vertical-align: super;
  letter-spacing: 0;
}
.hp-root .report-doc .rank-meta {
  font-size: 13px;
  color: var(--ink-soft);
}
.hp-root .report-doc .rank-meta strong { color: var(--ink); }
.hp-root .report-doc .bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.hp-root .report-doc .bar {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.hp-root .report-doc .bar .label { color: var(--ink-soft); }
.hp-root .report-doc .bar .track {
  background: var(--line-soft);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}
.hp-root .report-doc .bar .fill {
  background: var(--ink);
  height: 100%;
  border-radius: 999px;
}
.hp-root .report-doc .bar .fill.accent { background: var(--accent); }
.hp-root .report-doc .bar .val {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  width: 36px;
  text-align: right;
}
.hp-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;
}
.hp-root .report-doc .markup strong { color: var(--accent-deep); font-style: normal; }

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

/* ----------- Schedule ----------- */
.hp-root .sched {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .hp-root .sched { grid-template-columns: 1fr; } }
.hp-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;
}
.hp-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;
}
.hp-root .sched-card .pill.ghost { background: transparent; color: var(--ink-mute); border: 1px solid var(--line); }
.hp-root .sched-card .date {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hp-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;
}
.hp-root .sched-card h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  margin: 0;
}
.hp-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);
}
.hp-root .sched-card .where .seats {
  color: var(--accent-deep);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ----------- Pricing ----------- */
.hp-root .price {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .hp-root .price { grid-template-columns: 1fr; } }
.hp-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;
}
.hp-root .price-card.featured {
  background: var(--bg-deep);
  border-color: var(--bg-deep);
  color: var(--on-deep);
}
.hp-root .price-card.featured .price-amount { color: var(--on-deep); }
.hp-root .price-card.featured .price-label,
.hp-root .price-card.featured .price-incl li { color: var(--on-deep-mute); }
.hp-root .price-card.featured .price-incl li::before { color: var(--accent); }
.hp-root .price-card.featured .badge { background: var(--accent); color: #fff; }
.hp-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;
}
.hp-root .price-card h3 {
  font-family: var(--serif);
  font-size: 28px;
}
.hp-root .price-tag {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.hp-root .price-amount {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hp-root .price-currency {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-mute);
}
.hp-root .price-label {
  font-size: 13px;
  color: var(--ink-soft);
}
.hp-root .price-incl {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hp-root .price-incl li {
  font-size: 14px;
  color: var(--ink-soft);
  position: relative;
  padding-left: 22px;
}
.hp-root .price-incl li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-deep);
}

/* ----------- Testimonials ----------- */
.hp-root .testi-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px) { .hp-root .testi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hp-root .testi-grid { grid-template-columns: 1fr; } }
.hp-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;
}
.hp-root .testi.big {
  background: var(--bg-deep);
  color: var(--on-deep);
  border-color: var(--bg-deep);
  grid-row: span 2;
}
.hp-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;
}
.hp-root .testi q {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.3;
  quotes: '\\201C' '\\201D';
  flex: 1;
}
.hp-root .testi-attrib {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.hp-root .testi.big .testi-attrib { border-color: rgba(255,255,255,0.15); }
.hp-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;
}
.hp-root .testi.big .testi-avatar { background: var(--accent); color: #fff; }
.hp-root .testi-name {
  font-size: 13px;
  font-weight: 500;
}
.hp-root .testi-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hp-root .testi.big .testi-meta { color: var(--on-deep-mute); }

.hp-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;
}
.hp-root .testi.big .rank-up { background: rgba(47,107,78,0.25); color: #88c4a4; }

/* ----------- FAQ ----------- */
.hp-root .faq {
  border-top: 1px solid var(--line);
}
.hp-root .faq-item {
  border-bottom: 1px solid var(--line);
}
.hp-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;
}
.hp-root .faq-q:hover { color: var(--accent-deep); }
.hp-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;
}
.hp-root .faq-item.open .faq-q .plus {
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--on-deep);
  border-color: var(--ink);
}
.hp-root .faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.hp-root .faq-item.open .faq-a {
  max-height: 400px;
}
.hp-root .faq-a-inner {
  padding-bottom: 24px;
  max-width: 70ch;
  color: var(--ink-soft);
  font-size: 15px;
}

/* ----------- Final CTA ----------- */
.hp-root .final {
  position: relative;
  overflow: hidden;
}
.hp-root .final-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
}
@media (max-width: 880px) { .hp-root .final-inner { grid-template-columns: 1fr; } }
.hp-root .final h2 .accent { font-style: italic; color: var(--accent); }
.hp-root .final .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.hp-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: 880px) {
  .hp-root .final-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--on-deep-mute); padding-top: 24px; }
}
.hp-root .final-side strong { color: var(--on-deep); display: block; margin-bottom: 4px; font-weight: 500; }

/* ----------- Trust strip ----------- */
.hp-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: 880px) { .hp-root .trust { grid-template-columns: 1fr; } }
.hp-root .trust .label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.hp-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;
}
.hp-root .trust-logos span { opacity: 0.75; }

/* ----------- Footer ----------- */
.hp-root .footer {
  background: var(--bg-deep);
  color: var(--on-deep);
  padding: 64px 0 36px;
}
.hp-root .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (max-width: 880px) {
  .hp-root .footer-grid { grid-template-columns: 1fr 1fr; }
}
.hp-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;
}
.hp-root .footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hp-root .footer a {
  color: var(--on-deep);
  text-decoration: none;
  font-size: 14px;
  opacity: 0.85;
}
.hp-root .footer a:hover { opacity: 1; color: var(--accent); }
.hp-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);
}
.hp-root .footer .brand-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hp-root .footer .brand-block .logo {
  color: var(--on-deep);
}
.hp-root .footer .brand-block .logo-mark {
  background: var(--accent);
  color: var(--ink);
}
.hp-root .footer .brand-block p {
  color: var(--on-deep-mute);
  font-size: 14px;
  max-width: 32ch;
}

/* ----------- Visual hero placeholder ----------- */
.hp-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;
}
.hp-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;
}
.hp-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 ----------- */.hp-root .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.hp-root .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============ Course Hero (Matrix-style) ============ */
.hp-root .course-hero {
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 72px);
  background: var(--bg);
  position: relative;
}
.hp-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;
}
.hp-root .breadcrumb a {
  color: var(--ink-mute);
  text-decoration: none;
}
.hp-root .breadcrumb a:hover { color: var(--accent-deep); }
.hp-root .breadcrumb .current { color: var(--ink); }
.hp-root .breadcrumb span { color: var(--line); }

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

.hp-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;
}
.hp-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;
}
.hp-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;
}
.hp-root .course-hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.hp-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);
}
.hp-root .course-hero-meta strong {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--serif);
  font-style: italic;
}

.hp-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);
}
.hp-root .course-card-head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.hp-root .course-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hp-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;
}
.hp-root .course-card-list li:last-child { border-bottom: 0; }
.hp-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;
}
.hp-root .course-card-list li strong {
  text-align: right;
  color: var(--ink);
  font-weight: 500;
  font-size: 13.5px;
}
.hp-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;
}
.hp-root .course-card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.hp-root .course-card-price .cur {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
}
.hp-root .course-card-price .amt {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hp-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 ============ */
.hp-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);
}
.hp-root .anchor-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
}
.hp-root .anchor-bar-links {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.hp-root .anchor-bar-links::-webkit-scrollbar { display: none; }
.hp-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;
}
.hp-root .anchor-bar-links a:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.hp-root .anchor-bar-cta {
  padding: 8px 16px !important;
  font-size: 12px !important;
}
@media (max-width: 720px) {
  .hp-root .anchor-bar-cta { display: none; }
}

/* ============ Program at a glance ============ */
.hp-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: 880px) { .hp-root .glance-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hp-root .glance-grid { grid-template-columns: 1fr; } }
.hp-root .glance-card {
  background: var(--bg-card);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
}
.hp-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;
}
.hp-root .glance-k {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.hp-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 ============ */
.hp-root .overview-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 980px) { .hp-root .overview-grid { grid-template-columns: 1fr; gap: 32px; } }
.hp-root .overview-prose .lead + .lead { margin-top: 20px; }
.hp-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) { .hp-root .overview-meta { grid-template-columns: 1fr; } }
.hp-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;
}
.hp-root .overview-meta-v {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.45;
}
.hp-root .overview-aside {
  position: sticky;
  top: 100px;
}
.hp-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;
}
.hp-root .overview-aside-k {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.hp-root .overview-aside-date {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.hp-root .overview-aside-date .d {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.hp-root .overview-aside-date .m {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.hp-root .overview-aside-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13.5px;
}
.hp-root .overview-aside-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.hp-root .overview-aside-meta > div > span {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.hp-root .overview-aside-meta strong {
  text-align: right;
  color: var(--ink);
  font-weight: 500;
  font-size: 13.5px;
}

/* ============ Course tabs (sidebar) ============ */
.hp-root .tabs-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 980px) {
  .hp-root .tabs-shell { grid-template-columns: 1fr; gap: 24px; }
  .hp-root .tabs-nav { position: static !important; }
}
.hp-root .tabs-nav {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--line);
  padding-left: 0;
}
.hp-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;
}
.hp-root .tabs-nav-item:hover {
  color: var(--ink);
  background: var(--bg-card);
}
.hp-root .tabs-nav-item.active {
  color: var(--ink);
  background: var(--bg-card);
  border-left-color: var(--accent);
}
.hp-root .tabs-nav-item.active .tabs-nav-num {
  color: var(--accent-deep);
}
.hp-root .tabs-nav-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.hp-root .tabs-nav-arr {
  opacity: 0;
  transition: opacity .15s, transform .15s;
  color: var(--accent-deep);
}
.hp-root .tabs-nav-item.active .tabs-nav-arr { opacity: 1; transform: translateX(2px); }
.hp-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;
}
.hp-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;
}
.hp-root .tabs-nav-phone:hover { color: var(--accent-deep); }

.hp-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);
}

.hp-root .tab-content .tab-h {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.hp-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);
}
.hp-root .tab-content .lead {
  margin-bottom: 32px;
}

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

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

.hp-root .tab-table {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-size: 13.5px;
}
.hp-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;
}
.hp-root .tab-row:last-child { border-bottom: 0; }
.hp-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);
}
.hp-root .tab-row span:nth-child(3) {
  text-align: right;
  font-family: var(--mono);
  color: var(--accent-deep);
}
.hp-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;
}
.hp-root .tab-row.head span:nth-child(3),
.hp-root .tab-row.head span:nth-child(4) {
  color: var(--ink-mute);
}

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

.hp-root .tab-sched {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.hp-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;
}
.hp-root .tab-sched-row:last-child { border-bottom: 0; }
.hp-root .tab-sched-row:hover { background: var(--bg); }
@media (max-width: 720px) {
  .hp-root .tab-sched-row { grid-template-columns: 80px 1fr; grid-template-areas: "date body" "date seats" "date pill" "cta cta"; row-gap: 8px; }
  .hp-root .tab-sched-date { grid-area: date; }
  .hp-root .tab-sched-body { grid-area: body; }
  .hp-root .tab-sched-seats { grid-area: seats; text-align: left; }
  .hp-root .tab-sched-pill { grid-area: pill; }
  .hp-root .tab-sched-cta { grid-area: cta; text-align: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); }
}
.hp-root .tab-sched-date {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.hp-root .tab-sched-date .d {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hp-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;
}
.hp-root .tab-sched-subj {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.hp-root .tab-sched-where {
  font-size: 13px;
  color: var(--ink-soft);
}
.hp-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;
}
.hp-root .tab-sched-pill { text-align: right; }
.hp-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;
}
.hp-root .tab-sched-cta {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  text-align: right;
  font-weight: 500;
}
.hp-root .tab-sched-cta:hover { color: var(--accent-deep); }

.hp-root .tab-price {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 880px) { .hp-root .tab-price { grid-template-columns: 1fr; } }
.hp-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;
}
.hp-root .tab-price-card.featured {
  background: var(--bg-deep);
  border-color: var(--bg-deep);
  color: var(--on-deep);
}
.hp-root .tab-price-card.featured h4,
.hp-root .tab-price-card.featured .amt,
.hp-root .tab-price-card.featured .cur { color: var(--on-deep); }
.hp-root .tab-price-card.featured p,
.hp-root .tab-price-card.featured ul li { color: var(--on-deep-mute); }
.hp-root .tab-price-card.featured ul li::before { color: var(--accent); }
.hp-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;
}
.hp-root .tab-price-card h4 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0;
}
.hp-root .tab-price-tag {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.hp-root .tab-price-tag .cur {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
}
.hp-root .tab-price-tag .amt {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hp-root .tab-price-card p {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0;
}
.hp-root .tab-price-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hp-root .tab-price-card ul li {
  font-size: 13px;
  color: var(--ink-soft);
  padding-left: 18px;
  position: relative;
}
.hp-root .tab-price-card ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-deep);
}
.hp-root .tab-price-card > .btn {
  margin-top: auto;
}

.hp-root .tab-team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) { .hp-root .tab-team { grid-template-columns: 1fr; } }
.hp-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);
}
.hp-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;
}
.hp-root .tab-team-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.hp-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;
}
.hp-root .tab-team-meta {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}

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

.hp-root .qo-head {
  max-width: 680px;
  margin: 0 auto clamp(28px, 3.5vw, 44px);
  text-align: center;
}
.hp-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;
}
.hp-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;
}
.hp-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;
}
.hp-root .qo-lede {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
}

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

.hp-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;
}
.hp-root .qo-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(8, 120, 2, 0.18);
}

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

.hp-root .qo-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.hp-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;
}
.hp-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;
}
.hp-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;
}
.hp-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);
}

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

/* ---- Hero ---- */
.hp-root .m-hero {
  background: var(--bg-deep);
  padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px);
}
.hp-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: 980px) {
  .hp-root .m-hero-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 40px 28px 0;
  }
}
.hp-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;
}
.hp-root .m-hero-right {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  min-height: 0;
}
@media (max-width: 980px) {
  .hp-root .m-hero-content { grid-column: 1; grid-row: 1; }
  .hp-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. */
  .hp-root .m-hero-card .m-hero-bg-text { grid-row: 3; grid-column: 1; margin-top: 4px; margin-bottom: 10px; }
}
.hp-root .m-hero-left { position: relative; z-index: 1; }
.hp-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);
}
.hp-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;
}
.hp-root .m-hero-tagline .m-sep {
  margin: 0 0.5em;
  color: var(--accent);
  font-weight: 700;
}
.hp-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);
}
.hp-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;
}
.hp-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;
}
.hp-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;
}
.hp-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 16px;
}
/* Desktop shows the full description; phone swaps to the short one */
.hp-root .m-hero-body .hero-body-short { display: none; }
.hp-root .m-hero-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hp-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);
}
.hp-root .m-hero-cta:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(8, 120, 2, 0.55);
}
.hp-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;
}
.hp-root .m-hero-ghost:hover { color: var(--accent-deep); }
.hp-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;
}
.hp-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;
}
.hp-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);
}
.hp-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) {
  .hp-root .m-hero-card { padding: 32px 22px 0 !important; }
  /* let the text column shrink to the card instead of overflowing it */
  .hp-root .m-hero-content { min-width: 0; max-width: 100%; }

  /* 1 · "Mock HSC Trial" on one line, "Exam Program" below */
  .hp-root .m-hero-headline { font-size: 22px !important; }
  .hp-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) */
  .hp-root .m-hero-tagline {
    font-size: 11.5px;
    letter-spacing: -0.015em;
  }
  .hp-root .m-hero-tagline .m-sep { margin: 0 0.3em; }

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

  /* use the full width: stack the CTAs, primary button spans the row */
  .hp-root .m-hero-cta-row { width: 100%; align-self: stretch; flex-direction: column; align-items: stretch; gap: 14px; }
  .hp-root .m-hero-cta { width: 100%; }
  .hp-root .m-hero-ghost { align-self: flex-start; }
}
.hp-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;
}
.hp-root .m-hero-img-label,
.hp-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 ---- */
.hp-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;
}
.hp-root .m-marquee-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: m-scroll 28s linear infinite;
}
.hp-root .m-marquee-track span { display: inline-flex; align-items: center; gap: 16px; }
.hp-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 ---- */
.hp-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(40px, 5vw, 72px) clamp(20px, 4vw, 40px) clamp(60px, 7vw, 96px);
}
.hp-root .m-course-wrap {
  max-width: 1240px;
  margin: 0 auto;
}

/* Sticky tab bar */
.hp-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;
}
.hp-root .m-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.hp-root .m-tabs::-webkit-scrollbar { display: none; }

/* Inline centre selector (Schedule tab) */
.hp-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;
}
.hp-root .m-centre-inline-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.hp-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);
}
.hp-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;
}
.hp-root .m-tab:hover { background: var(--line-soft); }
.hp-root .m-tab.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.hp-root .m-centre-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 4px;
}
.hp-root .m-centre-label {
  font-size: 13px;
  color: var(--ink-soft);
  font-family: var(--sans);
}
.hp-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) {
  .hp-root .m-centre-selector { display: none; }
}

/* Course title */
.hp-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;
}
.hp-root .m-course-sep { color: var(--ink-mute); font-weight: 300; }
.hp-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 */
.hp-root .m-course-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 880px) {
  .hp-root .m-course-layout { grid-template-columns: 1fr; }
}

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

/* ── Step filter block ── */
.hp-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;
}
.hp-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;
}
.hp-root .m-filter-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: opacity .2s;
}
.hp-root .m-filter-step.locked {
  opacity: 0.38;
  pointer-events: none;
}
/* Number badge */
.hp-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;
}
.hp-root .m-filter-num.inactive { background: var(--line); color: var(--ink-mute); }
.hp-root .m-filter-num.current  { background: var(--ink);  color: #fff; }
/* Bigger checkmark inside — outer circle stays 22px */
.hp-root .m-filter-num.done     { background: var(--accent); color: #fff; font-size: 15px; font-weight: 900; line-height: 1; }

.hp-root .m-filter-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 10px;
}
.hp-root .m-filter-step-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
/* Subject select */
.hp-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;
}
.hp-root .m-filter-select:hover   { border-color: var(--ink-soft); }
.hp-root .m-filter-select:focus   { outline: none; border-color: var(--accent); }
.hp-root .m-filter-select.chosen  {
  border-color: var(--accent);
  color: var(--accent-deep);
  font-weight: 600;
}
/* Campus pill buttons */
.hp-root .m-filter-campus-row {
  display: flex;
  gap: 6px;
}
.hp-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;
}
.hp-root .m-filter-campus-btn:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}
.hp-root .m-filter-campus-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 700;
}
.hp-root .m-filter-campus-btn:disabled { cursor: default; }
/* ── Stepper: steps wrapper, row, left track, vertical line ── */
.hp-root .m-filter-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hp-root .m-filter-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  transition: opacity .2s;
}
.hp-root .m-filter-row.locked {
  opacity: 0.38;
  pointer-events: none;
}
.hp-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 */
.hp-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 */
.hp-root .m-filter-connector {
  width: 2px;
  height: 10px;
  background: var(--line);
  margin: 4px 0 4px 10px;
  border-radius: 1px;
}

/* ── Locked placeholder card ── */
.hp-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;
}
.hp-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;
}
.hp-root .ses-locked-msg {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.hp-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) ── */
.hp-root .ses-week-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
.hp-root .ses-week-header:first-child { padding-top: 6px; }
.hp-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;
}
.hp-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 */
.hp-root .ses-timetable {
  padding: 4px 24px 12px;
}

/* Column header row */
.hp-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;
}
.hp-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 */
.hp-root .ses-tt-week {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  margin-top: 6px;
  background: var(--accent-soft);
  border-radius: 6px;
}
.hp-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 */
.hp-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;
}
.hp-root .ses-tt-row:last-child { border-bottom: 0; }
.hp-root .ses-tt-row:hover { background: var(--bg); }
.hp-root .ses-tt-row.even { background: color-mix(in oklab, var(--bg) 60%, var(--bg-card)); }
.hp-root .ses-tt-row.even:hover { background: var(--bg); }

.hp-root .ses-tt-date {
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.hp-root .ses-tt-day {
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.hp-root .ses-tt-type {
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.hp-root .ses-tt-time {
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-deep);
  white-space: nowrap;
}
.hp-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) {
  .hp-root .ses-tt-head,
  .hp-root .ses-tt-row {
    grid-template-columns: 50px 1fr 90px;
  }
  .hp-root .ses-tt-head span:nth-child(2),
  .hp-root .ses-tt-row .ses-tt-day { display: none; }
  .hp-root .ses-tt-head span:last-child,
  .hp-root .ses-tt-row .ses-tt-dur { display: none; }
}
@media (max-width: 880px) {
  .hp-root .m-sidebar { position: static; }
}
.hp-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);
}
.hp-root .m-side-item:hover { border-color: var(--accent); }
.hp-root .m-side-item.active {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(63, 181, 74, 0.14);
}
.hp-root .m-side-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hp-root .m-side-label {
  font-size: 13px;
  color: var(--ink-soft);
}
.hp-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;
}
.hp-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;
}
.hp-root .m-side-arr svg {
  display: block;
  width: 16px;
  height: 16px;
}
.hp-root .m-side-item.active .m-side-arr { opacity: 1; }

/* Content pane */
.hp-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);
}
.hp-root .m-content-label {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 8px;
  font-family: var(--sans);
}
.hp-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);
}
.hp-root .m-content p {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.65;
}
.hp-root .m-content strong { font-weight: 700; }
.hp-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 */
.hp-root .m-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 14.5px;
}
.hp-root .m-table thead {
  background: var(--ink);
  color: #fff;
}
.hp-root .m-table th,
.hp-root .m-table td {
  padding: 14px 18px;
  text-align: left;
  border: 1px solid var(--line);
}
.hp-root .m-table th { font-weight: 600; font-family: var(--sans); }
.hp-root .m-table td:first-child { font-weight: 500; }
.hp-root .m-table small { color: var(--ink-mute); font-size: 12px; }
.hp-root .m-table.highlight-row tbody tr:first-child {
  background: var(--accent-soft);
}
.hp-root .m-table.highlight-row tbody tr:first-child td:first-child {
  font-weight: 700;
}

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

/* Note box */
.hp-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 */
.hp-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;
}
.hp-root .m-cta:hover { background: var(--accent-deep); }

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

/* FAQ (inside pane) */
.hp-root .m-faq {
  margin: 16px 0 24px;
  border-top: 1px solid var(--line);
}
.hp-root .m-faq-item { border-bottom: 1px solid var(--line); }
.hp-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;
}
.hp-root .m-faq-q:hover { color: var(--accent-deep); }
.hp-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;
}
.hp-root .m-faq-plus svg {
  display: block;
  width: 16px;
  height: 16px;
}
/* Hover the question row → ring firms up to full green */
.hp-root .m-faq-q:hover .m-faq-plus { border-color: var(--accent); }
.hp-root .m-faq-item.open .m-faq-plus {
  transform: rotate(45deg);
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.hp-root .m-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.hp-root .m-faq-item.open .m-faq-a { max-height: 400px; }
.hp-root .m-faq-a-inner {
  padding-bottom: 20px;
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---- Footer ---- */
.hp-root .m-footer {
  background: var(--bg-deep);
  color: var(--on-deep);
  padding: 64px 0 32px;
  font-family: var(--sans);
}
.hp-root .m-footer-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.hp-root .m-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 880px) { .hp-root .m-footer-grid { grid-template-columns: 1fr 1fr; } }
.hp-root .m-footer-brand p {
  color: var(--on-deep-mute);
  font-size: 14px;
  line-height: 1.6;
  max-width: 38ch;
  margin: 16px 0 0;
}
.hp-root .m-footer-logo {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
}
.hp-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;
}
.hp-root .m-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hp-root .m-footer li,
.hp-root .m-footer a {
  color: var(--on-deep-mute);
  text-decoration: none;
  font-size: 14px;
}
.hp-root .m-footer a:hover { color: var(--accent); }
.hp-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 */
.hp-root .ses-controls {
  display: flex;
  gap: 20px 32px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 20px;
}
.hp-root .ses-ctrl-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hp-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 */
.hp-root .ses-subject-pill {
  display: flex;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.hp-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;
}
.hp-root .ses-subject-btn:hover { color: var(--ink); }
.hp-root .ses-subject-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* Location toggle */
.hp-root .ses-location-toggle {
  display: flex;
  gap: 8px;
}
.hp-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;
}
.hp-root .ses-loc-btn:hover { border-color: var(--accent); color: var(--ink); }
.hp-root .ses-loc-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
@media (max-width: 480px) {
  .hp-root .ses-subject-btn { padding: 7px 12px; font-size: 12.5px; }
  .hp-root .ses-loc-btn     { padding: 7px 14px; font-size: 12.5px; }
}

/* Preview toggle (A / B / C) */
.hp-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);
}
.hp-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;
}
.hp-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;
}
.hp-root .ses-preview-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.hp-root .ses-preview-btn.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ── Session card ── */
.hp-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;
}
.hp-root .ses-card--filling { border-color: #D97706; }

/* Card header */
.hp-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) */
.hp-root .ses-slot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 24px 2px;
}
.hp-root .ses-slot-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}
.hp-root .ses-slot-toggle { display: inline-flex; gap: 6px; }
.hp-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;
}
.hp-root .ses-slot-btn:hover { border-color: var(--accent); color: var(--ink); }
.hp-root .ses-slot-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.hp-root .ses-card-head-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hp-root .ses-period {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.hp-root .ses-cohort {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hp-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;
}
.hp-root .ses-spots--hot {
  color: #fff;
  background: #D97706;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
}

/* Timetable — intentionally plain */
.hp-root .ses-timetable {
  padding: 6px 24px 10px;
}
.hp-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);
}
.hp-root .ses-row:last-child { border-bottom: 0; }
.hp-root .ses-row-type {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.hp-root .ses-row-day  { font-size: 13px; font-weight: 600; color: var(--ink); }
.hp-root .ses-row-time { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.hp-root .ses-row-dur  { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); text-align: right; }
@media (max-width: 480px) {
  .hp-root .ses-row { grid-template-columns: 1fr auto; }
  .hp-root .ses-row-type { display: none; }
  .hp-root .ses-row-dur  { display: none; }
}

/* Price + book footer */
.hp-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));
}
.hp-root .ses-price-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hp-root .ses-price-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.hp-root .ses-price-eb {
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hp-root .ses-price-was {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-mute);
  text-decoration: line-through;
}
.hp-root .ses-eb-note {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #B45309;
}
.hp-root .ses-bundle-line {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.hp-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;
}
.hp-root .ses-book-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}

/* Location detail card */
.hp-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-bottom: 24px;
}
.hp-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;
}
.hp-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 */
.hp-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 */
.hp-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 */
.hp-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);
}
.hp-root .enq-title {
  font-family: 'Inter', var(--sans);
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.hp-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;
}
.hp-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;
}
.hp-root .enq-close:hover { background: var(--ink); color: #fff; }

/* Form */
.hp-root .enq-form {
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hp-root .enq-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hp-root .enq-label {
  font-family: 'Inter', var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.hp-root .enq-optional {
  font-weight: 400;
  color: var(--ink-mute);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}
.hp-root .enq-req { color: var(--accent-deep); font-weight: 700; }
.hp-root .enq-input,
.hp-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;
}
.hp-root .enq-input:focus,
.hp-root .enq-textarea:focus { border-color: var(--accent); }
.hp-root .enq-note {
  font-family: 'Inter', var(--sans);
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: -2px;
}
.hp-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;
}
.hp-root .enq-submit:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* Success state */
.hp-root .enq-success {
  padding: 48px 28px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.hp-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;
}
.hp-root .enq-success-title {
  font-family: 'Inter', var(--sans);
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}
.hp-root .enq-success-msg {
  font-family: 'Inter', var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
}
.hp-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;
}
.hp-root .enq-done-btn:hover { background: var(--line-soft); }

/* ── Sidebar nudge card (Option B) ── */
.hp-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;
}
.hp-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;
}
.hp-root .m-enquiry-nudge-body {
  flex: 1;
  min-width: 0;
}
.hp-root .m-enquiry-nudge-title {
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.hp-root .m-enquiry-nudge-sub {
  font-family: 'Inter', var(--sans);
  font-size: 11px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.hp-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;
}
.hp-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 */
.hp-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: 880px) {
  /* dissolve the sidebar AND pane boxes so the filter, schedule, FAQ tab,
     FAQ panel and nudge all share one column and can be interleaved */
  .hp-root .m-course-layout { gap: 16px; }
  .hp-root .m-sidebar, .hp-root .m-pane { display: contents; }

  /* each visible panel becomes its own card (the .m-pane card box is gone) */
  .hp-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);
  }

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

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

  /* timetable session — location card on phone */
  .hp-root .ses-enquire-row { margin-bottom: 12px; }   /* 1 · gap before the location box */
  .hp-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 */
  .hp-root .ses-locked-hint .locked-hint-lg { display: none; }
  .hp-root .ses-locked-hint .locked-hint-sm { display: inline; }
}

/* ── Inline enquire link below session card (Option A) ── */
.hp-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;
}
.hp-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;
}
.hp-root .ses-enquire-link:hover { color: var(--accent); }

/* Section header row (h3 + direction toggle) */
.hp-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 */
.hp-root .sc-dir-toggle {
  display: flex;
  gap: 3px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.hp-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;
}
.hp-root .sc-dir-btn.active {
  background: var(--ink);
  color: #fff;
}

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

/* ── BASE card (shared across all directions) ── */
.hp-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 */
.hp-root .sc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  transition: background .2s;
}
.hp-root .sc-head-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hp-root .sc-cohort {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.hp-root .sc-timing {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.hp-root .sc-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Status badge */
.hp-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;
}
.hp-root .sc-badge--open     { background: var(--accent-soft); color: var(--accent-deep); }
.hp-root .sc-badge--filling  { background: #FFF3E0; color: #B45309; }
.hp-root .sc-badge--sold-out { background: var(--bg); color: var(--ink-mute); border: 1px solid var(--line); }
.hp-root .sc-badge--locked   { background: var(--bg); color: var(--ink-mute); border: 1px solid var(--line); }

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

/* Timetable (inside open / filling cards) */
.hp-root .sc-timetable {
  border-top: 1px solid var(--line);
  padding: 6px 20px 10px;
}
.hp-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;
}
.hp-root .sc-row:last-child { border-bottom: 0; }
.hp-root .sc-row-type {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.hp-root .sc-row-day  { font-weight: 600; color: var(--ink); font-size: 13px; }
.hp-root .sc-row-time { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.hp-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) {
  .hp-root .sc-row { grid-template-columns: 1fr auto; }
  .hp-root .sc-row-type { display: none; }
  .hp-root .sc-row-dur  { display: none; }
  .hp-root .sc-row-time { color: var(--ink-mute); font-size: 11px; }
}

/* Collapsed summary (sold-out / locked) */
.hp-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);
}
.hp-root .sc-collapse-dot { opacity: 0.4; }
.hp-root .sc-collapse-full { font-weight: 600; }
.hp-root .sc-collapse--locked {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.hp-root .sc-lock-icon {
  display: inline-flex;
  align-items: center;
  color: var(--ink-mute);
  flex-shrink: 0;
  margin-right: 2px;
}
.hp-root .sc-locked-opens {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}

/* Book footer */
.hp-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));
}
.hp-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);
}
.hp-root .sc-book-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(8,120,2,0.48);
}
.hp-root .sc-foot-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Location cards */
.hp-root .sc-locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0 32px;
}
@media (max-width: 620px) { .hp-root .sc-locations { grid-template-columns: 1fr; } }
.hp-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;
}
.hp-root .sc-loc:hover { border-color: var(--accent); }
.hp-root .sc-loc-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hp-root .sc-loc-pin {
  color: var(--accent-deep);
  flex-shrink: 0;
}
.hp-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
   ====================================================== */
.hp-root .sc-stack--dir1 .sc-card {
  border: 1.5px solid var(--line);
}
.hp-root .sc-stack--dir1 .sc-card--open,
.hp-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);
}
.hp-root .sc-stack--dir1 .sc-card--filling .sc-timing {
  color: #B45309;
}
.hp-root .sc-stack--dir1 .sc-card--sold-out {
  opacity: 0.58;
  border-style: dashed;
}
.hp-root .sc-stack--dir1 .sc-card--locked {
  opacity: 0.38;
}

/* ======================================================
   DIRECTION 2 — Contrast
   Open/filling get a strong green header band
   ====================================================== */
.hp-root .sc-stack--dir2 .sc-card {
  border: 1px solid var(--line);
}
/* Green header for open / filling */
.hp-root .sc-stack--dir2 .sc-card--open .sc-head,
.hp-root .sc-stack--dir2 .sc-card--filling .sc-head {
  background: linear-gradient(135deg, #38D430 0%, #087802 100%);
  padding-top: 18px;
  padding-bottom: 18px;
}
.hp-root .sc-stack--dir2 .sc-card--open .sc-cohort,
.hp-root .sc-stack--dir2 .sc-card--filling .sc-cohort {
  color: rgba(255,255,255,0.6);
}
.hp-root .sc-stack--dir2 .sc-card--open .sc-timing,
.hp-root .sc-stack--dir2 .sc-card--filling .sc-timing {
  color: #fff;
}
.hp-root .sc-stack--dir2 .sc-card--open .sc-spots--open,
.hp-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;
}
.hp-root .sc-stack--dir2 .sc-card--open .sc-badge--open,
.hp-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 */
.hp-root .sc-stack--dir2 .sc-card--sold-out {
  opacity: 0.55;
}
.hp-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 */
.hp-root .sc-stack--dir2 .sc-card--locked {
  opacity: 0.38;
}
.hp-root .sc-stack--dir2 .sc-card--locked .sc-head {
  background: var(--bg);
}

/* ======================================================
   DIRECTION 3 — Track
   Vertical timeline connector with status dots
   ====================================================== */
.hp-root .sc-stack--dir3 {
  position: relative;
  padding-left: 40px;
  gap: 0;
}
/* Vertical line */
.hp-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%);
}
.hp-root .sc-stack--dir3 .sc-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  position: relative;
  margin-bottom: 12px;
}
.hp-root .sc-stack--dir3 .sc-card:last-child { margin-bottom: 0; }
/* Timeline dot */
.hp-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;
}
.hp-root .sc-stack--dir3 .sc-card--open::before,
.hp-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);
}
.hp-root .sc-stack--dir3 .sc-card--sold-out::before {
  background: var(--ink-mute);
  border-color: var(--ink-mute);
}
.hp-root .sc-stack--dir3 .sc-card--open,
.hp-root .sc-stack--dir3 .sc-card--filling {
  border-color: var(--accent);
  box-shadow: 0 4px 18px -8px rgba(63,181,74,0.2);
}
.hp-root .sc-stack--dir3 .sc-card--sold-out { opacity: 0.55; }
.hp-root .sc-stack--dir3 .sc-card--locked   { opacity: 0.38; }
@media (max-width: 500px) {
  .hp-root .sc-stack--dir3 { padding-left: 28px; }
  .hp-root .sc-stack--dir3::before { left: 9px; }
  .hp-root .sc-stack--dir3 .sc-card::before { left: -22px; width: 13px; height: 13px; }
}

/* ============================================================= */
/* Year 11 Holiday Course — page-specific additions             */
/* Two-class showcase (section 03b-subjects.jsx).               */
/* ============================================================= */

/* Two big cards instead of three */
.hp-root .subj-grid {
  grid-template-columns: 1fr 1fr;
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 680px) { .hp-root .subj-grid { grid-template-columns: 1fr; } }

.hp-root .subj-card .qo-photo { aspect-ratio: 16 / 9; }
/* Plain <img> fills the whole slot — no gaps, no per-slot framing state */
.hp-root .subj-card .qo-photo .subj-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Time-of-day chip under the eyebrow */
.hp-root .subj-when {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  font-family: 'Inter', var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 5px 12px;
  margin: 0 0 12px;
}

/* The topic name is the headline of the card — make it large */
.hp-root .subj-h3 {
  font-family: var(--serif) !important;
  font-size: clamp(26px, 2.6vw, 34px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  min-height: 0 !important;
  margin: 0 0 10px !important;
}

/* "What's covered" checklist */
.hp-root .subj-covered {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.hp-root .subj-covered li {
  position: relative;
  padding-left: 24px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.hp-root .subj-covered li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%232E8B3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* "Do both" divider line under the two cards */
.hp-root .subj-combine {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 880px;
  margin: clamp(22px, 3vw, 34px) auto 0;
}
.hp-root .subj-combine-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}
.hp-root .subj-combine-text {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
}
.hp-root .subj-combine-text strong {
  color: var(--accent-deep);
  font-weight: 700;
}
@media (max-width: 540px) {
  .hp-root .subj-combine-text { white-space: normal; }
}

/* "Free" price treatment (replaces the $ price block) */
.hp-root .ses-price-free {
  background: linear-gradient(135deg, #38D430 0%, #087802 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hp-root .ses-free-badge {
  font-family: 'Inter', var(--sans);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 4px 10px;
  align-self: center;
}

/* ============================================================= */
/* Tutor Rail — infinite side-scroll (section 03c-tutors.jsx)    */
/* ============================================================= */
.hp-root .tutors {
  /* Dark green (not fully black) + top green glow + white diagonal hatch —
     a bold dark anchor for the tutor rail. */
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(63,181,74,0.20) 0%, rgba(63,181,74,0) 55%),
    linear-gradient(165deg, #12301e 0%, #081a0d 100%);
  padding: clamp(56px, 7vw, 100px) 0;   /* equal top/bottom edge (page-wide standard) */
  overflow: hidden;
}
/* Static diagonal hatch over the dark green band — always shown, no animation. */
.hp-root .tutors::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 9px);
}
.hp-root .tutors-wrap, .hp-root .tutors-rail, .hp-root .tutors-controls { position: relative; z-index: 1; }
.hp-root .tutors-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.hp-root .tutors-head {
  display: flex;
  align-items: center;          /* one-line title + arrows aligned on the same row */
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.hp-root .tutors-title {
  font-family: 'Inter', var(--sans);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  white-space: nowrap;          /* keep it on a single line */
}
.hp-root .tutors-title span { color: #fff; }
/* On narrow screens let the title wrap rather than overflow */
@media (max-width: 720px) {
  .hp-root .tutors-title { white-space: normal; text-wrap: balance; }
}

/* Arrows now sit ON the rail (overlaid on the card edges) as white circles */
.hp-root .tutor-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,0.45);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, border-color .18s, color .18s, transform .15s;
}
.hp-root .tutor-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
}
.hp-root .tutor-arrow:active { transform: translateY(-50%) scale(0.98); }
.hp-root .tutor-arrow svg { width: 20px; height: 20px; }
.hp-root .tutor-arrow-prev { left: clamp(8px, 1.5vw, 18px); }
.hp-root .tutor-arrow-next { right: clamp(8px, 1.5vw, 18px); }

/* Marquee viewport — clips the moving track (no edge fade) */
.hp-root .tutors-rail {
  position: relative;
  overflow: hidden;
  padding: 4px 0 6px;
  touch-action: pan-y;             /* horizontal swipe = scrub rail; vertical = page scroll */
  -webkit-user-select: none; user-select: none;
  cursor: grab;
}
.hp-root .tutors-rail:active { cursor: grabbing; }
/* The moving row. Driven by a JS rAF loop writing translate3d() — CSS
   transforms keep sub-pixel precision, so the auto-drift can't stall the way
   integer-rounded scrollLeft did. */
.hp-root .tutors-track {
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
}

/* Card */
.hp-root .tutor-card {
  flex: 0 0 clamp(236px, 22vw, 286px);
  scroll-snap-align: start;
  background: var(--bg-card);
  border: 1px solid rgba(20,40,25,0.10);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,40,25,0.05), 0 18px 36px -20px rgba(20,40,25,0.34);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hp-root .tutor-card:hover { transform: translateY(-4px); }
.hp-root .tutor-photo {
  position: relative;
  aspect-ratio: 25 / 24;      /* ~square — 20% taller than 5/4 so heads aren't cropped */
  width: 100%;
  background: #2f3a2f;
  overflow: hidden;
}
/* ATAR as a glassy badge on the photo (only shown for tutors that have one) */
.hp-root .tutor-atar-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; color: #fff;
  background: rgba(15,42,25,0.72);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 5px 9px; border-radius: 999px;
}
.hp-root .tutor-photo image-slot { display: block; width: 100%; height: 100%; }

.hp-root .tutor-info { padding: 14px 16px 16px; }
.hp-root .tutor-name {
  font-family: 'Inter', var(--sans);
  font-weight: 800;
  font-size: clamp(17px, 1.5vw, 20px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 5px;
}
/* school — clean + readable (no cursive), small cap icon */
.hp-root .tutor-campus {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', var(--sans);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  color: var(--ink-soft);
  margin: 0 0 13px;
}
.hp-root .tutor-campus svg { width: 14px; height: 14px; color: var(--accent-deep); flex-shrink: 0; }

/* HSC maths marks — punchy: big bold green numbers in a tinted panel */
.hp-root .tutor-subjects {
  list-style: none; margin: 0; padding: 2px 12px;
  display: grid; gap: 0;
  background: var(--accent-tint);
  border: 1px solid rgba(46,139,58,0.16);
  border-radius: 12px;
}
.hp-root .tutor-subjects li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid rgba(46,139,58,0.14);
}
.hp-root .tutor-subjects li:first-child { border-top: 0; }
.hp-root .tutor-subj-name {
  font-family: 'Inter', var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-soft);
}
.hp-root .tutor-subj-score {
  font-family: 'Inter', var(--sans);
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-deep);
}

@media (max-width: 640px) {
  .hp-root .tutors-head { margin-bottom: 18px; }
  /* Mobile: horizontal-split card (photo left, info right). No auto-scroll —
     a native, centre-snapping swipe carousel. Arrows are hidden (they covered
     the card); swipe instead. */
  .hp-root .tutor-card { flex-basis: 80vw; display: flex; align-items: stretch; scroll-snap-align: center; }
  .hp-root .tutor-photo { flex: 0 0 38%; aspect-ratio: auto; }
  /* Phone: ATAR badge sits at the BOTTOM of the photo (tall portrait crop) */
  .hp-root .tutor-atar-badge { top: auto; bottom: 8px; left: 8px; }
  .hp-root .tutor-info {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 14px 14px;
  }
  .hp-root .tutor-subjects { margin-top: 11px; padding: 2px 10px; }
  .hp-root .tutor-subj-name { font-size: 11.5px; }
  .hp-root .tutor-subj-score { font-size: 21px; }

  /* Phone uses the same drag-driven marquee as desktop (overflow:hidden +
     transform) — it loops seamlessly last→first and never shifts the page. */
  .hp-root .tutor-arrow { display: none; }           /* no overlay arrows on phone — swipe instead */
}

/* Hero schedule card (two campuses + dates, under the body copy) */
.hp-root .m-hero-sched {
  display: flex;
  flex-direction: column;
  gap: 8px;                       /* tighter spacing between the two campus rows */
  margin: 4px 0 30px;             /* small top gap; extra bottom so CTA isn't crowded */
  width: fit-content;             /* hug the content so right gap == left padding */
  max-width: 100%;
  background: color-mix(in oklab, var(--accent-soft) 38%, var(--bg-card));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 15px 24px 15px 22px;   /* left 22, right 24 */
}
.hp-root .m-hero-sched-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.hp-root .m-hero-sched-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* left-align; dates sit in a fixed column */
  gap: 14px;
}
.hp-root .m-hero-sched-div {
  height: 1px;
  width: 100%;
  background: color-mix(in oklab, var(--line) 70%, transparent);
}
.hp-root .m-hero-sched-campus {
  flex: 0 0 120px;               /* fixed width so every date starts at the same x */
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter', var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.hp-root .m-hero-sched-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  flex-shrink: 0;
}
.hp-root .m-hero-sched-when {
  font-family: 'Inter', var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-deep);
  white-space: nowrap;
}
.hp-root .m-hero-sched-note {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-mute);
  margin: 4px 0 0;
  line-height: 1.4;
}

/* Subject-showcase sub-header (Advanced | Extension 1) */
.hp-root .qo-subhead {
  font-family: 'Inter', var(--sans);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}
.hp-root .qo-subhead .qo-sep {
  display: inline-block;
  margin: 0 12px;
  color: var(--accent);
  font-weight: 400;
}

/* "Good to know" reassurance strip under the two class cards */
.hp-root .subj-gtk {
  list-style: none;
  margin: clamp(20px, 3vw, 30px) auto 0;
  padding: 0;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 680px) { .hp-root .subj-gtk { grid-template-columns: 1fr; gap: 10px; max-width: 460px; } }
.hp-root .subj-gtk li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.hp-root .subj-gtk li strong { color: var(--ink); font-weight: 700; }
.hp-root .subj-gtk-ic {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hp-root .subj-gtk-ic svg { width: 13px; height: 13px; }

/* ============================================================= */
/* Testimonials wall (section 03d-reviews.jsx)                  */
/* ============================================================= */
.hp-root .tw-section { background: var(--bg); padding: clamp(44px,5.5vw,84px) clamp(20px,4vw,40px); overflow: hidden; }
.hp-root .tw-wrap { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 0.58fr 1.42fr; gap: clamp(36px,5.5vw,84px); align-items: start; }
@media (max-width: 860px) { .hp-root .tw-wrap { grid-template-columns: 1fr; gap: 28px; } }

/* Left intro */
.hp-root .tw-intro { position: sticky; top: 96px; }
@media (max-width: 860px) { .hp-root .tw-intro { position: static; } }
.hp-root .tw-eyebrow { font-family: "Allura","Pinyon Script",cursive; font-size: 30px; line-height: 1; color: var(--ink); display: block; margin-bottom: 14px; }
.hp-root .tw-title { font-family: 'Inter', var(--sans); font-weight: 800; font-size: clamp(24px,2.6vw,34px); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 18px; padding-left: 16px; border-left: 4px solid var(--accent); }
.hp-root .tw-lede { font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 22px; max-width: 42ch; }
.hp-root .tw-badge { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; box-shadow: 0 6px 18px -12px rgba(0,0,0,0.25); transition: transform .15s, box-shadow .2s; }
.hp-root .tw-badge:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(0,0,0,0.3); }
.hp-root .tw-stars { display: inline-flex; gap: 1px; color: #FBBC05; }
.hp-root .tw-badge-rating { font-family: 'Inter', var(--sans); font-weight: 800; font-size: 15px; color: var(--ink); }
.hp-root .tw-badge-link { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }

/* Right wall — two columns auto-scrolling vertically */
.hp-root .tw-wall {
  position: relative; height: 540px; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: 25px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
}
@media (max-width: 767px) { .hp-root .tw-wall { grid-template-columns: 1fr; height: 470px; } .hp-root .tw-col.b { display: none; } }
.hp-root .tw-col { display: flex; flex-direction: column; animation: tw-scroll 42s linear infinite; will-change: transform; }
/* Right column scrolls the opposite way (downward) for a livelier infinite feel */
.hp-root .tw-col.b { animation-direction: reverse; animation-duration: 50s; }
.hp-root .tw-wall:hover .tw-col { animation-play-state: paused; }
@keyframes tw-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.hp-root .tw-card { background: var(--bg-card); border: 1.5px solid var(--ink); border-radius: 14px; padding: 18px 22px; margin: 0 0 15px; }
.hp-root .tw-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hp-root .tw-avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hp-root .tw-avatar-mono { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-family: 'Inter', var(--sans); font-weight: 800; font-size: 24px; }
.hp-root .tw-m { width: 40px; height: auto; display: block; flex-shrink: 0; }
.hp-root .tw-name { display: inline-block; align-self: flex-start; background: var(--ink); color: #fff; font-family: 'Inter',var(--sans); font-weight: 700; font-size: 14px; padding: 5px 12px; border-radius: 3px; margin-bottom: 11px; }
.hp-root .tw-text { font-family: var(--sans); font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 0; }

/* ============================================================= */
/* Stunning results (section 03e-results.jsx)                   */
/* ============================================================= */
.hp-root .res-section { background: var(--bg); padding: clamp(40px,5vw,76px) clamp(20px,4vw,40px); }
.hp-root .res-wrap { max-width: 1300px; margin: 0 auto; }
.hp-root .res-head { display: flex; align-items: center; gap: clamp(20px,4vw,48px); margin-bottom: clamp(24px,3vw,36px); flex-wrap: wrap; }

/* Calculus formula with a green underline */
.hp-root .res-formula {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--serif); font-style: italic; font-size: clamp(22px,2.4vw,30px); color: var(--ink);
  padding-bottom: 10px; border-bottom: 4px solid var(--accent); line-height: 1;
}
.hp-root .res-int { font-size: 1.7em; line-height: 0.8; font-style: normal; }
.hp-root .res-lims { display: inline-flex; flex-direction: column; justify-content: center; font-size: 0.5em; line-height: 1.1; margin: 0 4px 0 -2px; font-style: normal; }
.hp-root .res-lims .up { margin-bottom: 2px; }
.hp-root .res-expr { margin-left: 2px; }

.hp-root .res-title { font-family: 'Inter', var(--sans); font-weight: 800; font-size: clamp(22px,2.4vw,30px); letter-spacing: -0.01em; color: var(--ink); margin: 0; }

/* Table */
.hp-root .res-table { width: 100%; }
.hp-root .res-row {
  display: grid; grid-template-columns: 1.1fr 1.6fr 0.5fr; align-items: center; gap: 16px;
  padding: 15px 4px; border-bottom: 1px solid var(--line);
}
.hp-root .res-row-head { border-bottom: 1.5px solid var(--ink); padding-bottom: 11px; }
.hp-root .res-row-head span { font-family: 'Inter', var(--sans); font-weight: 800; font-size: 14px; color: var(--ink); }
.hp-root .res-student { font-family: 'Inter', var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); }
.hp-root .res-school { font-family: var(--sans); font-size: 15px; color: var(--ink-soft); }
.hp-root .res-mark { text-align: right; font-family: 'Inter', var(--sans); font-weight: 700; font-size: 15px; color: var(--ink); }
.hp-root .res-row:not(.res-row-head) .res-mark { color: var(--accent-deep); font-weight: 800; }
@media (max-width: 560px) {
  .hp-root .res-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .hp-root .res-school { grid-column: 1; font-size: 13px; }
  .hp-root .res-mark { grid-row: 1 / span 2; align-self: center; }
  .hp-root .res-row-head .res-school { display: none; }
}


/* Offset fixed site nav (header is position:fixed) */
.hp-root{padding-top:54px}
@media (max-width:991px){.hp-root{padding-top:50px}}