@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap");


:root {
  --teal: #0f4c5c;
  --teal-deep: #0b343d;
  --teal-soft: #d9eaeb;
  --sage: #8ba888;
  --sage-soft: #edf3ea;
  --gold: #e8b23d;
  --coral: #f26d5b;
  --cream: #faf6f0;
  --warm-gray: #f1efea;
  --forest-950: #102f35;
  --forest-900: #0f4c5c;
  --forest-800: #1f5661;
  --paper: #fffdf8;
  --ink: #18343b;
  --muted: #66767a;
  --line: #e8dfd1;
  --shadow-soft: 0 18px 50px rgba(15, 76, 92, 0.08);
  --shadow-card: 0 14px 34px rgba(15, 76, 92, 0.07);
  --radius-panel: 18px;
  --radius-card: 14px;
  --font-sans: "Manrope", "Inter", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Lora", "Libre Baskerville", "Cormorant Garamond", Georgia, serif;
  --reading-width: 68ch;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(250, 246, 240, 0.96), rgba(255, 253, 248, 0.98) 42%, rgba(250, 246, 240, 0.95)),
    var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.64;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid #c75c48;
  outline-offset: 3px;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: rgba(215, 166, 53, 0.25);
  color: var(--forest-950);
}

.topbar {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(255, 253, 248, 0.92);
  border-bottom: 1px solid rgba(232, 223, 209, 0.86);
  color: var(--forest-950);
  display: flex;
  gap: 28px;
  justify-content: space-between;
  min-height: 88px;
  padding: 14px clamp(20px, 4vw, 54px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  align-items: center;
  display: flex;
  gap: 14px;
  min-height: 64px;
}

.brandLogo {
  display: block;
  height: 68px;
  object-fit: contain;
  width: 168px;
}

.brand strong {
  color: var(--forest-950);
  font-weight: 700;
  white-space: nowrap;
}

.brand small {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  margin-top: 2px;
}

.nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
  max-width: 820px;
}

.navPrimary,
.navUtility {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nav a {
  border-radius: 10px;
  color: rgba(24, 52, 59, 0.72);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 8px 10px;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.nav a:hover {
  background: rgba(15, 76, 92, 0.07);
  color: var(--forest-950);
  transform: translateY(-1px);
}

.nav a.active,
.nav a[aria-current="page"] {
  background: var(--teal);
  box-shadow: 0 10px 24px rgba(15, 76, 92, 0.18);
  color: white;
}

.nav a.navCta {
  background: var(--teal);
  box-shadow: 0 12px 24px rgba(15, 76, 92, 0.18);
  color: white;
}

.userMenu {
  position: relative;
}

.userMenu summary {
  align-items: center;
  background: rgba(15, 76, 92, 0.07);
  border: 1px solid rgba(15, 76, 92, 0.12);
  border-radius: 12px;
  color: var(--forest-950);
  cursor: pointer;
  display: grid;
  line-height: 1.25;
  list-style: none;
  min-width: 142px;
  padding: 8px 12px;
}

.userMenu summary::-webkit-details-marker {
  display: none;
}

.userMenu summary span {
  font-size: 0.82rem;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.userMenu summary small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.userMenu[open] summary {
  background: var(--teal);
  color: white;
}

.userMenu[open] summary small {
  color: rgba(255, 255, 255, 0.76);
}

.userMenuPanel {
  background: rgba(255, 253, 248, 0.98);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 4px;
  min-width: 240px;
  padding: 10px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 40;
}

.userMenuIdentity {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 2px;
  margin-bottom: 4px;
  padding: 8px 10px 12px;
}

.userMenuIdentity strong {
  color: var(--forest-950);
  font-size: 0.92rem;
}

.userMenuIdentity span {
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.userMenu .userMenuPanel a,
.userMenuLogout {
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: rgba(24, 52, 59, 0.78);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 10px;
  text-align: left;
  transition: background 180ms ease, color 180ms ease;
}

.userMenu .userMenuPanel a:hover,
.userMenuLogout:hover {
  background: rgba(15, 76, 92, 0.07);
  color: var(--forest-950);
  transform: none;
}

.userMenuLogout {
  color: var(--coral);
}

.container {
  margin: 0 auto;
  max-width: 1160px;
  padding: 0 24px;
}

.hero {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(250, 246, 240, 0.95)),
    var(--cream);
  color: var(--forest-950);
  overflow: hidden;
  padding: 78px 0 74px;
  position: relative;
}

.hero::after {
  background: rgba(139, 168, 136, 0.72);
  border-radius: 55% 45% 0 0;
  bottom: -90px;
  content: "";
  height: 160px;
  position: absolute;
  right: -3vw;
  width: 42vw;
  z-index: 0;
}

.heroGrid,
.twoCol {
  display: grid;
  gap: clamp(26px, 5vw, 72px);
  grid-template-columns: minmax(0, 1fr) minmax(320px, 470px);
  position: relative;
  z-index: 1;
}

.eyebrow {
  color: var(--coral);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 12px;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(3rem, 6vw, 5.55rem);
  line-height: 0.98;
  margin: 14px 0;
}

h1 span {
  color: var(--coral);
}

h2 {
  color: var(--forest-950);
  font-size: clamp(1.9rem, 3.3vw, 2.9rem);
  line-height: 1.1;
  margin: 0;
}

h3 {
  font-size: 1.22rem;
  line-height: 1.25;
}

h4 {
  color: var(--forest-950);
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 18px 0 8px;
}

p {
  color: var(--muted);
  line-height: 1.75;
  margin: 12px 0 0;
  max-width: var(--reading-width);
}

small {
  line-height: 1.55;
}

.heroCopy p {
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 640px;
}

.heroPanel {
  align-self: center;
  background: rgba(255, 255, 255, 0.96);
}

.heroPanel p {
  color: var(--muted);
}

.heroPanel .metaList {
  margin-top: 24px;
}

.heroVisual {
  align-self: center;
  display: grid;
  gap: 16px;
  position: relative;
}

.heroImage {
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(180deg, rgba(15, 76, 92, 0.03), rgba(15, 76, 92, 0.09)),
    url("/academy-montessori-classroom.png") center / cover;
  border: 1px solid rgba(232, 223, 209, 0.92);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-soft);
  min-height: 280px;
}

.heroStats {
  bottom: -28px;
  max-width: 320px;
  position: absolute;
  right: 22px;
}

.featureStrip {
  background: rgba(255, 253, 248, 0.82);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  padding: 28px 0;
}

.featureGrid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.featureItem {
  text-align: center;
}

.featureIcon {
  color: var(--sage);
  display: block;
  font-size: 1.65rem;
  line-height: 1;
  margin-bottom: 10px;
}

.featureItem h3 {
  color: var(--forest-950);
  font-size: 1.04rem;
  margin: 0;
}

.featureItem p {
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 8px auto 0;
  max-width: 220px;
}

.dashboardPage {
  padding: 38px 0 64px;
}

.dashboardHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.9) 52%, rgba(15, 76, 92, 0.08) 100%),
    url("/academy-montessori-classroom.png") right center / min(44vw, 520px) auto no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) 320px;
  min-height: 390px;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
  position: relative;
}

.dashboardHero::after {
  background: rgba(139, 168, 136, 0.18);
  border-radius: 50% 0 0 0;
  bottom: -44px;
  content: "";
  height: 120px;
  position: absolute;
  right: -28px;
  width: 240px;
}

.dashboardHeroCopy {
  align-self: center;
  position: relative;
  z-index: 1;
}

.dashboardHeroCopy h2 {
  font-size: clamp(2.6rem, 5vw, 4.7rem);
  max-width: 760px;
}

.dashboardHeroCopy p {
  font-size: 1.03rem;
  max-width: 620px;
}

.dashboardHeroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.dashboardHeroPanel {
  align-self: center;
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid rgba(232, 223, 209, 0.92);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
  position: relative;
  z-index: 1;
}

.dashboardHeroPanel > strong {
  color: var(--forest-950);
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(3.1rem, 6vw, 4.6rem);
  font-weight: 600;
  line-height: 1;
  margin-top: 18px;
}

.dashboardHeroPanel p {
  margin-bottom: 14px;
}

.dashboardMetrics {
  margin-top: 22px;
}

.dashboardMetrics .metric {
  background: rgba(255, 253, 248, 0.88);
}

.libraryPage {
  padding: 38px 0 64px;
}

.libraryHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.9) 58%, rgba(139, 168, 136, 0.15)),
    url("/academy-montessori-classroom.png") right center / min(42vw, 520px) auto no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) 300px;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
}

.libraryHeroCopy h2 {
  font-size: clamp(2.35rem, 4.7vw, 4.4rem);
  max-width: 820px;
}

.libraryHeroCopy p {
  font-size: 1.03rem;
  max-width: 650px;
}

.librarySearch {
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-top: 26px;
  max-width: 680px;
  padding: 14px;
}

.librarySearch label {
  color: var(--forest-950);
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.librarySearch div {
  display: flex;
  gap: 10px;
}

.librarySearch input {
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  flex: 1;
  font: inherit;
  min-height: 42px;
  padding: 10px 12px;
}

.libraryHeroPanel {
  align-self: center;
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid rgba(232, 223, 209, 0.92);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.libraryHeroPanel > strong {
  color: var(--forest-950);
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(3.1rem, 6vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  margin-top: 18px;
}

.libraryCollections {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.libraryCollection {
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(250, 246, 240, 0.9));
}

.libraryMiniList {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.libraryMiniItem {
  border-left: 3px solid var(--sage);
  padding-left: 12px;
}

.libraryMiniItem span,
.libraryMiniItem small {
  color: var(--muted);
  display: block;
  font-size: 0.86rem;
}

.libraryMiniItem strong {
  color: var(--forest-950);
  display: block;
  font-family: var(--font-serif);
  font-size: 1.06rem;
  font-weight: 600;
  margin: 2px 0;
}

.libraryExplorer {
  background: rgba(255, 253, 248, 0.86);
}

.libraryCatalog {
  padding-top: 12px;
}

.libraryCard {
  overflow: hidden;
  padding: 0;
}

.libraryCover {
  background:
    linear-gradient(135deg, rgba(15, 76, 92, 0.92), rgba(139, 168, 136, 0.86)),
    url("/academy-montessori-classroom.png") center / cover;
  color: white;
  min-height: 164px;
  padding: 20px;
}

.libraryCover span {
  color: rgba(255, 253, 248, 0.78);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.libraryCover strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  margin-top: 40px;
  max-width: 260px;
}

.libraryCardBody {
  padding: 20px;
}

.librarySourceDetails {
  background: rgba(15, 76, 92, 0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-top: 16px;
  padding: 12px 14px;
}

.librarySourceDetails summary {
  color: var(--forest-900);
  cursor: pointer;
  font-weight: 700;
}

.librarySourceDetails p {
  font-size: 0.88rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.programPage {
  padding: 38px 0 64px;
}

.programHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.9) 56%, rgba(15, 76, 92, 0.1)),
    url("/academy-montessori-classroom.png") right center / min(42vw, 520px) auto no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) 310px;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
}

.programHeroCopy h2 {
  font-size: clamp(2.55rem, 5vw, 4.7rem);
  max-width: 780px;
}

.programHeroCopy p {
  font-size: 1.05rem;
  max-width: 650px;
}

.programHeroPanel {
  align-self: center;
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid rgba(232, 223, 209, 0.92);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.programHeroPanel > strong {
  color: var(--forest-950);
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  margin-top: 18px;
}

.programHeroPanel p {
  margin-bottom: 14px;
}

.programMetrics {
  margin-top: 22px;
}

.programMetrics .metric {
  background: rgba(255, 253, 248, 0.88);
}

.programRoutePanel {
  background:
    linear-gradient(145deg, rgba(255, 253, 248, 0.96), rgba(250, 246, 240, 0.9));
}

.programRoutePanel .progressTrack {
  height: 10px;
  margin-top: 24px;
}

.academicHierarchyPanel {
  align-self: stretch;
  background:
    linear-gradient(145deg, rgba(255, 253, 248, 0.96), rgba(250, 246, 240, 0.92));
}

.academicHierarchyPanel > p {
  font-size: 0.95rem;
  line-height: 1.65;
}

.academicHierarchy {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.academicHierarchyItem {
  align-items: flex-start;
  background: rgba(255, 253, 248, 0.78);
  border: 1px solid rgba(232, 223, 209, 0.86);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: 46px minmax(0, 1fr);
  padding: 13px;
  position: relative;
}

.academicHierarchyItem::before {
  background: var(--sage);
  bottom: -13px;
  content: "";
  left: 35px;
  opacity: 0.42;
  position: absolute;
  top: 46px;
  width: 1px;
}

.academicHierarchyItem:last-child::before {
  display: none;
}

.academicHierarchyItem > span {
  background: var(--teal);
  border-radius: 999px;
  color: white;
  display: grid;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  height: 46px;
  place-items: center;
  width: 46px;
}

.academicHierarchyItem strong {
  color: var(--forest-950);
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 2px;
}

.academicHierarchyItem small {
  color: var(--muted);
  display: block;
  font-size: 0.86rem;
  line-height: 1.55;
  margin-top: 5px;
}

.programMapPanel {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(250, 246, 240, 0.88));
}

.programMapGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.programMapItem {
  background: rgba(255, 253, 248, 0.78);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  min-height: 210px;
  padding: 16px;
}

.programMapTopline {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.programMapTopline span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.programMapTopline strong {
  color: var(--coral);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1;
}

.programMapItem h3 {
  color: var(--forest-950);
  font-size: 1.05rem;
  margin: 0;
}

.programMapItem p {
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 0;
}

.programMapItem .button {
  align-self: end;
  justify-self: start;
}

.programAcademyCatalog .grid {
  margin-top: 20px;
}

.academyPage {
  padding: 38px 0 64px;
}

.academyHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.9) 56%, rgba(15, 76, 92, 0.1)),
    url("/academy-montessori-classroom.png") right center / min(42vw, 520px) auto no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) 310px;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
}

.academyHeroCopy h2 {
  font-size: clamp(2.55rem, 5vw, 4.7rem);
  max-width: 780px;
}

.academyHeroCopy p {
  font-size: 1.05rem;
  max-width: 650px;
}

.academyHeroPanel {
  align-self: center;
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid rgba(232, 223, 209, 0.92);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.academyHeroPanel > strong {
  color: var(--forest-950);
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  margin-top: 18px;
}

.academyHeroPanel p {
  margin-bottom: 14px;
}

.academyMetrics {
  margin-top: 22px;
}

.academyMetrics .metric {
  background: rgba(255, 253, 248, 0.88);
}

.academyNextPanel,
.academySidePanel,
.academyLessonsPanel {
  background:
    linear-gradient(145deg, rgba(255, 253, 248, 0.96), rgba(250, 246, 240, 0.9));
}

.academyNextPanel .progressTrack {
  height: 10px;
  margin-top: 24px;
}

.academyLessonGrid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.academyLessonCard {
  min-height: 270px;
  overflow: hidden;
  position: relative;
}

.academyLessonCard::after {
  background: rgba(139, 168, 136, 0.12);
  border-radius: 50%;
  content: "";
  height: 130px;
  position: absolute;
  right: -54px;
  top: -58px;
  width: 130px;
}

.academyLessonNumber {
  color: rgba(15, 76, 92, 0.12);
  font-family: var(--font-serif);
  font-size: 4.2rem;
  font-weight: 600;
  line-height: 0.85;
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 0;
}

.academyLessonCard > *:not(.academyLessonNumber) {
  position: relative;
  z-index: 1;
}

.academyLessonCard h3 {
  font-size: 1.28rem;
  max-width: 82%;
}

.academySidePanel .timeline {
  grid-template-columns: 1fr;
}

.section {
  padding: 64px 0;
}

.sectionHeader {
  align-items: end;
  display: flex;
  gap: 22px;
  justify-content: space-between;
  margin-bottom: 24px;
}

.spacedTop {
  margin-top: 22px;
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metrics {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.compactMetrics {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 18px 0 8px;
}

.card,
.panel,
.metric {
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px;
}

.card p,
.panel p,
.heroPanel p {
  max-width: none;
}

.card h3,
.panel h3 {
  color: var(--forest-950);
  margin: 12px 0 8px;
}

.legalStack {
  display: grid;
  gap: 22px;
  max-width: 920px;
}

.legalBlock {
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}

.legalBlock:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.legalBlock h3 {
  font-size: clamp(1.32rem, 2.8vw, 1.82rem);
  margin-top: 0;
}

.legalBlock p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.78;
}

.legalPage {
  padding: 38px 0 68px;
}

.legalHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 50%, rgba(255, 253, 248, 0.58) 100%),
    url("/academy-montessori-classroom.png") right center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.legalHero::after {
  background: rgba(139, 168, 136, 0.24);
  border-radius: 999px 999px 0 0;
  bottom: -44px;
  content: "";
  height: 104px;
  position: absolute;
  right: -26px;
  width: 330px;
}

.legalHero h2 {
  max-width: 760px;
}

.legalHero p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 720px;
}

.legalHeroPanel {
  align-self: center;
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.legalHeroPanel strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
}

.legalHeroPanel p {
  font-size: 0.96rem;
  margin: 0;
}

.legalDocumentPanel {
  background: rgba(255, 253, 250, 0.94);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 5vw, 42px);
}

.legalActions {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.adminPage {
  padding: 38px 0 68px;
}

.adminHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 50%, rgba(255, 253, 248, 0.58) 100%),
    url("/academy-montessori-classroom.png") right center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.adminHero::after {
  background: rgba(139, 168, 136, 0.24);
  border-radius: 999px 999px 0 0;
  bottom: -44px;
  content: "";
  height: 104px;
  position: absolute;
  right: -26px;
  width: 330px;
}

.adminHero h2 {
  max-width: 760px;
}

.adminHero p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 760px;
}

.adminHeroPanel {
  align-self: center;
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.adminHeroPanel strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  font-weight: 500;
  line-height: 0.95;
}

.adminHeroPanel p {
  font-size: 0.96rem;
  margin: 0;
}

.adminWorkspaceHeader {
  align-items: center;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  padding: clamp(26px, 4vw, 42px);
}

.adminWorkspaceHeader h2 {
  margin-bottom: 10px;
}

.adminWorkspaceHeader p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.72;
  margin: 0;
  max-width: 760px;
}

.adminWorkspaceMeta {
  background: rgba(250, 246, 240, 0.72);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px;
}

.adminWorkspaceMeta div {
  align-items: baseline;
  border-bottom: 1px solid rgba(15, 76, 92, 0.1);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding-bottom: 10px;
}

.adminWorkspaceMeta div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.adminWorkspaceMeta dt {
  color: var(--muted);
}

.adminWorkspaceMeta dd {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  text-align: right;
}

.adminWorkspaceTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
}

.adminWorkspaceTab {
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--forest-900);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 11px 15px;
}

.adminWorkspaceTab:hover,
.adminWorkspaceTab.active {
  background: var(--forest-900);
  box-shadow: var(--shadow-card);
  color: #fff;
}

.adminWorkspaceIntro {
  align-items: center;
  background: rgba(255, 253, 250, 0.82);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 24px;
}

.adminWorkspaceIntro h3 {
  margin: 12px 0 8px;
}

.adminWorkspaceIntro p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  max-width: 780px;
}

.adminWorkspaceQueue {
  background: rgba(139, 168, 136, 0.16);
  border: 1px solid rgba(139, 168, 136, 0.28);
  border-radius: 14px;
  min-width: 170px;
  padding: 18px;
  text-align: center;
}

.adminWorkspaceQueue strong {
  color: var(--forest-950);
  display: block;
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
}

.adminWorkspaceQueue span {
  color: var(--muted);
  display: block;
  font-size: 0.9rem;
  margin-top: 8px;
}

.adminMetrics .metric {
  background: rgba(255, 253, 250, 0.9);
}

.adminExecutivePage {
  padding: 38px 0 68px;
}

.adminExecutiveHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 50%, rgba(255, 253, 248, 0.58) 100%),
    url("/academy-montessori-classroom.png") right center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  margin-top: 18px;
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.adminExecutiveHero::after {
  background: rgba(139, 168, 136, 0.24);
  border-radius: 999px 999px 0 0;
  bottom: -44px;
  content: "";
  height: 104px;
  position: absolute;
  right: -26px;
  width: 330px;
}

.adminExecutiveHero h2 {
  max-width: 760px;
}

.adminExecutiveHero p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 760px;
}

.adminExecutiveHeroPanel {
  align-self: center;
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.adminExecutiveHeroPanel strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  font-weight: 500;
  line-height: 0.95;
}

.adminExecutiveHeroPanel p {
  font-size: 0.96rem;
  margin: 0;
}

.adminExecutiveHealthPanel,
.adminExecutiveRiskPanel,
.adminExecutiveRecommendationPanel {
  background: rgba(255, 253, 250, 0.92);
  box-shadow: var(--shadow-card);
}

.adminExecutiveMetric {
  background: rgba(250, 247, 239, 0.74);
}

.adminExecutiveCard {
  background: rgba(255, 253, 250, 0.88);
  border-radius: var(--radius-card);
  box-shadow: 0 14px 34px rgba(16, 47, 53, 0.05);
}

.adminExecutiveCard h4 {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(1.22rem, 2.4vw, 1.58rem);
  margin: 10px 0 6px;
}

.adminNotificationsPage {
  padding: 38px 0 68px;
}

.adminNotificationsHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 50%, rgba(255, 253, 248, 0.58) 100%),
    url("/academy-montessori-classroom.png") right center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  margin-top: 18px;
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.adminNotificationsHero::after {
  background: rgba(139, 168, 136, 0.24);
  border-radius: 999px 999px 0 0;
  bottom: -44px;
  content: "";
  height: 104px;
  position: absolute;
  right: -26px;
  width: 330px;
}

.adminNotificationsHero h2 {
  max-width: 760px;
}

.adminNotificationsHero p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 760px;
}

.adminNotificationsHeroPanel {
  align-self: center;
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.adminNotificationsHeroPanel strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  font-weight: 500;
  line-height: 0.95;
}

.adminNotificationsHeroPanel p {
  font-size: 0.96rem;
  margin: 0;
}

.adminNotificationsMetrics .metric,
.adminNotificationsInbox {
  background: rgba(255, 253, 250, 0.92);
  box-shadow: var(--shadow-card);
}

.adminNotificationCard {
  background: rgba(255, 253, 250, 0.88);
  border-radius: var(--radius-card);
  box-shadow: 0 14px 34px rgba(16, 47, 53, 0.05);
}

.adminNotificationCard h4 {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.4vw, 1.56rem);
  margin: 10px 0 6px;
}

.adminSupportPage {
  padding: 38px 0 68px;
}

.adminSupportHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 50%, rgba(255, 253, 248, 0.58) 100%),
    url("/academy-montessori-classroom.png") right center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  margin-top: 18px;
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.adminSupportHero::after {
  background: rgba(139, 168, 136, 0.24);
  border-radius: 999px 999px 0 0;
  bottom: -44px;
  content: "";
  height: 104px;
  position: absolute;
  right: -26px;
  width: 330px;
}

.adminSupportHero h2 {
  max-width: 760px;
}

.adminSupportHero p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 760px;
}

.adminSupportHeroPanel {
  align-self: center;
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.adminSupportHeroPanel strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  font-weight: 500;
  line-height: 0.95;
}

.adminSupportHeroPanel p {
  font-size: 0.96rem;
  margin: 0;
}

.adminSupportMetrics .metric,
.adminSupportFilters,
.adminSupportHistory {
  background: rgba(255, 253, 250, 0.92);
  box-shadow: var(--shadow-card);
}

.adminStudentPage {
  padding: 38px 0 68px;
}

.adminStudentHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 50%, rgba(255, 253, 248, 0.58) 100%),
    url("/academy-montessori-classroom.png") right center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  margin-top: 18px;
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.adminStudentHero::after {
  background: rgba(139, 168, 136, 0.24);
  border-radius: 999px 999px 0 0;
  bottom: -44px;
  content: "";
  height: 104px;
  position: absolute;
  right: -26px;
  width: 330px;
}

.adminStudentHero h2 {
  max-width: 760px;
}

.adminStudentHero p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 760px;
}

.adminStudentHeroPanel {
  align-self: center;
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.adminStudentHeroPanel strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  font-weight: 500;
  line-height: 0.95;
}

.adminStudentHeroPanel p {
  font-size: 0.96rem;
  margin: 0;
}

.adminStudentHeroPanel .metaList {
  background: rgba(250, 247, 239, 0.72);
  border: 1px solid rgba(221, 213, 195, 0.78);
  border-radius: var(--radius-card);
  padding: 16px;
}

.adminStudentMetrics .metric,
.adminStudentSnapshot {
  background: rgba(255, 253, 250, 0.92);
  box-shadow: var(--shadow-card);
}

.adminStudentSnapshot .metaList {
  background: rgba(250, 247, 239, 0.58);
  border: 1px solid rgba(221, 213, 195, 0.74);
  border-radius: var(--radius-card);
  padding: 18px;
}

.adminTaskPage {
  padding: 38px 0 68px;
}

.adminTaskHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 50%, rgba(255, 253, 248, 0.58) 100%),
    url("/academy-montessori-classroom.png") right center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  margin-top: 18px;
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.adminTaskHero::after {
  background: rgba(139, 168, 136, 0.24);
  border-radius: 999px 999px 0 0;
  bottom: -44px;
  content: "";
  height: 104px;
  position: absolute;
  right: -26px;
  width: 330px;
}

.adminTaskHero h2 {
  max-width: 780px;
}

.adminTaskHero p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 780px;
}

.adminTaskHeroPanel {
  align-self: center;
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.adminTaskHeroPanel strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 500;
  line-height: 0.95;
}

.adminTaskHeroPanel p {
  font-size: 0.96rem;
  margin: 0;
}

.adminTaskHeroPanel .metaList {
  background: rgba(250, 247, 239, 0.72);
  border: 1px solid rgba(221, 213, 195, 0.78);
  border-radius: var(--radius-card);
  padding: 16px;
}

.adminTaskSnapshot,
.adminTaskMetrics .metric {
  background: rgba(255, 253, 250, 0.92);
  box-shadow: var(--shadow-card);
}

.adminTaskSnapshot .metaList {
  background: rgba(250, 247, 239, 0.58);
  border: 1px solid rgba(221, 213, 195, 0.74);
  border-radius: var(--radius-card);
  padding: 18px;
}

.adminReportsConsole {
  background:
    linear-gradient(135deg, rgba(255, 253, 250, 0.96), rgba(250, 247, 239, 0.86));
  box-shadow: var(--shadow-card);
}

.adminReportGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.adminReportCard {
  background: rgba(255, 253, 250, 0.9);
  border: 1px solid rgba(221, 213, 195, 0.78);
  border-radius: var(--radius-card);
  box-shadow: 0 14px 34px rgba(16, 47, 53, 0.05);
  color: inherit;
  display: grid;
  gap: 9px;
  min-height: 150px;
  padding: 18px;
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.adminReportCard:hover {
  border-color: rgba(242, 109, 91, 0.46);
  box-shadow: 0 18px 42px rgba(16, 47, 53, 0.08);
  transform: translateY(-2px);
}

.adminReportCard span {
  align-self: start;
  background: rgba(238, 178, 61, 0.18);
  border-radius: 999px;
  color: #805a13;
  font-size: 0.76rem;
  font-weight: 700;
  justify-self: start;
  padding: 4px 9px;
}

.adminReportCard strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(1.24rem, 2.3vw, 1.58rem);
  font-weight: 500;
  line-height: 1.08;
}

.adminReportCard p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.pill {
  background: var(--teal-soft);
  border-radius: 999px;
  color: var(--forest-900);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 650;
  padding: 4px 9px;
}

.pill.gold {
  background: rgba(232, 178, 61, 0.2);
  color: #765812;
}

.pill.danger {
  background: #fdefeb;
  color: #8a3425;
}

.button {
  align-items: center;
  border: 0;
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 650;
  justify-content: center;
  margin-top: 18px;
  min-height: 42px;
  padding: 11px 18px;
  text-align: center;
  text-decoration: none;
  transition: background 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button.primary {
  background: var(--teal);
  box-shadow: 0 12px 24px rgba(15, 76, 92, 0.18);
  color: white;
}

.button.secondary {
  background: rgba(255, 253, 248, 0.78);
  border: 1px solid var(--line);
  color: var(--forest-900);
}

.button.ghost {
  background: rgba(15, 76, 92, 0.06);
  border: 1px solid rgba(15, 76, 92, 0.12);
  color: var(--forest-900);
}

.button.ghost:hover {
  background: rgba(15, 76, 92, 0.1);
}

.textLink {
  color: var(--coral);
  font-size: 0.9rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.textLink::after {
  content: " ->";
}

.button.disabled {
  background: #eee7d9;
  color: var(--muted);
  cursor: not-allowed;
}

.button.compact {
  font-size: 0.8rem;
  margin-top: 0;
  min-height: 34px;
  padding: 7px 10px;
}

.button.isLoading {
  cursor: wait;
  opacity: 0.78;
}

.button.isLoading::after {
  animation: pulseDot 900ms ease-in-out infinite;
  background: currentColor;
  border-radius: 999px;
  content: "";
  display: inline-block;
  height: 6px;
  margin-left: 8px;
  width: 6px;
}

@keyframes pulseDot {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.82);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.metaList {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
}

.metaList div {
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding-bottom: 8px;
}

.academyCard {
  overflow: hidden;
  padding: 0;
}

.academyCardBody {
  padding: 20px;
}

.cardMedia {
  aspect-ratio: 16 / 9;
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid var(--line);
  filter: saturate(0.96);
  min-height: 160px;
  position: relative;
}

.cardMedia::after {
  background: linear-gradient(180deg, rgba(15, 76, 92, 0), rgba(15, 76, 92, 0.12));
  content: "";
  inset: 0;
  position: absolute;
}

.academyCardWaldorf .cardMedia::after {
  background: linear-gradient(180deg, rgba(183, 122, 74, 0.02), rgba(183, 122, 74, 0.2));
}

.academyCardLev .cardMedia::after {
  background: linear-gradient(180deg, rgba(59, 115, 101, 0.02), rgba(15, 76, 92, 0.2));
}

.programRouteCatalogGroup + .programRouteCatalogGroup {
  border-top: 1px solid var(--line);
  margin-top: 34px;
  padding-top: 34px;
}

.cardTopline {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.cardTopline .muted {
  font-size: 0.78rem;
  font-weight: 650;
  text-align: right;
}

.metaList dt,
.muted {
  color: var(--muted);
}

.metaList dd {
  color: var(--forest-950);
  font-weight: 650;
  margin: 0;
}

.price {
  color: var(--forest-950);
  display: block;
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 600;
  margin-top: 16px;
}

.metric strong {
  color: var(--forest-950);
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
}

.demoBanner {
  background: rgba(215, 166, 53, 0.18);
  border-bottom: 1px solid rgba(215, 166, 53, 0.42);
  color: #765812;
  font-weight: 650;
  padding: 10px 24px;
  text-align: center;
}

.lockedState {
  max-width: 760px;
}

.field {
  color: var(--forest-950);
  display: grid;
  font-weight: 650;
  gap: 8px;
  margin-top: 14px;
}

.input {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
}

.legalConsent {
  align-items: flex-start;
  background: rgba(251, 247, 237, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  gap: 10px;
  line-height: 1.55;
  margin-top: 20px;
  padding: 14px;
}

.legalConsent input {
  margin-top: 4px;
}

.legalConsent a {
  color: var(--forest-900);
  font-weight: 650;
}

.supportForm {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.supportForm label {
  color: var(--forest-950);
  font-weight: 650;
}

.supportForm textarea {
  resize: vertical;
}

.supportPage {
  padding: 38px 0 68px;
}

.supportHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 50%, rgba(255, 253, 248, 0.58) 100%),
    url("/academy-montessori-classroom.png") right center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.supportHero::after {
  background: rgba(139, 168, 136, 0.24);
  border-radius: 999px 999px 0 0;
  bottom: -44px;
  content: "";
  height: 104px;
  position: absolute;
  right: -26px;
  width: 330px;
}

.supportHero h2 {
  max-width: 760px;
}

.supportHero p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 720px;
}

.supportHeroPanel {
  align-self: center;
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.supportHeroPanel strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 500;
  line-height: 0.95;
}

.supportHeroPanel p {
  font-size: 0.96rem;
  margin: 0;
}

.loginPage {
  padding: 38px 0 68px;
}

.loginHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 50%, rgba(255, 253, 248, 0.58) 100%),
    url("/academy-montessori-classroom.png") right center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.loginHero::after {
  background: rgba(139, 168, 136, 0.24);
  border-radius: 999px 999px 0 0;
  bottom: -44px;
  content: "";
  height: 104px;
  position: absolute;
  right: -26px;
  width: 330px;
}

.loginHero h2 {
  max-width: 760px;
}

.loginHero p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 720px;
}

.loginHeroPanel {
  align-self: center;
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.loginHeroPanel strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 8vw, 5rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.95;
}

.loginHeroPanel p {
  font-size: 0.96rem;
  margin: 0;
}

.authPanel,
.loginAccessPanel {
  background: rgba(255, 253, 250, 0.92);
  box-shadow: var(--shadow-card);
}

.authPanel h2,
.loginAccessPanel h3 {
  font-size: clamp(1.6rem, 4vw, 2.35rem);
}

.authPanel p,
.loginAccessPanel p {
  color: var(--muted);
  line-height: 1.68;
}

.authPanel .input {
  background: rgba(255, 253, 250, 0.94);
}

.loginForm {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.authPanelActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}

.forgotPasswordLink {
  color: var(--forest-800);
  font-weight: 700;
  text-decoration: none;
}

.forgotPasswordLink:hover {
  color: var(--coral);
}

.demoProfilePanel {
  background: rgba(255, 253, 250, 0.9);
}

.demoProfileGrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.demoProfileCard {
  background: rgba(250, 246, 240, 0.72);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 6px;
  padding: 16px;
  transition: border 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.demoProfileCard:hover {
  border-color: rgba(15, 76, 92, 0.24);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.demoProfileCard strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.2;
}

.demoProfileCard span,
.demoProfileCard small {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.pricingPage,
.checkoutPage {
  padding: 38px 0 68px;
}

.pricingHero,
.checkoutHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 50%, rgba(255, 253, 248, 0.58) 100%),
    url("/academy-montessori-classroom.png") right center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.pricingHero::after,
.checkoutHero::after {
  background: rgba(139, 168, 136, 0.24);
  border-radius: 999px 999px 0 0;
  bottom: -44px;
  content: "";
  height: 104px;
  position: absolute;
  right: -26px;
  width: 330px;
}

.pricingHero h2,
.checkoutHero h2 {
  max-width: 760px;
}

.pricingHero p,
.checkoutHero p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 720px;
}

.pricingHeroPanel,
.checkoutHeroPanel {
  align-self: center;
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.pricingHeroPanel strong,
.checkoutHeroPanel strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  font-weight: 500;
  line-height: 0.95;
}

.pricingHeroPanel p,
.checkoutHeroPanel p {
  font-size: 0.96rem;
  margin: 0;
}

.pricingTrustGrid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricingTrustGrid div {
  background: rgba(255, 253, 250, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 30px rgba(16, 47, 53, 0.04);
  padding: 18px;
}

.pricingTrustGrid strong {
  color: var(--forest-950);
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
}

.pricingTrustGrid span {
  color: var(--muted);
  font-weight: 650;
}

.pricingGrid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planCard {
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 40px rgba(16, 47, 53, 0.06);
  display: grid;
  gap: 14px;
  padding: 24px;
}

.featuredPlanCard {
  border-color: rgba(232, 178, 61, 0.62);
  box-shadow: 0 22px 58px rgba(16, 47, 53, 0.11);
  position: relative;
}

.featuredPlanCard::before {
  background: rgba(232, 178, 61, 0.22);
  border-radius: 999px;
  color: #8b651f;
  content: "Recomendado";
  font-size: 0.72rem;
  font-weight: 800;
  padding: 7px 10px;
  position: absolute;
  right: 18px;
  text-transform: uppercase;
  top: 18px;
}

.pricingAssurance,
.checkoutProcessPanel,
.checkoutSummaryPanel {
  background: rgba(255, 253, 250, 0.92);
  box-shadow: var(--shadow-card);
}

.pricingAssurance h3,
.checkoutProcessPanel h3,
.checkoutSummaryPanel h3 {
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.pricingAssurance p,
.checkoutProcessPanel p,
.checkoutSummaryPanel p {
  color: var(--muted);
  line-height: 1.68;
}

.couponForm {
  background: rgba(250, 247, 239, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding: 16px;
}

.couponForm label,
.couponEditorForm label,
.couponPlanPicker legend {
  color: var(--forest-950);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.couponInputRow {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.couponInputRow input,
.couponEditorForm input,
.couponEditorForm select,
.couponEditorForm textarea {
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--forest-950);
  font: inherit;
  min-height: 42px;
  padding: 10px 12px;
  width: 100%;
}

.couponEditorForm textarea {
  min-height: 92px;
  resize: vertical;
}

.formHint {
  font-size: 0.88rem;
  margin: 0;
}

.errorText {
  color: #9a3c2d !important;
}

.successText {
  color: #2f785f !important;
}

.checkoutTotals {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding-top: 16px;
}

.checkoutTotals div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.checkoutTotals dt {
  color: var(--muted);
  font-size: 0.88rem;
}

.checkoutTotals dd {
  color: var(--forest-950);
  font-weight: 750;
  margin: 0;
}

.checkoutTotals .total {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 12px;
}

.checkoutTotals .total dt,
.checkoutTotals .total dd {
  color: var(--forest-950);
  font-size: 1rem;
}

.couponAdminPanel {
  background: rgba(255, 253, 250, 0.92);
}

.couponEditorForm {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
}

.couponEditorForm label {
  display: grid;
  gap: 7px;
}

.couponEditorForm .wideField,
.couponPlanPicker {
  grid-column: 1 / -1;
}

.couponPlanPicker {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 14px;
}

.couponPlanPicker label {
  align-items: center;
  display: inline-flex;
  font-size: 0.86rem;
  gap: 7px;
  text-transform: none;
}

.couponGrid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.couponCard {
  display: grid;
  gap: 16px;
}

.couponCardHeader {
  align-items: start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.couponCardHeader h3 {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.couponCardHeader strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.couponMeta {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding-top: 14px;
}

.couponMeta dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  text-transform: uppercase;
}

.couponMeta dd {
  color: var(--forest-950);
  font-weight: 700;
  margin: 2px 0 0;
}

.couponDetails {
  background: rgba(250, 247, 239, 0.64);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.couponDetails summary {
  color: var(--forest-950);
  cursor: pointer;
  font-weight: 800;
}

.compactButton {
  min-height: 38px;
  padding: 9px 14px;
}

.supportRequestPanel,
.supportGuidePanel,
.supportCasePanel {
  background: rgba(255, 253, 250, 0.92);
  box-shadow: var(--shadow-card);
}

.supportRequestPanel h3,
.supportGuidePanel h3,
.supportCasePanel h3 {
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.supportRequestPanel p,
.supportGuidePanel p,
.supportCasePanel p {
  color: var(--muted);
  line-height: 1.68;
}

.supportRequestPanel .input {
  background: rgba(255, 253, 250, 0.92);
}

.supportCasePanel {
  grid-column: 1 / -1;
  margin-top: 24px;
}

.supportCaseList {
  display: grid;
  gap: 16px;
}

.supportCase {
  background: rgba(255, 253, 250, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 40px rgba(16, 47, 53, 0.05);
  display: grid;
  gap: 12px;
  padding: 20px;
}

.supportCase h4 {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  margin: 8px 0 0;
}

.supportReplyForm {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
  padding-top: 12px;
}

.supportReplyForm label {
  color: var(--forest-950);
  font-weight: 650;
}

.supportReplyForm textarea {
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--forest-950);
  font: inherit;
  padding: 10px 11px;
  resize: vertical;
}

.notice {
  background: #edf6f3;
  border: 1px solid #c8e2da;
  border-radius: 8px;
  color: var(--forest-900);
  font-weight: 600;
  margin: 18px 0;
  padding: 14px;
}

.cp5PaymentLinksNotice p {
  color: var(--ink);
}

.notice.danger {
  background: #fdefeb;
  border-color: rgba(233, 121, 98, 0.42);
  color: #8a3425;
}

.launchGate {
  align-items: center;
  background: linear-gradient(135deg, rgba(16, 47, 53, 0.98), rgba(31, 86, 97, 0.92));
  color: white;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin: 24px 0 18px;
}

.launchGate h3,
.launchGate p {
  color: white;
}

.launchGate p {
  color: rgba(255, 255, 255, 0.76);
}

.readyGate {
  background: linear-gradient(135deg, rgba(16, 47, 53, 0.98), rgba(92, 116, 46, 0.92));
}

.launchGauge {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  min-width: 190px;
  padding: 18px;
  text-align: right;
}

.launchGauge strong,
.launchGauge span {
  display: block;
}

.launchGauge strong {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
}

.launchGauge span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
  margin-top: 8px;
}

.launchNotice {
  margin-top: 0;
}

.buttonRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.setupList {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.setupItem {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 12px 120px minmax(0, 1fr) 90px;
  padding: 10px 0;
}

.setupItem em {
  color: var(--muted);
  font-style: normal;
  font-weight: 650;
  text-align: right;
}

.statusDot {
  background: var(--coral);
  border-radius: 999px;
  height: 10px;
  width: 10px;
}

.statusDot.ready {
  background: #2f9a6b;
}

.sourceItem {
  grid-template-columns: 12px 220px minmax(0, 1fr) 90px;
}

.launchItem {
  grid-template-columns: 12px 150px minmax(0, 1fr) 90px;
}

.commandList {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.commandItem {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 0.82fr) minmax(280px, 1.18fr);
  padding: 14px;
}

.commandItem strong,
.commandItem span {
  display: block;
}

.commandItem span {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 3px;
}

.commandItem code {
  background: #f7f1e5;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--forest-950);
  display: block;
  font-size: 0.82rem;
  overflow-x: auto;
  padding: 10px;
  white-space: nowrap;
}

.configPage,
.migrationPage {
  padding: 38px 0 68px;
}

.configHero,
.migrationHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 50%, rgba(255, 253, 248, 0.58) 100%),
    url("/academy-montessori-classroom.png") right center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.configHero::after,
.migrationHero::after {
  background: rgba(139, 168, 136, 0.24);
  border-radius: 999px 999px 0 0;
  bottom: -44px;
  content: "";
  height: 104px;
  position: absolute;
  right: -26px;
  width: 330px;
}

.configHero h2,
.migrationHero h2 {
  max-width: 760px;
}

.configHero p,
.migrationHero p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 760px;
}

.configHeroPanel,
.migrationHeroPanel {
  align-self: center;
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.configHeroPanel strong,
.migrationHeroPanel strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  font-weight: 500;
  line-height: 0.95;
}

.configHeroPanel p,
.migrationHeroPanel p {
  font-size: 0.96rem;
  margin: 0;
}

.configHeroPanel .metaList,
.migrationHeroPanel .metaList {
  background: rgba(250, 247, 239, 0.72);
  border: 1px solid rgba(221, 213, 195, 0.78);
  border-radius: var(--radius-card);
  padding: 16px;
}

.migrationMetrics .metric {
  background: rgba(255, 253, 250, 0.9);
}

.siteFooter {
  align-items: center;
  background: var(--forest-950);
  color: rgba(255, 255, 255, 0.74);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 28px 32px;
}

.siteFooter strong,
.siteFooter span {
  display: block;
}

.siteFooter strong {
  color: white;
  font-weight: 650;
}

.siteFooter span {
  font-size: 0.86rem;
  margin-top: 4px;
}

.siteFooter nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.siteFooter a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  font-weight: 600;
}

.siteFooter a:hover {
  color: white;
}

.lessonPage {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.66), rgba(250, 246, 240, 0));
  padding: 38px 0 64px;
}

.lessonPage > .container.twoCol {
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  max-width: 1320px;
}

.lessonArticle {
  overflow: hidden;
  padding: 0;
}

.lessonArticle > .lessonCrumbs,
.lessonArticle > .lessonBlock,
.lessonArticle > .lessonProgress,
.lessonArticle > .lessonMetrics,
.lessonArticle > .completionBox,
.lessonArticle > .lessonNav {
  margin-left: 32px;
  margin-right: 32px;
}

.lessonArticle > .lessonCrumbs {
  margin-top: 32px;
}

.lessonHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.91) 58%, rgba(15, 76, 92, 0.1)),
    url("/academy-montessori-classroom.png") right center / min(42vw, 520px) auto no-repeat;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 240px);
  padding: clamp(28px, 5vw, 56px) 32px;
}

.lessonHeroCopy,
.lessonHeroPanel {
  min-width: 0;
}

.lessonHero h2 {
  font-size: clamp(2.45rem, 4.7vw, 4.4rem);
  max-width: 780px;
}

.lessonHeroPanel {
  align-self: center;
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid rgba(232, 223, 209, 0.92);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px;
}

.lessonHeroPanel > strong {
  color: var(--forest-950);
  display: block;
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  margin-top: 16px;
}

.lessonMetrics .metric {
  background: rgba(255, 253, 248, 0.86);
}

.lessonArticle .lead {
  color: var(--forest-900);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.75;
  max-width: var(--reading-width);
}

.programHeroCopy h1,
.academyHeroCopy h1,
.lessonHeroCopy h1 {
  color: var(--forest-900);
  font-family: var(--font-display), Georgia, serif;
  line-height: 1.04;
  margin: 0 0 16px;
}

.programHeroCopy h1,
.academyHeroCopy h1 {
  font-size: clamp(2.4rem, 5vw, 4.8rem);
}

.lessonHeroCopy h1 {
  font-size: clamp(2.25rem, 3.6vw, 3.55rem);
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.lessonBlock {
  border-top: 1px solid var(--line);
  margin-top: 30px;
  padding-top: 24px;
}

.lessonBlock p {
  font-size: 1.03rem;
  max-width: var(--reading-width);
}

.lessonObjectiveBlock,
.lessonEvidenceBlock,
.lessonReadingBlock,
.lessonActivityBlock {
  background: rgba(255, 253, 248, 0.58);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
}

.lessonObjectiveBlock {
  border-left: 4px solid var(--gold);
}

.lessonReadingBlock {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(250, 246, 240, 0.68));
}

.lessonReadingBlock p {
  font-size: 1.08rem;
  line-height: 1.86;
}

.lessonActivityBlock {
  border-left: 4px solid var(--sage);
}

.academicStructuredList {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
}

.academicStructuredList > div {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
  padding-top: 12px;
}

.academicStructuredList dt {
  color: var(--forest-900);
  font-weight: 700;
}

.academicStructuredList dd {
  line-height: 1.7;
  margin: 0;
  overflow-wrap: anywhere;
}

.academicStructuredList.nested {
  margin-top: 6px;
}

.lessonReadingBlock a {
  overflow-wrap: anywhere;
}

.lessonAside {
  align-self: start;
  background:
    linear-gradient(145deg, rgba(255, 253, 248, 0.96), rgba(250, 246, 240, 0.9));
  position: sticky;
  top: 96px;
}

.lessonCrumbs {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 600;
  gap: 8px;
  margin-bottom: 22px;
}

.lessonCrumbs a {
  color: var(--forest-900);
}

.lessonCrumbs strong {
  color: var(--forest-950);
}

.breadcrumbItem {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.lessonProgress {
  background: #f8f1e3;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin-top: 22px;
  padding: 14px;
}

.lessonProgressCard {
  background: rgba(232, 178, 61, 0.12);
  border-radius: var(--radius-card);
}

.lessonProgress span {
  color: var(--muted);
  font-weight: 600;
}

.lessonProgress strong {
  color: var(--forest-950);
}

.progressTrack {
  background: rgba(16, 47, 53, 0.12);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.progressTrack span {
  background: var(--coral);
  display: block;
  height: 100%;
}

.completionBox {
  background: #f7fbf8;
  border: 1px solid #c8e2da;
  border-radius: var(--radius-card);
  padding: 20px;
}

.answerList {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  max-width: var(--reading-width);
}

.answerOption {
  align-items: flex-start;
  background: rgba(251, 247, 237, 0.72);
  border: 2px solid var(--line);
  border-radius: 12px;
  color: var(--forest-950);
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: 22px 34px minmax(0, 1fr) auto;
  line-height: 1.55;
  padding: 15px 16px;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.answerOption input {
  accent-color: var(--forest-800);
  height: 20px;
  margin: 3px 0 0;
  width: 20px;
}

.answerOption:hover {
  background: rgba(239, 246, 243, 0.88);
  border-color: rgba(31, 86, 97, 0.38);
}

.answerOption:focus-within {
  box-shadow: 0 0 0 4px rgba(31, 86, 97, 0.14);
  outline: none;
}

.answerOptionNumber {
  align-items: center;
  background: rgba(16, 47, 53, 0.08);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.answerOptionText {
  min-width: 0;
}

.answerOptionState {
  align-self: center;
  border: 1px solid rgba(31, 86, 97, 0.2);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  padding: 4px 9px;
  white-space: nowrap;
}

.answerOption.selected {
  background: rgba(214, 234, 231, 0.82);
  border-color: var(--forest-800);
  box-shadow: 0 10px 24px rgba(16, 47, 53, 0.12);
  transform: translateY(-1px);
}

.answerOption.selected .answerOptionNumber,
.answerOption.selected .answerOptionState {
  background: var(--forest-800);
  border-color: var(--forest-800);
  color: white;
}

.selectedAnswerConfirmation {
  background: rgba(214, 234, 231, 0.62);
  border-left: 4px solid var(--forest-800);
  border-radius: 6px;
  color: var(--forest-950);
  font-size: 0.9rem;
  font-weight: 750;
  margin: 2px 0 0;
  padding: 8px 12px;
}

.answerOption.correct {
  border-color: rgba(47, 154, 107, 0.5);
  background: rgba(237, 246, 243, 0.92);
}

.answerOption.incorrect {
  border-color: rgba(233, 121, 98, 0.48);
  background: rgba(253, 239, 235, 0.82);
}

.evaluationPage {
  padding: 38px 0 66px;
}

.evaluationHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.92) 48%, rgba(255, 253, 248, 0.54) 100%),
    url("/academy-montessori-classroom.png") right center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  overflow: hidden;
  padding: 44px;
  position: relative;
}

.evaluationHero::after {
  background: rgba(139, 168, 136, 0.26);
  border-radius: 999px 999px 0 0;
  bottom: -42px;
  content: "";
  height: 96px;
  position: absolute;
  right: -28px;
  width: 300px;
}

.evaluationHero h2 {
  max-width: 760px;
}

.evaluationHero p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 760px;
}

.evaluationHeroPanel {
  align-self: center;
  background: rgba(255, 253, 250, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.evaluationHeroPanel strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 7vw, 4.3rem);
  font-weight: 500;
  line-height: 0.95;
}

.evaluationHeroPanel p {
  font-size: 0.96rem;
  margin: 0;
}

.evaluationMetrics .metric {
  background: rgba(255, 253, 250, 0.88);
}

.evaluationNextPanel,
.evaluationRulesPanel,
.evaluationSearchPanel,
.evaluationPrepPanel,
.evaluationRubricAside {
  background: rgba(255, 253, 250, 0.9);
  box-shadow: var(--shadow-card);
}

.evaluationNextPanel h3,
.evaluationSearchPanel h3,
.evaluationPrepPanel h3,
.evaluationRubricAside h3 {
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.evaluationGrid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.evaluationCard {
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 40px rgba(16, 47, 53, 0.06);
  display: grid;
  gap: 14px;
  padding: 22px;
  transition: 160ms ease;
}

.evaluationCard:hover {
  border-color: rgba(31, 86, 97, 0.24);
  box-shadow: 0 20px 48px rgba(16, 47, 53, 0.1);
  transform: translateY(-2px);
}

.evaluationCard h3 {
  font-size: clamp(1.28rem, 2.4vw, 1.72rem);
  margin: 0;
}

.evaluationCard p {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.62;
  margin: 0;
}

.evaluationCard .metaList {
  background: rgba(250, 247, 239, 0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.evaluationAttempt {
  display: grid;
  gap: 16px;
}

.evaluationQuestion {
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 14px 34px rgba(16, 47, 53, 0.05);
  display: grid;
  gap: 8px;
  padding: 24px;
}

.evaluationQuestion h3 {
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  margin: 4px 0 2px;
}

.evaluationQuestion > p {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: uppercase;
}

.evaluationQuestion .notice {
  margin-bottom: 0;
}

.evaluationCompletionStatus {
  align-items: baseline;
  display: flex;
  gap: 8px;
}

.evaluationCompletionStatus strong {
  color: var(--forest-900);
  font-family: var(--font-serif);
  font-size: 1.8rem;
}

.evaluationCompletionStatus span {
  color: var(--muted);
}

.evaluationResult {
  border: 2px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 28px;
}

.evaluationResult.passed {
  background: rgba(231, 246, 238, 0.96);
  border-color: rgba(47, 154, 107, 0.5);
}

.evaluationResult.failed {
  background: rgba(253, 239, 235, 0.96);
  border-color: rgba(233, 121, 98, 0.55);
}

.evaluationResult.pending {
  background: rgba(255, 248, 225, 0.96);
  border-color: rgba(205, 155, 47, 0.48);
}

.evaluationResult h3,
.evaluationResult p {
  margin-bottom: 8px;
  margin-top: 8px;
}

.evaluationScore {
  color: var(--forest-950);
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(3.4rem, 8vw, 5.4rem);
  line-height: 1;
  margin-top: 18px;
}

.evaluationScore small {
  font-family: var(--font-sans);
  font-size: 0.28em;
  margin-left: 4px;
}

.evaluationScoreTrack {
  background: rgba(16, 47, 53, 0.12);
  border-radius: 999px;
  height: 12px;
  margin-top: 18px;
  overflow: hidden;
}

.evaluationScoreTrack span {
  background: var(--coral);
  display: block;
  height: 100%;
}

.lessonEvaluationOverview {
  overflow: hidden;
}

.evaluationGuidance {
  font-size: 1.02rem;
}

.evaluationOverviewMetrics {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 20px 0;
}

.evaluationOverviewMetrics > div {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 3px;
  padding: 14px;
}

.evaluationOverviewMetrics strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: 1.5rem;
}

.evaluationOverviewMetrics span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.evaluationRubricDetails {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin: 18px 0;
  padding: 14px 0;
}

.evaluationRubricDetails summary {
  color: var(--forest-900);
  cursor: pointer;
  font-weight: 750;
}

.evaluationStartButton {
  margin-top: 4px;
}

.evaluationRubricAside .miniLesson {
  background: rgba(250, 247, 239, 0.72);
  border-radius: 8px;
}

.evaluationRubricAside .miniLesson span {
  background: rgba(232, 178, 61, 0.18);
  color: #8b651f;
}

.certificationHubPage {
  padding: 38px 0 68px;
}

.certificationHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 50%, rgba(255, 253, 248, 0.58) 100%),
    url("/academy-montessori-classroom.png") right center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.certificationHero::before {
  background: rgba(232, 178, 61, 0.18);
  border-radius: 999px;
  content: "";
  height: 170px;
  position: absolute;
  right: 72px;
  top: -82px;
  width: 170px;
}

.certificationHero::after {
  background: rgba(139, 168, 136, 0.26);
  border-radius: 999px 999px 0 0;
  bottom: -44px;
  content: "";
  height: 104px;
  position: absolute;
  right: -26px;
  width: 330px;
}

.certificationHero h2 {
  max-width: 760px;
}

.certificationHero p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 760px;
}

.certificationHeroPanel {
  align-self: center;
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.certificationHeroPanel strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 500;
  line-height: 0.95;
}

.certificationHeroPanel p {
  font-size: 0.96rem;
  margin: 0;
}

.certificationMetrics .metric {
  background: rgba(255, 253, 250, 0.88);
}

.certificationStatusCard,
.certificationGuidanceCard,
.certificationLocalPanel,
.certificationEvidencePanel,
.certificationAssessmentMap {
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.certificationStatusCard {
  display: grid;
  gap: 14px;
}

.certificationStatusCard h3,
.certificationGuidanceCard h3,
.certificationLocalPanel h3,
.certificationEvidencePanel h3,
.certificationAssessmentMap h3 {
  font-size: clamp(1.45rem, 3vw, 2rem);
  margin-bottom: 8px;
}

.certificationStatusCard p,
.certificationGuidanceCard p,
.certificationLocalPanel p,
.certificationEvidencePanel p,
.certificationAssessmentMap p {
  color: var(--muted);
  line-height: 1.68;
}

.certificationRequirementGrid,
.certificationLocalGrid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
}

.certificationRequirementCard,
.certificationLocalCard {
  background: rgba(255, 253, 250, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 40px rgba(16, 47, 53, 0.06);
  display: grid;
  gap: 12px;
  padding: 22px;
}

.certificationRequirementCard h3,
.certificationLocalCard h3 {
  font-size: clamp(1.26rem, 2.5vw, 1.65rem);
  margin: 0;
}

.certificationRequirementCard p,
.certificationLocalCard p {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.58;
  margin: 0;
}

.certificationEvidenceList {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  max-width: 860px;
}

.certificationEvidenceList .answerOption {
  background: rgba(250, 247, 239, 0.74);
  padding: 15px;
}

.certificationEvidenceList strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 600;
}

.accountPage {
  padding: 38px 0 68px;
}

.accountHero {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.94) 50%, rgba(255, 253, 248, 0.58) 100%),
    url("/academy-montessori-classroom.png") right center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  overflow: hidden;
  padding: 46px;
  position: relative;
}

.accountHero::after {
  background: rgba(139, 168, 136, 0.24);
  border-radius: 999px 999px 0 0;
  bottom: -44px;
  content: "";
  height: 104px;
  position: absolute;
  right: -26px;
  width: 330px;
}

.accountHero h2 {
  max-width: 760px;
}

.accountHero p {
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 720px;
}

.accountHeroPanel {
  align-self: center;
  background: rgba(255, 253, 250, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.accountHeroPanel strong {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 7vw, 4.3rem);
  font-weight: 500;
  line-height: 0.95;
}

.accountHeroPanel p {
  font-size: 0.96rem;
  margin: 0;
}

.accountMetrics .metric {
  background: rgba(255, 253, 250, 0.88);
}

.accountStatusPanel,
.accountAccessPanel,
.accountActionsPanel,
.accountSupportPanel {
  background: rgba(255, 253, 250, 0.92);
  box-shadow: var(--shadow-card);
}

.accountStatusPanel h3,
.accountAccessPanel h3,
.accountActionsPanel h3,
.accountSupportPanel h3 {
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.accountStatusPanel p,
.accountAccessPanel p,
.accountActionsPanel p,
.accountSupportPanel p {
  color: var(--muted);
  line-height: 1.68;
}

.accountMetaList {
  background: rgba(250, 247, 239, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.accountActionGrid,
.accountSupportGrid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.accountActionCard {
  background: rgba(255, 253, 250, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 40px rgba(16, 47, 53, 0.06);
  display: grid;
  gap: 12px;
  padding: 22px;
}

.accountActionCard h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  margin: 0;
}

.accountActionCard p {
  font-size: 0.96rem;
  margin: 0;
}

.button:disabled {
  opacity: 0.55;
}

.lessonNav {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 26px;
  padding-top: 8px;
  padding-bottom: 32px;
}

.lessonMiniList {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.miniLesson {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  column-gap: 12px;
  grid-template-areas:
    "number title"
    "number meta";
  grid-template-columns: 32px minmax(0, 1fr);
  min-width: 0;
  padding: 12px;
  row-gap: 4px;
}

.miniLesson.active {
  background: #f8f1e3;
  border-color: rgba(215, 166, 53, 0.55);
}

.miniLesson span {
  background: var(--forest-900);
  border-radius: 999px;
  box-sizing: border-box;
  color: white;
  display: grid;
  font-weight: 650;
  grid-area: number;
  height: 30px;
  line-height: 1;
  min-width: 30px;
  padding: 0;
  place-items: center;
  text-align: center;
  width: 30px;
}

.miniLesson strong {
  color: var(--forest-950);
  display: block;
  font-size: 0.92rem;
  grid-area: title;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}

.miniLesson em {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 600;
  grid-area: meta;
  line-height: 1.3;
  min-width: 0;
}

.checkList,
.stepList {
  color: var(--forest-950);
  line-height: 1.85;
  margin: 20px 0 0;
  max-width: var(--reading-width);
  padding-left: 20px;
}

.checkList li::marker {
  color: var(--coral);
}

.stepList li::marker {
  color: var(--gold);
  font-weight: 650;
}

.adminSectionHeader {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.adminTableWrap {
  margin-top: 18px;
  overflow-x: auto;
}

.adminTable {
  border-collapse: collapse;
  min-width: 920px;
  width: 100%;
}

.adminTable th,
.adminTable td {
  border-bottom: 1px solid var(--line);
  padding: 13px 10px;
  text-align: left;
  vertical-align: middle;
}

.adminTable th {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.adminTable td {
  color: var(--forest-950);
  font-size: 0.92rem;
}

.adminTable td span {
  color: var(--muted);
  display: block;
  font-size: 0.82rem;
  margin-top: 2px;
}

.adminTable .progressTrack {
  margin-top: 7px;
  width: 120px;
}

.contentAdminGrid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
}

.compactAdminTable {
  min-width: 560px;
}

.buttonStack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contentEditorList {
  display: grid;
  gap: 16px;
}

.contentEditorItem,
.lessonDraftItem {
  background: rgba(255, 253, 250, 0.82);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.contentEditorItem > summary,
.lessonDraftItem > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  list-style: none;
  padding: 18px 20px;
}

.contentEditorItem > summary::-webkit-details-marker,
.lessonDraftItem > summary::-webkit-details-marker {
  display: none;
}

.contentEditorItem summary strong,
.lessonDraftItem summary strong {
  color: var(--forest-950);
  display: block;
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 600;
}

.contentEditorItem summary small,
.lessonDraftItem summary small {
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

.contentEditorForm {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 20px;
}

.compactContentEditorForm {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contentEditorForm label {
  color: var(--forest-950);
  display: grid;
  font-size: 0.84rem;
  font-weight: 750;
  gap: 8px;
}

.contentEditorForm input,
.contentEditorForm textarea {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--forest-950);
  font: inherit;
  font-weight: 500;
  min-height: 44px;
  padding: 11px 12px;
}

.contentEditorForm textarea {
  line-height: 1.55;
  resize: vertical;
}

.contentEditorForm .wideField,
.contentEditorActions.wideField {
  grid-column: 1 / -1;
}

.contentEditorActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.publicationActions {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px 20px;
}

.lessonDraftEditor {
  border-top: 1px solid var(--line);
  padding: 20px;
}

.lessonDraftEditor h4 {
  color: var(--forest-950);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 14px;
}

.lessonDraftItem + .lessonDraftItem {
  margin-top: 12px;
}

.editorialHistoryList {
  display: grid;
  gap: 12px;
}

.editorialHistoryItem {
  align-items: center;
  background: rgba(255, 253, 250, 0.78);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: 150px minmax(0, 1fr);
  padding: 14px 16px;
}

.editorialHistoryItem strong {
  color: var(--forest-950);
  display: block;
}

.editorialHistoryItem small {
  color: var(--muted);
  display: block;
  line-height: 1.5;
  margin-top: 3px;
}

.inlineRoleForm {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.compactSelect {
  min-height: 40px;
  min-width: 190px;
  padding: 8px 12px;
}

.inlineRoleChipForm {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  margin: 0 8px 8px 0;
}

.emailHistoryTable {
  min-width: 980px;
}

.reviewQueueGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reviewQueueItem {
  background: rgba(250, 247, 239, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.reviewQueueItem h4 {
  color: var(--forest-950);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 650;
  margin: 10px 0 4px;
}

.reviewQueueItem p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 12px;
}

.reviewQueueItem dl {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-top: 12px;
}

.reviewQueueItem dt {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.reviewQueueItem dd {
  color: var(--forest-950);
  font-size: 0.92rem;
  font-weight: 650;
  margin: 2px 0 0;
}

.financeGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.financePanel {
  background: rgba(250, 247, 239, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.financePanel h4 {
  color: var(--forest-950);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 650;
  margin: 10px 0 0;
}

.financeList {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.financeItem {
  align-items: center;
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 12px;
}

.financeItem strong,
.financeItem span {
  display: block;
}

.financeItem strong {
  color: var(--forest-950);
  font-size: 0.94rem;
}

.financeItem span {
  color: var(--muted);
  font-size: 0.82rem;
}

.commercialStatusGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.commercialStatusCard {
  background: rgba(250, 247, 239, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.commercialStatusCard span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.commercialStatusCard strong {
  color: var(--forest-950);
  display: block;
  font-size: 1.04rem;
  margin-top: 8px;
}

.commercialStatusCard p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 8px 0 0;
}

.commercialTimeline {
  display: grid;
  gap: 10px;
}

.commercialEvent {
  align-items: center;
  background: rgba(250, 247, 239, 0.68);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 16px;
}

.commercialEvent h4 {
  color: var(--forest-950);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 650;
  margin: 8px 0 4px;
}

.commercialEvent p,
.commercialEvent span {
  color: var(--muted);
  display: block;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}

.commercialEvent strong {
  color: var(--forest-950);
  display: block;
  font-size: 1rem;
  margin-bottom: 4px;
  text-align: right;
}

.attentionList {
  background: rgba(250, 247, 239, 0.68);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 16px 0;
  padding: 16px;
}

.attentionGrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.attentionItem {
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.attentionItem h4 {
  color: var(--forest-950);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 650;
  margin: 10px 0 6px;
}

.attentionItem p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

.attentionActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.adminTaskComposer {
  background: rgba(250, 247, 239, 0.68);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.taskQuickEditForm {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
}

.taskQuickEditForm label {
  color: var(--forest-950);
  display: grid;
  font-size: 0.76rem;
  font-weight: 700;
  gap: 5px;
  text-transform: uppercase;
}

.taskQuickEditForm input,
.taskQuickEditForm select {
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--forest-950);
  font: inherit;
  min-height: 36px;
  padding: 8px 10px;
  text-transform: none;
}

.taskHistory {
  background: rgba(250, 247, 239, 0.64);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 14px;
  padding: 12px;
}

.taskHistory > strong {
  color: var(--forest-950);
  display: block;
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.taskHistory ul {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.taskHistory li {
  border-left: 2px solid var(--gold);
  padding-left: 9px;
}

.taskHistory span {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.taskHistory p {
  color: var(--forest-950);
  font-size: 0.86rem;
  margin: 3px 0 0;
}

.deleteConfirmForm {
  background: rgba(250, 247, 239, 0.82);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
  width: 100%;
}

.deleteConfirmForm p {
  color: var(--forest-950);
  font-size: 0.84rem;
  margin: 0;
}

.deleteConfirmForm div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.fullTaskHistory {
  background: rgba(255, 253, 250, 0.92);
  margin-top: 16px;
}

.fullTaskHistory ul {
  gap: 12px;
}

.fullTaskHistory li {
  padding-bottom: 10px;
}

.inlineActions,
.metaActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.metaActions {
  margin-top: 8px;
}

.filterBar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 12px;
}

.compactFilterBar {
  margin-top: -2px;
}

.filterPill {
  background: rgba(250, 247, 239, 0.86);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 650;
  padding: 8px 12px;
  text-decoration: none;
  transition: 160ms ease;
}

.filterPill:hover,
.filterPill.active {
  background: var(--forest-900);
  border-color: var(--forest-900);
  color: #fffdfa;
}

.filterSummary {
  align-items: center;
  background: rgba(250, 247, 239, 0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 14px;
  padding: 13px 14px;
}

.filterSummary strong {
  color: var(--forest-950);
  font-size: 1.08rem;
  margin-right: 6px;
}

.filterSummary span {
  color: var(--muted);
  font-size: 0.9rem;
}

.filterSummaryTags {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.filterTag {
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--forest-950);
  font-size: 0.82rem;
  font-weight: 650;
  padding: 7px 10px;
}

.adminSearchForm {
  background: rgba(250, 247, 239, 0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 12px 0 14px;
  padding: 14px;
}

.adminSearchForm.compactForm {
  margin-bottom: 0;
  padding: 10px;
}

.adminSearchForm label {
  color: var(--forest-950);
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.adminSearchForm div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.adminSearchForm input,
.adminSearchForm select {
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--forest-950);
  flex: 1 1 260px;
  font: inherit;
  min-height: 38px;
  padding: 9px 11px;
}

.adminSearchForm input[type="file"] {
  padding: 7px 10px;
}

.formHint {
  color: var(--muted);
  font-size: 0.84rem;
  margin: 8px 0 0;
}

.adminActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 250px;
}

.supportNoteForm {
  display: grid;
  gap: 8px;
  min-width: min(100%, 260px);
}

.supportNoteForm textarea {
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--forest-950);
  font: inherit;
  min-height: 66px;
  padding: 10px 11px;
  resize: vertical;
}

.supportNoteForm textarea:disabled {
  opacity: 0.58;
}

.finalReplyForm {
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding-top: 10px;
}

.inlineCheck {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.86rem;
  gap: 7px;
}

.inlineCheck input {
  accent-color: var(--forest-700);
}

.supportMessageList {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 12px;
}

.supportMessage {
  background: rgba(250, 247, 239, 0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 12px;
}

.supportMessage p {
  margin: 0;
}

.adminActionGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.adminReviewForm {
  background: rgba(250, 247, 239, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
}

.adminReviewForm h4 {
  color: var(--forest-950);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 650;
  margin: 0;
}

.adminReviewForm p {
  font-size: 0.92rem;
  margin: 0;
}

.adminReviewForm textarea {
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--forest-950);
  font: inherit;
  line-height: 1.5;
  min-height: 94px;
  padding: 11px 12px;
  resize: vertical;
}

.studentEmailTimeline {
  display: grid;
  gap: 10px;
}

.studentEmailEvent {
  align-items: center;
  background: rgba(250, 247, 239, 0.68);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  padding: 16px;
}

.studentEmailEvent h4 {
  color: var(--forest-950);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 650;
  margin: 8px 0 4px;
}

.studentEmailEvent p,
.studentEmailEvent span {
  color: var(--muted);
  display: block;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}

.studentEmailEvent strong {
  color: var(--forest-950);
  display: block;
  font-size: 0.92rem;
  margin-bottom: 4px;
}

.certificatePage {
  background:
    linear-gradient(135deg, rgba(20, 63, 64, 0.09), rgba(250, 247, 239, 0.9)),
    var(--cream);
}

.certificatePanel {
  background: #fffdfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15, 53, 54, 0.12);
  margin: 0 auto;
  max-width: 920px;
  padding: clamp(32px, 6vw, 68px);
  position: relative;
}

.certificatePanel.valid {
  border-color: rgba(169, 129, 49, 0.44);
}

.certificateLogo {
  display: block;
  height: auto;
  margin-bottom: 28px;
  max-width: 320px;
  width: 42vw;
}

.certificateNameBlock {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin-top: 28px;
  padding: 24px 0;
}

.certificateNameBlock span {
  color: var(--muted);
  display: block;
  font-size: 0.85rem;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.certificateNameBlock strong {
  color: var(--forest-950);
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 500;
  line-height: 1.05;
}

.certificateNotice {
  margin-top: 22px;
}

.mutedNotice {
  background: rgba(250, 247, 239, 0.8);
  color: var(--muted);
}

.actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.timeline {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}

.timelineItem {
  border-left: 3px solid var(--coral);
  padding-left: 12px;
}

.timelineItem span,
.timelineItem small {
  color: var(--muted);
  display: block;
}

.timelineItem strong {
  color: var(--forest-950);
  display: block;
  margin: 4px 0;
}

@media (max-width: 1180px) {
  .lessonPage > .container.twoCol {
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
    max-width: 900px;
  }

  .lessonAside {
    position: static;
  }
}

@media (max-width: 900px) {
  .brand strong {
    white-space: normal;
  }

  .heroGrid,
  .twoCol,
  .grid,
  .dashboardHero,
  .libraryHero,
  .libraryCollections,
  .programHero,
  .programMapGrid,
  .academyHero,
  .academyLessonGrid,
  .lessonHero,
  .evaluationHero,
  .evaluationGrid,
  .certificationHero,
  .certificationRequirementGrid,
  .certificationLocalGrid,
  .accountHero,
  .accountActionGrid,
  .accountSupportGrid,
  .supportHero,
  .loginHero,
  .pricingHero,
  .checkoutHero,
  .pricingTrustGrid,
  .pricingGrid,
  .legalHero,
  .adminHero,
  .adminWorkspaceHeader,
  .adminWorkspaceIntro,
  .adminExecutiveHero,
  .adminNotificationsHero,
  .adminSupportHero,
  .adminStudentHero,
  .adminTaskHero,
  .contentAdminGrid,
  .configHero,
  .migrationHero,
  .adminReportGrid,
  .demoProfileGrid,
  .featureGrid,
  .metrics,
  .timeline,
  .adminActionGrid,
  .attentionGrid,
  .commandItem,
  .commercialStatusGrid,
  .commercialEvent,
  .financeGrid,
  .reviewQueueGrid,
  .studentEmailEvent {
    grid-template-columns: 1fr;
  }

  .launchGate {
    align-items: stretch;
    flex-direction: column;
  }

  .launchGauge {
    min-width: 0;
    text-align: left;
  }

  .financeItem {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    min-height: auto;
    padding: 18px 24px;
  }

  .brandLogo {
    height: 62px;
    width: 154px;
  }

  .nav {
    justify-content: flex-start;
    max-width: none;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .userMenuPanel {
    left: 0;
    right: auto;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .navPrimary,
  .navUtility {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    width: auto;
  }

  .nav a {
    font-size: 0.82rem;
  }

  h1 {
    font-size: clamp(2.45rem, 12vw, 3.6rem);
  }

  h2 {
    font-size: clamp(1.85rem, 8vw, 2.55rem);
  }

  .hero {
    padding: 56px 0 44px;
  }

  .heroStats {
    max-width: none;
    position: static;
  }

  .dashboardHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    min-height: 0;
  }

  .libraryHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
  }

  .programHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
  }

  .academyHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
  }

  .lessonHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .evaluationHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .certificationHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .accountHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .supportHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .loginHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .pricingHero,
  .checkoutHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .legalHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .adminHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .adminExecutiveHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .adminNotificationsHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .adminSupportHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .adminStudentHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .adminTaskHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .configHero,
  .migrationHero {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 253, 248, 0.92)),
      url("/academy-montessori-classroom.png") center bottom / cover no-repeat;
    padding: 28px 22px;
  }

  .lessonArticle > .lessonCrumbs,
  .lessonArticle > .lessonBlock,
  .lessonArticle > .lessonProgress,
  .lessonArticle > .lessonMetrics,
  .lessonArticle > .completionBox,
  .lessonArticle > .lessonNav {
    margin-left: 22px;
    margin-right: 22px;
  }

  .librarySearch div {
    align-items: stretch;
    flex-direction: column;
  }

  .librarySearch input,
  .librarySearch .button,
  .supportForm input,
  .supportForm select,
  .supportForm textarea,
  .supportForm button,
  .supportReplyForm textarea,
  .supportReplyForm button,
  .finalReplyForm textarea,
  .finalReplyForm button {
    width: 100%;
  }

  .dashboardHeroActions,
  .lessonNav {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboardHeroActions .button,
  .lessonNav .button {
    justify-content: center;
    width: 100%;
  }

  .lessonAside {
    position: static;
  }

  .academyLessonCard h3 {
    max-width: none;
  }

  .sectionHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .heroVisual {
    align-self: stretch;
  }

  .adminPage,
  .adminStudentPage,
  .adminTaskPage,
  .adminNotificationsPage,
  .adminSupportPage {
    padding: 28px 0 52px;
  }

  .adminSectionHeader {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .adminHeroPanel,
  .adminExecutiveHeroPanel,
  .adminNotificationsHeroPanel,
  .adminSupportHeroPanel,
  .adminStudentHeroPanel,
  .adminTaskHeroPanel {
    padding: 20px;
  }

  .adminReportsConsole,
  .attentionList,
  .panel {
    overflow: hidden;
  }

  .adminReportCard {
    min-height: 0;
  }

  .adminSearchForm {
    gap: 12px;
  }

  .adminSearchForm div {
    align-items: stretch;
    flex-direction: column;
  }

  .adminSearchForm input,
  .adminSearchForm select,
  .adminSearchForm .button,
  .adminSearchForm button {
    width: 100%;
  }

  .filterBar {
    flex-wrap: nowrap;
    margin-left: -2px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .filterBar::-webkit-scrollbar {
    display: none;
  }

  .filterPill {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .attentionActions,
  .adminActions,
  .buttonRow {
    align-items: stretch;
    flex-direction: column;
  }

  .attentionActions .button,
  .attentionActions button,
  .adminActions .button,
  .adminActions button,
  .buttonRow .button {
    justify-content: center;
    width: 100%;
  }

  .couponInputRow,
  .couponEditorForm,
  .couponGrid,
  .couponMeta,
  .contentEditorForm,
  .compactContentEditorForm,
  .editorialHistoryItem {
    grid-template-columns: 1fr;
  }

  .couponCardHeader {
    display: grid;
  }

  .couponPlanPicker {
    display: grid;
  }

  .adminTableWrap {
    border-radius: var(--radius-card);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .adminTable {
    min-width: 760px;
  }

  .commercialEvent strong {
    text-align: left;
  }

  .setupItem,
  .sourceItem,
  .launchItem {
    align-items: start;
    grid-template-columns: 12px minmax(0, 1fr);
  }

  .setupItem strong,
  .setupItem span,
  .setupItem em {
    grid-column: 2;
  }

  .setupItem em {
    text-align: left;
  }

  .commandItem {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 42px 0;
  }

  .lessonArticle {
    padding: 24px;
  }

  .siteFooter {
    align-items: flex-start;
    flex-direction: column;
  }

  .siteFooter nav {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .container {
    width: min(100% - 28px, var(--container));
  }

  .topbar {
    gap: 14px;
    padding: 16px 14px;
  }

  .nav {
    flex-wrap: wrap;
    gap: 8px;
    overflow-x: visible;
    padding-bottom: 0;
    width: 100%;
  }

  .navPrimary,
  .navUtility {
    display: grid;
    flex: 1 1 100%;
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    width: 100%;
  }

  .nav a {
    padding: 7px 6px;
    text-align: center;
  }

  .userMenu,
  .userMenu summary {
    min-width: 0;
  }

  .brand {
    gap: 10px;
    min-height: 56px;
  }

  .brandLogo {
    height: 54px;
    width: 134px;
  }

  .brand strong {
    font-size: 0.95rem;
    line-height: 1.15;
  }

  .brand small {
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .hero {
    padding: 46px 0 36px;
  }

  .heroImage {
    min-height: 210px;
  }

  .heroStats {
    padding: 18px;
  }

  .featureStrip {
    padding: 22px 0;
  }

  .adminHero,
  .adminWorkspaceHeader,
  .adminWorkspaceIntro,
  .adminExecutiveHero,
  .adminNotificationsHero,
  .adminSupportHero,
  .adminStudentHero,
  .adminTaskHero,
  .dashboardHero,
  .libraryHero,
  .programHero,
  .academyHero,
  .lessonHero,
  .evaluationHero,
  .certificationHero,
  .accountHero,
  .supportHero,
  .configHero,
  .migrationHero {
    border-radius: 18px;
    margin-top: 12px;
    padding: 24px 18px;
  }

  .adminHero h2,
  .adminWorkspaceHeader h2,
  .adminExecutiveHero h2,
  .adminNotificationsHero h2,
  .adminSupportHero h2,
  .adminStudentHero h2,
  .adminTaskHero h2,
  .dashboardHero h2,
  .libraryHero h2,
  .programHero h2,
  .academyHero h2,
  .lessonHero h2,
  .evaluationHero h2,
  .certificationHero h2,
  .accountHero h2,
  .supportHero h2,
  .configHero h2,
  .migrationHero h2 {
    font-size: clamp(2rem, 12vw, 2.8rem);
  }

  .adminHero p,
  .adminWorkspaceHeader p,
  .adminWorkspaceIntro p,
  .adminExecutiveHero p,
  .adminNotificationsHero p,
  .adminSupportHero p,
  .adminStudentHero p,
  .adminTaskHero p,
  .dashboardHero p,
  .libraryHero p,
  .programHero p,
  .academyHero p,
  .lessonHero p,
  .evaluationHero p,
  .certificationHero p,
  .accountHero p,
  .supportHero p,
  .configHero p,
  .migrationHero p {
    font-size: 0.96rem;
    line-height: 1.65;
  }

  .adminHeroPanel strong,
  .adminExecutiveHeroPanel strong,
  .adminNotificationsHeroPanel strong,
  .adminSupportHeroPanel strong,
  .adminStudentHeroPanel strong,
  .adminTaskHeroPanel strong,
  .dashboardHeroPanel strong,
  .libraryHeroPanel strong,
  .programHeroPanel strong,
  .academyHeroPanel strong,
  .lessonHeroPanel strong,
  .evaluationHeroPanel strong,
  .certificationHeroPanel strong,
  .accountHeroPanel strong,
  .supportHeroPanel strong,
  .configHeroPanel strong,
  .migrationHeroPanel strong {
    font-size: clamp(2.1rem, 16vw, 3.2rem);
  }

  .lessonArticle {
    padding: 0;
  }

  .lessonArticle > .lessonCrumbs,
  .lessonArticle > .lessonBlock,
  .lessonArticle > .lessonProgress,
  .lessonArticle > .lessonMetrics,
  .lessonArticle > .completionBox,
  .lessonArticle > .lessonNav {
    margin-left: 16px;
    margin-right: 16px;
  }

  .lessonObjectiveBlock,
  .lessonEvidenceBlock,
  .lessonReadingBlock,
  .lessonActivityBlock,
  .evaluationQuestion {
    padding: 18px;
  }

  .answerOption {
    gap: 8px;
    grid-template-columns: 22px 30px minmax(0, 1fr);
    padding: 11px;
  }

  .answerOptionState {
    grid-column: 3;
    justify-self: start;
  }

  .evaluationOverviewMetrics {
    grid-template-columns: 1fr;
  }

  .card,
  .panel,
  .metric {
    padding: 18px;
  }

  .featuredPlanCard::before {
    display: inline-flex;
    justify-self: start;
    position: static;
    width: max-content;
  }

  .librarySearch {
    padding: 12px;
  }

  .libraryCover {
    min-height: 136px;
  }

  .certificatePanel {
    border-radius: 18px;
    padding: 24px 18px;
  }

  .certificateLogo {
    width: min(100%, 260px);
  }

  .adminReportGrid,
  .attentionGrid,
  .reviewQueueGrid,
  .financeGrid {
    gap: 10px;
  }

  .adminReportCard,
  .attentionItem,
  .reviewQueueItem,
  .commercialStatusCard,
  .financePanel {
    padding: 15px;
  }

  .adminReportCard strong,
  .attentionItem h4 {
    font-size: 1.16rem;
  }

  .metrics {
    gap: 10px;
  }

  .metric {
    padding: 16px;
  }

  .metric strong {
    font-size: clamp(1.65rem, 13vw, 2.35rem);
  }

  .metaList {
    gap: 10px;
  }
}
.publicInformation .publicSkip{position:absolute;inset-block-start:-100px;inset-inline-start:20px;padding:12px 20px;background:var(--paper);z-index:100}
.publicInformation .publicSkip:focus{inset-block-start:12px}
.publicInformation .brand span{max-width:28rem}
.publicInformation .brand small{overflow-wrap:anywhere}
.publicInformation .navPrimary a[aria-current="page"]{color:var(--paper);text-decoration:underline;text-underline-offset:6px}
.publicInformation .heroCopy h1{font-size:clamp(2.35rem,6vw,6rem)}
.publicInformation .heroCopy h1 span{color:#b84b3c}
.publicInformation .publicStatus{color:var(--forest-800);font-size:1rem;max-width:68ch;margin-block-start:28px}
.publicInformation .publicProgramGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block:28px}
.publicInformation .publicProgramCard{min-width:0;display:flex;flex-direction:column;padding:28px;border-radius:14px;box-shadow:none}
.publicInformation .publicProgramCard h2,.publicInformation .publicProgramCard h3{font-size:1.45rem;line-height:1.3;overflow-wrap:anywhere;margin-block:0 16px}
.publicInformation .publicProgramCard p{max-width:68ch;margin-block:0 14px}
.publicInformation .publicProgramCard .textLink{margin-block-start:auto}
.publicInformation .publicPrice{font-size:2.3rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--teal-deep)}
.publicInformation .publicPrice span{font-size:1rem;font-weight:400}
.publicInformation .publicReading{max-width:900px}
.publicInformation .publicProgramSection{padding-block:32px;border-block-end:1px solid var(--line)}
.publicInformation .publicProgramSection p{max-width:68ch}
.publicInformation .siteFooter nav{display:flex;gap:24px;flex-wrap:wrap}
@media(max-width:900px){.publicInformation .brand span{max-width:22rem}.publicInformation .topbar{flex-wrap:wrap}.publicInformation .publicProgramGrid{grid-template-columns:1fr}.publicInformation .publicProgramCard{padding:24px}.publicInformation .heroVisual{min-height:300px}}
@media(max-width:540px){.publicInformation .brandLogo{width:120px;height:auto}.publicInformation .brand span{max-width:13rem}.publicInformation .brand small{font-size:.85rem}.publicInformation .topbar{gap:14px}.publicInformation .nav{width:100%;justify-content:flex-start}.publicInformation .heroCopy h1{font-size:clamp(2.35rem,10vw,3.25rem)}.publicInformation .buttonRow{gap:12px;flex-wrap:wrap}.publicInformation .heroVisual{min-height:240px}}

.publicInformation .textLink{color:#b84b3c}