/* =========================================================
   Diction Masters — the app look (from the app prototype)

   Blue #1846E0, yellow #FFC72C and white, Plus Jakarta Sans, rounded
   cards with a soft blue shadow. Loaded last by base.html so it sits
   over every page's own stylesheet: pages keep their markup, classes
   and scripts, and take this look.

   Layout: on wide screens a white sidebar holds the main tabs and every
   course; on phones and tablets the prototype's bottom tab bar does.
   New pieces are prefixed `px-`.
   ========================================================= */

:root {
  --blue: #1846E0;
  --blue-deep: #0F31AE;
  --navy: #0B1A4A;
  --yellow: #FFC72C;
  --yellow-deep: #E9AE00;
  --bg: #F2F5FC;
  --card: #FFFFFF;
  --text: #0B1A4A;
  --muted: #55607E;
  --line: #E3E8F4;
  --sky: #E7EFFF;
  --butter: #FFF5D6;
  --mint: #E7EFFF;
  --blush: #FFE9A8;
  --lilac: #E7EFFF;
  --stone: #ECEEF3;
  --good: #3D63E6;
  --bad: #1846E0;
  --shadow: 0 6px 18px rgba(16, 40, 120, 0.08);
  --shadow-lift: 0 14px 32px rgba(16, 40, 120, 0.14);
  --side-w: 264px;
  --bar-h: 72px;
  --tab-h: 76px;

  /* the older tokens, pointed at the new palette */
  --ink: #0B1A4A;
  --ink-70: #55607E;
  --ink-40: #8A93AE;
  --rule: #E3E8F4;
  --parchment: #F2F5FC;
  --paper-white: #FFFFFF;
  --charcoal: #0B1A4A;
  --ui-ground: #F2F5FC;
  --ui-card: #FFFFFF;
  --ui-shadow: 0 6px 18px rgba(16, 40, 120, 0.08);
  --ui-shadow-lift: 0 14px 32px rgba(16, 40, 120, 0.14);
}

html { background: var(--bg); }
body {
  font-family: "Plus Jakarta Sans", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4 { font-family: inherit; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.ipa, .ui-sound__symbol, .ui-hero__symbol { font-family: "Noto Sans", "Plus Jakarta Sans", system-ui, sans-serif; }

.t-sky { background: var(--sky); color: var(--blue); }
.t-butter { background: var(--butter); color: #6E8DEE; }
.t-mint { background: var(--mint); color: var(--good); }
.t-blush { background: var(--blush); color: var(--bad); }
.t-lilac { background: var(--lilac); color: #1846E0; }
.t-stone { background: var(--stone); color: var(--muted); }

/* the pages' own grounds, all one colour now */
.ui, .es, .lm, .qk, .dash, .ld, .as, .cl, .bk { background: var(--bg); }

/* =========================================================
   Shell: sidebar, top bar, tab bar
   ========================================================= */

.px-main { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.px-main > main { flex: 1 0 auto; }

/* ---------- the brand ---------- */
.px-brand { display: inline-flex; align-items: center; gap: 10px; margin-right: 0; text-decoration: none; color: #fff; }
.px-brand__mark { display: flex; flex: none; }
.px-brand__mark svg { width: 34px; height: 38px; }
.px-brand__name { font-weight: 800; font-size: 16px; line-height: 1.02; letter-spacing: -0.01em; }
.px-brand__name span { color: var(--yellow); }
.px-brand__logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; }

/* ---------- top bar ---------- */
.site-header.px-bar {
  position: sticky; top: 0; z-index: 40;
  background: var(--blue);
  border: 0;
  color: #fff;
}
.px-bar .site-header__inner {
  display: flex; align-items: center; gap: 16px;
  min-height: var(--bar-h); height: auto;
  flex-wrap: nowrap;
  max-width: none;
  padding: 10px 28px;
}
.px-bar .brand { margin-right: auto; }
.px-bar--app .px-bar__brand { margin-right: auto; }
.px-bar .main-nav { display: flex; gap: 4px; }
.px-bar .main-nav a { padding: 10px 14px; border-radius: 12px; color: rgba(255, 255, 255, 0.88); font-weight: 700; font-size: 0.93rem; text-decoration: none; }
.px-bar .main-nav a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.px-bar .main-nav a[aria-current="page"] { background: #fff; color: var(--blue); }

.px-bar .site-search {
  position: relative;
  display: flex; align-items: center;
  flex: 0 1 420px; min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0 6px 0 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.px-bar .site-search:focus-within { background: #fff; }
.px-bar .site-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.px-bar .site-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.85); display: flex; }
.px-bar .site-search:focus-within .site-search__icon { color: var(--muted); }
.px-bar .site-search input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: none; background: none;
  font: inherit; font-size: 0.95rem; color: #fff;
  padding: 0;
  box-shadow: none;
}
.px-bar .site-search input::placeholder { color: rgba(255, 255, 255, 0.75); }
.px-bar .site-search:focus-within input { color: var(--text); }
.px-bar .site-search:focus-within input::placeholder { color: var(--muted); }
.px-bar .site-search button {
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 10px;
  color: var(--navy); background: var(--yellow);
  cursor: pointer;
}

.px-bar .header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.px-iconbtn, .px-bar .phonemic-icon-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 14px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
  flex-direction: row;
}
.px-iconbtn svg, .px-bar .phonemic-icon-btn svg { color: #fff; }
.px-bar .phonemic-icon-btn:hover, .px-iconbtn:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-1px); box-shadow: none; }
.px-bar .tool-btn.is-open, .px-bar .tool-btn[aria-current="page"] { background: var(--yellow); color: var(--navy); }
.px-bar .tool-btn.is-open svg, .px-bar .tool-btn[aria-current="page"] svg { color: var(--navy); }
.px-iconbtn__ipa { font-family: "Noto Sans", sans-serif; font-weight: 700; font-size: 15px; line-height: 1; }
.px-iconbtn--search { display: none; }
.px-bar .tool-btn__spark { display: none; }

.px-bar .account-menu__button {
  display: flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 12px 0 4px;
  border-radius: 99px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.px-bar .account-menu__button:hover, .px-bar .account-menu[open] .account-menu__button { background: rgba(255, 255, 255, 0.24); border: 0; box-shadow: none; }
.px-bar .account-menu__chevron { color: rgba(255, 255, 255, 0.8); }
.account-menu__avatar, .px-avatar {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 800;
  border: 2px solid #fff;
  font-family: inherit;
}
.account-menu__avatar--big { width: 46px; height: 46px; font-size: 1.1rem; }
.account-menu__panel {
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 20px 50px rgba(11, 26, 74, 0.2);
  color: var(--text);
}
.account-menu__panel::before { display: none; }
.account-menu__item[aria-current="page"] { background: var(--sky); }
.account-menu__icon { color: var(--blue); background: var(--sky); border-radius: 12px; }
.account-menu__item:hover .account-menu__icon, .account-menu__item[aria-current="page"] .account-menu__icon { color: var(--blue); background: #D6E3FF; }
.account-menu__item--out, .account-menu__item--out .account-menu__icon { color: var(--bad); }
.account-menu__item--out .account-menu__icon { background: var(--blush); }

.px-bar__login { color: #fff; border: 0; font-weight: 700; padding: 10px 12px; border-radius: 12px; opacity: 1; }
.px-bar__login:hover { background: rgba(255, 255, 255, 0.14); }
.px-btn--yellow, .px-bar .btn--gold {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px;
  border-radius: 99px; border: 0;
  background: var(--yellow); color: var(--navy);
  font-weight: 800;
}
.px-bar .btn--gold:hover { background: #FFD86B; color: var(--navy); }

/* ---------- sidebar (wide screens) / menu drawer (phones and tablets), signed in ---------- */
.px-side { display: none; }
.px-tabbar { display: none; }
.px-bar__menu, .px-side__close, .px-scrim, .px-side__logout { display: none; }

.px-side {
  position: fixed; inset: 0 auto 0 0; z-index: 45;
  width: var(--side-w);
  flex-direction: column;
  background: var(--card);
  border-right: 1px solid var(--line);
}
.px-side__brand {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: var(--bar-h);
  padding: 10px 22px;
  background: var(--blue);
}
.px-side__nav { flex: 1; overflow-y: auto; padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.px-side__link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 14px;
  border-radius: 14px;
  color: var(--muted); font-weight: 700; font-size: 0.97rem;
  text-decoration: none;
}
.px-side__link:hover { background: var(--bg); color: var(--text); }
.px-side__link.is-on { background: var(--sky); color: var(--blue); }
.px-side__link.is-on::before { content: ""; position: absolute; left: -14px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--yellow); }
.px-side__label { margin: 18px 14px 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8A93AE; }
.px-side__sub {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 10px;
  border-radius: 12px;
  color: var(--text); font-weight: 600; font-size: 0.9rem;
  text-decoration: none;
}
.px-side__sub:hover { background: var(--bg); }
.px-side__sub.is-on { background: var(--bg); color: var(--blue); font-weight: 800; }
.px-side__dot { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; }
.px-side__me {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 14px; padding: 10px;
  border-radius: 16px;
  background: var(--bg);
  text-decoration: none; color: var(--text);
}
.px-side__me.is-on { outline: 2px solid var(--blue); }
.px-side__who { min-width: 0; }
.px-side__who b { display: block; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-side__who small { display: block; font-size: 0.78rem; color: var(--muted); }

@media (min-width: 1100px) {
  .px-app .px-main { margin-left: var(--side-w); }
  .px-app .px-bar__brand { display: none; }
  .px-app .px-bar .site-search { flex: 1 1 auto; max-width: 560px; margin-right: auto; }
  .px-side { display: flex; }
}

@media (max-width: 1099.98px) {
  .px-app .px-bar__menu { display: grid; flex: none; }
  .px-app .px-side {
    display: flex;
    z-index: 80;
    width: min(var(--side-w), 86vw);
    border-right: 0;
    box-shadow: 0 0 40px rgba(11, 26, 74, 0.25);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .px-app.px-drawer-open .px-side { transform: none; visibility: visible; transition: transform 0.25s ease; }
  .px-side__close { display: grid; flex: none; }
  .px-side__nav { padding-bottom: 20px; }
  .px-side__me { margin-bottom: 8px; }
  .px-side__logout { display: block; margin: 0 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .px-side__logout button {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 48px; padding: 0 14px;
    border: 0; border-radius: 14px;
    background: var(--blush); color: var(--bad);
    font: inherit; font-weight: 800; font-size: 0.95rem;
    cursor: pointer;
  }
  .px-side__logout button:hover { filter: brightness(0.97); }
  .px-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 75; background: rgba(11, 26, 74, 0.45); }
  .px-drawer-open { overflow: hidden; }
}
@media (max-width: 1099.98px) and (prefers-reduced-motion: reduce) {
  .px-app .px-side, .px-app.px-drawer-open .px-side { transition: none; }
}

/* ---------- bottom tab bar (phones and tablets, signed in) ---------- */
@media (max-width: 1099.98px) {
  .px-app { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }
  .px-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(16, 40, 120, 0.06);
  }
  .px-tabbar > a, .px-tabbar__me > summary {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    height: 100%;
    font-size: 11px; font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    list-style: none;
    cursor: pointer;
  }
  .px-tabbar__me > summary::-webkit-details-marker { display: none; }
  .px-tabbar > a.is-on, .px-tabbar__me.is-on > summary, .px-tabbar__me[open] > summary { color: var(--blue); }
  .px-tabbar > a.is-on::after, .px-tabbar__me.is-on > summary::after {
    content: ""; position: absolute; bottom: -2px;
    width: 28px; height: 4px; border-radius: 4px; background: var(--yellow);
  }
  .px-tabbar__me { position: static; }
  .px-tabbar__me .account-menu__panel {
    position: fixed; left: 12px; right: 12px; top: auto;
    bottom: calc(var(--tab-h) + 10px + env(safe-area-inset-bottom, 0px));
    width: auto; max-width: 480px; margin: 0 auto;
    max-height: 70vh; overflow-y: auto;
  }
  .px-bar__account { display: none; }
}

@media (max-width: 860px) {
  .px-bar .main-nav { display: none; }
}
@media (max-width: 760px) {
  .px-bar .site-header__inner { padding: 10px 16px; gap: 8px; }
  .px-bar .site-search { display: none; }
  .px-iconbtn--search { display: grid; }
  .px-bar .header-actions { gap: 6px; }
}
@media (max-width: 480px) {
  .px-bar .tool-btn--tutor, .px-bar .tool-btn--scan { display: none; }
  .px-public .px-bar .px-iconbtn--search { display: none; }
  .px-public .px-bar .tool-btn--scan { display: grid; }
  .px-bar__login { padding: 8px; }
  .px-bar .btn--gold { padding: 0 14px; min-height: 40px; font-size: 0.88rem; }
}
@media (max-width: 380px) {
  .px-public .px-bar .tool-btn--scan { display: none; }
}
/* Signed in on a phone: scan sits beside search, with the buttons a size
   smaller so menu, logo and all five fit on one row. */
@media (max-width: 480px) {
  .px-app .px-bar .tool-btn--scan { display: grid; }
  .px-app .px-bar .site-header__inner { padding-left: 12px; padding-right: 12px; gap: 6px; }
  .px-app .px-bar .header-actions { gap: 5px; }
  .px-app .px-bar .px-iconbtn, .px-app .px-bar .phonemic-icon-btn { width: 40px; height: 40px; border-radius: 12px; }
  .px-app .px-bar .px-iconbtn svg { width: 20px; height: 20px; }
}
@media (max-width: 374px) {
  .px-app .px-bar .px-iconbtn, .px-app .px-bar .phonemic-icon-btn { width: 36px; height: 36px; border-radius: 11px; }
  .px-app .px-bar .px-iconbtn svg { width: 18px; height: 18px; }
  .px-app .px-bar .header-actions { gap: 4px; }
  .px-app .px-bar .px-brand__mark svg { width: 28px; height: 32px; }
  .px-app .px-bar .px-brand__name { font-size: 14px; }
  .px-app .px-bar .px-brand { gap: 6px; }
}

/* inside the quick-look panel, a page is just the page */
.is-embedded .px-side, .is-embedded .px-tabbar, .is-embedded .px-foot, .is-embedded .px-bar__menu, .is-embedded .px-scrim { display: none !important; }
.is-embedded .px-app .px-main { margin-left: 0; }
.is-embedded .px-app { padding-bottom: 0; }
@media print { .px-side, .px-tabbar { display: none !important; } .px-app .px-main { margin-left: 0 !important; } }

/* ---------- footer ---------- */
.site-footer.px-foot { background: var(--navy); color: rgba(255, 255, 255, 0.8); padding: 44px 0 26px; margin-top: 0; }
.px-foot .site-footer__inner { border-color: rgba(255, 255, 255, 0.12); max-width: none; padding-left: 28px; padding-right: 28px; }
.px-foot .site-footer__brand p { color: rgba(255, 255, 255, 0.65); }
.px-foot .site-footer__links a { color: rgba(255, 255, 255, 0.85); border-radius: 12px; }
.px-foot .site-footer__links a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.px-foot .site-footer__copyright { max-width: none; padding: 0 28px; color: rgba(255, 255, 255, 0.5); }
.site-footer.px-foot--app { background: transparent; padding: 18px 0 22px; }
.px-foot--app .site-footer__copyright { margin: 0; text-align: center; color: var(--muted); font-size: 0.8rem; }
.px-foot--app a { color: var(--muted); }
.px-foot .site-footer__staff { background: transparent; }

/* ---------- messages and banners ---------- */
.message { border-radius: 16px; border: 0; font-weight: 600; box-shadow: var(--shadow-lift); }
.message--success { color: var(--good); background: var(--mint); }
.message--error { color: var(--bad); background: var(--blush); }
.message--info, .message--warning { color: #1846E0; background: var(--butter); }

/* =========================================================
   Page headers: every app's hero becomes the prototype's blue
   header with rounded bottom corners and a picture on the right.
   ========================================================= */

.ui-hero, .es-hero, .lm-hero, .qk-hero, .radio-hero, .ui-hero--green, .ui-hero--blue, .ui-hero--gold, .ui-hero--maroon, .ui-hero--plum, .ui-hero--teal, .es-hero--accent {
  --hero-img: url("../img/app/heroBoy.296eaf39df19.jpg");
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 26px 0 84px;
  background: var(--blue);
  border-radius: 0 0 28px 28px;
}
.ui-hero--maroon { --hero-img: url("../img/app/heroGirl.061cd6a79f24.jpg"); }
.ui-hero--blue { --hero-img: url("../img/app/cSchool.065c6d2ae2ef.jpg"); }
.ui-hero--gold { --hero-img: url("../img/app/c44.502add504620.jpg"); }
.ui-hero--green { --hero-img: url("../img/app/practiceGirl.37097b5ecd65.jpg"); }
.ui-hero--teal { --hero-img: url("../img/app/kidThumb.ef9679349ef6.jpg"); }
.ui-hero--plum { --hero-img: url("../img/app/heroBoy.296eaf39df19.jpg"); }
.es-hero, .es-hero--accent { --hero-img: url("../img/app/cat.6050b49e8781.jpg"); }
.lm-hero { --hero-img: url("../img/app/cSchool.065c6d2ae2ef.jpg"); }
.qk-hero { --hero-img: url("../img/app/cEcho.d7760a6b8b78.jpg"); }
.radio-hero { --hero-img: url("../img/app/practiceGirl.37097b5ecd65.jpg"); }
.px-hero-img--teacher { --hero-img: url("../img/app/teacher.5117473b566b.jpg"); }
.px-hero-img--yela { --hero-img: url("../img/app/cYala.970ad6d1587d.jpg"); }
.px-hero-img--tricks { --hero-img: url("../img/app/cSB.ef751a0559c1.jpg"); }
.px-hero-img--etiquette { --hero-img: url("../img/app/cEtiq.a8e99b40dbbe.jpg"); }
.px-hero-img--none { --hero-img: none; }

.ui-hero::before, .es-hero::before, .lm-hero::before, .qk-hero::before, .radio-hero::before {
  content: "";
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(40%, 520px);
  background: var(--hero-img) center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #0B1A4A 35%);
  mask-image: linear-gradient(to right, transparent, #0B1A4A 35%);
  pointer-events: none;
  z-index: 0;
}
.ui-hero::after, .es-hero::after, .lm-hero::after, .qk-hero::after, .radio-hero::after { display: none; }
.ui-hero > *, .es-hero > *, .lm-hero > *, .qk-hero > *, .radio-hero > * { position: relative; z-index: 1; }
.ui-hero > .wrap, .es-hero > .wrap, .lm-hero > .wrap, .qk-hero > .wrap { max-width: none; padding-left: 28px; padding-right: calc(min(40%, 520px) + 12px); }
/* the text and the buttons share the space left beside the picture: side by
   side when it's wide enough, otherwise the buttons go on their own row */
.ui-hero > .wrap, .es-hero > .wrap, .lm-hero > .wrap, .qk-hero > .wrap { container-type: inline-size; }
@container (max-width: 780px) {
  .ui-hero__inner, .es-hero__inner, .lm-hero__inner, .qk-hero__inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .ui-hero__main, .es-hero__main, .lm-hero__main, .qk-hero__main { max-width: none; }
  .ui-hero__side, .es-hero__side, .lm-hero__side, .qk-hero__side { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .ui-hero__side .ui-btn, .es-hero__side .es-btn, .lm-hero__side .lm-btn, .qk-hero__side .qk-btn { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: center; }
}

.ui-crumbs, .es-crumbs, .lm-crumbs, .qk-crumbs { margin-bottom: 14px; font-size: 0.82rem; }
.ui-crumbs li, .es-crumbs li, .lm-crumbs li, .qk-crumbs li { color: rgba(255, 255, 255, 0.78); font-weight: 600; }
.ui-crumbs li + li::before, .es-crumbs li + li::before, .lm-crumbs li + li::before, .qk-crumbs li + li::before { color: rgba(255, 255, 255, 0.5); }
.ui-crumbs a, .es-crumbs a, .lm-crumbs a, .qk-crumbs a {
  display: inline-flex; align-items: center;
  min-height: 32px; padding: 0 12px;
  border-radius: 10px;
  color: #fff; font-weight: 700;
  background: rgba(255, 255, 255, 0.14);
}
.ui-crumbs li:first-child a::before, .es-crumbs li:first-child a::before, .lm-crumbs li:first-child a::before, .qk-crumbs li:first-child a::before {
  content: ""; width: 8px; height: 8px; margin-right: 8px;
  border-left: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor;
  transform: rotate(45deg);
}

.ui-hero__icon, .es-hero__icon, .lm-hero__icon, .qk-hero__icon {
  width: 58px; height: 58px;
  border-radius: 18px;
  font-size: 1.7rem;
  background: rgba(255, 255, 255, 0.16);
  border: 0;
  box-shadow: none;
  transform: none;
  color: #fff;
}
.ui-hero__eyebrow, .es-hero__eyebrow, .lm-hero__eyebrow, .qk-hero__eyebrow {
  margin: 0 0 6px;
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0; text-transform: none;
  color: var(--yellow);
}
.ui-hero__title, .es-hero__title, .lm-hero__title, .qk-hero__title {
  color: #fff;
  font-family: inherit;
  font-size: clamp(1.65rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.ui-hero__lede, .es-hero__lede, .lm-hero__lede, .qk-hero__lede { color: rgba(255, 255, 255, 0.9); font-size: 0.98rem; line-height: 1.5; }
.ui-hero__lede a { color: var(--yellow); }

.ui-chip, .es-chip, .lm-chip, .qk-chip {
  min-height: 30px; padding: 0 12px;
  border-radius: 99px;
  font-weight: 700; font-size: 0.8rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 0;
}
.ui-chip--gold, .es-chip--gold, .lm-chip--gold, .qk-chip--gold { background: var(--yellow); color: var(--navy); }
.ui-chip--done, .es-chip--done, .lm-chip--done, .qk-chip--done { background: var(--mint); color: var(--good); }

.ui-tab {
  min-height: 40px; padding: 0 16px;
  border-radius: 99px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 0;
}
a.ui-tab:hover { background: rgba(255, 255, 255, 0.24); transform: none; }
.ui-tab--active { color: var(--navy); background: var(--yellow); box-shadow: none; }

.ui-ring {
  background:
    radial-gradient(closest-side, var(--blue-deep) 80%, transparent 81.5%),
    conic-gradient(var(--yellow) calc(var(--ui-p) * 1%), rgba(255, 255, 255, 0.2) 0);
  box-shadow: none;
}
.ui-ring strong { font-family: inherit; font-weight: 800; }
.ui-ring--light {
  background:
    radial-gradient(closest-side, var(--card) 76%, transparent 78%),
    conic-gradient(var(--ring, var(--blue)) calc(var(--ui-p) * 1%), var(--line) 0);
}

@media (max-width: 820px) {
  .ui-hero, .es-hero, .lm-hero, .qk-hero, .radio-hero, .ui-hero--green, .ui-hero--blue, .ui-hero--gold, .ui-hero--maroon, .ui-hero--plum, .ui-hero--teal { padding: 18px 0 70px; border-radius: 0 0 24px 24px; }
  .ui-hero::before, .es-hero::before, .lm-hero::before, .qk-hero::before, .radio-hero::before { width: 46%; bottom: auto; height: 230px; }
  .ui-hero > .wrap, .es-hero > .wrap, .lm-hero > .wrap, .qk-hero > .wrap { padding-left: 16px; padding-right: 16px; }
  .ui-hero__main, .es-hero__main, .lm-hero__main, .qk-hero__main { max-width: 60%; flex-direction: column; gap: 12px; }
  .ui-hero__inner, .es-hero__inner, .lm-hero__inner, .qk-hero__inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .ui-hero__icon, .es-hero__icon, .lm-hero__icon, .qk-hero__icon { width: 46px; height: 46px; border-radius: 14px; font-size: 1.3rem; }
  .ui-hero__side, .es-hero__side, .lm-hero__side, .qk-hero__side { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .ui-hero__chips { max-width: 100%; }
}
@media (max-width: 420px) {
  .ui-hero__main, .es-hero__main, .lm-hero__main, .qk-hero__main { max-width: 64%; }
  .ui-hero__title, .es-hero__title, .lm-hero__title, .qk-hero__title { font-size: 1.5rem; }
}

/* the white workspace pulled up over the header */
.ui-body, .es-body, .lm-body, .qk-body { margin-top: -44px; }
.ui > .wrap, .es > .wrap, .lm > .wrap, .qk > .wrap, .ui-body.wrap, .es-body.wrap, .lm-body.wrap, .qk-body.wrap { max-width: var(--wrap); }
@media (max-width: 820px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .ui-body, .es-body, .lm-body, .qk-body { margin-top: -40px; }
}

/* =========================================================
   Cards, panels, lists
   ========================================================= */

.ui-panel, .es-panel, .lm-panel, .qk-panel, .ui .content-card {
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow);
  border: 0;
}
.ui-panel__label, .ui-row__kicker, .ui-continue__kicker, .ui-auth__section-title, .ui-callout__title {
  letter-spacing: 0; text-transform: none; font-size: 0.8rem; font-weight: 800; color: var(--muted);
}
.ui-panel__title, .ui-section__title, .ui-card__name, .ui-step__title, .ui-row__title--serif, .ui-continue__title, .ui-complete__text strong, .ui-facts dd, .ui-auth__heading {
  font-family: inherit; font-weight: 800; letter-spacing: -0.01em;
}
.ui-section__title { font-size: 1.2rem; }
.ui-section__num { border-radius: 10px; background: var(--blue) !important; box-shadow: none; font-weight: 800; }
.ui-section__aside { color: var(--muted); font-weight: 600; }

.ui-empty { border-radius: 18px; border: 1.5px dashed var(--line); background: var(--card); color: var(--muted); }

.ui-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ui-lift:hover, .ui-lift:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* course cards: a soft tint of their colour, a white icon tile */
.ui-card {
  border-radius: 20px;
  border: 0;
  background: color-mix(in srgb, var(--tone, var(--blue)) 9%, var(--card));
  box-shadow: none;
  min-height: 170px;
}
.ui-card::before { display: none; }
.ui-card__icon {
  width: 52px; height: 52px; border-radius: 16px;
  color: var(--tone, var(--blue));
  background: var(--card);
  box-shadow: var(--shadow);
  transform: none;
}
.ui-card:hover .ui-card__icon { transform: none; }
.ui-card__name { font-size: 1.1rem; }
.ui-card__desc { color: var(--muted); }
.ui-card__cta { color: var(--blue); font-weight: 800; }
.ui-card--current { outline: 2px solid var(--blue); box-shadow: none; }

.ui-row, .ui-step, .ui-tile, .ui-pager a, .ui-complete {
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
  border: 0;
}
.ui-row__icon { border-radius: 14px; background: var(--sky); color: var(--blue); box-shadow: none; }
.ui-row__go { background: var(--sky); color: var(--blue); }
.ui-node { background: var(--sky); color: var(--blue); box-shadow: none; font-family: inherit; font-weight: 800; border-radius: 14px; }
.ui-step--done .ui-node, .ui-tile--done .ui-node { background: var(--mint); color: var(--good); }
.ui-step--active, .ui-tile--active { outline: 2px solid var(--blue); box-shadow: var(--shadow); border: 0; }
.ui-step--active .ui-node, .ui-tile--active .ui-node { background: var(--yellow); color: var(--navy); animation: none; }
.ui-step--locked, .ui-tile--locked { background: var(--stone); box-shadow: none; border: 0; opacity: 0.7; }
.ui-step--locked .ui-node, .ui-tile--locked .ui-node { background: var(--card); color: var(--muted); }
.ui-path::before { background: var(--line); }
.ui-complete { background: var(--butter); }
.ui-complete--done { background: var(--mint); }
.ui-complete__mark { background: var(--yellow); color: var(--navy); box-shadow: none; }
.ui-complete--done .ui-complete__mark { background: var(--good); color: #fff; }
.ui-pager strong { color: var(--blue); }

.ui-status { border-radius: 99px; letter-spacing: 0; text-transform: none; font-size: 0.75rem; font-weight: 800; color: var(--muted); background: var(--stone); }
.ui-status--current { color: #1846E0; background: var(--butter); }
.ui-status--done { color: var(--good); background: var(--mint); }
.ui-status--fail { color: var(--bad); background: var(--blush); }

.ui-bar { height: 8px; border-radius: 99px; background: var(--line); }
.ui-bar__fill { border-radius: 99px; background: var(--tone, var(--blue)); }

.ui-tag { border-radius: 99px; background: var(--stone); color: var(--muted); }
.ui-tag--video { color: var(--bad); background: var(--blush); }
.ui-tag--audio { color: var(--blue); background: var(--sky); }

.ui-facts div { border-radius: 16px; background: var(--bg); }
.ui-facts dt { letter-spacing: 0; text-transform: none; font-size: 0.78rem; color: var(--muted); }
.ui-table thead th { letter-spacing: 0; text-transform: none; font-size: 0.8rem; color: var(--muted); }
.ui-table tbody tr:hover { background: var(--bg); }
.ui-callout { border-left: 0; border-radius: 16px; background: var(--butter); }
.ui-callout--green { background: var(--mint); }
.ui-callout--maroon { background: var(--blush); }
.ui-callout--gold { background: var(--butter); }

/* the numbered list (Tricks, taken in order) = the prototype's list items */
.ui-numlist { display: flex; flex-direction: column; gap: 10px; }
.ui-numlist__item {
  border-radius: 18px !important;
  background: var(--card) !important;
  box-shadow: var(--shadow) !important;
  border: 0 !important;
  min-height: 68px;
}
.ui-numlist__num {
  border-radius: 14px !important;
  background: var(--blush) !important;
  color: var(--bad) !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}
.ui-numlist__item--done .ui-numlist__num { background: var(--mint) !important; color: var(--good) !important; }
.ui-numlist__item--current { outline: 2px solid var(--blue); }
.ui-numlist__item--locked { background: var(--stone) !important; box-shadow: none !important; opacity: 0.65; }
.ui-numlist__item--locked .ui-numlist__num { background: var(--card) !important; color: var(--muted) !important; }
.ui-numlist__name { font-family: inherit !important; font-weight: 800 !important; }
.ui-numlist__tag { border-radius: 99px !important; background: var(--butter) !important; color: #1846E0 !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 800 !important; }
.ui-numlist__arrow { color: var(--muted); }

/* the sound grid (44 Academy, phonemic chart) = the prototype's sound tiles */
.ui-sounds { grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)); gap: 10px; }
.ui-sound {
  padding: 14px 8px 12px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  border: 0;
}
.ui-sound__symbol {
  min-width: 0; height: auto;
  margin: 0 0 2px; padding: 0;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--blue);
  font-size: 1.7rem; font-weight: 700;
}
.ui-sound__name { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.ui-sound__words { font-size: 0.74rem; color: #8A93AE; }
.ui-sound--done .ui-sound__symbol { color: var(--good); }
.ui-sound--current { outline: 2px solid var(--yellow-deep); background: var(--butter); }
.ui-sound--locked { background: var(--stone); box-shadow: none; }
.ui-sound--locked .ui-sound__symbol { color: var(--muted); }
.ui-sound__badge { top: 6px; right: 6px; border-radius: 99px; background: var(--good); color: #fff; box-shadow: none; font-weight: 800; }
.ui-sound__badge--next { background: var(--yellow); color: var(--navy); }
.ui-sound__lock { color: var(--muted); }

/* =========================================================
   Buttons
   ========================================================= */

.ui-btn, .es-btn, .lm-btn, .qk-btn, .dash-btn, .ld-btn {
  min-height: 48px;
  border-radius: 16px;
  font-family: inherit;
  font-weight: 800;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ui-btn:hover, .es-btn:hover, .lm-btn:hover, .qk-btn:hover { transform: translateY(-1px); }
.ui-btn--gold, .es-btn--gold, .lm-btn--gold, .qk-btn--gold, .dash-btn--gold, .ld-btn--gold, .btn--maroon {
  color: var(--navy); background: var(--yellow); box-shadow: 0 6px 14px rgba(233, 174, 0, 0.3); border: 0;
}
.ui-btn--gold:hover, .es-btn--gold:hover, .lm-btn--gold:hover, .qk-btn--gold:hover, .ld-btn--gold:hover, .btn--maroon:hover { background: #FFD86B; color: var(--navy); }
.ui-btn--green, .es-btn--green, .lm-btn--green, .qk-btn--green, .btn--green { color: #fff; background: var(--blue); box-shadow: 0 6px 14px rgba(24, 70, 224, 0.25); border: 0; }
.ui-btn--green:hover, .btn--green:hover { background: var(--blue-deep); }
.ui-btn--maroon, .es-btn--maroon { color: #fff; background: var(--bad); box-shadow: none; }
.ui-btn--ghost, .es-btn--ghost, .lm-btn--ghost, .qk-btn--ghost { color: var(--blue); background: var(--sky); border: 0; }
.ui-btn--ghost:hover { background: #D6E3FF; }
.ui-btn--glass, .es-btn--glass, .lm-btn--glass, .qk-btn--glass, .dash-btn--glass, .ld-btn--glass { color: #fff; background: rgba(255, 255, 255, 0.16); border: 0; }
.ui-btn--glass:hover { background: rgba(255, 255, 255, 0.26); }
.ui-btn--small { min-height: 38px; border-radius: 12px; }
.ui-btn--large { min-height: 56px; border-radius: 99px; font-size: 1.05rem; }
.ui-link { color: var(--blue); font-weight: 700; }
.ui-count { background: var(--yellow); color: var(--navy); }
.btn { border-radius: 16px; font-weight: 800; }

/* =========================================================
   Forms
   ========================================================= */

.field label, .ui .field label { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.field input:not([type=radio]):not([type=checkbox]):not([type=file]), .field select, .field textarea,
.ui .field input:not([type=radio]):not([type=checkbox]):not([type=file]), .ui .field select, .ui .field textarea, .ui-input, .field-input {
  min-height: 54px;
  padding: 12px 18px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #F7F9FE;
  font: inherit; font-size: 16px;
  color: var(--text);
}
.field textarea, .ui .field textarea { min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus,
.ui .field input:focus, .ui .field select:focus, .ui .field textarea:focus, .ui-input:focus, .field-input:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(24, 70, 224, 0.12); background: #fff;
}
.field input::placeholder, .field textarea::placeholder { color: #8A93AE; }
.ui .radio-option, .radio-option { border-radius: 14px; border: 1.5px solid var(--line); background: #F7F9FE; }
.ui .radio-option:has(input:checked), .radio-option:has(input:checked) { border-color: var(--blue); background: var(--sky); }
input[type=checkbox], input[type=radio] { accent-color: var(--blue); }
.field-errors, .non-field-errors, .ui .field-errors, .ui .non-field-errors { border-radius: 12px; color: var(--bad); background: var(--blush); }
.form-card { border-radius: 24px; border: 0; box-shadow: var(--shadow); }

/* =========================================================
   Registration and other auth pages (ui-auth)
   ========================================================= */

.ui-auth { border-radius: 28px; box-shadow: var(--shadow-lift); max-width: 1180px; }
.ui-auth__aside {
  background: var(--blue) url("../img/app/role.2f840daa5372.jpg") center bottom / cover no-repeat;
  min-height: 420px;
  justify-content: flex-end;
}
.ui-auth__aside > * { display: none; }
.ui-auth__aside::after { display: none; }
.ui-auth__panel { padding: 40px 44px; }
.ui-auth__heading { font-size: 1.7rem; }
.ui-auth__note { color: var(--muted); }
.ui-auth__foot a { color: var(--blue); font-weight: 800; }
@media (max-width: 860px) {
  .ui-auth { margin: 0 0 40px; border-radius: 0 0 24px 24px; box-shadow: none; background: var(--card); }
  .ui-auth__aside { min-height: 0; aspect-ratio: 853 / 735; padding: 0; }
  .ui-auth__panel { padding: 24px 20px 10px; }
}

/* =========================================================
   Landing page
   ========================================================= */

.ld .hero { background: var(--blue); border-radius: 0 0 32px 32px; }
.ld-btn--gold { border-radius: 99px; }

/* the quick-look panel (Phonemic chart, Quick Words over the page) */
.tool-sheet__bar { background: var(--blue); color: #fff; }
.tool-sheet__close { border-radius: 12px; background: var(--yellow); color: var(--navy); font-weight: 800; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .ui-lift, .px-iconbtn { transition: none; }
}

/* =========================================================
   px- pages (dashboard, Learn, log in, choose your role):
   the prototype's screens, laid out for every screen size.
   ========================================================= */

.px-page { background: var(--bg); padding-bottom: 48px; min-height: 60vh; }
.px-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.px-lift { position: relative; z-index: 3; margin-top: -56px; }
.px-small { font-size: 13px; }
.px-muted { color: var(--muted); }
.px-card { display: block; background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 18px; color: var(--text); text-decoration: none; }
a.px-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
a.px-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.px-pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 99px; background: var(--butter); color: #1846E0; }
.px-meter { display: block; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.px-meter i { display: block; height: 100%; min-width: 4%; background: var(--blue); border-radius: 99px; }
.px-playbig { width: 52px; height: 52px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; color: var(--navy); flex: none; box-shadow: 0 6px 14px rgba(233, 174, 0, 0.35); }
.px-chev { color: var(--muted); flex: none; display: flex; }

/* ---------- home hero ---------- */
.px-hero {
  position: relative; overflow: hidden;
  min-height: 340px;
  padding: 34px 28px 96px;
  background: var(--blue);
  color: #fff;
  border-radius: 0 0 32px 32px;
}
.px-hero__img {
  position: absolute; right: 0; bottom: 0;
  width: min(52%, 640px); height: 100%;
  object-fit: cover; object-position: left center;
  -webkit-mask-image: linear-gradient(to right, transparent, #0B1A4A 30%);
  mask-image: linear-gradient(to right, transparent, #0B1A4A 30%);
}
/* sounds rising out of the tablet: the box copies .px-hero__img's, and the
   emitter maths follows its object-fit: cover / object-position: left center
   on the 453x315 picture, where the tablet's top edge is at (330, 200). */
.px-hero__sounds {
  position: absolute; right: 0; bottom: 0;
  width: min(52%, 640px); height: 100%;
  container-type: size;
  pointer-events: none;
  --k: 1; --bx: 0px;
}
.px-hero__emit {
  position: absolute;
  left: calc(max(100cqw, 143.81cqh) * 0.7285);
  top: calc(50cqh + max(69.54cqw, 100cqh) * 0.1349);
  width: 0; height: 0;
}
.px-hero__emit { perspective: 520px; transform-style: preserve-3d; }
/* each sound is a glossy tile: a lit face, a bevel, a thick extruded edge
   and a soft drop shadow, tumbling in 3D as it rises */
.px-hero__emit b {
  --face: radial-gradient(120% 120% at 28% 18%, #FFFFFF 0%, #F2F5FC 42%, #D6E3FF 100%);
  --edge: #A9BDF6;
  --tile-ink: var(--blue);
  position: absolute; left: 0; top: 0;
  padding: 6px 12px 7px;
  border-radius: 14px;
  background: var(--face);
  color: var(--tile-ink);
  font: 800 21px/1.1 "Noto Sans", sans-serif;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 3px rgba(11, 26, 74, 0.22);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 0 rgba(11, 26, 74, 0.1),
    0 1px 0 var(--edge), 0 2px 0 var(--edge), 0 3px 0 var(--edge), 0 4px 0 var(--edge), 0 5px 0 var(--edge),
    0 14px 22px rgba(11, 26, 74, 0.35);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  opacity: 0;
  animation: px-sound-rise 4.8s cubic-bezier(.2, .7, .3, 1) var(--d) infinite;
}
.px-hero__emit b::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 3px; height: 42%;
  border-radius: 10px 10px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.px-hero__emit b.is-gold {
  --face: radial-gradient(120% 120% at 28% 18%, #FFFAEB 0%, #FFD86B 38%, #FFC72C 70%, #E9AE00 100%);
  --edge: #E9AE00;
  --tile-ink: var(--navy);
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.8), 0 2px 3px rgba(11, 26, 74, 0.25);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.85),
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 0 rgba(11, 26, 74, 0.1),
    0 1px 0 var(--edge), 0 2px 0 var(--edge), 0 3px 0 var(--edge), 0 4px 0 var(--edge), 0 5px 0 var(--edge),
    0 14px 22px rgba(11, 26, 74, 0.35);
}
.px-hero__wave {
  position: absolute; left: -40px; top: -40px;
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #FFFFFF; border-right-color: #FFD86B;
  filter: drop-shadow(0 0 6px rgba(255, 199, 44, 0.75)) drop-shadow(0 3px 4px rgba(11, 26, 74, 0.35));
  transform: rotateX(55deg) rotate(-45deg) scale(.3);
  opacity: 0;
  animation: px-sound-wave 2.4s ease-out infinite;
}
.px-hero__wave + .px-hero__wave { animation-delay: 1.2s; }
@keyframes px-sound-rise {
  0% { transform: translate(-50%, -50%) translateZ(-60px) rotateX(55deg) rotateY(-40deg) scale(.3); opacity: 0; }
  12% { opacity: 1; }
  45% { transform: translate(-50%, -50%) translate(calc((var(--dx) * var(--k) + var(--bx)) * .55), calc(var(--dy) * var(--k) * .55)) translateZ(40px) rotateX(-12deg) rotateY(18deg) rotate(calc(var(--r) * .5)) scale(1.08); }
  70% { opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(calc(var(--dx) * var(--k) + var(--bx)), calc(var(--dy) * var(--k))) translateZ(10px) rotateX(18deg) rotateY(-24deg) rotate(var(--r)) scale(.95); opacity: 0; }
}
@keyframes px-sound-wave {
  0% { transform: rotateX(55deg) rotate(-45deg) scale(.3); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: rotateX(55deg) rotate(-45deg) scale(calc(2 * var(--k))); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .px-hero__sounds { display: none; }
}
.px-hero__text { position: relative; z-index: 1; max-width: 56%; }
.px-hero__date { margin: 0; font-size: 14px; font-weight: 700; opacity: 0.88; }
.px-hero__title { margin: 8px 0 6px; color: #fff; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; }
.px-hero__title span { color: var(--yellow); }
.px-hero__sub { margin: 0; font-size: 16px; opacity: 0.92; }

/* the greeting in 3D: white lettering extruded in blues, flipping up into
   place; the name below it is animated letter by letter */
.px-hero__title { perspective: 700px; }
.px-hero__title .px-hero__hello, .px-hero__title .px-hero__name { display: inline-block; transform-origin: 50% 100%; }
/* one row each, never wrapping: a line too long for the column is shrunk to
   fit by the script under the hero (templates/accounts/dashboard.html) */
.px-hero__title .px-hero__hello, .px-hero__title .px-hero__name { white-space: nowrap; }
.px-hero__title .px-hero__hello {
  color: #fff;
  text-shadow:
    0 0.012em 0 #E7EFFF, 0 0.024em 0 #D6E3FF, 0 0.036em 0 #A9BDF6, 0 0.048em 0 #6E8DEE,
    0 0.06em 0 #3D63E6, 0 0.072em 0 #0F31AE,
    0 0.12em 0.14em rgba(11, 26, 74, 0.45), 0 0.2em 0.4em rgba(11, 26, 74, 0.25);
  animation: px-hero-rise 0.9s cubic-bezier(.2, .8, .2, 1) 0.1s both;
}
.px-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the name, letter by letter: each one drops in on its own beat, then a wave
   walks through the name every few seconds, lifting each letter towards you
   with a glint of light travelling along with it. Each letter carries its own
   extrusion (the copy behind it) under a glossy gold face. */
.px-hero__title .px-hero__name { position: relative; isolation: isolate; perspective: 600px; }
.px-hero__ch {
  --beat: calc(var(--i) * 0.07s);
  position: relative; display: inline-block;
  white-space: pre;
  transform-origin: 50% 90%;
  background: linear-gradient(100deg, #E9AE00 0%, #FFC72C 30%, #FFFAEB 46%, #FFC72C 60%, #E9AE00 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation:
    px-ch-in 0.75s cubic-bezier(.2, 1.3, .35, 1) calc(0.35s + var(--beat)) both,
    px-ch-wave 5s ease-in-out calc(1.8s + var(--beat) * 1.4) infinite,
    px-ch-glint 5s ease-in-out calc(1.8s + var(--beat) * 1.4) infinite;
}
.px-hero__ch::before {
  content: attr(data-c);
  position: absolute; left: 0; top: 0; z-index: -1;
  -webkit-text-fill-color: #E9AE00;
  text-shadow:
    0 0.012em 0 #E9AE00, 0 0.024em 0 #E9AE00, 0 0.036em 0 #E9AE00, 0 0.048em 0 #3D63E6,
    0 0.06em 0 #0F31AE, 0 0.072em 0 #0B1A4A,
    0 0.12em 0.14em rgba(11, 26, 74, 0.5), 0 0.22em 0.45em rgba(11, 26, 74, 0.3);
}
@keyframes px-ch-in {
  from { opacity: 0; transform: translateY(-0.9em) rotateX(80deg) scale(.6); filter: blur(4px); }
  55% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes px-ch-wave {
  0%, 22%, 100% { transform: none; }
  7% { transform: translateY(-0.2em) rotateX(-22deg) scale(1.08); }
  14% { transform: translateY(0.03em) rotateX(6deg) scale(.99); }
}
@keyframes px-ch-glint {
  0%, 2% { background-position: 100% 0; }
  18%, 100% { background-position: 0% 0; }
}
.px-hero__date, .px-hero__sub {
  text-shadow: 0 1px 0 rgba(11, 26, 74, 0.35), 0 3px 8px rgba(11, 26, 74, 0.3);
  animation: px-hero-fade 0.7s ease-out both;
}
.px-hero__sub { animation-delay: 0.5s; }
@keyframes px-hero-rise {
  from { opacity: 0; transform: translateY(0.35em) rotateX(-75deg); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes px-hero-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .px-hero__title .px-hero__hello, .px-hero__title .px-hero__name, .px-hero__ch, .px-hero__date, .px-hero__sub { animation: none; }
}
.px-hero__note { margin: 10px 0 0; font-size: 14px; opacity: 0.85; max-width: 46ch; }
.px-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.px-chipbtn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 16px;
  border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff; font: inherit; font-weight: 700; font-size: 14px;
  text-decoration: none; cursor: pointer;
}
.px-chipbtn:hover { background: rgba(255, 255, 255, 0.26); }

/* ---------- continue, streak, week ---------- */
.px-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.px-cont { display: flex; align-items: center; gap: 16px; padding: 18px; }
.px-cont__ic { width: 64px; height: 64px; border-radius: 18px; overflow: hidden; flex: none; background: var(--mint); }
.px-cont__ic img { width: 100%; height: 100%; object-fit: cover; }
.px-cont__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.px-cont__lab { font-size: 12px; font-weight: 700; color: var(--muted); }
.px-cont__title { margin: 2px 0; font-size: 18px; font-weight: 800; }
.px-cont__meta { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.px-cont .px-meter { max-width: 280px; }

.px-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.px-streak { display: flex; flex-direction: column; gap: 6px; }
.px-streak b { display: flex; align-items: center; gap: 6px; font-size: 28px; font-weight: 800; }
.px-streak__flame { color: var(--bad); display: flex; }
.px-weekcard { display: flex; flex-direction: column; }
.px-weekcard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 14px; }
.px-week { display: flex; align-items: flex-end; gap: 6px; flex: 1; min-height: 64px; margin-top: 8px; }
.px-week__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--muted); height: 100%; }
.px-week__slot { flex: 1; width: 100%; display: flex; align-items: flex-end; min-height: 44px; }
.px-week__bar { display: block; width: 100%; min-height: 6px; border-radius: 6px; background: var(--line); }
.px-week__bar.is-on { background: var(--blue); }
.px-week__bar.is-today { box-shadow: 0 0 0 2px var(--yellow); }

/* ---------- sections, quick tools, courses ---------- */
.px-sec { margin: 30px 0 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.px-sec h2, .px-sec h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.px-sec a { color: var(--blue); font-weight: 700; font-size: 14px; text-decoration: none; }

.px-tools { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.px-tool { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px; border-radius: 18px; font-size: 13px; font-weight: 700; text-align: center; line-height: 1.2; color: var(--text); text-decoration: none; }
.px-tool:hover { background: var(--card); box-shadow: var(--shadow); }
.px-tool__ti { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; overflow: hidden; }
.px-tool__ti img { width: 100%; height: 100%; object-fit: cover; }

.px-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.px-course {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 190px; padding: 14px;
  border-radius: 20px;
  text-decoration: none; color: var(--text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.px-course:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.px-course__img { width: 100%; height: 110px; object-fit: cover; border-radius: 14px; background: var(--card); }
.px-course__ci { width: 44px; height: 44px; border-radius: 14px; background: var(--card); display: grid; place-items: center; }
.px-course h3 { margin: 4px 0 0; font-size: 16px; font-weight: 800; line-height: 1.2; color: var(--text); display: flex; align-items: center; gap: 6px; }
.px-course__meta { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.px-course .px-meter { background: rgba(11, 26, 74, 0.1); }
.px-course.is-locked { opacity: 0.6; }

/* ---------- lists ---------- */
.px-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.px-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.px-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 68px; padding: 12px 14px;
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow);
  text-align: left; text-decoration: none; color: var(--text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.px-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.px-item__ii { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 17px; overflow: hidden; }
.px-item__ii img, .px-thumb { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: none; }
.px-item__it { flex: 1; min-width: 0; }
.px-item__it b { display: block; font-size: 15px; font-weight: 800; }
.px-item__it > span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.px-item__it .px-meter { margin-top: 8px; max-width: 360px; }
.px-item__it .px-item__prog { margin-top: 8px; font-weight: 700; color: var(--text); }
.px-item__when { flex: none; font-size: 12px; font-weight: 700; color: var(--muted); }
.px-item.is-current { outline: 2px solid var(--blue); }
.px-item.is-locked { background: var(--stone); box-shadow: none; opacity: 0.65; }
.px-empty { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ---------- page header (Learn and friends) ---------- */
.px-phead {
  position: relative; overflow: hidden;
  padding: 30px 28px 34px;
  background: var(--blue); color: #fff;
  border-radius: 0 0 28px 28px;
}
.px-phead__img {
  position: absolute; right: 0; top: 0;
  width: min(40%, 520px); height: 100%;
  object-fit: cover; object-position: center top;
  -webkit-mask-image: linear-gradient(to right, transparent, #0B1A4A 35%);
  mask-image: linear-gradient(to right, transparent, #0B1A4A 35%);
}
.px-phead > :not(img) { position: relative; z-index: 1; max-width: 58%; }
.px-phead h1 { margin: 0 0 6px; color: #fff; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
.px-phead p { margin: 0; font-size: 15px; line-height: 1.5; opacity: 0.92; }

.px-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.px-chips::-webkit-scrollbar { display: none; }
.px-chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font: inherit; font-weight: 700; font-size: 14px; color: var(--text); cursor: pointer; }
.px-chip.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }

.px-grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-top: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .px-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .px-top { grid-template-columns: minmax(0, 1fr); }
  .px-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .px-wrap { padding: 0 16px; }
  .px-hero { min-height: 300px; padding: 18px 20px 70px; border-radius: 0 0 28px 28px; }
  .px-hero__img { width: 60%; height: 80%; }
  .px-hero__sounds { width: 60%; height: 80%; --k: .6; --bx: -45px; }
  .px-hero__emit b { font-size: 16px; padding: 5px 10px 6px; border-radius: 11px; }
  .px-hero__title { font-size: 30px; }
  .px-hero__sub { font-size: 15px; }
  .px-hero__actions { display: none; }
  .px-lift { margin-top: -48px; }
  .px-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .px-course { min-height: 170px; }
  .px-course__img { height: 92px; }
  .px-course h3 { font-size: 15px; }
  .px-tool { font-size: 12px; padding: 4px 0; }
  .px-tool__ti { width: 62px; height: 62px; }
  .px-tool:hover { background: none; box-shadow: none; }
  .px-phead { padding: 22px 18px 26px; border-radius: 0 0 24px 24px; }
  .px-phead > :not(img) { max-width: 62%; }
  .px-phead__img { width: 46%; }
  .px-sec { margin-top: 26px; }
  .px-sec h2 { font-size: 19px; }
}
@media (max-width: 380px) {
  .px-duo { gap: 10px; }
  .px-card { padding: 14px; }
  .px-tool__ti { width: 54px; height: 54px; }
}
.px-item[hidden], .px-grid-list[hidden], .px-sec[hidden], .px-course[hidden] { display: none; }

/* ---------- log in and choose your role ---------- */
.px-authpage { padding: 36px 28px 60px; }
.px-auth {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1180px; margin: 0 auto;
  border-radius: 32px; overflow: hidden;
  background: var(--card); box-shadow: var(--shadow-lift);
}
.px-auth__art { background: var(--blue); display: flex; align-items: center; }
.px-auth__art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* the login picture is 853x715, covered and centred; the tablet's top edge is at (735, 575) */
.px-auth__art { position: relative; }
.px-hero__sounds.px-hero__sounds--auth { inset: 0; width: 100%; height: 100%; --k: 1; --bx: 0px; }
.px-hero__sounds--auth .px-hero__emit {
  left: calc(50cqw + max(100cqw, 119.3cqh) * 0.3617);
  top: calc(50cqh + max(83.82cqw, 100cqh) * 0.3042);
}
.px-hero__sounds--auth .px-hero__emit b { font-size: clamp(14px, 3.4cqw, 22px); }
.px-auth__panel { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; }
.px-auth__title { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.px-auth__lede { margin: 10px 0 22px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.px-auth .form-card { padding: 0; border: 0; background: none; box-shadow: none; max-width: none; }
.px-auth .field { margin: 0 0 14px; }
.px-auth .field label { display: block; margin: 0 0 6px 6px; font-size: 14px; }
.px-auth .field input:not([type=radio]):not([type=checkbox]) { border-radius: 99px; min-height: 58px; padding-left: 52px; background-repeat: no-repeat; background-position: 18px center; background-size: 22px; width: 100%; }
.px-auth .field input[type=email], .px-auth .field input[name=username] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355607E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); }
.px-auth .field input[type=password] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355607E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='10.5' width='13' height='9.5' rx='2.5'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E"); }
.px-auth .pw-toggle { right: 12px; border-radius: 99px; }
.px-bigbtn {
  width: 100%; min-height: 58px; margin-top: 8px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 99px;
  background: var(--yellow); color: var(--navy);
  font: inherit; font-weight: 800; font-size: 19px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(233, 174, 0, 0.3);
  transition: transform 0.15s ease, background 0.15s ease;
}
.px-bigbtn:hover { background: #FFD86B; transform: translateY(-1px); }
.px-auth__foot { margin: 22px 0 0; text-align: center; font-size: 16px; }
.px-auth__foot a { color: var(--blue); font-weight: 800; text-decoration: none; }

.px-roles { display: flex; flex-direction: column; gap: 12px; }
.px-role {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px 8px 8px;
  border: 1.5px solid var(--line); border-radius: 22px;
  background: #F7F9FE;
  text-decoration: none; color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.px-role img { width: 92px; height: 76px; object-fit: cover; border-radius: 16px; flex: none; }
.px-role__t { flex: 1; min-width: 0; }
.px-role b { display: block; font-size: 16px; font-weight: 800; }
.px-role__t span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.px-role__go { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #A9B1C8; flex: none; display: grid; place-items: center; color: transparent; }
.px-role:hover, .px-role:focus-visible { border-color: var(--blue); background: var(--sky); }
.px-role:hover .px-role__go, .px-role:focus-visible .px-role__go { border-color: var(--blue); background: var(--blue); color: #fff; }

@media (max-width: 860px) {
  .px-authpage { padding: 0 0 30px; }
  .px-auth { grid-template-columns: minmax(0, 1fr); border-radius: 0; box-shadow: none; }
  .px-auth__art img { height: auto; }
  .px-auth__panel { padding: 8px 20px 20px; }
  .px-auth__title { font-size: 28px; }
}
@media (max-width: 400px) {
  .px-role img { width: 72px; height: 64px; }
}
@media (max-width: 860px) { .px-authpage { background: var(--card); } }
@media (max-width: 560px) {
  .ui-sounds { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
  .ui-sound { padding: 10px 4px 8px; }
  .ui-sound__symbol { font-size: 1.4rem; }
  .ui-sound__words { display: none; }
  .ui-sound__name { font-size: 0.7rem; }
}

/* ---------- fixes after the first look ---------- */
.px-bar .header-actions .px-bar__login { color: #fff; background: transparent; border: 0; }
.px-bar .header-actions .px-bar__login:hover { background: rgba(255, 255, 255, 0.14); }
.px-bar .px-brand { flex: none; }
@media (max-width: 1200px) { .px-public .px-bar .site-search { display: none; } .px-public .px-iconbtn--search { display: grid; } }
@media (max-width: 480px) { .px-public .px-bar .tool-btn--scan { display: none; } }

.px-auth .field input:not([type=radio]):not([type=checkbox]):not([type=file]) { background-color: #F7F9FE; background-repeat: no-repeat; background-position: 18px center; background-size: 22px; padding-left: 52px; border-radius: 99px; min-height: 58px; }
.px-auth .field input[type=email]:not([type=file]), .px-auth .field input[name=username]:not([type=file]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355607E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); }
.px-auth .field input[type=password]:not([type=file]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355607E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='10.5' width='13' height='9.5' rx='2.5'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E"); }

.ui-sound__badge {
  position: absolute; top: 6px; right: 6px; left: auto;
  display: grid; place-items: center;
  width: 20px; height: 20px; min-width: 0; padding: 0;
  border-radius: 50%;
  font-size: 11px; line-height: 1;
  background: var(--good); color: #fff;
}
.ui-sound__badge--next { width: auto; padding: 0 7px; border-radius: 99px; font-size: 10px; letter-spacing: 0; text-transform: none; background: var(--yellow); color: var(--navy); }
.ui-sound__lock { position: absolute; top: 6px; right: 6px; font-size: 0; color: var(--muted); }
.ui-sound__lock svg { width: 12px; height: 12px; }

.px-phead { min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; }
.px-weekcard__head { flex-wrap: wrap; }
@media (max-width: 420px) { .px-weekcard__head .px-small { display: none; } }
/* the footer control panel link, as a button: navy on the pale app footer, yellow on the navy public one */
.px-foot .site-footer__staff, .px-foot--app .site-footer__staff {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 4px; padding: 7px 14px 7px 12px;
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #1846E0, #0F31AE); color: #fff !important;
  font-weight: 700; font-size: 0.82rem; line-height: 1.2; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 0 #0B1A4A, 0 6px 14px rgba(11, 26, 74, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.px-foot .site-footer__staff:hover, .px-foot--app .site-footer__staff:hover { background: linear-gradient(180deg, #3D63E6, #1846E0); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 0 #0B1A4A, 0 10px 18px rgba(11, 26, 74, 0.3); }
.px-foot .site-footer__staff:active, .px-foot--app .site-footer__staff:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 #0B1A4A, 0 3px 8px rgba(11, 26, 74, 0.25); }
.px-foot .site-footer__staff:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.px-foot:not(.px-foot--app) .site-footer__staff { background: linear-gradient(180deg, #FFD86B, #FFC72C); color: #0B1A4A !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 0 #E9AE00, 0 6px 14px rgba(0, 0, 0, 0.25); }
.px-foot:not(.px-foot--app) .site-footer__staff:hover { background: linear-gradient(180deg, #FFE9A8, #FFD86B); }
@media (min-width: 1300px) { .px-courses { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 701px) and (max-width: 1299px) { .px-courses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .px-side__nav { padding-bottom: 8px; } .px-side__link { min-height: 44px; } .px-side__sub { min-height: 38px; } }

/* ---------- landing: the app's welcome screen ---------- */
.ld .hero.px-landhero { background: var(--card); background-image: none; border-radius: 0 0 36px 36px; padding: 0; box-shadow: var(--shadow); }
.px-landhero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 40px; max-width: 1320px; margin: 0 auto; padding: 48px 28px 56px; }
.px-landhero__eyebrow { margin: 0 0 12px; font-size: 14px; font-weight: 800; color: var(--blue); }
.px-landhero__title { margin: 0; font-size: clamp(34px, 5vw, 64px); line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; color: var(--navy); }
.px-landhero__title span { color: #E9AE00; }
.px-landhero__lead { margin: 16px 0 0; max-width: 58ch; font-size: 17px; line-height: 1.55; color: var(--muted); }
.px-feat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 26px; max-width: 560px; }
.px-feat div { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-align: center; line-height: 1.25; color: var(--navy); }
.px-feat span { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; }
.f1 { background: #FFF5D6; color: #E9AE00; } .f2 { background: #E7EFFF; color: #1846E0; } .f3 { background: #E7EFFF; color: #3D63E6; } .f4 { background: #E7EFFF; color: #3D63E6; }
.px-landhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.px-landhero__actions .px-bigbtn { width: auto; min-width: 260px; margin: 0; padding: 0 30px; text-decoration: none; }
.px-landhero__login { color: var(--blue); font-weight: 800; text-decoration: none; }
.px-landhero__stats { margin-top: 30px; }
.px-landhero__stats dt { color: var(--blue); font-family: inherit; font-weight: 800; }
.px-landhero__stats dd { color: var(--muted); }
.px-landhero__art img { width: 100%; height: auto; border-radius: 32px; box-shadow: var(--shadow-lift); }
.px-landhero__art { position: relative; }
.px-hero__sounds--land, .px-hero__sounds.px-hero__sounds--land { inset: 0; width: 100%; height: 100%; --k: 1; --bx: 0px; }
.px-hero__sounds--land .px-hero__emit { left: 77.4%; top: 83.4%; }
.px-hero__sounds--land .px-hero__emit b { font-size: clamp(14px, 3.4cqw, 22px); }
@media (max-width: 900px) {
  .px-landhero__inner { grid-template-columns: minmax(0, 1fr); padding: 0 0 36px; gap: 0; }
  .px-landhero__art { order: -1; }
  .px-landhero__art img { border-radius: 0 0 32px 32px; box-shadow: none; }
  .px-landhero__text { padding: 22px 22px 0; }
  .px-landhero__title { font-size: 34px; }
  .px-landhero__lead { font-size: 16px; }
  .px-feat { gap: 8px; }
  .px-feat span { width: 58px; height: 58px; }
  .px-landhero__actions .px-bigbtn { width: 100%; }
  .px-landhero__actions { justify-content: center; }
}
.ld .px-landhero .hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; padding: 0; border: 0; }
.ld .px-landhero .hero__stat { padding: 14px 16px; border-radius: 18px; background: var(--bg); border: 0; }
.ld .px-landhero .hero__stat dt { color: var(--blue); opacity: 1; font-size: 28px; font-weight: 800; font-family: inherit; }
.ld .px-landhero .hero__stat dd { margin: 2px 0 0; color: var(--muted); opacity: 1; font-size: 13px; font-weight: 600; }
.ui-empty, .es-empty, .lm-empty, .qk-empty, .dash-empty { background: var(--card); border: 1.5px dashed var(--line); border-radius: 18px; box-shadow: var(--shadow); position: relative; z-index: 2; }
@media (max-width: 820px) {
  .ui-crumbs, .es-crumbs, .lm-crumbs, .qk-crumbs { max-width: 64%; }
  .ui-hero__main, .es-hero__main, .lm-hero__main, .qk-hero__main { max-width: 56%; }
  .ui-hero::before, .es-hero::before, .lm-hero::before, .qk-hero::before, .radio-hero::before { height: 210px; }
}

/* things pinned to the bottom sit above the tab bar; things under the top bar follow its height */
.as-bar, .qw-toolbar { top: var(--bar-h); }
@media (min-width: 1100px) { .px-app .tool-sheet, .px-app .tt-dock { left: var(--side-w); } }
@media (max-width: 1099.98px) {
  .px-app .es-submitbar { bottom: calc(var(--tab-h) + 12px); }
  .px-app .tt-dock { bottom: var(--tab-h); }
  .px-app .ls { bottom: calc(var(--tab-h) + 16px); }
  .px-app .app-update { bottom: calc(var(--tab-h) + 12px); }
  .px-app .tool-sheet { bottom: var(--tab-h); }
}
.px-bar .brand, .px-side .brand, .px-foot .brand { width: auto; }
.px-bar .header-actions { width: auto; justify-content: flex-end; }

/* dashboard, EchoSpell, the 44 Academy, Tricks to Sound Fluent, Quick Words, the AI Reading Tutor, Daily Practice, Assessments and Diction Radio: every card gets a soft ring in the logo's
   colours, blue into yellow. Drawn on whichever pseudo-element the card
   leaves free (EchoSpell levels, empty notes and cards already use one). */
.px-home .px-card, .px-home .px-course, .px-home .px-item, .px-home .px-tool__ti,
.es .es-level, .es .es-group, .es .es-card, .es .es-panel, .es .es-empty, .es .es-complete,
.es .es-score, .es .es-pager__next, .es .es-hero__qr, .es .es-sheet__card,
.es .content-card, .es .result-item,
.px-ringed .ui-card, .px-ringed .ui-sound, .px-ringed .ui-panel, .px-ringed .ui-callout, .px-ringed .ui-empty,
.px-ringed .content-card, .px-ringed .video-card, .px-ringed .tr-test__card, .px-ringed .tr-check__item, .px-ringed .tr-act, .px-ringed .ui-numlist__item, .px-ringed .link-card,
.px-ringed .qk-panel, .px-ringed .qw-item, .px-ringed .qk-empty, .px-ringed .qk-pager > a, .px-ringed .ui-complete, .px-ringed .radio-console, .px-ringed .radio-program, .px-ringed .radio-empty,
.px-ringed .as-resume, .px-ringed .as-kind, .px-ringed .as-card, .px-ringed .as-result-row, .px-ringed .as-brief, .px-ringed .as-facts div, .px-ringed .as-q, .px-ringed .as-feedback, .px-ringed .as-score, .px-ringed .as-placement, .px-ringed .as-teacher, .px-ringed .as-review__item, .px-ringed .as-mark__item, .px-ringed .as-results__metric, .px-ringed .as-results__category, .px-ringed .as-results__group-head, .px-ringed .as-results__row, .px-ringed .as-results__empty,
.px-ringed .tt-steps li, .px-ringed .tt-latest, .px-ringed .tt-card, .px-ringed .tt-history__row, .px-ringed .tt-passage, .px-ringed .tt-focus, .px-ringed .tt-result, .px-ringed .tt-stat, .px-ringed .tt-feedback, .px-ringed .tt-panel, .px-ringed .tt-patterns li, .px-ringed .tt-voice { position: relative; }
.es .content-card, .es .result-item,
.px-ringed .content-card, .px-ringed .video-card, .px-ringed .ui-callout, .px-ringed .tr-test__card, .px-ringed .tr-check__item, .px-ringed .tr-act, .px-ringed .ui-numlist__item, .px-ringed .link-card, .px-ringed .qw-item, .px-ringed .qk-empty, .px-ringed .radio-console, .px-ringed .radio-program, .px-ringed .radio-empty { border-color: transparent; }
.px-ringed .as-resume, .px-ringed .as-kind, .px-ringed .as-card, .px-ringed .as-result-row, .px-ringed .as-brief, .px-ringed .as-facts div, .px-ringed .as-q, .px-ringed .as-feedback, .px-ringed .as-score, .px-ringed .as-placement, .px-ringed .as-teacher, .px-ringed .as-review__item, .px-ringed .as-mark__item, .px-ringed .as-results__category, .px-ringed .as-results__group-head, .px-ringed .as-results__row, .px-ringed .as-results__empty { border-color: transparent; }
.px-ringed .as-results__metric { border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
.px-ringed .tt-latest, .px-ringed .tt-card:not(.tt-card--suggested), .px-ringed .tt-history__row, .px-ringed .tt-panel,
.px-ringed .tt-feedback, .px-ringed .tt-focus:not([data-british="1"]),
.px-ringed .tt-voice:not(.is-chosen):not(:has(input:checked)) { border-color: transparent; }
.px-home .px-card::before, .px-home .px-course::before, .px-home .px-item::before, .px-home .px-tool__ti::before,
.es .es-group::before, .es .es-card::before, .es .es-panel::before, .es .es-complete::before,
.es .es-score::before, .es .es-pager__next::before, .es .es-hero__qr::before, .es .es-sheet__card::before,
.es .content-card::before, .es .result-item::before,
.px-ringed .ui-sound::before, .px-ringed .ui-panel::before, .px-ringed .ui-callout::before, .px-ringed .content-card::before,
.px-ringed .video-card::before, .px-ringed .tr-test__card::before, .px-ringed .tr-check__item::before, .px-ringed .tr-act::before,
.px-ringed .ui-numlist__item::before, .px-ringed .link-card::before,
.px-ringed .qk-panel::before, .px-ringed .qw-item::before, .px-ringed .qk-pager > a::before, .px-ringed .ui-complete::before, .px-ringed .radio-console::before, .px-ringed .radio-program::before, .px-ringed .radio-empty::before,
.px-ringed .as-resume::before, .px-ringed .as-kind::before, .px-ringed .as-card::before, .px-ringed .as-result-row::before, .px-ringed .as-brief::before, .px-ringed .as-facts div::before, .px-ringed .as-q::before, .px-ringed .as-feedback::before, .px-ringed .as-score::before, .px-ringed .as-placement::before, .px-ringed .as-teacher::before, .px-ringed .as-review__item::before, .px-ringed .as-mark__item::before, .px-ringed .as-results__metric::before, .px-ringed .as-results__category::before, .px-ringed .as-results__group-head::before, .px-ringed .as-results__row::before, .px-ringed .as-results__empty::before,
.px-ringed .tt-steps li::before, .px-ringed .tt-latest::before, .px-ringed .tt-card::before, .px-ringed .tt-history__row::before, .px-ringed .tt-passage::before, .px-ringed .tt-focus::before, .px-ringed .tt-result::before, .px-ringed .tt-stat::before, .px-ringed .tt-feedback::before, .px-ringed .tt-panel::before, .px-ringed .tt-patterns li::before, .px-ringed .tt-voice::before,
.es .es-level::after, .es .es-empty::after, .px-ringed .ui-card::after, .px-ringed .ui-empty::after, .px-ringed .qk-empty::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  padding: 1.5px; border-radius: inherit;
  background: linear-gradient(135deg, rgba(24, 70, 224, 0.4), rgba(255, 199, 44, 0.55) 50%, rgba(24, 70, 224, 0.28));
  -webkit-mask: linear-gradient(#0B1A4A 0 0) content-box, linear-gradient(#0B1A4A 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#0B1A4A 0 0) content-box exclude, linear-gradient(#0B1A4A 0 0);
  pointer-events: none;
}
.link-card__url { overflow-wrap: anywhere; }

input, textarea, [contenteditable] { caret-color: var(--blue); }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--blue); color: var(--text); }
.ui-empty, .ui-panel dd, .ui-panel td { overflow-wrap: anywhere; }

/* school dashboard: teachers join with the school code */
.sd-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 10px; padding: 14px 16px; border-radius: 16px; background: var(--butter); }
.sd-code__label { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.sd-code__value { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 800; letter-spacing: 0.06em; color: var(--navy); }
.sd-link { display: flex; gap: 8px; }
.sd-link .field-input { flex: 1; min-width: 0; font-size: 0.85rem; }
.sd-link .ui-btn { flex: none; }
.sd-meter { margin-top: 16px; }
.sd-meter__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-bottom: 8px; font-size: 0.88rem; color: var(--muted); }
.sd-meter__head strong { color: var(--text); }
.sd-meter__plan { font-weight: 700; color: var(--blue); }
.sd-meter__track { display: block; height: 10px; border-radius: 999px; background: var(--sky); overflow: hidden; }
.sd-meter__fill { display: block; height: 100%; border-radius: 999px; background: var(--blue); }
.sd-meter.is-full .sd-meter__fill { background: var(--yellow-deep); }
@media (max-width: 480px) { .sd-link { flex-direction: column; } }

/* why this learner or school has a special free trial */
.bl-banner__reason { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: var(--yellow); color: var(--navy); font-size: 0.8rem; font-weight: 800; }
.bl-trial-reason { display: inline-block; margin: 6px 0 4px; padding: 5px 14px; border-radius: 999px; background: var(--butter); color: var(--navy); font-weight: 800; font-size: 0.92rem; }

/* minimal pairs: a play button on each word */
.pair-word { position: relative; flex: 1; display: flex; }
.pair-word .pair-card__word { flex: 1; margin: 0; }
.pair-word.has-audio .pair-card__word { padding-right: 58px; }
.pair-word__play {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--yellow); color: var(--navy); font-size: 1.05rem;
  box-shadow: 0 3px 0 var(--yellow-deep);
}
.pair-word__play:active { transform: translateY(calc(-50% + 2px)); box-shadow: none; }
.pair-word.is-playing .pair-card__word { outline: 3px solid var(--blue); outline-offset: -3px; }
.pair-word.is-playing .pair-word__play { background: var(--blue); color: #fff; box-shadow: 0 3px 0 var(--blue-deep); }
.pair-play-both { margin-top: 12px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--sky); color: var(--blue); font: inherit; font-weight: 800; }
.pair-play-both:hover { background: #D6E3FF; }

/* Cards with a background picture from the control room (card_image on an
   EchoSpell level or group, or a 44 Academy / Tricks sound): the picture
   under a navy shade that deepens towards the words, which turn white. */
.es .es-level.has-bg, .es .es-group.has-bg, .ui-sound.has-bg {
  background: linear-gradient(180deg, rgba(11, 26, 74, 0.18) 0%, rgba(11, 26, 74, 0.55) 48%, rgba(11, 26, 74, 0.9) 100%),
              var(--card-bg) center / cover no-repeat;
  background-color: #0B1A4A;
  color: #fff;
}
.es .es-level.has-bg::before { color: rgba(255, 255, 255, 0.16); }
.es .es-level.has-bg .es-level__name, .es .es-group.has-bg .es-group__name, .ui-sound.has-bg .ui-sound__name {
  color: #fff; text-shadow: 0 2px 10px rgba(11, 26, 74, 0.6);
}
.es .es-level.has-bg .es-level__age { color: #FFC72C; }
.es .es-level.has-bg .es-level__desc, .es .es-level.has-bg .es-level__meta,
.es .es-group.has-bg .es-group__title, .es .es-group.has-bg .es-group__meta,
.ui-sound.has-bg .ui-sound__words, .ui-sound.has-bg .ui-sound__lock { color: rgba(255, 255, 255, 0.86); }
.es .es-level.has-bg .es-bar { background: rgba(255, 255, 255, 0.22); }
.es .es-level.has-bg .es-level__foot { position: relative; z-index: 2; }
.es .es-level.has-bg .es-level__top, .es .es-level.has-bg .es-level__name, .es .es-level.has-bg .es-level__age, .es .es-level.has-bg .es-level__desc { position: relative; z-index: 2; }
.es .es-group.has-bg { min-height: 170px; justify-content: flex-end; }
.ui-sound.has-bg { min-height: 150px; justify-content: flex-end; }
.ui-sound--current.has-bg { outline: 2px solid var(--yellow); }
.ui-sound--locked.has-bg { filter: grayscale(0.7); opacity: 0.8; }
.es .es-level.has-bg .es-status, .es .es-group.has-bg .es-status { color: #0B1A4A; background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 12px rgba(11, 26, 74, 0.25); }
.es .es-level.has-bg .es-status--current, .es .es-group.has-bg .es-status--current { background: #FFC72C; }
.ui-sound.has-bg .ui-sound__symbol { color: #FFC72C; text-shadow: 0 2px 10px rgba(11, 26, 74, 0.85), 0 0 2px rgba(11, 26, 74, 0.9); }