:root {
  color-scheme: light;
  --navy: #11253f;
  --teal: #23767d;
  --teal-deep: #1b6369;
  --teal-pale: #e6f1ef;
  --grey: #edf1f5;
  --ink-soft: #4e6173;
  --line: #d7e1e5;
  --paper: #fbfaf7;
  --white: #fff;
  font-family: "Segoe UI", "Aptos", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 0; color: var(--navy); background: var(--paper); line-height: 1.55; font-size: 1rem; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #16828b; outline-offset: 3px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.08; }
h1 { font-size: clamp(2.7rem, 5.6vw, 5rem); font-weight: 760; letter-spacing: -.061em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.55rem); font-weight: 740; letter-spacing: -.038em; }
h3 { font-size: 1.22rem; font-weight: 730; letter-spacing: -.015em; }
.shell { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.skip { position: absolute; inset: -100px auto auto .8rem; background: white; z-index: 5; padding: .6rem 1rem; }
.skip:focus { top: .8rem; }
.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 174px; height: auto; }
.header-inner nav, .footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(.7rem, 3vw, 2.5rem); }
.header-inner nav a, .footer nav a { text-decoration: none; font-weight: 640; }
.header-inner nav a { padding: .65rem .2rem; }
.header-inner nav a[aria-current="page"], .header-inner nav a:hover, .footer nav a:hover { color: var(--teal-deep); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border-radius: .52rem; border: 1px solid transparent; padding: .7rem .95rem; min-height: 45px; text-align: center; font-weight: 680; text-decoration: none; line-height: 1.2; }
.button svg, .text-link svg { flex: 0 0 auto; width: 20px; height: 20px; }
.primary { background: var(--teal); color: white; }
.primary:hover { background: var(--teal-deep); }
.secondary { border-color: #9cbab8; color: var(--teal-deep); background: white; }
.secondary:hover { background: var(--teal-pale); }
.portal-link { background: var(--navy); color: white; white-space: nowrap; }
.portal-link:hover { background: #203a58; }
.portal-link svg { width: 16px; height: 16px; }
.quiet-link, .quiet-button, .text-link { font-weight: 680; color: var(--teal-deep); text-decoration: underline; text-underline-offset: .25em; }
.text-link { display: inline-flex; align-items: center; gap: .5rem; }
.quiet-button { background: transparent; border: 0; padding: .45rem .25rem; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1.1rem; }
.eyebrow { display: flex; align-items: center; gap: .48rem; font-weight: 760; font-size: .73rem; letter-spacing: .12em; color: var(--teal-deep); }
.eyebrow span { display: block; width: 18px; height: 2px; background: currentColor; }
.home-hero { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); align-items: center; gap: clamp(1.5rem, 6vw, 5.7rem); padding-block: clamp(2.5rem, 6vw, 5.25rem); }
.hero-copy h1 { margin: .8rem 0 1.2rem; }
.hero-copy em { display: block; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.067em; color: var(--teal-deep); }
.lead { font-size: clamp(1.04rem, 1.8vw, 1.22rem); color: var(--ink-soft); max-width: 52ch; }
.hero-copy .actions { margin-top: 1.5rem; }
.hero-scene { position: relative; border: 1px solid var(--line); background: white; border-radius: 1rem; overflow: hidden; box-shadow: 0 16px 38px #172f4617; }
.hero-scene img { width: 100%; height: auto; aspect-ratio: 1.46; object-fit: cover; }
.dialogue-bubble { position: absolute; display: flex; gap: .4rem; align-items: center; top: .9rem; right: .9rem; padding: .44rem .65rem; color: var(--navy); background: #ffffffed; border-radius: .6rem; box-shadow: 0 3px 14px #11253f19; font-size: .83rem; font-weight: 675; }
.dialogue-bubble svg { width: 16px; height: 16px; color: var(--teal); }
.hero-scene figcaption { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; line-height: 1.2; }
.hero-scene figcaption small { display: block; color: var(--ink-soft); margin-top: .25rem; }
.scene-number { display: grid; place-items: center; border-radius: 50%; width: 38px; height: 38px; background: var(--teal-pale); color: var(--teal-deep); font-size: .82rem; font-weight: 750; }
.course-strip { background: var(--navy); color: white; border-bottom: 4px solid var(--teal); }
.course-strip-inner { padding-block: clamp(1.35rem, 3vw, 2.3rem); display: flex; align-items: center; justify-content: space-between; gap: 1.3rem; }
.course-strip .eyebrow, .portal-story .eyebrow { color: #99dedb; }
.course-strip h2 { margin: .35rem 0 .55rem; }
.course-strip p:not(.eyebrow) { color: #dae5ee; }
.course-strip dl { display: flex; margin: 0; gap: .9rem 1.5rem; }
.course-strip dl div { border-left: 1px solid #698097; padding-left: clamp(.8rem, 2vw, 1.4rem); }
.course-strip dt { font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 750; line-height: 1; letter-spacing: -.045em; }
.course-strip dd { margin: .25rem 0 0; color: #dae5ee; white-space: nowrap; font-size: .84rem; }
.learning { padding-block: clamp(2.2rem, 5vw, 4.3rem); }
.learning h2, .syllabus h2 { margin: .5rem 0 .8rem; }
.stages { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; padding: 0; margin: 1.5rem 0 0; border-block: 1px solid var(--line); }
.stages li { padding: 1.25rem 1.05rem; position: relative; }
.stages li:first-child { padding-left: 0; }
.stages li + li { border-left: 1px solid var(--line); }
.stage-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: .7rem; color: var(--teal-deep); background: var(--teal-pale); }
.stage-number { float: right; color: var(--ink-soft); font-weight: 750; font-size: .74rem; }
.stages h3 { margin: .7rem 0 .4rem; }
.stages p, .footer p, .syllabus > p:not(.eyebrow), .panel p:not(.eyebrow) { color: var(--ink-soft); }
.end-note { display: flex; align-items: center; gap: .45rem 1rem; flex-wrap: wrap; margin-top: 1.25rem; }
.footer { background: var(--white); border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; padding-block: 1.2rem; }
.footer .brand img { width: 138px; }
.footer p { font-size: .89rem; }
.footer nav { gap: .55rem 1.35rem; font-size: .9rem; }
.page-band { background: var(--grey); border-bottom: 1px solid var(--line); }
.page-hero { padding-block: clamp(2rem, 5vw, 4.1rem); }
.page-hero h1 { margin: .5rem 0 .85rem; }
.course-layout, .contact-layout { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(0,1fr); gap: clamp(1rem, 4vw, 2.75rem); align-items: start; padding-block: clamp(1.5rem, 4vw, 3.25rem); }
.panel { min-width: 0; padding: clamp(1rem, 3vw, 1.65rem); border-radius: .9rem; border: 1px solid var(--line); background: white; }
.panel h2 { margin: .5rem 0 .65rem; }
.course-aside { display: grid; gap: 1rem; }
.how-panel ol { padding-left: 1.3rem; margin: .75rem 0 1.15rem; }
.how-panel li + li { margin-top: .55rem; }
.future { background: var(--teal-pale); }
.future h2, .help-panel h2, .form-panel h2 { font-size: clamp(1.45rem, 2.5vw, 1.9rem); }
.curriculum { margin-top: 1.1rem; background: white; border: 1px solid var(--line); border-radius: .8rem; padding-inline: .9rem; }
.curriculum details + details, .help-panel details + details { border-top: 1px solid var(--line); }
.curriculum summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0,1fr) auto 1.05rem; align-items: center; gap: .55rem .8rem; min-height: 58px; padding-block: .45rem; }
.curriculum summary::-webkit-details-marker { display: none; }
.curriculum summary::after { content: "+"; color: var(--teal-deep); font-size: 1.25rem; text-align: center; }
.curriculum details[open] summary::after { content: "−"; }
.level-tag { background: var(--teal-pale); color: var(--teal-deep); border-radius: 99px; padding: .25rem .48rem; font-size: .69rem; font-weight: 750; letter-spacing: .035em; white-space: nowrap; }
.unit-range { color: var(--ink-soft); font-size: .84rem; }
.curriculum ol { list-style: none; padding: 0; margin: 0 0 .7rem; }
.curriculum li { display: flex; gap: .8rem; align-items: baseline; padding: .45rem .5rem; background: #f6f8f9; }
.curriculum li + li { border-top: 1px solid var(--line); }
.unit-number { color: var(--teal-deep); font-weight: 750; font-size: .83rem; }
.help-panel details { padding-block: .6rem; }
.help-panel details summary { cursor: pointer; font-weight: 680; }
.help-panel details p { margin-top: .4rem; }
.help-panel .text-link { margin-top: .65rem; }
form { display: grid; gap: .75rem; margin-block: 1rem .7rem; }
form label { display: block; font-weight: 670; }
.field-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
input, select, textarea { width: 100%; min-height: 44px; padding: .5rem .65rem; border: 1px solid #a9bac8; border-radius: .46rem; background: white; color: var(--navy); font-weight: 400; }
textarea { resize: vertical; }
label :is(input,select,textarea) { display: block; margin-top: .28rem; }
form > .button { justify-self: start; }
.preview-box { margin-top: .95rem; padding: .9rem; border-radius: .65rem; background: var(--teal-pale); }
.preview-box textarea { margin-block: .55rem; }
.field-note { font-size: .91rem; }
.portal-layout { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(1.1rem, 5vw, 4.2rem); align-items: start; padding-block: clamp(1.5rem, 5vw, 4rem); }
.portal-story { border-radius: .9rem; background: var(--navy); color: white; padding: clamp(1.2rem, 3vw, 2.15rem); }
.portal-story h1 { font-size: clamp(2.4rem, 4.5vw, 3.85rem); margin: .6rem 0 .8rem; }
.portal-story p:not(.eyebrow) { color: #e1e9f0; }
.portal-story figure { margin-top: 1.15rem; }
.portal-story figure img { border-radius: .6rem; width: 100%; aspect-ratio: 2/1; object-fit: cover; object-position: center 35%; }
.portal-story figcaption { color: #d2dfe9; font-size: .78rem; margin-top: .3rem; }
.portal-panel { padding: clamp(1rem, 4vw, 2.25rem); }
.password-field { position: relative; margin-top: -.48rem; }
.password-field input { padding-right: 4.3rem; }
.password-field button { position: absolute; inset: 3px 6px 3px auto; padding-inline: .4rem; }
.full { width: 100%; }
.panel .error { color: #8d2422; font-weight: 650; }
.form-message { border-left: 3px solid var(--teal); background: var(--teal-pale); padding: .55rem .65rem; }
.sign-out { margin-top: .6rem; }
@media (max-width: 800px) {
  .shell { width: calc(100% - 40px); }
  .home-hero { gap: 1.35rem; }
  .course-strip-inner { flex-wrap: wrap; }
  .course-layout, .contact-layout, .portal-layout { grid-template-columns: 1fr; }
  .course-aside { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .portal-story figure { display: none; }
}
@media (max-width: 590px) {
  .shell { width: calc(100% - 32px); }
  .header-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 .6rem; padding-block: .35rem .15rem; }
  .header-inner nav { grid-row: 2; grid-column: 1 / -1; gap: 1.2rem; }
  .portal-link { grid-row: 1; grid-column: 2; }
  .brand img { width: 154px; }
  .home-hero { grid-template-columns: 1fr; padding-block: 1.65rem; }
  .hero-copy h1 { margin-block: .6rem .8rem; }
  .hero-copy .actions { margin-top: 1rem; }
  .hero-scene img { aspect-ratio: 1.6; }
  .dialogue-bubble { top: .45rem; right: .4rem; font-size: .73rem; }
  .stages, .course-aside, .field-pair { grid-template-columns: 1fr; }
  .stages li, .stages li:first-child { padding: .8rem 0; }
  .stages li + li { border-left: 0; border-top: 1px solid var(--line); }
  .curriculum summary { grid-template-columns: auto minmax(0,1fr) 1rem; }
  .unit-range { display: none; }
}