/* A compact course overview followed by visual lesson storyboards. */
.online-teacher-page .ot-content { padding: 72px 7vw; color: var(--online-ink); scroll-margin-top: 100px; }
.ot-jump { display:flex; gap:40px; padding:24px 7vw; background:#fff; border-bottom:1px solid var(--online-line); }
.ot-jump a { color:var(--online-accent-dark); font-weight:750; text-decoration:none; }
.ot-jump a:hover { text-decoration:underline; text-underline-offset:6px; }
.ot-jump a:focus-visible,.ot-case-details summary:focus-visible { outline:2px solid var(--online-accent); outline-offset:6px; }
.ot-heading { max-width:850px; margin-bottom:40px; }
.ot-heading h2 { margin:0; font-size:clamp(32px,3.8vw,54px); line-height:1.2; letter-spacing:-.045em; }
.ot-kicker { margin:0 0 16px; color:var(--online-accent-dark); font-size:16px; font-weight:700; }
.ot-tracks { background:var(--online-paper); }
.ot-track-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.ot-track-strip div { border-left:3px solid #92bcb0; padding-left:24px; }
.ot-track-strip strong { display:block; font-size:36px; margin-bottom:12px; }
.ot-track-strip span { color:#526561; font-size:16px; line-height:1.7; }
.ot-caption { color:#526561; font-size:13px; line-height:1.8; margin:24px 0 0; }
.ot-classroom { background:#fff; }
.ot-visual-lesson { padding:32px; background:#edf5f0; border-radius:22px; }
.ot-visual-lesson + .ot-visual-lesson { margin-top:36px; }
.ot-visual-lesson header { margin-bottom:28px; }
.ot-visual-lesson h3 { margin:0 0 10px; font-size:28px; }
.ot-visual-lesson header p { margin:0; color:#526561; line-height:1.7; }
.ot-storyboard { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.ot-storyboard figure { margin:0; min-width:0; }
.ot-storyboard img { display:block; width:100%; height:auto; aspect-ratio:2 / 1; object-fit:cover; border-radius:12px; background:#fff; }
.ot-storyboard figcaption { padding:18px 0 8px; }
.ot-storyboard b { display:block; font-size:26px; margin-bottom:8px; }
.ot-storyboard figcaption span { color:#526561; font-size:15px; }
.ot-takeaway { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px 22px; padding:24px 0 0; margin-top:18px; border-top:1px solid var(--online-line); }
.ot-takeaway > span { color:#526561; font-size:13px; }
.ot-takeaway strong { color:var(--online-accent-dark); font-size:clamp(18px,2vw,25px); line-height:1.5; }
.ot-case-details { margin-top:18px; }
.ot-case-details summary { cursor:pointer; color:#386461; font-size:14px; padding:8px 0; }
.ot-case-details p { max-width:800px; color:#526561; font-size:15px; line-height:1.8; }
.ot-science-lesson { background:#e8f1ef; }
.ot-learning-bridge { display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; padding:32px 7vw; background:var(--online-paper); color:var(--online-ink); scroll-margin-top:100px; }
.ot-learning-bridge > strong { font-size:22px; }
.ot-learning-bridge > div { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.ot-learning-bridge span { font-size:16px; }
.ot-learning-bridge i { color:var(--online-accent); font-style:normal; }
.online-teacher-page .online-teacher-levels,.online-teacher-page .online-teacher-trust,.online-teacher-page .online-teacher-faq { padding-top:72px; padding-bottom:72px; }
@media(max-width:900px) {
 .ot-storyboard { gap:14px; }
 .ot-visual-lesson { padding:24px; }
 .ot-storyboard figcaption span { font-size:13px; }
 .ot-track-strip { gap:20px; }
 .ot-track-strip strong { font-size:30px; }
}
@media(max-width:600px) {
 .online-teacher-page .ot-content { padding:48px 24px; }
 .ot-jump { padding:20px 24px; gap:30px; }
 .ot-heading { margin-bottom:28px; }
 .ot-track-strip { grid-template-columns:1fr; gap:20px; }
 .ot-track-strip div { display:flex; align-items:center; gap:24px; padding-left:16px; }
 .ot-track-strip strong { font-size:26px; margin:0; white-space:nowrap; }
 .ot-track-strip span { font-size:14px; }
 .ot-visual-lesson { padding:20px; border-radius:18px; }
 .ot-storyboard { grid-template-columns:1fr; gap:24px; }
 .ot-storyboard figcaption { display:flex; gap:16px; align-items:center; padding:12px 0 0; }
 .ot-storyboard b { font-size:22px; margin:0; white-space:nowrap; }
 .ot-storyboard figcaption span { font-size:14px; }
 .ot-learning-bridge { padding:28px 24px; }
 .ot-learning-bridge > div { gap:10px; }
 .ot-learning-bridge span { font-size:13px; }
 .online-teacher-page .online-teacher-levels,.online-teacher-page .online-teacher-trust,.online-teacher-page .online-teacher-faq { padding-top:48px; padding-bottom:48px; }
}

/* Progressive enhancement: topic > step > large image > learning outcome. */
.ot-content [hidden] { display:none !important; }
.ot-content button { font:inherit; cursor:pointer; }
.ot-content button:focus-visible,.ot-image-dialog button:focus-visible { outline:3px solid var(--online-accent,#247c7a); outline-offset:4px; }
.ot-track-strip { gap:12px; }
.ot-track-strip > button { text-align:left; padding:22px 24px; border:1px solid #b9d3ca; border-radius:14px; background:transparent; color:var(--online-ink); }
.ot-track-strip > button strong { font-size:28px; margin-bottom:8px; }
.ot-track-strip > button[aria-pressed="true"] { background:#155c5b; border-color:#155c5b; color:#fff; }
.ot-track-strip > button[aria-pressed="true"] span { color:#e4f4ee; }
.ot-route-panel { padding:30px 0 0; }
.ot-route-panel h3 { margin:0 0 22px; font-size:24px; }
.ot-route-panel ol { display:flex; flex-wrap:wrap; list-style:none; padding:0; margin:0; gap:14px; }
.ot-route-panel li { display:flex; align-items:center; gap:14px; font-size:20px; font-weight:700; }
.ot-route-panel li + li::before { content:'→'; color:#629087; font-weight:400; }
.ot-route-panel p { color:#526561; margin:18px 0 0; line-height:1.7; }
.ot-topic-switch { display:flex; gap:10px; margin-bottom:24px; }
.ot-topic-switch button { padding:12px 26px; border-radius:999px; border:1px solid #9fbfb6; background:#fff; color:#155c5b; font-weight:700; }
.ot-topic-switch button[aria-pressed="true"] { background:#155c5b; color:#fff; border-color:#155c5b; }
.ot-visual-lesson + .ot-visual-lesson { margin-top:0; }
.ot-step-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:24px; }
.ot-step-controls button { padding:15px 12px; color:#526561; background:transparent; border:0; border-bottom:3px solid #c0d7ce; text-align:left; font-weight:700; }
.ot-step-controls button[aria-pressed="true"] { color:#155c5b; border-bottom-color:#155c5b; background:#ffffff80; }
.ot-storyboard.is-interactive { display:block; max-width:950px; margin:auto; }
.ot-storyboard.is-interactive figure { display:grid; grid-template-columns:minmax(0,1fr) 170px; align-items:center; gap:30px; }
.ot-zoom { border:0; padding:0; background:transparent; position:relative; display:block; width:100%; border-radius:12px; }
.ot-storyboard .ot-zoom img { object-fit:contain; }
.ot-zoom-hint { display:block; text-align:right; color:#386461; padding-top:8px; font-size:12px; }
.ot-storyboard.is-interactive figcaption { padding:0; }
.ot-storyboard.is-interactive figcaption b { font-size:32px; }
.ot-storyboard.is-interactive figcaption span { display:block; line-height:1.7; }
.ot-step-paging { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:22px auto 0; max-width:950px; }
.ot-step-paging button { border:1px solid #a7c6ba; border-radius:10px; color:#155c5b; background:#fff; padding:10px 18px; }
.ot-step-paging button:disabled { opacity:.4; cursor:default; }
.ot-step-status { color:#526561; font-size:13px; margin:0; }
.ot-image-dialog { width:min(1100px,92vw); max-height:90dvh; padding:20px; border:0; border-radius:18px; background:#f2f8f5; color:#13282a; }
.ot-image-dialog::backdrop { background:rgba(12,32,29,.78); }
.ot-image-dialog > button { display:block; margin:0 0 16px auto; padding:10px 16px; border:0; border-radius:8px; background:#155c5b; color:#fff; cursor:pointer; font:inherit; }
.ot-image-dialog > img { width:100%; max-height:65dvh; object-fit:contain; display:block; }
.ot-image-dialog p { margin-bottom:0; }
.ot-jump a { padding-bottom:8px; border-bottom:3px solid transparent; }
.ot-jump a[aria-current] { border-bottom-color:#247c7a; }
@media(prefers-reduced-motion:no-preference) {
 html:has(.online-teacher-page) { scroll-behavior:smooth; }
 .ot-content button { transition:background-color .18s,color .18s,transform .18s; }
 .ot-content button:not(:disabled):hover { transform:translateY(-2px); }
 .ot-content button:not(:disabled):active { transform:translateY(0); }
}
@media(max-width:700px) {
 .ot-track-strip { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 .ot-track-strip > button { padding:16px 10px; text-align:center; }
 .ot-track-strip > button strong { font-size:23px; margin:0; }
 .ot-track-strip > button span { display:none; }
 .ot-route-panel h3 { font-size:21px; line-height:1.5; }
 .ot-route-panel li { font-size:16px; gap:8px; }
 .ot-route-panel ol { gap:8px; }
 .ot-storyboard.is-interactive figure { grid-template-columns:1fr; gap:14px; }
 .ot-storyboard.is-interactive figcaption { display:flex; align-items:center; gap:16px; }
 .ot-storyboard.is-interactive figcaption b { font-size:24px; margin:0; }
 .ot-step-controls button { font-size:15px; padding:12px 5px; }
 .ot-step-paging button { padding:10px 12px; font-size:14px; }
 .ot-image-dialog { padding:14px; }
}