/* Keep the approved text scale; give labels and paper layers their own space. */
.trainer-collage { padding:12px 16px 55px; max-width:550px; width:100%; justify-self:center; }
.trainer-collage .collage-label { position:relative; display:table; margin:0 0 24px auto; top:auto; right:auto; transform:rotate(4deg); }
.trainer-collage .answer-sheet { isolation:isolate; background:#fffaf5; padding:32px; transform:rotate(-2deg); box-shadow:0 7px 0 #c59472,6px 18px 24px #3f271930; }
.trainer-collage .answer-sheet:before { inset:-10px 12px 10px -12px; background:#e8bd9f; transform:rotate(4deg); z-index:-2; }
.trainer-collage .answer-sheet:after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:#fffaf5; }
.trainer-collage .sheet-subject { display:block; padding-top:2px; line-height:1.6; }
.trainer-collage .answer-sheet>p:not(.answer-explanation) { margin:22px 0; line-height:1.5; }
.trainer-collage .answer-sheet>p strong { text-decoration:none; font-weight:600; }
.trainer-collage .answer-explanation { padding:17px 18px; margin:0; border-left:3px solid #be8e6c; background:#f3e7dc; border-radius:0 8px 8px 0; }
.trainer-collage .oval-sticker { right:0; bottom:0; font-size:20px; padding:18px 23px; }

.progress-preview-chart>div:first-child { align-items:baseline; flex-wrap:wrap; row-gap:4px; }
.trainer-repeat .preview-columns { height:146px; padding-top:20px; align-items:stretch; }
.preview-columns>div { display:grid; grid-template-rows:18px 80px 16px; align-items:end; justify-items:center; gap:6px; height:auto; }
.preview-columns i { align-self:end; height:var(--bar); }
.preview-columns span { line-height:18px; }
.preview-columns small { line-height:16px; }
.progress-next-note { display:flex; align-items:center; gap:18px; max-width:420px; padding:20px 22px; margin:28px 0 30px; background:#efd7c0; color:#422c1c; border-radius:4px 16px 16px 4px; transform:rotate(-1.5deg); box-shadow:0 5px 0 #b58b6b,0 12px 24px #0002; }
.progress-note-check { display:block; flex:none; width:72px; height:72px; background:url('assets/study-objects-3d.png') center / 300% 100% no-repeat; }
.progress-next-note > div { min-width:0; }
.progress-next-note small { display:block; font-size:9px; letter-spacing:.1em; color:#876348; }
.progress-next-note strong { display:block; margin-top:5px; font-size:17px; }
.progress-next-note p { margin:7px 0 0; font-size:12px; line-height:1.6; color:#6a4b36; }

.trainer-page .trainer-gift-ticket > .gift-access-note { display:flex; align-items:flex-start; grid-column:1 / -1; gap:11px; margin:0 0 22px; padding:16px; border-radius:12px; background:#634631; color:#fff4e9; line-height:1.5; }
.gift-access-note > .icon { flex:none; width:20px; height:20px; margin-top:1px; }
.gift-access-note > span { min-width:0; }
.gift-access-note strong { display:block; font-size:14px; }
.gift-access-note small { display:block; margin-top:5px; font-size:12px; color:#f0d7c1; }

.practice-ribbon { position:relative; overflow:hidden; background:#dab597; color:#3b2618; border-block:1px solid #b78d6d; box-shadow:inset 0 2px #fff5,0 4px 0 #bd977b; }
.ribbon-window { overflow:hidden; margin-right:55px; }
.ribbon-track { display:flex; width:max-content; animation:practice-ribbon-travel 38s linear infinite; }
.ribbon-track>div { display:flex; flex:none; align-items:center; gap:28px; padding:14px 28px 14px 0; white-space:nowrap; }
.ribbon-track span { font:italic 700 23px/1.2 'Roboto Condensed',sans-serif; text-transform:uppercase; letter-spacing:.03em; }
.ribbon-track b { font-size:19px; font-weight:400; opacity:.65; }
.ribbon-accessible-text,.ribbon-pause { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ribbon-pause-control { position:absolute; z-index:1; right:6px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:40px; border:1px solid #9d735560; border-radius:50%; background:#e9cbb2; color:#49301f; font-size:15px; cursor:pointer; }
.ribbon-play-icon { display:none; }
.ribbon-pause:checked~.ribbon-window .ribbon-track,.practice-ribbon:hover .ribbon-track,.practice-ribbon:focus-within .ribbon-track { animation-play-state:paused; }
.ribbon-pause:checked+.ribbon-pause-control .ribbon-pause-icon { display:none; }
.ribbon-pause:checked+.ribbon-pause-control .ribbon-play-icon { display:inline; }
.ribbon-pause:focus-visible+.ribbon-pause-control { outline:3px solid #3b2618; outline-offset:2px; }
@keyframes practice-ribbon-travel { to { transform:translateX(-50%); } }

.teacher-credentials { display:flex; flex-wrap:wrap; gap:22px; list-style:none; padding:0; margin:23px 0; }
.teacher-credentials li { padding-left:14px; border-left:2px solid #bd9271; }
.teacher-credentials strong { display:block; font-size:18px; color:#4a3323; }
.teacher-credentials span { display:block; margin-top:5px; font-size:11px; color:#856b58; }
.teacher-results { display:flex; flex-wrap:wrap; gap:24px; margin:24px 0; padding-block:19px; border-block:1px solid #dfcbbb; font-size:13px; color:#725846; }
.teacher-results strong { display:inline-block; margin-right:6px; font-size:30px; color:#432f21; }
.teacher-intro-copy h2 { font-size:clamp(38px,4vw,54px); }
@media(max-width:620px) {
  .trainer-collage { padding:8px 10px 58px; }
  .trainer-collage .collage-label { margin-bottom:22px; max-width:180px; font-size:19px; }
  .trainer-collage .answer-sheet { padding:26px 22px; }
  .trainer-collage .answer-sheet>p:not(.answer-explanation) { font-size:23px; }
  .trainer-collage .oval-sticker { font-size:18px; padding:15px 20px; }
  .progress-next-note { padding:18px; gap:13px; margin:24px 4px 30px; }
  .progress-next-note strong { font-size:16px; }
  .progress-note-check { width:58px; height:58px; }
  .ribbon-track span { font-size:20px; }
  .ribbon-track>div { gap:22px; padding-right:22px; }
  .teacher-credentials { gap:19px; }
  .teacher-credentials strong { font-size:17px; }
  .teacher-results { gap:18px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .ribbon-track { animation:none; }
  .ribbon-pause,.ribbon-pause-control { display:none; }
  .ribbon-window { margin-right:0; }
}