.dashboard-reference .dash-hero-reference {
  min-height:420px;
  aspect-ratio:3/1;
  background:#fff;
}
.dashboard-reference .dash-hero-reference::after {display:none}
.dash-hero-reference>.dash-hero-background {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.dash-hero-reference .dash-hero-copy {
  width:43%;
  padding:22px 16px 28px 32px;
}
.dash-hero-reference .dash-hero-eyebrow {
  display:flex;
  align-items:center;
  gap:16px;
  min-height:34px;
  font-size:11px;
}
.dash-hero-eyebrow>b {padding-left:14px;border-left:1px solid #9ab6d2;color:#44658c}
.dash-hero-reference .dash-hero-home {
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:none;
  min-height:34px;
  padding:8px 15px;
  border-radius:999px;
  background:#087ee9;
  color:#fff;
  text-decoration:none;
}
.dash-hero-reference .dash-hero-home .icon {width:18px;height:18px}
.dash-hero-reference .dash-hero-home>span {padding:0;background:transparent}
.dash-hero-reference .dash-hero-copy h1 {
  margin:18px 0 10px;
  color:#103764;
  font-size:60px;
  font-weight:900;
  line-height:1.02;
  letter-spacing:0;
}
.dash-hero-copy h1>span,.dash-hero-copy h1>em {display:block}
.dash-hero-reference .dash-hero-copy h1>em {color:#087fe9;font-style:normal}
.dash-hero-reference .dash-hero-copy>p {color:#4e6788;font-size:18px;line-height:1.4}
/* The shared lesson typography must not override this reference heading. */
html body[data-screen="courses"] #app #main .dash-hero-reference .dash-hero-copy :is(h1,h1>span,h1>em) {font-weight:900!important;line-height:1.02!important}
html body[data-screen="courses"] #app #main .dash-hero-reference .dash-hero-note :is(span,strong) {font-family:'Segoe Print','Bradley Hand',cursive!important;font-weight:700!important;line-height:inherit!important}
.dash-hero-reference .dash-hero-meta {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:0;
  width:100%;
  margin:18px 0 0;
  padding:12px;
  border:1px solid #edf4fb;
  border-radius:8px;
  background:#ffffffee;
  color:#0b428b;
}
.dash-hero-meta>div {display:flex;align-items:center;gap:9px;min-width:0}
.dash-hero-meta>div+div {padding-left:12px;border-left:1px solid #bed6f1}
.dash-hero-meta .dash-meta-icon {display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#e4f2ff}
.dash-hero-reference .dash-hero-meta .icon {width:25px;height:25px;color:#0881ee}
.dash-hero-meta b {display:block;font-size:14px;line-height:1.25}
.dash-hero-meta small {display:block;margin-top:3px;color:#65748a;font-size:11px;line-height:1.3}
.dash-hero-reference .dash-account {
  top:22px;
  right:24px;
  gap:8px;
  width:max-content;
  min-width:0;
  max-width:28%;
  min-height:48px;
  padding:7px 12px;
  border-color:#edf3fa;
  border-radius:12px;
  background:#fffffff5;
}
.dash-hero-reference .dash-account span {width:34px;height:34px;flex:none;font-size:18px;background:#0869c4}
.dash-hero-reference .dash-account b {display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.dash-hero-reference .dash-account>.icon {display:block;flex:none;width:16px;height:16px}
.dash-hero-reference .dash-hero-note {
  display:flex;
  flex-direction:column;
  justify-content:center;
  top:20%;
  left:62.5%;
  right:auto;
  width:18%;
  height:27%;
  font-family:'Segoe Print','Bradley Hand',cursive;
  font-size:23px;
  font-weight:700;
  line-height:1.1;
  text-align:center;
  color:#073f7d;
  transform:rotate(-6deg);
}
.dash-hero-note strong {text-decoration:underline;text-decoration-color:#ffb538;text-decoration-thickness:4px;text-underline-offset:7px}
.dash-hero-reference .dash-next {
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 18px;
  align-items:center;
  gap:8px;
  top:52%;
  right:20px;
  width:21%;
  min-width:0;
  max-width:310px;
  margin:0;
  padding:16px 12px;
  border:1px solid #f1f5f9;
  border-radius:12px;
  background:#fffffff5;
  color:#144c8d;
  font-size:14px;
  line-height:1.3;
  text-decoration:none;
  box-shadow:0 6px 18px #15426a12;
}
.dash-next .dash-goal-icon {display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff}
.dash-goal-icon img {display:block;width:30px;height:30px}
.dash-next .dash-next-arrow {display:grid;place-items:center;align-self:end;width:18px;height:18px;border-radius:50%;background:#ffa91f;color:#fff}
.dash-next-arrow .icon {width:13px;height:13px}
.dash-hero-reference .dash-next:hover {background:#fff8eb;border-color:#ffd17e}
.dash-hero-reference .dash-next:focus-visible,
.dash-hero-reference .dash-account:focus-visible,
.dash-hero-reference .dash-hero-home:focus-visible {outline:3px solid #d78a0a;outline-offset:3px}
@media(min-width:1600px) {
  .dash-hero-reference .dash-hero-copy {padding:32px 20px 40px 42px}
  .dash-hero-reference .dash-hero-copy h1 {font-size:72px}
  .dash-hero-reference .dash-hero-copy>p {font-size:19px}
  .dash-hero-reference .dash-hero-eyebrow {font-size:13px}
  .dash-hero-meta b {font-size:17px}
  .dash-hero-meta small {font-size:14px}
  .dash-hero-reference .dash-hero-meta {padding:16px;gap:12px}
  .dash-hero-reference .dash-hero-note {font-size:30px}
  .dash-hero-reference .dash-next {font-size:18px;padding:22px 16px}
  .dash-hero-reference .dash-account {min-height:54px}
  .dash-hero-reference .dash-account b {font-size:15px}
}
@media(min-width:761px) and (max-width:1180px) {
  .dashboard-reference .dash-hero-reference {min-height:340px;aspect-ratio:auto}
  .dash-hero-reference>.dash-hero-background {object-position:center}
  .dash-hero-reference .dash-hero-copy {width:50%;padding:20px 16px 24px 24px;background:#fffffff0}
  .dash-hero-reference .dash-hero-copy h1 {font-size:38px}
  .dash-hero-reference .dash-hero-copy>p {font-size:15px}
  .dash-hero-reference .dash-hero-eyebrow {gap:8px;font-size:10px}
  .dash-hero-eyebrow>b {padding-left:8px}
  .dash-hero-reference .dash-hero-home {padding:8px 10px}
  .dash-hero-reference .dash-hero-meta {width:100%;padding:10px}
  .dash-hero-meta .dash-meta-icon {width:28px;height:28px}
  .dash-hero-meta>div {gap:6px}
  .dash-hero-meta>div+div {padding-left:8px}
  .dash-hero-meta b {font-size:12px}
  .dash-hero-meta small {font-size:10px}
  .dash-hero-reference .dash-hero-note {display:flex;top:24%;left:72%;width:24%;height:24%;font-size:18px}
  .dash-hero-reference .dash-next {top:auto;bottom:24px;width:34%;right:16px}
}
@media(max-width:760px) {
  body[data-screen="courses"] .dashboard-reference .dash-sidebar {grid-template-columns:64px minmax(0,1fr);gap:4px 12px;padding:8px 12px}
  body[data-screen="courses"] .dash-sidebar .dash-logo {grid-column:1;grid-row:1;width:64px;height:52px;margin:0}
  body[data-screen="courses"] .dash-sidebar .dash-exit {position:static;grid-column:2;grid-row:1;justify-self:end;align-self:center}
  body[data-screen="courses"] .dash-sidebar nav {grid-column:1/-1;grid-row:2}
  body[data-screen="courses"] .dash-sidebar nav .dash-progress-link {min-height:76px;grid-template-columns:34px minmax(0,1fr) 34px;grid-template-rows:auto 22px;gap:4px 6px;margin:4px 0;padding:8px 10px}
  body[data-screen="courses"] .dash-sidebar nav .dash-progress-link>.dash-portal-icon {width:34px;height:44px}
  body[data-screen="courses"] .dash-sidebar nav .dash-progress-link>.dash-portal-copy {grid-column:2;grid-row:1;gap:2px}
  body[data-screen="courses"] .dash-sidebar nav .dash-progress-link>.dash-portal-percent {grid-column:3;grid-row:1;min-width:30px;padding:4px;font-size:12px}
  body[data-screen="courses"] .dash-sidebar nav .dash-progress-link>.dash-portal-track {grid-column:2;grid-row:2}
  body[data-screen="courses"] .dash-sidebar nav .dash-progress-link>.dash-portal-arrow {grid-column:3;grid-row:2;justify-self:end;width:22px;height:22px}
  body[data-screen="courses"] .dash-sidebar-journey {display:none}
  .dashboard-reference .dash-hero-reference {display:grid;min-height:0;aspect-ratio:auto;padding:0 16px 20px}
  .dash-hero-reference>.dash-hero-background {position:relative;grid-row:1;width:calc(100% + 32px);height:auto;min-height:140px;margin:0 -16px;aspect-ratio:3/1;object-fit:cover;object-position:center}
  .dash-hero-reference .dash-hero-copy {grid-row:2;width:100%;padding:16px 0 0}
  .dash-hero-reference .dash-hero-copy h1 {margin:16px 0 10px;font-size:32px}
  .dash-hero-reference .dash-hero-eyebrow {gap:8px;font-size:10px}
  .dash-hero-reference .dash-hero-home {min-height:32px;padding:7px 10px}
  .dash-hero-eyebrow>b {padding-left:8px}
  .dash-hero-reference .dash-hero-copy>p {font-size:16px}
  .dash-hero-reference .dash-hero-meta {width:100%;margin-top:16px;padding:10px}
  .dash-hero-meta .dash-meta-icon {width:30px;height:30px}
  .dash-hero-reference .dash-hero-meta .icon {width:22px;height:22px}
  .dash-hero-meta>div {gap:6px}
  .dash-hero-meta>div+div {padding-left:8px}
  .dash-hero-meta b {font-size:12px}
  .dash-hero-meta small {font-size:10px}
  .dash-hero-reference .dash-account {top:10px;left:12px;right:auto;width:max-content;max-width:52%;min-height:38px;padding:5px 8px;border-radius:8px}
  .dash-hero-reference .dash-account span {width:28px;height:28px;font-size:15px}
  .dash-hero-reference .dash-account b {font-size:11px}
  .dash-hero-reference .dash-account>.icon {width:14px;height:14px}
  .dash-hero-reference .dash-hero-note {position:relative;grid-row:3;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:0 5px;top:auto;left:auto;right:auto;width:100%;height:auto;margin-top:16px;font-size:18px;line-height:1.5;text-align:left;transform:none}
  .dash-hero-reference .dash-next {position:relative;grid-row:4;top:auto;right:auto;width:100%;max-width:none;margin-top:16px;padding:12px;font-size:14px}
  .dash-next>span:nth-child(2) br {display:none}
}
@media(max-width:380px) {
  .dash-hero-reference .dash-hero-meta {padding:8px}
  .dash-hero-meta .dash-meta-icon {width:24px;height:24px}
  .dash-hero-meta b {font-size:11px}
  .dash-hero-meta small {font-size:9px}
}