/* Grade comparisons: stable table columns, soft paper backgrounds and a moving row wash. */
.level-guide {
  --level-ink:#9b3b35; --level-line:#d9cbbb; --level-wash:#f2e6dc;
  position:relative; margin-top:38px; padding:31px 30px 27px;
  background:#f8f4ed; border:1px solid #e8dfd3; border-top-color:#cbb9a6;
  color:#302c28; scroll-margin-top:150px;
}
.level-guide::before {content:'';position:absolute;top:-1px;left:30px;width:35px;height:3px;background:var(--level-ink)}
.level-guide-head {display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:26px}
.level-eyebrow {margin:0 0 9px;font-size:10px;font-weight:500;letter-spacing:.12em;line-height:1.8;color:var(--level-ink)}
#ibPathway .level-guide h4,.level-guide--sf h3 {margin:0;font:500 clamp(19px,2vw,24px)/1.6 'Noto Serif TC',serif;letter-spacing:.02em}
.level-duration {display:flex;align-items:center;gap:12px;padding-left:25px;border-left:1px solid var(--level-line);flex-shrink:0;color:var(--level-ink)}
.level-duration-number {font:400 43px/1 'Lora',Georgia,serif;letter-spacing:-.045em}
.level-duration-unit,.level-duration-label {display:block;font-size:12px;line-height:1.7}
.level-duration-label {font-size:10px;color:#786b60}
.level-table-wrap {position:relative;isolation:isolate;background:#fffdf9;border:1px solid #e3d8cb;overflow:hidden}
.level-table {position:relative;width:100%;border-collapse:collapse;table-layout:fixed;text-align:left;font-size:14px;line-height:1.9}
.level-table thead {background:#eee5d9}
.level-table thead th {padding:14px 20px;color:#78634f;font-size:12px;letter-spacing:.04em;font-weight:500;border-bottom:1px solid #d8c7b5}
.level-table tbody th,.level-table td {padding:20px;vertical-align:middle;border-bottom:1px solid #e8dfd4;font-weight:400;overflow-wrap:break-word}
.level-table tbody tr:last-child> * {border-bottom:0}
.level-table tbody th {color:#5e5146;font-size:13px}
.level-table td+td,.level-table thead th+th {border-left:1px solid #e9dfd3}
.level-table td:first-of-type {border-left:1px solid #e9dfd3}
.level-table tbody tr:nth-child(even) {background:#98704705}
.level-table .level-class-cell {font:400 21px/1.5 'Lora',Georgia,serif;letter-spacing:.015em;color:var(--level-ink)}
.level-table .level-track-cell strong {color:var(--level-ink);font-weight:500;font-family:'Lora',Georgia,serif;font-size:17px}
.level-table .level-track-cell {vertical-align:top}
.level-cell-inner {display:block}
.level-row-highlight {position:absolute;z-index:0;top:0;left:0;right:0;height:0;background:var(--level-wash);border-left:3px solid var(--level-ink);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.22,1,.36,1),height .4s cubic-bezier(.22,1,.36,1),opacity .3s}
.level-table-wrap.has-active-row .level-row-highlight {opacity:1}
.level-table-wrap.has-active-row thead {position:relative}
.level-guide.is-arriving .level-cell-inner {animation:level-row-arrive .7s cubic-bezier(.22,1,.36,1) calc(var(--row-order)*70ms) both}
@keyframes level-row-arrive {from {opacity:0;transform:translateY(9px)} to {opacity:1;transform:none}}
.level-note {margin:21px 0 0;font-size:11px;line-height:1.95;color:#807265;max-width:880px}
.sf-level-section {max-width:1180px;margin:auto;padding:0 37px 65px;scroll-margin-top:150px}
.level-guide--sf {--level-ink:#586951;--level-line:#cdd3c4;--level-wash:#eaf0e2;margin:0;background:#f3f5ef;border-color:#dde1d4;border-top-color:#b8c3aa}
.level-guide--sf .level-guide-head {margin-bottom:15px}
.level-guide--sf .level-table-wrap {border-color:#d5ddc9;background:#fdfefb}
.level-guide--sf .level-table thead {background:#e7ebdf}
.level-guide--sf .level-table thead th {color:#5c6b50;border-color:#c9d2bc}
.level-guide--sf .level-table td,.level-guide--sf .level-table tbody th,.level-guide--sf .level-table th+th {border-color:#dfe4d6}
.level-intro {max-width:820px;font-size:13px;line-height:1.95;color:#6a7263;margin:0 0 24px}
.level-enquiry {display:inline-flex;align-items:center;justify-content:center;gap:22px;flex-shrink:0;padding:12px 17px;border:1px solid #a8b29d;color:#43523d;font-size:12px;text-decoration:none;background:#fcfdf8;transition:background .3s,color .3s}
.level-enquiry:hover {background:#586951;color:white}
.level-enquiry:focus-visible {outline:2px solid #586951;outline-offset:4px}
@media(max-width:1000px) {
  .level-guide {padding:28px 22px 24px}
  .level-table thead th,.level-table tbody th,.level-table td {padding:17px 15px}
  .level-school-year,.level-school-grade {display:block}
  .level-school-slash {display:none}
  .level-school-grade {font-size:11px;color:#847468}
}
@media(max-width:760px) {
  .level-guide {padding:26px 18px;margin-top:30px}
  .level-guide-head {gap:18px}
  .level-duration {padding-left:16px;gap:8px}
  .level-duration-number {font-size:38px}
  .level-table thead th,.level-table tbody th,.level-table td {padding:15px 12px}
  .level-table {font-size:13px;line-height:1.85}
  .level-table thead th {font-size:11px}
  .level-table tbody th {font-size:12px}
  .level-table .level-class-cell {font-size:19px}
  .sf-level-section {padding:0 29px 48px}
  .level-guide--sf {margin-top:0}
}
@media(max-width:560px) {
  .level-guide {padding:23px 12px 20px;margin-inline:-5px}
  .level-guide::before {left:13px}
  .level-guide-head {align-items:flex-start;gap:12px;margin-bottom:21px;padding-inline:3px}
  #ibPathway .level-guide h4 {font-size:18px;max-width:12em}
  .level-eyebrow {font-size:9px;letter-spacing:.09em;margin-bottom:9px}
  .level-duration {padding-left:12px;display:block;min-width:69px}
  .level-duration-number {font-size:35px;display:block;margin-bottom:3px}
  .level-duration-unit {font-size:10px}
  .level-duration-label {font-size:9px}
  .level-table thead th {font-size:11px;line-height:1.65;padding:11px 8px;letter-spacing:0}
  .level-table tbody th,.level-table td {padding:15px 8px}
  .level-table tbody th {font-size:11px}
  .level-school-grade {font-size:10px}
  .level-table .level-class-cell {font-size:18px}
  .level-table .level-track-cell strong {font-size:15px}
  .level-table {font-size:13px;line-height:1.85}
  .level-note {font-size:11px;margin-top:18px;padding-inline:3px}
  .sf-level-section {padding:0 20px 38px}
  .level-guide--sf .level-guide-head {flex-wrap:wrap;gap:13px}
  .level-enquiry {padding:9px 12px;font-size:11px}
  .level-intro {font-size:13px;padding-inline:3px}
}
@media(prefers-reduced-motion:reduce) {
  .level-guide *, .level-guide *::before {animation:none!important;transition:none!important}
}
@media print {.level-guide {break-inside:avoid}.level-row-highlight {display:none}.level-guide * {animation:none!important}}
