/* Motion and interactive examples scoped to the homepage. */
.course-syllabus { transition: background-color .28s ease, box-shadow .28s ease; }
.course-syllabus.is-active { background: #f2f6fc; box-shadow: 18px 0 0 #f2f6fc, -18px 0 0 #f2f6fc; }
.syllabus-outcome { margin: 14px 0 0; color: #17375e; font-size: 14px; line-height: 1.6; }
.syllabus-outcome strong { color: #155fe8; }
.course-journey { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; list-style: none; margin: 0 0 24px; padding: 20px 0; border-bottom: 1px solid #dce3ec; }
.course-journey li { display: grid; grid-template-columns: 24px 1fr; align-content: start; gap: 5px 8px; }
.course-journey li>span { grid-row: span 2; color: #155fe8; font-size: 12px; font-weight: 700; padding-top: 2px; }
.course-journey strong { color: #0b2546; font-size: 14px; }
.course-journey small { color: #52657c; font-size: 12px; line-height: 1.5; }
.map-art { position: relative; transform-origin: 50% 65%; }
.map-art>img { display: block; width: 100%; height: auto; }
.map-route-overlay { position: absolute; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 1613 / 975; pointer-events: none; }
.map-route-path { stroke: white; stroke-width: 78; stroke-linecap: round; }
.map-route-image { opacity: 0; }
.map-art.route-ready .map-route-image { opacity: 1; }
.home-map-stop { pointer-events: auto; width: 24%; max-width: none; transform: translateX(-50%); text-shadow: none; }
.home-map-stop--consult { left: 20.6%; top: 5%; }
.home-map-stop--level { left: 39.3%; top: 32%; }
.home-map-stop--lesson { left: 60.5%; top: 18%; }
.home-map-stop--feedback { left: 85.2%; top: 38%; }
.home-map-stop button { position: relative; font: inherit; text-align: left; color: #0b2546; background: #fffffff2; border: 1px solid #d7e0ec; padding: 10px 12px; margin: 0; border-radius: 10px; cursor: pointer; display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 5px 8px; width: 100%; min-height: 64px; text-shadow: none; transition: background .3s, border-color .3s, color .3s, transform .3s; }
.home-map-stop button::after { position: absolute; top: 100%; left: 50%; height: 20px; border-left: 1px solid #8b9eb8; content: ''; }
.home-map-stop button>strong { font-size: 13px; line-height: 1.35; }
.home-map-stop button>span:not(.map-stop-number) { display: none; grid-column: 2; color: #52657c; font-size: 11px; line-height: 1.4; }
.home-map-stop .map-stop-number { grid-row: span 2; color: #52657c; font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.home-map-stop.is-visited button { border-color: #9ebbf0; }
.home-map-stop.is-visited .map-stop-number { color: #155fe8; }
.home-map-stop button:hover,.home-map-stop button[aria-pressed=true] { background: #edf4ff; border-color: #155fe8; color: #0b4fc8; transform: translateY(-3px); }
.home-map-stop.is-visited strong { color: #0b4fc8; }
.home-map-stop button:focus-visible { outline: 3px solid #155fe8; outline-offset: 5px; }
.map-explanation { display: grid; gap: 6px; min-height: 108px; padding: 20px 3px 0; border-top: 1px solid #d7e0ec; color: #52657c; font-size: 14px; line-height: 1.6; }
.map-explanation strong { color: #0b2546; font-size: 16px; }
.exam-experience { min-width: 0; }
@media(max-width:720px) { .course-syllabus.is-active { box-shadow: 8px 0 0 #f2f6fc,-8px 0 0 #f2f6fc; } .course-journey { gap: 10px; } .course-journey li { grid-template-columns: 1fr; } .course-journey li>span { grid-row: auto; } }
@media(max-width:1100px) { .home-map-stops { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 8px 0 0; } .home-map-stop { position: static; width: auto; max-width: none; padding: 0; border: 0; background: transparent; transform: none; } .home-map-stop button { padding: 14px; min-height: 88px; } .home-map-stop button::after { display: none; } .home-map-stop button>strong { font-size: 14px; } .home-map-stop button>span:not(.map-stop-number) { display: block; font-size: 12px; } }
@media(max-width:560px) {
  .home-route-map .home-map-stops { display: none; }
  .home-route-map .map-explanation {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
@media(prefers-reduced-motion:reduce) { .course-syllabus,.home-map-stop button { transition: none; } }