.detail-page { --page-accent: var(--sun); --page-soft: #fff4c7; }
.detail-page.theme-coral { --page-accent: var(--coral); --page-soft: #fff0ed; }
.detail-page.theme-blue { --page-accent: var(--sky); --page-soft: #eaf8fe; }
.detail-page.theme-violet { --page-accent: #a996e9; --page-soft: #f5f2fe; }
.detail-page.theme-green { --page-accent: var(--leaf); --page-soft: var(--leaf-soft); }
.detail-page.theme-cream { --page-accent: var(--sun); --page-soft: #fff3df; }

.detail-hero, .exam-hero { min-height: calc(100svh - 112px); display: grid; grid-template-columns: minmax(0,1fr) minmax(430px,.9fr); align-items: center; gap: clamp(40px,7vw,100px); padding-block: 80px; }
.detail-copy h1, .exam-hero__copy h1 { margin: 22px 0; font: 700 clamp(48px,6vw,86px)/1.04 var(--display); letter-spacing: -.06em; }
.detail-copy h1 em, .exam-hero__copy h1 em { position: relative; color: var(--leaf-dark); font-style: normal; }
.detail-copy h1 em::after, .exam-hero__copy h1 em::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 8px; border-radius: 50%; background: var(--page-accent); content: ""; }
.detail-copy > p, .exam-hero__copy > p { max-width: 680px; color: var(--muted); font-size: 18px; }
.detail-status { display: inline-flex; margin-left: 3px; padding: 5px 8px; border: 1.5px solid var(--bark); border-radius: 99px; background: var(--coral); color: var(--bark); font: 900 8px/1 var(--accent); letter-spacing: .05em; box-shadow: 2px 2px 0 var(--bark); transform: rotate(2deg); }
.detail-call { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 5px 9px; min-width: 440px; margin-top: 32px; padding: 16px 18px; border: 2px solid var(--bark); border-radius: 20px 20px 20px 7px; background: var(--page-accent); color: var(--bark); box-shadow: 6px 7px 0 var(--bark); text-align: left; }
.detail-call > span { grid-row: 1/3; align-self: center; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.detail-call small { font: 800 13px var(--accent); }
.detail-call strong { padding: 1px 6px; border-radius: 8px; background: var(--white); font: 800 22px var(--accent); letter-spacing: .05em; }
.detail-call i { grid-column: 4; grid-row: 1/3; align-self: center; font: 800 21px var(--accent); font-style: normal; }
.detail-playground { --orbit-radius: 190px; position: relative; min-height: 560px; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--bark); border-radius: 50% 50% 50% 15%; background: var(--page-soft); box-shadow: 10px 11px 0 var(--bark); }
.detail-mark { position: relative; z-index: 3; width: 210px; height: 210px; display: grid; place-items: center; border: 2px solid var(--bark); border-radius: 50%; background: var(--page-accent); font: 800 72px var(--accent); box-shadow: 7px 8px 0 var(--bark); animation: detail-mark 4s ease-in-out infinite; }
.detail-ring { position: absolute; width: 72%; aspect-ratio: 1; border: 2px dashed rgba(61,39,16,.3); border-radius: 50%; animation: orbit 24s linear infinite; }
.detail-orbiting-chips { position: absolute; inset: 0; z-index: 2; animation: detail-chips-orbit 18s linear infinite; }
.detail-playground button { --angle: calc(var(--i) * 90deg); position: absolute; top: 50%; left: 50%; width: max-content; min-width: 70px; height: 70px; padding: 0 14px; border: 2px solid var(--bark); border-radius: 20px; background: var(--white); color: var(--bark); font: 800 16px var(--accent); white-space: nowrap; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--orbit-radius)) rotate(calc(var(--angle) * -1)); transition: transform .25s ease, background .25s ease; }
.detail-playground button span { display: block; animation: detail-chip-counter 18s linear infinite; }
.detail-playground button.is-popped { background: var(--leaf); transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--orbit-radius)) rotate(calc(var(--angle) * -1)) scale(1.2) rotate(8deg); }
.detail-playground > p { position: absolute; z-index: 4; bottom: 12px; margin: 0; font-size: 10px; font-weight: 900; text-transform: uppercase; }

.outcomes, .teacher-section, .exam-route, .exam-team { padding-block: 130px; }
.detail-heading { display: grid; grid-template-columns: .36fr .64fr; gap: 30px; margin-bottom: 50px; }
.detail-heading > span { color: var(--leaf-dark); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.detail-heading h2 { margin: 0; font: 700 clamp(37px,4.7vw,66px)/1.08 var(--display); letter-spacing: -.05em; }
.outcome-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.outcome-grid article { min-height: 280px; display: flex; flex-direction: column; padding: 27px; border: 2px solid var(--bark); border-radius: 27px 27px 27px 8px; background: var(--page-accent); }
.outcome-grid article:nth-child(2) { background: var(--sky); }
.outcome-grid article:nth-child(3) { background: var(--leaf); }
.outcome-grid span { font: 800 11px var(--accent); }
.outcome-grid h3 { margin: auto 0 0; font: 700 clamp(20px,2.2vw,29px)/1.25 var(--display); }

.topics-section { padding-block: 60px; overflow: hidden; border-block: 2px solid var(--bark); background: var(--page-accent); }
.topics-section .shell > span { display: block; margin-bottom: 23px; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.topic-marquee { width: max-content; display: flex; align-items: center; gap: 22px; animation: topic-run 25s linear infinite; }
.topic-marquee b { font: 700 clamp(25px,4vw,48px) var(--display); }
.topic-marquee i { color: var(--leaf-dark); font-style: normal; }

.teacher-card { display: grid; grid-template-columns: minmax(330px,.8fr) minmax(0,1.2fr); min-height: 560px; overflow: hidden; border: 2px solid var(--bark); border-radius: 35px 35px 35px 11px; background: var(--white); box-shadow: 9px 10px 0 var(--bark); }
.teacher-photo { min-height: 300px; background-image: url("/public/teachers-grid.webp"); background-repeat: no-repeat; background-size: 200% 200%; }
.teacher-photo--p1 { background-position: 0 0; }
.teacher-photo--p2 { background-position: 100% 0; }
.teacher-photo--p3 { background-position: 0 100%; }
.teacher-photo--p4 { background-position: 100% 100%; }
.teacher-card > div:last-child { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px,5vw,70px); }
.teacher-card span { color: var(--leaf-dark); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.teacher-card h3 { margin: 18px 0 7px; font: 700 clamp(35px,4.5vw,60px)/1.05 var(--display); }
.teacher-card p { color: var(--muted); }
.teacher-card blockquote { margin: auto 0 0; padding: 22px; border-left: 5px solid var(--page-accent); border-radius: 0 18px 18px 0; background: var(--page-soft); font: 700 18px/1.45 var(--display); }
.teacher-carousel { position: relative; }
.teacher-carousel__viewport { overflow: hidden; padding: 0 12px 14px 0; touch-action: pan-y; }
.teacher-carousel__track { display: flex; transition: transform .48s cubic-bezier(.22,.78,.24,1); will-change: transform; }
.teacher-carousel__track .teacher-card { flex: 0 0 100%; }
.teacher-carousel__controls { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.teacher-carousel__controls button { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 2px solid var(--bark); border-radius: 50%; background: var(--page-accent); color: var(--bark); box-shadow: 3px 4px 0 var(--bark); font: 800 20px var(--accent); transition: transform .18s ease; }
.teacher-carousel__controls button:hover { transform: translateY(-3px); }
.teacher-carousel__controls span { min-width: 66px; text-align: center; font: 800 11px var(--accent); }
.teacher-carousel__controls b { color: var(--leaf-dark); font-size: 16px; }

.detail-phone-band { padding-block: 100px; background: var(--bark); color: var(--white); }
.detail-phone-band .shell { display: grid; grid-template-columns: .35fr 1fr auto; align-items: center; gap: 35px; }
.detail-phone-band span { color: var(--leaf); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.detail-phone-band h2 { margin: 0; font: 700 clamp(29px,3.7vw,50px)/1.12 var(--display); }
.detail-phone-band a { display: grid; justify-items: center; padding: 20px 27px; border: 2px solid var(--bark); border-radius: 22px 22px 22px 7px; background: var(--sun); color: var(--bark); box-shadow: 6px 7px 0 var(--white); }
.detail-phone-band a small { font: 800 13px var(--accent); }
.detail-phone-band a strong { font: 800 30px var(--accent); letter-spacing: .05em; }

.exam-hero { grid-template-columns: minmax(0,1.1fr) minmax(390px,.9fr); }
.exam-score { position: relative; min-height: 550px; display: grid; place-items: center; align-content: center; overflow: hidden; border: 2px solid var(--bark); border-radius: 34px 34px 34px 11px; background: var(--page-accent); box-shadow: 10px 11px 0 var(--bark); }
.exam-score > span { font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.exam-score > strong { font: 800 clamp(125px,17vw,230px)/.9 var(--accent); letter-spacing: -.08em; }
.exam-score > i { font: 800 27px var(--accent); font-style: normal; }
.exam-score > div { position: absolute; inset: 24px; border: 2px dashed rgba(61,39,16,.3); border-radius: 25px; }
.exam-score b { position: absolute; width: 18px; height: 18px; border: 2px solid var(--bark); border-radius: 50%; background: var(--sun); }
.exam-score b:nth-child(1) { top: 9%; left: 14%; }
.exam-score b:nth-child(2) { top: 18%; right: 11%; background: var(--sky); }
.exam-score b:nth-child(3) { bottom: 16%; left: 12%; background: var(--coral); }
.exam-score b:nth-child(4) { right: 20%; bottom: 9%; background: var(--leaf); }
.exam-score b:nth-child(5) { top: 48%; right: 5%; }

.exam-updates { display: grid; grid-template-columns: .78fr 1.22fr; align-items: start; gap: clamp(45px,7vw,100px); padding-block: 120px; }
.exam-updates__intro { position: sticky; top: 125px; }
.exam-updates__intro h2 { margin: 20px 0; font: 700 clamp(40px,4.8vw,68px)/1.06 var(--display); letter-spacing: -.055em; }
.exam-updates__intro h2 em { color: var(--leaf-dark); font-style: normal; }
.exam-updates__intro > p { max-width: 590px; color: var(--muted); font-size: 17px; }
.exam-version { width: 220px; aspect-ratio: 1; display: grid; place-items: center; align-content: center; margin-top: 38px; border: 2px solid var(--bark); border-radius: 50%; background: var(--page-accent); box-shadow: 7px 8px 0 var(--bark); transform: rotate(-4deg); animation: exam-version-float 4s ease-in-out infinite; }
.exam-version small { font-size: 9px; font-weight: 900; text-transform: uppercase; }
.exam-version strong { font: 700 28px var(--display); }
.exam-version i { font: 800 30px var(--accent); font-style: normal; }
.exam-update-cards { display: grid; gap: 14px; }
.exam-update-cards article { min-height: 190px; display: grid; grid-template-columns: 54px 1fr auto; grid-template-rows: auto 1fr; gap: 4px 18px; padding: 25px; border: 2px solid var(--bark); border-radius: 25px 25px 25px 8px; background: var(--white); box-shadow: 5px 6px 0 var(--bark); transition: transform .22s ease; }
.exam-update-cards article:nth-child(2) { background: var(--page-soft); transform: translateX(24px); }
.exam-update-cards article:nth-child(3) { background: var(--sun); transform: translateX(8px); }
.exam-update-cards article:hover { transform: translate(-4px,-4px) rotate(-.5deg); }
.exam-update-cards article > span { grid-row: 1/3; width: 50px; height: 50px; display: grid; place-items: center; border: 2px solid var(--bark); border-radius: 50%; background: var(--leaf); font: 800 11px var(--accent); }
.exam-update-cards h3 { margin: 0; font: 700 26px var(--display); }
.exam-update-cards p { grid-column: 2; margin: 9px 0 0; color: var(--muted); }
.exam-update-cards article > i { grid-column: 3; grid-row: 1; align-self: center; padding: 5px 8px; border-radius: 99px; background: var(--leaf-soft); color: var(--leaf-dark); font-size: 8px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.exam-update-cards blockquote { margin: 18px 0 0; padding: 34px; border: 2px solid var(--bark); border-radius: 28px 28px 28px 9px; background: var(--leaf-dark); color: var(--white); box-shadow: 7px 8px 0 var(--bark); }
.exam-update-cards blockquote span { color: var(--leaf); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.exam-update-cards blockquote p { margin: 15px 0 0; color: var(--white); font: 700 clamp(22px,2.6vw,34px)/1.35 var(--display); }

.phase-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.phase-grid article { min-height: 320px; display: flex; flex-direction: column; padding: 25px; border: 2px solid var(--bark); border-radius: 25px 25px 25px 8px; background: var(--white); }
.phase-grid article:nth-child(2) { background: var(--page-soft); }
.phase-grid article:nth-child(3) { background: var(--sun); }
.phase-grid article:nth-child(4) { background: var(--leaf); }
.phase-grid span { font: 800 11px var(--accent); }
.phase-grid h3 { margin: auto 0 10px; font: 700 23px var(--display); }
.phase-grid p { margin: 0; color: var(--muted); font-size: 12px; }
.exam-principle { padding-block: 105px; background: var(--page-accent); }
.exam-principle .shell > span { font-size: 9px; font-weight: 900; text-transform: uppercase; }
.exam-principle blockquote { max-width: 1000px; margin: 25px 0 50px; font: 700 clamp(34px,5vw,67px)/1.15 var(--display); letter-spacing: -.04em; }
.score-path { display: grid; grid-template-columns: auto 1fr 1fr 1fr auto; align-items: center; gap: 8px; }
.score-path i, .score-path em { font-size: 9px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.score-path b { height: 8px; border: 2px solid var(--bark); border-radius: 99px; background: var(--white); }
.score-path b:nth-of-type(2) { background: var(--sun); }
.score-path b:nth-of-type(3) { background: var(--leaf); }
.team-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.team-row article { overflow: hidden; border: 2px solid var(--bark); border-radius: 27px 27px 27px 8px; background: var(--white); }
.team-row .teacher-photo { aspect-ratio: 1; }
.team-row article > span { display: block; padding: 15px; font: 700 14px var(--display); }

@keyframes detail-mark { 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes detail-chips-orbit { to { transform: rotate(360deg); } }
@keyframes detail-chip-counter { to { transform: rotate(-360deg); } }
@keyframes topic-run { to { transform: translateX(-50%); } }
@keyframes exam-version-float { 50% { transform: translateY(-9px) rotate(5deg); } }

@media (max-width: 1000px) {
  .detail-hero, .exam-hero { grid-template-columns: 1fr; }
  .detail-copy, .exam-hero__copy { max-width: 800px; }
  .detail-playground, .exam-score { width: min(650px,100%); justify-self: center; }
  .phase-grid { grid-template-columns: repeat(2,1fr); }
  .detail-phone-band .shell { grid-template-columns: 1fr; }
  .detail-phone-band a { justify-self: start; }
  .exam-updates { grid-template-columns: 1fr; }
  .exam-updates__intro { position: static; }
}

@media (max-width: 720px) {
  .detail-hero, .exam-hero { min-height: auto; padding-block: 65px 90px; }
  .detail-copy h1, .exam-hero__copy h1 { font-size: clamp(44px,13vw,61px); }
  .detail-call { min-width: 0; width: 100%; grid-template-columns: 1fr auto; }
  .detail-call > span { grid-row: auto; grid-column: 1/-1; }
  .detail-call i { grid-column: 3; }
  .detail-playground, .exam-score { min-height: 440px; }
  .detail-playground { --orbit-radius: 140px; }
  .detail-mark { width: 155px; height: 155px; font-size: 54px; }
  .detail-playground button { width: max-content; min-width: 57px; height: 57px; padding: 0 11px; font-size: 13px; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--orbit-radius)) rotate(calc(var(--angle) * -1)); }
  .detail-playground button.is-popped { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--orbit-radius)) rotate(calc(var(--angle) * -1)) scale(1.15); }
  .detail-playground > p { bottom: 10px; }
  .outcomes, .teacher-section, .exam-route, .exam-team { padding-block: 95px; }
  .exam-updates { padding-block: 90px; }
  .exam-version { width: 160px; }
  .exam-update-cards article { min-height: 0; grid-template-columns: 44px 1fr; padding: 21px; }
  .exam-update-cards article:nth-child(2), .exam-update-cards article:nth-child(3) { transform: none; }
  .exam-update-cards article > span { width: 42px; height: 42px; }
  .exam-update-cards article > i { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 9px; }
  .exam-update-cards h3 { font-size: 22px; }
  .detail-heading { grid-template-columns: 1fr; gap: 12px; }
  .outcome-grid, .phase-grid, .team-row { grid-template-columns: 1fr; }
  .outcome-grid article { min-height: 220px; }
  .teacher-card { grid-template-columns: 1fr; }
  .teacher-photo { aspect-ratio: 1; }
  .teacher-card > div:last-child { min-height: 420px; }
  .detail-phone-band { padding-block: 75px; }
}

@media (prefers-reduced-motion: reduce) {
  .detail-orbiting-chips,
  .detail-playground button span { animation: none !important; }
}