:root {
  --ink: #17202a;
  --muted: #5c6670;
  --line: #d9e2e6;
  --paper: #ffffff;
  --wash: #f4f8f9;
  --navy: #123447;
  --teal: #177e89;
  --green: #2f7d57;
  --amber: #c27a1a;
  --red: #b84a4a;
  --shadow: 0 18px 50px rgba(18, 52, 71, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--wash);
  line-height: 1.5;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  overflow-wrap: anywhere;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.top-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px clamp(16px, 4vw, 48px);
  background: #c62828;
  color: #ffffff;
  white-space: nowrap;
}

.main-nav {
  background: #c62828;
  color: #ffffff;
}

.top-strip a {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.top-strip a:hover,
.top-strip a.active {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.62);
}

.main-nav,
.dashboard-shell,
.content-band,
.admin-band,
.site-footer,
.info-band {
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

.main-nav {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

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

.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--teal);
  color: white;
  font-weight: 800;
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}

.nav-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.primary-button,
.ghost-button,
.download-button,
.secondary-button,
.whatsapp-button,
.mpesa-header-button,
.cart-button,
.danger-blink-button {
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 14px;
  font-weight: 700;
  text-align: center;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  user-select: none;
}

.primary-button:hover,
.download-button:hover,
.whatsapp-button:hover,
.mpesa-header-button:hover,
.cart-button:hover,
.danger-blink-button:hover,
.ghost-button:hover,
.secondary-button:hover,
.subject-chip:hover,
.grade-toggle:hover {
  box-shadow: 0 10px 24px rgba(18, 52, 71, 0.16);
  transform: translateY(-1px);
}

.primary-button:active,
.download-button:active,
.whatsapp-button:active,
.mpesa-header-button:active,
.cart-button:active,
.danger-blink-button:active,
.ghost-button:active,
.secondary-button:active,
.subject-chip:active,
.grade-toggle:active,
.top-strip a:active {
  transform: translateY(1px);
}

.primary-button:focus-visible,
.download-button:focus-visible,
.whatsapp-button:focus-visible,
.mpesa-header-button:focus-visible,
.cart-button:focus-visible,
.danger-blink-button:focus-visible,
.ghost-button:focus-visible,
.secondary-button:focus-visible,
.subject-chip:focus-visible,
.grade-toggle:focus-visible,
.top-strip a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(23, 126, 137, 0.34);
  outline-offset: 2px;
}

.primary-button,
.download-button {
  background: var(--green);
  color: white;
}

.whatsapp-button {
  background: #1f9d55;
  color: white;
}

.mpesa-header-button {
  background: var(--amber);
  color: white;
}

.cart-button {
  background: var(--navy);
  color: white;
}

.danger-blink-button {
  background: var(--red);
  color: white;
  animation: blinkRed 1s infinite;
}

.danger-blink-button.large {
  min-height: 48px;
  padding: 12px 18px;
}

@keyframes blinkRed {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}

.cart-button span {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: white;
  color: var(--navy);
  font-size: 12px;
}

.ghost-button,
.secondary-button {
  background: #eef5f6;
  color: var(--navy);
  border: 1px solid var(--line);
}

.dashboard-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 24px;
  padding-top: 34px;
  padding-bottom: 34px;
}

.intro-panel {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 5vw, 52px);
  color: white;
  background:
    linear-gradient(180deg, rgba(18, 52, 71, 0.18), rgba(18, 52, 71, 0.9)),
    url("assets/cbe-classroom.svg");
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.intro-panel h1 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1;
  letter-spacing: 0;
}

.intro-panel p {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.88);
}

.hero-resource-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 780px;
  margin-top: 10px;
}

.hero-resource-buttons a,
.hero-resource-buttons button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.16);
  color: white;
  font-weight: 800;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.hero-resource-buttons .promo-button {
  background: var(--amber);
  border-color: rgba(255, 255, 255, 0.75);
}

.hero-resource-buttons a:hover,
.hero-resource-buttons button:hover,
.hero-resource-buttons a:focus-visible,
.hero-resource-buttons button:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.72);
}

.hero-resource-buttons a:active,
.hero-resource-buttons button:active {
  transform: translateY(1px);
}

.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--teal);
}

.intro-panel .eyebrow {
  color: #dff7f8;
}

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

.summary-grid div {
  padding: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.summary-grid strong,
.summary-grid span {
  display: block;
}

.summary-grid strong {
  font-size: 25px;
}

.summary-grid span {
  color: rgba(255, 255, 255, 0.78);
}

.grade-panel,
.admin-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.grade-panel {
  padding: 22px;
}

.panel-heading h2,
.section-heading h2,
.admin-copy h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
}

.grade-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  max-height: 558px;
  overflow: auto;
  padding-right: 4px;
}

.grade-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fbfdfd;
}

/* Grade navigation: green CBE Nexus theme. */
.grade-card {
  background: #0f7a4f;
  border-color: #0b5f3d;
}

.grade-toggle {
  background: #0f7a4f;
  color: #ffffff;
}

.grade-card.open .grade-toggle {
  background: #0b5f3d;
  color: #ffffff;
}

.grade-toggle:hover {
  background: #096b45;
  color: #ffffff;
}

.grade-toggle {
  width: 100%;
  min-height: 48px;
  border: 0;
  background: #c62828;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-weight: 800;
  color: #ffffff;
  cursor: pointer;
}

.subject-menu {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 14px;
}

.subject-dropdown-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.subject-dropdown {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--navy);
  padding: 9px 36px 9px 11px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}

.subject-dropdown:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.grade-chevron {
  font-size: 16px;
  transition: transform 160ms ease;
}

.grade-card.open .grade-chevron {
  transform: rotate(180deg);
}

.grade-card.open .subject-menu {
  display: flex;
}

.subject-chip {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--ink);
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.content-band,
.admin-band {
  padding-top: 46px;
  padding-bottom: 46px;
}

.trust-band {
  padding: 24px clamp(16px, 4vw, 48px);
  background: white;
  border-top: 1px solid var(--line);
}

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

.trust-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fbfdfd;
}

.trust-grid strong,
.trust-grid span {
  display: block;
}

.trust-grid span {
  color: var(--muted);
  margin-top: 5px;
}

.promo-band {
  padding: 28px clamp(16px, 4vw, 48px);
  background: #fff7e8;
  border-top: 1px solid #efd5a8;
}

.seller-band {
  padding: 46px clamp(16px, 4vw, 48px);
  background: #f8fbfb;
  border-top: 1px solid var(--line);
}

.hidden-section {
  display: none;
}

.hidden-section.open {
  display: block;
}

.seller-approval-copy {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.seller-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 20px;
  align-items: start;
}

.seller-panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.seller-panel h3,
.seller-panel p {
  margin-top: 0;
}

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

.seller-resource-list {
  display: grid;
  gap: 10px;
}

.seller-earnings {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
}

.seller-earnings h3 {
  margin: 0 0 8px;
}

.seller-storage {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.seller-storage h3 {
  margin: 0 0 8px;
}

.seller-storage p {
  color: var(--muted);
  margin: 0;
}

.withdraw-form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.seller-resource-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 4px;
}

.seller-resource-item strong,
.seller-resource-item span {
  display: block;
}

.seller-resource-item span {
  color: var(--muted);
  font-size: 13px;
}

.refer-band {
  background: #edf7f1;
  border-top-color: #cfe8d8;
}

.urgent-band {
  padding: 36px clamp(16px, 4vw, 48px);
  background: #fff1f1;
  border-top: 1px solid #efc1c1;
  border-bottom: 1px solid #efc1c1;
}

.feature-form {
  max-width: 980px;
}

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

.download-tile {
  display: flex;
  min-height: 74px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: white;
  color: var(--navy);
  font-weight: 800;
}

.quiz-panel {
  display: grid;
  gap: 14px;
  max-width: 860px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
}

.quiz-panel fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.quiz-panel legend {
  color: var(--navy);
  font-weight: 800;
}

.quiz-panel label {
  display: flex;
  align-items: center;
}

.quiz-panel input[type="radio"] {
  width: auto;
}

.progress-panel,
.ai-answer {
  max-width: 860px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: var(--shadow);
}

.progress-panel h3 {
  margin-top: 0;
}

.progress-item {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.progress-meter {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef0;
}

.progress-meter span {
  display: block;
  height: 100%;
  background: var(--green);
}

.promo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.promo-layout h2,
.promo-layout p {
  margin-top: 0;
}

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

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

.competitive-band {
  padding: 46px clamp(16px, 4vw, 48px);
  background: #ffffff;
  border-top: 1px solid var(--line);
}

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

.feature-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fbfdfd;
}

.feature-grid strong,
.feature-grid span {
  display: block;
}

.feature-grid span {
  color: var(--muted);
  margin-top: 5px;
}

.quick-types,
.trending-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-types button,
.trending-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  padding: 10px 12px;
  cursor: pointer;
}

.quick-types button {
  font-weight: 800;
  color: var(--navy);
}

.trending-panel {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.trending-panel h3 {
  margin: 0 0 12px;
  font-size: 24px;
}

.trending-item {
  display: grid;
  gap: 4px;
  text-align: left;
  min-width: min(300px, 100%);
}

.trending-item strong {
  color: var(--navy);
}

.trending-item span {
  color: var(--muted);
  font-size: 13px;
}

.seo-band {
  padding: 26px clamp(16px, 4vw, 48px);
  background: #f9fbfb;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.seo-band h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.seo-band p {
  max-width: 980px;
  margin: 0;
  color: var(--muted);
}

.landing-band {
  padding: 34px clamp(16px, 4vw, 48px);
  background: white;
  border-bottom: 1px solid var(--line);
}

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

.landing-grid button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  color: var(--navy);
  cursor: pointer;
  font-weight: 800;
  min-height: 52px;
  padding: 12px;
  text-align: left;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.price-pill,
.active-context {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  padding: 10px 12px;
  color: var(--navy);
}

.filters {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 12px;
  background: white;
  color: var(--ink);
}

textarea {
  resize: vertical;
}

.file-upload-box {
  border: 1px dashed var(--teal);
  border-radius: 8px;
  padding: 14px;
  background: #f7fcfc;
}

.file-upload-box input {
  border: 0;
  padding: 8px 0 0;
  background: transparent;
}

.file-upload-box span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.active-context {
  margin-bottom: 18px;
}

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

.resource-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  display: grid;
  gap: 13px;
  min-height: 300px;
}

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

.tag {
  border-radius: 6px;
  padding: 5px 8px;
  background: #edf6f4;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.tag.free {
  background: #fff7e8;
  color: var(--amber);
}

.resource-card h3 {
  margin: 0;
  font-size: 20px;
}

.resource-card p {
  margin: 0;
  color: var(--muted);
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.price-row strong {
  display: block;
  font-size: 22px;
  color: var(--navy);
}

.price-row span {
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
}

.admin-band {
  background: #eaf3f4;
}

.admin-login-band {
  padding: 46px clamp(16px, 4vw, 48px);
  background: #eef5f6;
  border-top: 1px solid var(--line);
}

.admin-login-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.6fr);
  gap: 22px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.admin-login-card h2,
.admin-login-card p {
  margin-top: 0;
}

.admin-login-card p {
  color: var(--muted);
}

.admin-login-form {
  display: grid;
  gap: 12px;
}

.admin-approval-panel,
.records-panel {
  margin: 24px clamp(16px, 4vw, 48px) 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.approval-list,
.records-list {
  display: grid;
  gap: 12px;
}

.approval-item,
.record-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  display: grid;
  gap: 8px;
}

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

.payment-band {
  padding: 46px clamp(16px, 4vw, 48px);
  background: #ffffff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 18px;
}

.payment-form,
.payment-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.payment-form {
  padding: 22px;
  display: grid;
  gap: 14px;
}

.payment-card {
  padding: 22px;
}

.payment-card h3,
.payment-card p {
  margin-top: 0;
}

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

.payment-card code {
  color: var(--navy);
  font-weight: 800;
}

.payment-actions,
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 40;
  width: min(420px, 100vw);
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 20px;
  background: white;
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 50px rgba(18, 52, 71, 0.16);
  transform: translateX(105%);
  transition: transform 180ms ease;
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-header,
.cart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cart-header h2 {
  margin: 0;
}

.cart-items {
  display: grid;
  gap: 10px;
  overflow: auto;
}

.cart-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.cart-item strong,
.cart-item span {
  display: block;
}

.cart-item span {
  color: var(--muted);
  font-size: 13px;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 24px;
  align-items: start;
}

.admin-copy {
  padding-top: 16px;
}

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

.admin-note {
  margin-top: 18px;
  border-left: 4px solid var(--amber);
  background: white;
  padding: 14px;
  border-radius: 6px;
  font-weight: 700;
}

.admin-form {
  padding: 22px;
  display: grid;
  gap: 14px;
}

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

.submit-button {
  width: fit-content;
}

.form-status {
  margin: 0;
  color: var(--green);
  font-weight: 800;
}

.toast {
  position: fixed;
  right: clamp(16px, 4vw, 36px);
  bottom: 24px;
  z-index: 30;
  max-width: min(420px, calc(100vw - 32px));
  padding: 13px 16px;
  border-radius: 8px;
  background: var(--navy);
  color: white;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.empty-state {
  grid-column: 1 / -1;
  padding: 26px;
  background: white;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
}

.info-band {
  padding-top: 38px;
  padding-bottom: 38px;
  background: #ffffff;
  border-top: 1px solid var(--line);
}

.info-band-light {
  background: #f7fbfb;
}

.info-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  gap: 20px;
  align-items: start;
}

.info-layout h2,
.info-layout p,
.info-card h3,
.info-card p {
  margin-top: 0;
}

.info-layout p,
.info-card p {
  color: var(--muted);
}

.info-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.contact-actions {
  display: grid;
  gap: 10px;
}

.contact-link {
  display: flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: white;
  color: var(--navy);
  font-weight: 800;
}

.footer-office-image-wrap {
  flex: 0 0 220px;
  width: 220px;
  max-width: 28%;
  overflow: hidden;
  border-radius: 10px;
  background: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

.footer-office-image {
  display: block;
  width: 100%;
  height: 124px;
  object-fit: cover;
  object-position: center;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 22px;
  padding-bottom: 22px;
  background: #c62828;
  color: white;
}

.site-footer strong,
.site-footer span {
  display: block;
}

.site-footer span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  margin-top: 4px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.footer-links a {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 800;
  color: white;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 980px) {
  .dashboard-shell,
  .admin-layout,
  .payment-layout,
  .promo-layout,
  .seller-layout,
  .admin-login-card,
  .info-layout {
    grid-template-columns: 1fr;
  }

  .resource-grid,
  .filters,
  .feature-grid,
  .trust-grid,
  .landing-grid,
  .download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intro-panel {
    min-height: 440px;
  }

  .main-nav {
    align-items: flex-start;
    flex-direction: column;
    padding-top: 14px;
    padding-bottom: 14px;
  }

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

@media (max-width: 640px) {
  body {
    font-size: 14px;
  }

  .main-nav,
  .section-heading,
  .site-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .top-strip {
    gap: 6px;
    padding: 7px 12px;
  }

  .top-strip a {
    padding: 5px 8px;
    font-size: 11px;
  }

  .main-nav,
  .dashboard-shell,
  .content-band,
  .admin-band,
  .site-footer,
  .info-band {
    padding-left: 12px;
    padding-right: 12px;
  }

  .main-nav {
    gap: 10px;
    min-height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .brand {
    gap: 9px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }

  .brand strong {
    font-size: 14px;
  }

  .brand small {
    font-size: 11px;
  }

  .nav-actions,
  .form-row,
  .refer-form,
  .resource-grid,
  .filters,
  .summary-grid,
  .feature-grid,
  .trust-grid,
  .landing-grid,
  .download-grid {
    grid-template-columns: 1fr;
  }

  .nav-actions {
    display: grid;
    gap: 7px;
    width: 100%;
  }

  .card-actions,
  .payment-actions,
  .hero-resource-buttons {
    display: grid;
  }

  .primary-button,
  .ghost-button,
  .download-button,
  .secondary-button,
  .whatsapp-button,
  .mpesa-header-button,
  .cart-button,
  .danger-blink-button,
  .contact-link {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
    gap: 6px;
  }

  .intro-panel {
    min-height: 360px;
    padding: 18px;
  }

  .intro-panel h1 {
    font-size: 30px;
  }

  .intro-panel p {
    font-size: 13px;
  }

  .hero-resource-buttons {
    gap: 7px;
  }

  .hero-resource-buttons a,
  .hero-resource-buttons button,
  .quick-types button,
  .landing-grid button,
  .download-tile {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .dashboard-shell {
    gap: 14px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .summary-grid {
    gap: 8px;
    margin-top: 16px;
  }

  .summary-grid div,
  .grade-panel,
  .resource-card,
  .payment-form,
  .payment-card,
  .admin-login-card,
  .admin-form,
  .info-card {
    padding: 14px;
  }

  .summary-grid strong,
  .price-row strong {
    font-size: 19px;
  }

  .panel-heading h2,
  .section-heading h2,
  .admin-copy h2,
  .info-layout h2 {
    font-size: 22px;
  }

  .grade-list {
    max-height: none;
  }

  .grade-toggle {
    min-height: 40px;
    padding: 9px 10px;
    font-size: 13px;
  }

  .subject-menu {
    gap: 6px;
    padding: 0 10px 10px;
  }

  .subject-chip,
  .tag {
    padding: 5px 7px;
    font-size: 11px;
  }

  .trust-band,
  .promo-band,
  .urgent-band,
  .seller-band,
  .competitive-band,
  .payment-band,
  .admin-login-band,
  .landing-band,
  .info-band {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .resource-card {
    min-height: auto;
    gap: 10px;
  }

  .resource-card h3 {
    font-size: 17px;
  }

  label,
  .resource-card p,
  .payment-card p,
  .info-layout p,
  .info-card p {
    font-size: 12px;
  }

  input,
  select,
  textarea {
    padding: 9px 10px;
    font-size: 13px;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .footer-links a {
    padding: 6px 8px;
    font-size: 12px;
  }
}

/* Compact responsive layout: phone-first, including narrow desktop-mode viewports */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, iframe {
  max-width: 100%;
}

@media (max-width: 760px) {
  .top-strip {
    flex-wrap: wrap;
    overflow-x: visible;
    white-space: normal;
    gap: 5px;
    padding: 6px 10px;
  }

  .top-strip a {
    padding: 4px 7px;
    font-size: 10px;
    line-height: 1.2;
  }

  .main-nav {
    gap: 8px;
  }

  .nav-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .nav-actions > a,
  .nav-actions > button {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.2;
  }

  .brand {
    min-width: 0;
  }

  .brand > span:last-child {
    min-width: 0;
  }

  .brand strong,
  .brand small {
    overflow-wrap: anywhere;
  }

  .brand-mark {
    flex: 0 0 38px;
  }

  .dashboard-shell,
  .content-band,
  .admin-band,
  .site-footer,
  .info-band {
    padding-left: 10px;
    padding-right: 10px;
  }

  .hero-resource-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .hero-resource-buttons a,
  .hero-resource-buttons button {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.2;
  }

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

  .summary-grid div {
    padding: 9px 6px;
    min-width: 0;
  }

  .summary-grid strong {
    font-size: 16px;
  }

  .summary-grid span {
    font-size: 10px;
  }

  .section-heading {
    gap: 8px;
    margin-bottom: 12px;
  }

  .filters {
    gap: 8px;
  }

  .filters label {
    gap: 4px;
  }

  input,
  select,
  textarea {
    min-width: 0;
    padding: 8px 9px;
    font-size: 12px;
  }

  .resource-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .resource-card {
    padding: 12px;
    gap: 8px;
    min-height: 0;
  }

  .resource-card h3 {
    font-size: 16px;
  }

  .resource-card p {
    font-size: 12px;
  }

  .resource-meta {
    gap: 5px;
  }

  .price-row {
    gap: 8px;
    padding-top: 9px;
  }

  .price-row strong {
    font-size: 17px;
  }

  .card-actions,
  .payment-actions,
  .approval-actions {
    gap: 6px;
  }

  .card-actions > *,
  .payment-actions > *,
  .approval-actions > * {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 11px;
  }

  .admin-login-card,
  .admin-form,
  .payment-form,
  .payment-card,
  .info-card {
    padding: 12px;
  }

  .form-row {
    gap: 8px;
  }

  .submit-button {
    width: 100%;
  }

  .landing-grid,
  .download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .landing-grid button,
  .download-tile {
    min-height: 34px;
    padding: 7px 8px;
    font-size: 11px;
  }

  .contact-actions {
    gap: 7px;
  }

  .contact-link {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 11px;
  }

  .site-footer {
    gap: 10px;
  }

  .footer-office-image-wrap {
    flex-basis: 160px;
    width: 160px;
    max-width: 35%;
  }

  .footer-office-image {
    height: 90px;
  }

  .footer-links {
    gap: 5px;
  }

  .footer-links a {
    padding: 5px 7px;
    font-size: 10px;
  }

  .cart-drawer {
    width: 100vw;
    padding: 12px;
  }
}

@media (max-width: 420px) {
  .top-strip a {
    font-size: 9px;
    padding: 3px 6px;
  }

  .nav-actions {
    gap: 5px;
  }

  .nav-actions > a,
  .nav-actions > button {
    min-height: 32px;
    padding: 6px 6px;
    font-size: 10px;
  }

  .brand strong {
    font-size: 13px;
  }

  .brand small {
    font-size: 10px;
  }

  .brand-mark {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    font-size: 11px;
  }

  .hero-resource-buttons a,
  .hero-resource-buttons button {
    min-height: 32px;
    padding: 6px;
    font-size: 10px;
  }

  .summary-grid strong {
    font-size: 14px;
  }

  .summary-grid span {
    font-size: 9px;
  }

  .panel-heading h2,
  .section-heading h2,
  .admin-copy h2,
  .info-layout h2 {
    font-size: 19px;
  }
}

/* Mobile dropdown reliability: make every header dropdown visible and touch-friendly,
   including Teaching & Learning Resources and its nested grade/curriculum menus. */
@media (max-width: 760px) {
  .site-header .main-nav details[open] > .dropdown-panel,
  .site-header .main-nav details[open] > .dropdown-grade-subjects {
    position: fixed !important;
    top: 105px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 65vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 99990 !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #fff !important;
    color: #111827 !important;
    border: 2px solid #d1d5db !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.28) !important;
    pointer-events: auto !important;
  }
  .site-header .main-nav details[open] > .dropdown-panel a,
  .site-header .main-nav details[open] > .dropdown-grade-subjects a {
    display: block !important;
    width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    text-align: left !important;
    color: #111827 !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }
  .site-header .main-nav details > summary {
    touch-action: manipulation;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(37,99,235,.2);
  }
}

/* Professional dropdown navigation */
.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.nav-link,
.nav-dropdown summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 6px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

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

.nav-link:hover,
.nav-dropdown summary:hover,
.nav-dropdown[open] summary {
  background: #eef5f6;
}

.nav-dropdown {
  position: relative;
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 50;
  display: grid;
  min-width: 210px;
  padding: 6px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.dropdown-panel a,
.dropdown-panel button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 5px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.dropdown-panel a:hover,
.dropdown-panel button:hover {
  background: #eef5f6;
}

.nav-utility,
.nav-cta {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 11px;
}

@media (max-width: 980px) {
  .main-nav {
    gap: 10px;
  }

  .nav-menu {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .nav-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
    overflow: visible;
  }

  .nav-link,
  .nav-dropdown summary {
    width: 100%;
    min-height: 32px;
    justify-content: center;
    padding: 6px 5px;
    font-size: 10px;
    white-space: normal;
    text-align: center;
  }

  .dropdown-panel {
    position: fixed;
    top: auto;
    left: 10px;
    right: 10px;
    min-width: 0;
    max-height: 65vh;
    overflow-y: auto;
  }

  .dropdown-panel a,
  .dropdown-panel button {
    padding: 8px;
    font-size: 11px;
  }

  .nav-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .nav-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nav-link,
  .nav-dropdown summary {
    font-size: 9px;
    padding: 5px 3px;
  }
}

/* CBE Nexus professional three-column portal */
.portal-dashboard {
  width: min(1440px, calc(100% - 24px));
  margin: 16px auto;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 230px;
  gap: 12px;
  align-items: start;
}

.portal-sidebar,
.portal-rightbar {
  min-width: 0;
}

.portal-sidebar,
.portal-card,
.portal-welcome,
.portal-category-grid,
.portal-announcement {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}

.portal-sidebar {
  background: #f7fbf8;
}

.portal-sidebar-title,
.portal-card-heading {
  background: #0d8f4f;
  color: #fff;
  padding: 10px 12px;
}

.portal-sidebar-title h2 {
  margin: 2px 0 0;
  font-size: 18px;
}

.portal-sidebar-title .eyebrow {
  color: #fff;
  margin: 0;
}

.portal-menu-group {
  border-top: 1px solid var(--line);
  padding: 10px;
}

.portal-menu-group > strong {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: .04em;
}

.portal-menu-group > a {
  display: block;
  padding: 7px 8px;
  border-bottom: 1px solid #dce7df;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}

.portal-menu-group > a:hover {
  background: #eaf5ee;
}

.portal-main {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.portal-welcome {
  padding: 18px;
  background: linear-gradient(135deg, #ffffff, #f3faf6);
}

.portal-welcome h1 {
  margin: 4px 0 7px;
  font-size: clamp(24px, 3vw, 34px);
}

.portal-welcome p {
  max-width: 760px;
}

.portal-search-shortcut {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.portal-search-shortcut a {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 11px;
}

.portal-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.portal-category-grid a {
  min-width: 0;
  min-height: 70px;
  padding: 11px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  color: var(--navy);
}

.portal-category-grid a:hover {
  background: #f2faf5;
}

.portal-category-grid strong {
  font-size: 13px;
}

.portal-category-grid span {
  font-size: 10px;
  color: var(--muted);
}

.portal-announcement {
  padding: 11px 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.portal-announcement strong {
  color: var(--navy);
}

.portal-card {
  margin-bottom: 12px;
}

.portal-card-heading {
  font-size: 12px;
  font-weight: 900;
}

.portal-card > strong,
.portal-card > p,
.portal-card > .portal-side-link {
  margin-left: 12px;
  margin-right: 12px;
}

.portal-card > strong {
  display: block;
  margin-top: 11px;
}

.portal-card > p {
  font-size: 11px;
  line-height: 1.5;
}

.portal-side-link {
  display: block;
  padding: 8px 0;
  border-top: 1px solid #e1e8e3;
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
}

.portal-help-card {
  padding-bottom: 12px;
}

.portal-help-card .primary-button {
  display: block;
  margin: 8px 12px 0;
  text-align: center;
  min-height: 34px;
  padding: 7px 9px;
  font-size: 11px;
}

@media (max-width: 1050px) {
  .portal-dashboard {
    grid-template-columns: 190px minmax(0, 1fr) 190px;
    gap: 8px;
  }

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

@media (max-width: 760px) {
  .portal-dashboard {
    width: calc(100% - 14px);
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 8px auto;
  }

  .portal-sidebar {
    order: 1;
  }

  .portal-main {
    order: 2;
  }

  .portal-rightbar {
    order: 3;
  }

  .portal-menu-group {
    padding: 7px;
  }

  .portal-menu-group > a {
    display: inline-block;
    width: calc(50% - 4px);
    margin: 2px;
    border: 1px solid var(--line);
    padding: 7px;
    vertical-align: top;
  }

  .portal-welcome {
    padding: 13px;
  }

  .portal-welcome h1 {
    font-size: 22px;
  }

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

  .portal-category-grid a {
    min-height: 62px;
    padding: 8px;
  }

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

  .portal-card {
    margin-bottom: 0;
  }

  .portal-help-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .portal-category-grid {
    grid-template-columns: 1fr;
  }

  .portal-menu-group > a {
    width: 100%;
    margin: 1px 0;
  }

  .portal-rightbar {
    grid-template-columns: 1fr;
  }

  .portal-help-card {
    grid-column: auto;
  }
}

/* Balanced portal layout on phones: preserves the desktop-style three-panel structure */
.portal-sidebar-title,
.portal-card-heading {
  background: linear-gradient(135deg, #087f47, #12a05a);
}

.portal-sidebar {
  border-top: 3px solid #0b8750;
}

.portal-card {
  border-top: 3px solid #0b8750;
}

.portal-category-grid a:nth-child(3n+2) {
  background: #f5f8fc;
}

.portal-category-grid a:nth-child(3n+3) {
  background: #fffaf0;
}

.portal-category-grid a:hover {
  background: #eef8f2;
}

.portal-search-shortcut .primary-button,
.portal-help-card .primary-button {
  background: #0b8750;
}

.portal-search-shortcut .ghost-button {
  border-color: #1b668f;
  color: #1b668f;
}

/* Keep the three-column portal visible on narrow phones */
@media (max-width: 760px) {
  .portal-dashboard {
    width: calc(100% - 8px);
    grid-template-columns: minmax(0, 27%) minmax(0, 46%) minmax(0, 27%);
    gap: 4px;
    margin: 5px auto;
    align-items: stretch;
  }

  .portal-sidebar,
  .portal-main,
  .portal-rightbar {
    min-width: 0;
  }

  .portal-sidebar-title,
  .portal-card-heading {
    padding: 7px 5px;
  }

  .portal-sidebar-title h2 {
    font-size: 11px;
    line-height: 1.15;
  }

  .portal-sidebar-title .eyebrow {
    font-size: 7px;
  }

  .portal-menu-group {
    padding: 5px 3px;
  }

  .portal-menu-group > strong {
    font-size: 8px;
    margin-bottom: 3px;
  }

  .portal-menu-group > a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 5px 3px;
    border: 0;
    border-bottom: 1px solid #dce7df;
    font-size: 8px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .portal-main {
    order: 2;
    gap: 4px;
  }

  .portal-sidebar {
    order: 1;
  }

  .portal-rightbar {
    order: 3;
    display: block;
  }

  .portal-welcome {
    padding: 8px 6px;
  }

  .portal-welcome h1 {
    font-size: 15px;
    line-height: 1.15;
    margin: 3px 0 5px;
  }

  .portal-welcome p {
    font-size: 8px;
    line-height: 1.35;
    margin: 0;
  }

  .portal-search-shortcut {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    margin-top: 6px;
  }

  .portal-search-shortcut a {
    min-height: 26px;
    padding: 5px 3px;
    font-size: 8px;
    text-align: center;
  }

  .portal-category-grid {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  .portal-category-grid a {
    min-height: 48px;
    padding: 6px 5px;
  }

  .portal-category-grid strong {
    font-size: 9px;
    line-height: 1.15;
  }

  .portal-category-grid span {
    font-size: 7px;
    line-height: 1.15;
  }

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

  .summary-grid div {
    padding: 5px 2px;
  }

  .summary-grid strong {
    font-size: 10px;
  }

  .summary-grid span {
    font-size: 7px;
  }

  .portal-announcement {
    padding: 6px 5px;
    display: block;
    font-size: 8px;
    line-height: 1.3;
  }

  .portal-announcement span {
    display: block;
    margin-top: 3px;
  }

  .portal-card {
    margin-bottom: 4px;
  }

  .portal-card-heading {
    font-size: 8px;
    line-height: 1.15;
  }

  .portal-card > strong,
  .portal-card > p,
  .portal-card > .portal-side-link {
    margin-left: 5px;
    margin-right: 5px;
  }

  .portal-card > strong {
    margin-top: 6px;
    font-size: 8px;
    line-height: 1.2;
  }

  .portal-card > p {
    font-size: 7px;
    line-height: 1.3;
  }

  .portal-side-link {
    padding: 5px 0;
    font-size: 7px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .portal-help-card .primary-button {
    margin: 5px;
    min-height: 25px;
    padding: 5px 2px;
    font-size: 7px;
  }
}

@media (max-width: 420px) {
  .portal-dashboard {
    grid-template-columns: minmax(0, 27%) minmax(0, 46%) minmax(0, 27%);
    gap: 3px;
  }

  .portal-welcome h1 {
    font-size: 14px;
  }

  .portal-menu-group > a {
    font-size: 7px;
  }

  .portal-category-grid a {
    min-height: 44px;
  }

  .portal-category-grid strong {
    font-size: 8px;
  }

  .portal-card-heading,
  .portal-menu-group > strong {
    font-size: 7px;
  }
}

/* CBE Nexus colour-balanced portal: yellow dashboard with green, blue, red and white accents */
.portal-dashboard {
  grid-template-columns: 30% minmax(0, 40%) 30%;
  background: #fff4b8;
  border: 2px solid #e0b800;
  border-radius: 8px;
  padding: 6px;
}

.portal-sidebar-title {
  background: linear-gradient(135deg, #087f47, #0da85a);
}

.portal-sidebar {
  background: #fff;
  border-left: 3px solid #0b8750;
}

.portal-menu-group > strong {
  color: #087f47;
}

.portal-menu-group > a {
  color: #0645ad;
  font-size: 11px;
}

.portal-menu-group > a:hover {
  background: #eef7ff;
  color: #c62828;
}

.portal-welcome {
  border-top: 3px solid #e0b800;
  background: #fff;
}

.portal-welcome h1 {
  color: #0645ad;
}

.portal-category-grid a:nth-child(3n+1) {
  border-top: 3px solid #087f47;
}

.portal-category-grid a:nth-child(3n+2) {
  border-top: 3px solid #0645ad;
  background: #f7fbff;
}

.portal-category-grid a:nth-child(3n+3) {
  border-top: 3px solid #c62828;
  background: #fffafa;
}

.portal-rightbar .portal-card:nth-child(1) {
  border-top-color: #0645ad;
}

.portal-rightbar .portal-card:nth-child(2) {
  border-top-color: #087f47;
}

.portal-rightbar .portal-card:nth-child(3) {
  border-top-color: #c62828;
}

.portal-side-link:hover {
  color: #c62828;
}

.portal-announcement {
  border-left: 4px solid #e0b800;
}

/* Mobile: 30 / 40 / 30 while keeping the organized three-panel appearance */
@media (max-width: 760px) {
  .portal-dashboard {
    width: calc(100% - 6px);
    grid-template-columns: minmax(0, 30%) minmax(0, 40%) minmax(0, 30%);
    gap: 3px;
    padding: 3px;
    margin: 4px auto;
  }

  .portal-sidebar-title h2 {
    font-size: 9px;
  }

  .portal-sidebar-title .eyebrow {
    font-size: 6px;
  }

  .portal-menu-group {
    padding: 4px 2px;
  }

  .portal-menu-group > strong {
    font-size: 7px;
  }

  .portal-menu-group > a {
    font-size: 7px;
    line-height: 1.15;
    padding: 4px 2px;
  }

  .portal-welcome {
    padding: 7px 5px;
  }

  .portal-welcome h1 {
    font-size: 14px;
  }

  .portal-welcome p {
    font-size: 7px;
  }

  .portal-search-shortcut a {
    min-height: 24px;
    font-size: 7px;
    padding: 4px 2px;
  }

  .portal-category-grid a {
    min-height: 46px;
    padding: 5px 4px;
  }

  .portal-category-grid strong {
    font-size: 8px;
  }

  .portal-category-grid span {
    font-size: 6px;
  }

  .portal-card-heading {
    font-size: 7px;
  }

  .portal-card > strong {
    font-size: 7px;
  }

  .portal-card > p,
  .portal-side-link {
    font-size: 6px;
  }

  .portal-help-card .primary-button {
    font-size: 6px;
  }
}

@media (max-width: 420px) {
  .portal-dashboard {
    grid-template-columns: minmax(0, 30%) minmax(0, 40%) minmax(0, 30%);
  }

  .portal-menu-group > a {
    font-size: 6.5px;
  }

  .portal-welcome h1 {
    font-size: 12px;
  }

  .portal-category-grid strong {
    font-size: 7px;
  }
}

/* Header navigation visibility: high-contrast buttons on red header */
.site-header,
.top-strip,
.main-nav {
  background: #c62828 !important;
}

.main-nav {
  color: #ffffff !important;
}

.nav-menu .nav-link,
.nav-menu .nav-dropdown summary {
  color: #ffffff !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.35);
}

.nav-menu .nav-link:hover,
.nav-menu .nav-dropdown summary:hover,
.nav-menu .nav-dropdown[open] summary {
  color: #c62828 !important;
  background: #ffffff !important;
  border-color: #ffffff;
}

.nav-actions .nav-utility {
  background: #0645ad !important;
  color: #ffffff !important;
  border: 1px solid #ffffff;
}

.nav-actions .nav-cta {
  background: #0b8750 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff;
}

.nav-actions .whatsapp-button {
  background: #0b8750 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff;
}

.nav-actions .cart-button {
  background: #0645ad !important;
  color: #ffffff !important;
  border: 1px solid #ffffff;
}

.nav-actions .mpesa-header-button {
  background: #f2c200 !important;
  color: #111111 !important;
  border: 1px solid #ffffff;
}

.nav-actions .danger-blink-button {
  color: #ffffff !important;
  border: 1px solid #ffffff;
}

.nav-actions > a:hover,
.nav-actions > button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.brand strong {
  color: #ffffff !important;
}

.dropdown-panel {
  background: #ffffff !important;
  border: 2px solid #c62828;
}

.dropdown-panel a,
.dropdown-panel button {
  color: #123447 !important;
  background: #ffffff !important;
}

.dropdown-panel a:hover,
.dropdown-panel button:hover {
  color: #ffffff !important;
  background: #0645ad !important;
}

@media (max-width: 760px) {
  .nav-menu .nav-link,
  .nav-menu .nav-dropdown summary {
    color: #ffffff !important;
    background: #c62828 !important;
  }

  .nav-menu .nav-link:hover,
  .nav-menu .nav-dropdown summary:hover,
  .nav-menu .nav-dropdown[open] summary {
    color: #c62828 !important;
    background: #ffffff !important;
  }
}

/* Compact blue grade buttons matching Quick Resources */
.portal-sidebar .grade-list .grade-card {
  border: 0;
  border-radius: 4px;
  background: transparent;
  margin: 1px 0;
}

.portal-sidebar .grade-list .grade-toggle {
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid #d7e4f5;
  border-radius: 4px;
  background: #f4f8ff;
  color: #0645ad;
  font-size: 11px;
  line-height: 1.1;
  text-align: left;
}

.portal-sidebar .grade-list .grade-toggle:hover,
.portal-sidebar .grade-list .grade-toggle.active,
.portal-sidebar .grade-list .grade-card.open .grade-toggle {
  background: #0645ad;
  color: #ffffff;
  border-color: #0645ad;
}

.portal-sidebar .grade-list .subject-menu {
  gap: 3px;
  padding: 3px 4px 4px;
}

.portal-sidebar .grade-list .subject-chip {
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #c9d9ee;
  background: #ffffff;
  color: #0645ad;
  font-size: 10px;
  line-height: 1.1;
}

.portal-sidebar .grade-list .subject-chip:hover,
.portal-sidebar .grade-list .subject-chip:focus-visible {
  background: #eaf2ff;
  color: #c62828;
  border-color: #0645ad;
}

@media (max-width: 760px) {
  .portal-sidebar .grade-list {
    gap: 3px;
    margin-top: 7px;
  }

  .portal-sidebar .grade-list .grade-toggle {
    min-height: 24px;
    padding: 4px 4px;
    font-size: 7px;
  }

  .portal-sidebar .grade-list .subject-menu {
    gap: 2px;
    padding: 2px 2px 3px;
  }

  .portal-sidebar .grade-list .subject-chip {
    padding: 3px 4px;
    font-size: 6.5px;
  }
}

@media (max-width: 420px) {
  .portal-sidebar .grade-list .grade-toggle {
    min-height: 22px;
    padding: 3px 3px;
    font-size: 6.5px;
  }

  .portal-sidebar .grade-list .subject-chip {
    font-size: 6px;
    padding: 2px 3px;
  }
}

/* Mobile-only: tightly pack portal buttons to reduce space */
@media (max-width: 760px) {
  .portal-sidebar .grade-list {
    gap: 0;
    margin-top: 4px;
  }

  .portal-sidebar .grade-list .grade-card {
    margin: 0;
    border-radius: 0;
  }

  .portal-sidebar .grade-list .grade-toggle {
    min-height: 20px;
    padding: 2px 3px;
    border-radius: 2px;
    font-size: 6.5px;
    line-height: 1;
  }

  .portal-sidebar .grade-list .subject-menu {
    gap: 0;
    padding: 0;
  }

  .portal-sidebar .grade-list .subject-chip {
    margin: 0;
    padding: 2px 3px;
    border-radius: 2px;
    font-size: 6px;
    line-height: 1;
  }

  .portal-menu-group > a {
    margin: 0;
    border-radius: 0;
  }

  .portal-search-shortcut {
    gap: 1px;
  }

  .portal-search-shortcut a {
    min-height: 20px;
    padding: 3px 2px;
    border-radius: 2px;
  }

  .portal-category-grid {
    gap: 0;
  }

  .portal-category-grid a {
    min-height: 40px;
    padding: 4px 3px;
  }

  .portal-rightbar {
    gap: 2px;
  }

  .portal-card {
    margin-bottom: 2px;
  }

  .portal-side-link {
    padding: 3px 0;
  }

  .portal-help-card .primary-button {
    margin: 3px;
    min-height: 20px;
    padding: 3px 2px;
    border-radius: 2px;
  }
}

@media (max-width: 420px) {
  .portal-sidebar .grade-list .grade-toggle {
    min-height: 18px;
    padding: 2px;
    font-size: 6px;
  }

  .portal-sidebar .grade-list .subject-chip {
    padding: 2px;
    font-size: 5.5px;
  }
}

/* Mobile-only: compact header navigation to save screen space */
@media (max-width: 760px) {
  .top-strip {
    gap: 1px;
    padding: 3px 4px;
  }

  .top-strip a {
    padding: 3px 4px;
    font-size: 8px;
    border-radius: 2px;
  }

  .main-nav {
    min-height: 42px;
    gap: 3px;
    padding-left: 4px;
    padding-right: 4px;
    align-items: center;
  }

  .brand {
    gap: 4px;
    flex-shrink: 0;
  }

  .brand-mark {
    width: 28px;
    height: 28px;
    font-size: 9px;
  }

  .brand strong {
    font-size: 10px;
  }

  .brand small {
    font-size: 7px;
  }

  .nav-menu {
    gap: 1px;
  }

  .nav-link,
  .nav-dropdown summary {
    min-height: 25px;
    padding: 3px 3px;
    border-radius: 2px;
    font-size: 7px;
    line-height: 1;
  }

  .nav-actions {
    gap: 1px;
  }

  .nav-actions > a,
  .nav-actions > button {
    min-height: 25px;
    padding: 3px 4px;
    border-radius: 2px;
    font-size: 7px;
    line-height: 1;
  }

  .nav-actions .cart-button span {
    min-width: 14px;
    height: 14px;
    font-size: 7px;
  }

  .dropdown-panel {
    left: 4px;
    right: 4px;
    max-height: 60vh;
  }

  .dropdown-panel a,
  .dropdown-panel button {
    padding: 5px;
    font-size: 9px;
  }
}

@media (max-width: 420px) {
  .top-strip {
    gap: 0;
    padding: 2px;
  }

  .top-strip a {
    padding: 2px 3px;
    font-size: 7px;
  }

  .main-nav {
    min-height: 36px;
    gap: 2px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .brand {
    gap: 2px;
  }

  .brand-mark {
    width: 24px;
    height: 24px;
    font-size: 8px;
  }

  .brand strong {
    font-size: 8px;
  }

  .brand small {
    font-size: 6px;
  }

  .nav-menu {
    gap: 0;
  }

  .nav-link,
  .nav-dropdown summary {
    min-height: 22px;
    padding: 2px;
    font-size: 6px;
  }

  .nav-actions {
    gap: 0;
  }

  .nav-actions > a,
  .nav-actions > button {
    min-height: 22px;
    padding: 2px 3px;
    font-size: 6px;
  }
}

/* Footer resource links: blue from Notes through Study Guides */
.site-footer .footer-resource-link {
  color: #0645ad !important;
  font-weight: 800;
}

.site-footer .footer-resource-link:hover,
.site-footer .footer-resource-link:focus-visible {
  color: #ffffff !important;
  background: #0645ad;
  border-radius: 3px;
  padding-left: 4px;
  padding-right: 4px;
}

/* Professional colour coding for the quick resource buttons in the header */
.top-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.top-strip > a {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 5px;
  padding: 5px 8px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.top-strip > a:nth-child(1),
.top-strip > a:nth-child(5),
.top-strip > a:nth-child(9),
.top-strip > a:nth-child(13) {
  background: #0645ad !important;
  color: #ffffff !important;
}

.top-strip > a:nth-child(2),
.top-strip > a:nth-child(6),
.top-strip > a:nth-child(10),
.top-strip > a:nth-child(14) {
  background: #0b8750 !important;
  color: #ffffff !important;
}

.top-strip > a:nth-child(3),
.top-strip > a:nth-child(7),
.top-strip > a:nth-child(11) {
  background: #d9a900 !important;
  color: #111111 !important;
}

.top-strip > a:nth-child(4),
.top-strip > a:nth-child(8),
.top-strip > a:nth-child(12) {
  background: #c62828 !important;
  color: #ffffff !important;
}

.top-strip > a:hover,
.top-strip > a:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 7px rgba(0,0,0,.18);
}

@media (max-width: 760px) {
  .top-strip > a {
    padding: 3px 5px;
    font-size: 7px;
    border-radius: 3px;
  }
}

@media (max-width: 420px) {
  .top-strip > a {
    padding: 2px 4px;
    font-size: 6px;
  }
}

/* Phone quick-access header: compact two-row button grid */
@media (max-width: 760px) {
  .top-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
  }

  .top-strip > a {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 3px 2px;
    border-width: 1px;
    border-radius: 0;
    font-size: 6.5px;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .top-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .top-strip > a {
    padding: 2px 1px;
    font-size: 5.5px;
    min-height: 23px;
  }
}

/* Phone quick-access buttons: touching grid with softly curved outer corners */
@media (max-width: 760px) {
  .top-strip {
    gap: 0;
    border-radius: 7px;
    overflow: hidden;
  }

  .top-strip > a {
    border-radius: 0;
    margin: 0;
    border-width: 1px;
  }

  .top-strip > a:nth-child(1) { border-top-left-radius: 7px; }
  .top-strip > a:nth-child(7) { border-top-right-radius: 7px; }
  .top-strip > a:nth-child(8) { border-bottom-left-radius: 7px; }
  .top-strip > a:nth-child(14) { border-bottom-right-radius: 7px; }
}

@media (max-width: 420px) {
  .top-strip {
    border-radius: 6px;
  }

  .top-strip > a:nth-child(1) { border-top-left-radius: 6px; }
  .top-strip > a:nth-child(7) { border-top-right-radius: 6px; }
  .top-strip > a:nth-child(8) { border-bottom-left-radius: 6px; }
  .top-strip > a:nth-child(14) { border-bottom-right-radius: 6px; }
}

/* FINAL MOBILE HEADER SHAPE: compact touching buttons with rounded individual edges */
@media (max-width: 760px) {
  .top-strip {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    grid-template-rows: repeat(2, auto) !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  .top-strip > a {
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 3px 2px !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    border-radius: 6px !important;
    font-size: 6px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* The buttons remain touching because their boxes have zero grid gap. */
  .top-strip > a:nth-child(1),
  .top-strip > a:nth-child(2),
  .top-strip > a:nth-child(3),
  .top-strip > a:nth-child(4),
  .top-strip > a:nth-child(5),
  .top-strip > a:nth-child(6),
  .top-strip > a:nth-child(7) {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
  }

  .top-strip > a:nth-child(8),
  .top-strip > a:nth-child(9),
  .top-strip > a:nth-child(10),
  .top-strip > a:nth-child(11),
  .top-strip > a:nth-child(12),
  .top-strip > a:nth-child(13),
  .top-strip > a:nth-child(14) {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
  }
}

@media (max-width: 420px) {
  .top-strip {
    border-radius: 7px !important;
  }

  .top-strip > a {
    padding: 2px 1px !important;
    font-size: 5px !important;
    min-height: 22px !important;
    border-radius: 5px !important;
  }
}

/* Unified green header quick-access buttons */
.top-strip > a {
  background: #0b8750 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.7) !important;
}

/* Blue buttons in the CBE Nexus dashboard beneath the header */
.portal-dashboard .portal-sidebar a,
.portal-dashboard .portal-category-grid a,
.portal-dashboard .portal-search-shortcut .primary-button,
.portal-dashboard .portal-search-shortcut .ghost-button,
.portal-dashboard .portal-side-link {
  background: #0645ad !important;
  color: #ffffff !important;
  border-color: #0645ad !important;
}

.portal-dashboard .portal-sidebar a:hover,
.portal-dashboard .portal-category-grid a:hover,
.portal-dashboard .portal-search-shortcut .primary-button:hover,
.portal-dashboard .portal-search-shortcut .ghost-button:hover,
.portal-dashboard .portal-side-link:hover {
  background: #053b91 !important;
  color: #ffffff !important;
}

/* Main header navigation buttons: blue */
.main-nav .nav-menu > .nav-link,
.main-nav .nav-menu > .nav-dropdown > summary {
  background: #0645ad !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.7) !important;
}

.main-nav .nav-menu > .nav-link:hover,
.main-nav .nav-menu > .nav-dropdown > summary:hover,
.main-nav .nav-menu > .nav-dropdown[open] > summary {
  background: #053b91 !important;
  color: #ffffff !important;
}

/* Upper header quick-access buttons: unified green */
.top-strip > a {
  background: #0b8750 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.7) !important;
}

.top-strip > a:hover,
.top-strip > a:focus-visible {
  background: #086b40 !important;
  color: #ffffff !important;
}

/* Footer action links moved from the main navigation */
.site-footer .footer-action-link {
  color: #0645ad !important;
  font-weight: 900;
  background: rgba(6,69,173,.08);
  border: 1px solid rgba(6,69,173,.25);
  border-radius: 6px;
  padding: 5px 8px;
  text-decoration: none;
}

.site-footer .footer-action-link:hover,
.site-footer .footer-action-link:focus-visible {
  color: #ffffff !important;
  background: #0645ad !important;
  border-color: #0645ad;
}

@media (max-width: 760px) {
  .site-footer .footer-action-link {
    padding: 4px 5px;
    font-size: 7px;
    border-radius: 4px;
  }
}

/* Automated assessment and learner progress */
.quiz-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:1rem 0}
.quiz-toolbar label{min-width:160px}
.quiz-instructions{padding:12px 14px;border:1px solid #d7e3ee;border-radius:10px;background:#f6f9fc;margin:12px 0}
.quiz-timer{font-weight:800;text-align:right;margin:8px 0 14px;color:#0645ad}
.quiz-questions{display:grid;gap:14px}
.quiz-question{border:1px solid #dbe4ec;border-radius:12px;padding:16px;background:#fff}
.quiz-question legend{font-weight:800;padding:0 6px;line-height:1.45}
.quiz-option{display:flex!important;align-items:flex-start;gap:9px;padding:10px;margin-top:8px;border:1px solid #e2e8ef;border-radius:8px;cursor:pointer;background:#fafcfe}
.quiz-option:hover{border-color:#0645ad;background:#f3f7ff}
.quiz-option input{margin-top:4px}
.quiz-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.quiz-result-panel{margin-top:18px;padding:18px;border:2px solid #0b8750;border-radius:14px;background:#f4fff9}
.quiz-result-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.quiz-result-summary>div{padding:12px;text-align:center;background:#fff;border-radius:10px;border:1px solid #dce9e2}
.quiz-result-summary strong{display:block;font-size:1.45rem;color:#0b8750}
.quiz-result-summary span{font-size:.8rem;opacity:.75}
.quiz-review{display:grid;gap:10px;margin-top:12px}
.quiz-review article{display:grid;gap:5px;padding:12px;border-left:4px solid #c62828;background:#fff;border-radius:8px}
.quiz-review article span{font-size:.92rem}
.quiz-review article p{margin:.25rem 0 0}
.progress-panel-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:12px}
.learner-progress-card{padding:16px;border:1px solid #dce4ec;border-radius:12px;background:#fff;margin-bottom:12px}
.learner-progress-header{display:flex;justify-content:space-between;gap:12px;align-items:center}
.learner-progress-header>div:first-child{display:grid;gap:4px}
.learner-progress-header span{font-size:.88rem;opacity:.75}
.progress-score{font-size:1.8rem;font-weight:900;color:#0645ad;text-align:right}
.progress-score small{display:block;font-size:.7rem;color:#333}
.progress-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.progress-stats div{padding:10px;text-align:center;background:#f7f9fb;border-radius:8px}
.progress-stats strong{display:block}
.progress-stats span{font-size:.78rem;opacity:.7}
.progress-subject-list{display:grid;gap:8px}
.progress-subject{display:grid;grid-template-columns:minmax(120px,1fr) 55px minmax(100px,2fr);gap:8px;align-items:center}
.progress-meter{display:block;height:9px;background:#e7edf2;border-radius:999px;overflow:hidden}
.progress-meter span,.progress-meter i{display:block;height:100%;background:#0b8750;border-radius:999px}
.progress-meter.large{height:12px;margin-top:12px}
@media(max-width:700px){
  .quiz-result-summary{grid-template-columns:repeat(2,1fr)}
  .progress-panel-heading,.learner-progress-header{align-items:flex-start;flex-direction:column}
  .progress-score{text-align:left}
  .progress-stats{grid-template-columns:1fr}
  .progress-subject{grid-template-columns:1fr 50px}
  .progress-subject .progress-meter{grid-column:1 / -1}
}

/* Targeted learning-gap and remediation panel */
.learning-gaps-panel{margin-top:24px;padding:18px;border:1px solid #d9e2ec;border-radius:14px;background:#f8fafc}
.gap-intro{display:flex;gap:10px;flex-direction:column;margin-bottom:14px}
.gap-intro strong{font-size:1.05rem}
.gap-intro span{color:#475569}
.learning-gap-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;margin:10px 0;background:#fff;border:1px solid #d9e2ec;border-radius:12px}
.learning-gap-card>div{display:flex;flex-direction:column;gap:4px}
.learning-gap-card>div span{font-size:.88rem;color:#64748b}
.remedial-button{white-space:nowrap}
.gap-success{display:flex;flex-direction:column;gap:5px;padding:14px;border-radius:10px;background:#ecfdf5;border:1px solid #a7f3d0}
@media(max-width:700px){
  .learning-gap-card{align-items:stretch;flex-direction:column}
  .remedial-button{width:100%}
}

/* Admin Control Centre */
.admin-control-panel{margin-top:24px;padding:22px;border:1px solid #d9e2ec;border-radius:16px;background:#f8fafc}
.admin-control-heading{align-items:center}
.admin-stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0}
.admin-stat-card{padding:16px;border-radius:12px;background:#fff;border:1px solid #d9e2ec;display:flex;flex-direction:column;gap:4px}
.admin-stat-card strong{font-size:1.35rem;color:#0645ad}
.admin-stat-card span{font-weight:700}
.admin-stat-card small{color:#64748b}
.admin-management-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.admin-management-card{background:#fff;border:1px solid #d9e2ec;border-radius:14px;padding:16px;min-width:0}
.admin-card-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.admin-card-heading h3{margin:0}
.admin-card-heading span{font-size:.82rem;color:#64748b}
.admin-management-list{display:flex;flex-direction:column;gap:10px;max-height:360px;overflow:auto}
.admin-record{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px;border:1px solid #e2e8f0;border-radius:10px;background:#fff}
.admin-record>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.admin-record>div span{font-size:.8rem;color:#64748b;overflow-wrap:anywhere}
.admin-record-actions{display:flex!important;flex-direction:row!important;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.admin-record-actions button{padding:7px 10px;font-size:.78rem}
.status-pill{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:.75rem;font-weight:700;text-transform:capitalize;white-space:nowrap;background:#e2e8f0;color:#334155}
.status-pill.approved,.status-pill.active,.status-pill.paid{background:#dcfce7;color:#166534}
.status-pill.pending{background:#fef3c7;color:#92400e}
.status-pill.rejected,.status-pill.blocked{background:#fee2e2;color:#991b1b}
.admin-price-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 90px auto;gap:7px;align-items:center;padding:10px;border:1px solid #e2e8f0;border-radius:10px}
.admin-price-row>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.admin-price-row>div span{font-size:.78rem;color:#64748b}
.admin-price-row input{width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:7px}
.admin-price-row button{padding:8px 10px}
@media(max-width:900px){.admin-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-management-grid{grid-template-columns:1fr}}
@media(max-width:600px){.admin-stats-grid{grid-template-columns:1fr 1fr}.admin-record{align-items:stretch;flex-direction:column}.admin-record-actions{justify-content:flex-start!important}.admin-price-row{grid-template-columns:1fr 1fr}.admin-price-row>div{grid-column:1/-1}.admin-price-row button{width:100%}}

/* Admin Control Centre - professional operations UI */
.admin-control-panel{
  margin-top:24px;
  padding:24px;
  border:1px solid #dbe4ee;
  border-radius:18px;
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
  box-shadow:0 12px 30px rgba(15,23,42,.08);
}
.admin-control-topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid #e2e8f0;
}
.admin-control-topbar h2{margin:3px 0 6px;font-size:1.55rem;color:#0f172a}
.admin-control-topbar p:last-child{margin:0;color:#64748b}
.admin-toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.admin-last-updated{font-size:.78rem;color:#64748b;background:#f1f5f9;padding:8px 10px;border-radius:8px}
.admin-kpi-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  margin:18px 0;
}
.admin-stat-card{
  width:100%;
  text-align:left;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:15px;
  background:#fff;
  box-shadow:0 3px 10px rgba(15,23,42,.04);
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.admin-stat-card:hover,.admin-stat-card:focus-visible{
  transform:translateY(-2px);
  border-color:#0645ad;
  box-shadow:0 8px 18px rgba(6,69,173,.12);
}
.admin-stat-card strong{display:block;font-size:1.35rem;color:#0645ad;line-height:1.2}
.admin-stat-card span{display:block;margin-top:6px;font-weight:800;color:#0f172a}
.admin-stat-card small{display:block;margin-top:3px;color:#64748b;font-size:.72rem}
.admin-command-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:12px;
  padding:12px;
  margin-bottom:14px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
}
.admin-search,.admin-filter{display:grid;gap:5px}
.admin-search span,.admin-filter span{font-size:.72rem;font-weight:800;color:#475569;text-transform:uppercase;letter-spacing:.04em}
.admin-search input,.admin-filter select{
  width:100%;
  min-height:40px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  padding:8px 10px;
}
.admin-module-tabs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:3px;
  margin-bottom:12px;
  scrollbar-width:thin;
}
.admin-module-tab{
  flex:0 0 auto;
  border:1px solid #dbe4ee;
  background:#fff;
  color:#334155;
  border-radius:9px;
  padding:9px 12px;
  font-weight:800;
  cursor:pointer;
}
.admin-module-tab span{
  display:inline-flex;
  min-width:19px;
  height:19px;
  align-items:center;
  justify-content:center;
  margin-left:4px;
  border-radius:999px;
  background:#e2e8f0;
  font-size:.68rem;
}
.admin-module-tab.active{
  background:#0645ad;
  border-color:#0645ad;
  color:#fff;
}
.admin-module-tab.active span{background:#fff;color:#0645ad}
.admin-module-panel{
  display:none;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:16px;
}
.admin-module-panel.active{display:block}
.admin-module-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.admin-module-heading h3{margin:0;color:#0f172a}
.admin-module-heading span{font-size:.8rem;color:#64748b}
.admin-module-summary{
  padding:6px 9px;
  border-radius:999px;
  background:#eef2ff;
  color:#0645ad !important;
  font-weight:800;
  white-space:nowrap;
}
.admin-module-panel .admin-management-list{
  max-height:520px;
  overflow:auto;
  display:grid;
  gap:8px;
  padding-right:2px;
}
.admin-record{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border:1px solid #e5eaf0;
  border-radius:10px;
  background:#fff;
}
.admin-record:hover{background:#f8fafc;border-color:#cbd5e1}
.admin-record-main{min-width:0;display:grid;gap:3px}
.admin-record-main strong{color:#0f172a;overflow-wrap:anywhere}
.admin-record-main span{font-size:.78rem;color:#64748b;overflow-wrap:anywhere}
.admin-amount{white-space:nowrap;color:#0f172a}
.admin-record-actions{display:flex!important;flex-direction:row!important;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.admin-record-actions button{padding:7px 10px;font-size:.76rem}
.admin-price-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 120px 120px auto;
  gap:9px;
  align-items:end;
  padding:12px;
  border:1px solid #e5eaf0;
  border-radius:10px;
}
.admin-price-row>div{min-width:0;display:grid;gap:3px}
.admin-price-row>div span{font-size:.76rem;color:#64748b}
.admin-price-row label{display:grid;gap:4px}
.admin-price-row label span{font-size:.68rem;font-weight:800;color:#64748b;text-transform:uppercase}
.admin-price-row input{width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:7px}
.admin-price-row button{padding:9px 12px}
.admin-control-panel.is-loading{opacity:.72;pointer-events:none}
@media(max-width:1100px){
  .admin-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .admin-control-panel{padding:14px;border-radius:12px}
  .admin-control-topbar{flex-direction:column}
  .admin-toolbar-actions{width:100%;justify-content:space-between}
  .admin-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .admin-stat-card{padding:11px}
  .admin-stat-card strong{font-size:1.05rem}
  .admin-command-bar{grid-template-columns:1fr}
  .admin-module-tabs{margin-left:-2px;margin-right:-2px}
  .admin-module-tab{padding:8px 9px;font-size:.78rem}
  .admin-record{grid-template-columns:1fr;gap:8px}
  .admin-record-actions{justify-content:flex-start}
  .admin-price-row{grid-template-columns:1fr 1fr}
  .admin-price-row>div{grid-column:1/-1}
  .admin-price-row button{width:100%}
}

.admin-popular-card{margin:0 0 14px;padding:16px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}
.admin-popular-list{display:grid;gap:7px;max-height:360px;overflow:auto}
.admin-popular-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border:1px solid #e5eaf0;border-radius:9px}
.admin-rank{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0645ad;color:#fff;font-weight:900;font-size:.78rem}
.admin-popular-metric{font-size:.76rem;font-weight:800;color:#475569;white-space:nowrap}
@media(max-width:760px){.admin-popular-row{grid-template-columns:30px 1fr}.admin-popular-metric{grid-column:2;white-space:normal}}

.resource-preview-modal{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.78)}
.resource-preview-modal.open{display:flex}
.resource-preview-dialog{width:min(1000px,96vw);height:min(88vh,820px);display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 25px 70px rgba(0,0,0,.35)}
.resource-preview-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid #e2e8f0}
.resource-preview-header h2{margin:2px 0 0;color:#0f172a}
.resource-preview-info{margin:0;padding:9px 18px;background:#fff8db;color:#6b5a00;font-size:.82rem;border-bottom:1px solid #eadb8b}
#resourcePreviewFrame{flex:1;width:100%;border:0;background:#e5e7eb}
@media(max-width:640px){.resource-preview-modal{padding:7px}.resource-preview-dialog{width:100%;height:94vh;border-radius:10px}.resource-preview-header{padding:10px 12px}.resource-preview-info{padding:8px 12px;font-size:.74rem}}

.resource-activity{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0;color:#64748b;font-size:.76rem;font-weight:700}

/* Resource Library: compact, moderate action buttons */
.resource-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.resource-library-actions .resource-action-button {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.2;
  border-radius: 5px;
}

.resource-library-actions .resource-download-button {
  font-weight: 700;
}

@media (max-width: 640px) {
  .resource-library-actions .resource-action-button {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
  }
}

/* Performance and responsive hardening */
html { scroll-padding-top: 96px; }
.site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
img, svg, iframe { max-width: 100%; }
img { height: auto; }
button, a, input, select, textarea { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 980px) {
  .main-nav { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .nav-menu { order: 3; width: 100%; overflow-x: auto; }
  .nav-actions { margin-left: auto; }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-grid, .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-dashboard { grid-template-columns: 1fr; }
  .portal-sidebar, .portal-rightbar { position: static; }
}
@media (max-width: 640px) {
  .top-strip { scrollbar-width: thin; }
  .main-nav { min-height: 0; gap: 10px; }
  .brand { min-width: 0; }
  .brand strong { font-size: 16px; }
  .brand small { font-size: 11px; }
  .brand-mark { width: 40px; height: 40px; }
  .nav-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-actions .nav-cta { grid-column: 1 / -1; }
  .filters, .resource-grid, .download-grid, .feature-grid, .trust-grid,
  .seller-layout, .payment-layout, .admin-login-card, .promo-layout, .refer-form {
    grid-template-columns: 1fr;
  }
  .section-heading { align-items: stretch; flex-direction: column; }
  .resource-card { min-height: 0; }
  .card-actions, .payment-actions, .approval-actions { display: grid; grid-template-columns: 1fr; }
  .card-actions > *, .payment-actions > *, .approval-actions > * { width: 100%; }
  .portal-category-grid, .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile usability fix - CBE Nexus */
/* Keep header and footer unchanged. On phones, body sections stack cleanly
   in the same logical order: left panel -> centre content -> right panel. */
@media (max-width: 640px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Main body layouts */
  .dashboard-shell,
  .seller-layout,
  .payment-layout,
  .admin-login-card,
  .promo-layout,
  .refer-form,
  .portal-dashboard {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 14px !important;
  }

  /* Preserve the 30/40/30 meaning on mobile through clear ordered blocks */
  .portal-dashboard > *,
  .dashboard-shell > *,
  .seller-layout > *,
  .payment-layout > *,
  .admin-login-card > *,
  .promo-layout > *,
  .refer-form > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Three main portal areas */
  .portal-sidebar { order: 1 !important; }
  .portal-main { order: 2 !important; }
  .portal-rightbar { order: 3 !important; }

  /* Make every content band use the full phone width */
  .content-band,
  .admin-band,
  .trust-band,
  .promo-band,
  .seller-band,
  .urgent-band,
  .competitive-band,
  .seo-band,
  .landing-band,
  .payment-band,
  .admin-login-band,
  .info-band {
    width: 100%;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow: visible;
  }

  /* Resource library */
  .filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .resource-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;

/* CBE Nexus FINAL DESKTOP CANVAS LOCK
   The site intentionally uses the desktop presentation on phones.
   Older responsive @media rules remain in the stylesheet for history, but
   these final rules win because they are loaded last and use !important. */
html,
body{
  min-width:1200px!important;
  width:1200px!important;
  max-width:none!important;
  overflow-x:auto!important;
}

body{
  margin-left:0!important;
  margin-right:0!important;
}

.site-header,
.top-strip,
.main-nav,
.dashboard-shell,
.content-band,
.admin-band,
.trust-band,
.promo-band,
.seller-band,
.urgent-band,
.competitive-band,
.seo-band,
.landing-band,
.payment-band,
.admin-login-band,
.info-band,
.site-footer{
  min-width:1200px!important;
  width:100%!important;
}

.top-strip{
  flex-wrap:nowrap!important;
  overflow:visible!important;
  white-space:nowrap!important;
}

.main-nav{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  min-height:78px!important;
  padding-left:32px!important;
  padding-right:32px!important;
}

.brand{
  flex:0 0 auto!important;
  min-width:fit-content!important;
  width:auto!important;
}

.nav-menu{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  width:auto!important;
  min-width:0!important;
  overflow:visible!important;
  gap:4px!important;
}

.nav-link,
.nav-dropdown summary{
  width:auto!important;
  min-width:auto!important;
  min-height:36px!important;
  padding:7px 9px!important;
  white-space:nowrap!important;
  font-size:12px!important;
}

.nav-actions{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  width:auto!important;
  min-width:fit-content!important;
  justify-content:flex-end!important;
  gap:6px!important;
}

.nav-actions>a,
.nav-actions>button{
  width:auto!important;
  min-width:auto!important;
  min-height:36px!important;
  padding:7px 10px!important;
  font-size:11px!important;
}

.dashboard-shell{
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)!important;
  gap:24px!important;
}

.content-band,
.admin-band,
.trust-band,
.promo-band,
.seller-band,
.urgent-band,
.competitive-band,
.seo-band,
.landing-band,
.payment-band,
.admin-login-band,
.info-band{
  padding-left:32px!important;
  padding-right:32px!important;
}

.resource-grid,
.feature-grid,
.trust-grid,
.landing-grid,
.download-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
}

.filters{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(160px,1fr))!important;
  gap:12px!important;
}

.form-row,
.refer-form{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

.admin-login-card,
.payment-layout,
.promo-layout,
.seller-layout,
.info-layout{
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)!important;
}

.card-actions,
.payment-actions,
.approval-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  grid-template-columns:none!important;
}

.card-actions>*,
.payment-actions>*,
.approval-actions>*{
  width:auto!important;
}

.portal-dashboard{
  width:min(1440px,calc(100% - 24px))!important;
  min-width:1160px!important;
  margin:16px auto!important;
  display:grid!important;
  grid-template-columns:30% minmax(0,40%) 30%!important;
  flex-direction:row!important;
  gap:12px!important;
}

.portal-sidebar{order:1!important;}
.portal-main{order:2!important;}
.portal-rightbar{order:3!important;}

.portal-category-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

.summary-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

/* Explicitly defeat phone-only responsive rules. */
@media(max-width:1199px){
  html,
  body{
    min-width:1200px!important;
    width:1200px!important;
    max-width:none!important;
    overflow-x:auto!important;
  }

  .main-nav{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    min-height:78px!important;
  }

  .nav-menu{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    width:auto!important;
    overflow:visible!important;
  }

  .nav-actions{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    width:auto!important;
  }

  .dashboard-shell{
    display:grid!important;
    grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)!important;
  }

  .resource-grid,
  .feature-grid,
  .trust-grid,
  .landing-grid,
  .download-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .filters{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(160px,1fr))!important;
  }

  .form-row,
  .refer-form{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .portal-dashboard{
    display:grid!important;
    width:calc(100% - 24px)!important;
    min-width:1160px!important;
    grid-template-columns:30% minmax(0,40%) 30%!important;
    gap:12px!important;
  }

  .portal-sidebar{order:1!important;}
  .portal-main{order:2!important;}
  .portal-rightbar{order:3!important;}

  .portal-category-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Final phone guarantee: same desktop canvas, horizontally scrollable. */
@media(max-width:760px){
  html,
  body{
    min-width:1200px!important;
    width:1200px!important;
    max-width:none!important;
    overflow-x:auto!important;
  }

  .site-header,
  .top-strip,
  .main-nav{
    min-width:1200px!important;
  }

  .main-nav{
    padding-left:32px!important;
    padding-right:32px!important;
  }

  .nav-menu{
    display:flex!important;
    grid-template-columns:none!important;
  }

  .nav-actions{
    display:flex!important;
    grid-template-columns:none!important;
  }

  .resource-grid,
  .feature-grid,
  .trust-grid,
  .landing-grid,
  .download-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .filters{
    grid-template-columns:repeat(4,minmax(160px,1fr))!important;
  }

  .portal-dashboard{
    width:calc(100% - 24px)!important;
    min-width:1160px!important;
    grid-template-columns:30% minmax(0,40%) 30%!important;
  }

  .portal-sidebar{order:1!important;}
  .portal-main{order:2!important;}
  .portal-rightbar{order:3!important;}

  .portal-category-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .site-footer{
    flex-direction:row!important;
    align-items:flex-start!important;
  }
}


/* CBE NEXUS HEADER — compact professional unified button treatment */
.site-header .nav-menu .nav-link,
.site-header .nav-menu .nav-dropdown summary,
.site-header .nav-actions > a,
.site-header .nav-actions > button,
.site-header .nav-actions .nav-cta{
  background:#12345b!important;
  color:#fff!important;
  border:1px solid #12345b!important;
  box-shadow:none!important;
  border-radius:6px!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.15!important;
  min-height:32px!important;
  height:32px!important;
  padding:6px 9px!important;
  white-space:nowrap!important;
}
.site-header .nav-menu .nav-link:hover,
.site-header .nav-menu .nav-dropdown summary:hover,
.site-header .nav-actions > a:hover,
.site-header .nav-actions > button:hover,
.site-header .nav-actions .nav-cta:hover{
  background:#12345b!important;
  color:#fff!important;
  border-color:#12345b!important;
  transform:translateY(-1px);
}
.site-header .nav-menu .nav-link:active,
.site-header .nav-menu .nav-dropdown summary:active,
.site-header .nav-actions > a:active,
.site-header .nav-actions > button:active,
.site-header .nav-actions .nav-cta:active{
  transform:translateY(0);
}
.site-header .nav-menu{gap:4px!important;}
.site-header .nav-actions{gap:5px!important;}
@media(max-width:760px){
  .site-header .nav-menu .nav-link,
  .site-header .nav-menu .nav-dropdown summary,
  .site-header .nav-actions > a,
  .site-header .nav-actions > button,
  .site-header .nav-actions .nav-cta{
    min-height:32px!important;
    height:32px!important;
    padding:6px 9px!important;
    font-size:11px!important;
  }
}


/* =========================================================
   CBE NEXUS — FINAL PROFESSIONAL DESIGN POLISH
   Keeps the existing structure, colours and desktop canvas.
   ========================================================= */

:root{
  --nexus-radius:10px;
  --nexus-soft-shadow:0 8px 24px rgba(18,52,71,.08);
}

body{
  letter-spacing:.005em;
}

h1,h2,h3,h4{
  overflow-wrap:break-word;
  word-break:normal;
}

.info-band > h1,
.info-band > .eyebrow,
.info-band > p{
  text-align:center;
}

.info-band > h1{
  max-width:1100px;
  margin:0 auto 10px;
  font-size:clamp(30px,3.2vw,46px);
  line-height:1.12;
  color:var(--navy);
}

.info-band > p:not(.eyebrow){
  max-width:900px;
  margin:0 auto 18px;
  color:var(--muted);
  font-size:15px;
}

.info-band > .eyebrow{
  margin-bottom:7px;
}

.section-heading{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

.section-heading h2,
.panel-heading h2{
  line-height:1.15;
  color:var(--navy);
}

.seo-band,
.landing-band,
.competitive-band,
.trust-band{
  position:relative;
}

.seo-band > *,
.landing-band > *,
.competitive-band > *,
.trust-band > *{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

.filters{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  align-items:end;
}

.filters label{
  color:#475569;
}

.filters input,
.filters select{
  min-height:44px;
  border-radius:8px;
  background:#fff;
}

.filters input:hover,
.filters select:hover{
  border-color:#b8c7d0;
}

.resource-grid{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

.resource-card{
  border-radius:10px;
  box-shadow:var(--nexus-soft-shadow);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}

.resource-card:hover{
  transform:translateY(-2px);
  border-color:#c4d4dc;
  box-shadow:0 12px 30px rgba(18,52,71,.11);
}

.resource-card h3{
  color:var(--navy);
  line-height:1.25;
  font-size:18px;
}

.resource-meta .tag{
  border-radius:999px;
  padding:5px 9px;
}

.download-tile{
  border-radius:10px;
  box-shadow:0 3px 12px rgba(18,52,71,.06);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}

.download-tile:hover{
  transform:translateY(-2px);
  border-color:#b9cbd4;
  box-shadow:0 8px 20px rgba(18,52,71,.10);
}

.trust-grid article,
.feature-grid article,
.info-card,
.grade-panel,
.admin-form,
.payment-form,
.payment-card{
  border-radius:10px;
}

.site-footer{
  min-height:82px;
}

.footer-links{
  align-items:center;
}

.footer-links a{
  transition:background .16s ease,transform .16s ease;
}

.footer-links a:hover{
  transform:translateY(-1px);
}

.site-header{
  box-shadow:0 2px 10px rgba(18,52,71,.06);
}

.top-strip{
  min-height:38px;
  align-items:center;
}

.brand strong{
  font-size:18px;
  line-height:1.1;
}

.brand small{
  line-height:1.25;
}

.main-nav{
  box-shadow:inset 0 -1px rgba(255,255,255,.08);
}

.grade-panel{
  box-shadow:var(--nexus-soft-shadow);
}

.grade-card{
  border-radius:9px;
}

.grade-toggle{
  min-height:46px;
  font-size:14px;
}

.subject-dropdown{
  min-height:42px;
  border-radius:8px;
}

.primary-button,
.secondary-button,
.ghost-button,
.download-button{
  border-radius:7px;
}

input,
select,
textarea{
  border-radius:8px;
}

input:focus,
select:focus,
textarea:focus{
  border-color:#177e89;
}

.empty-state{
  text-align:center;
  min-height:120px;
  display:grid;
  place-items:center;
}

@media(max-width:1199px){
  .info-band > h1{
    font-size:36px;
  }
}


/* Mobile header buttons — light-yellow boundary only */
@media(max-width:760px){
  .site-header .nav-menu .nav-link,
  .site-header .nav-menu .nav-dropdown summary,
  .site-header .nav-actions > a,
  .site-header .nav-actions > button,
  .site-header .nav-actions .nav-cta{
    border:2px solid #f6e7a8!important;
    box-shadow:0 0 0 1px rgba(246,231,168,.35)!important;
  }
}


/* Resources page — compact uploaded-file cards on desktop */
@media(min-width:761px){
  .resource-grid .resource-card,
  .resources-grid .resource-card,
  .resource-card{
    padding:12px!important;
    margin:0!important;
    min-height:0!important;
  }

  .resource-grid .resource-card h3,
  .resources-grid .resource-card h3,
  .resource-card h3{
    font-size:16px!important;
    line-height:1.25!important;
    margin:6px 0!important;
  }

  .resource-grid .resource-card p,
  .resources-grid .resource-card p,
  .resource-card p{
    font-size:13px!important;
    line-height:1.35!important;
    margin:4px 0!important;
  }

  .resource-grid .resource-card .resource-actions,
  .resources-grid .resource-card .resource-actions,
  .resource-card .resource-actions{
    gap:6px!important;
    margin-top:8px!important;
  }

  .resource-grid .resource-card .resource-actions a,
  .resource-grid .resource-card .resource-actions button,
  .resources-grid .resource-card .resource-actions a,
  .resources-grid .resource-card .resource-actions button,
  .resource-card .resource-actions a,
  .resource-card .resource-actions button{
    min-height:34px!important;
    padding:7px 10px!important;
    font-size:12px!important;
  }
}


/* Compact mobile footer — keep the desktop canvas but make the footer short and balanced. */
@media (max-width:760px){
  .site-footer{
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:10px!important;
    padding:10px 12px!important;
    min-height:0!important;
  }

  .footer-office-image-wrap{
    flex:0 0 105px!important;
    width:105px!important;
    max-width:105px!important;
    height:62px!important;
    border-radius:6px!important;
    box-shadow:0 2px 8px rgba(0,0,0,.12)!important;
  }

  .footer-office-image{
    width:105px!important;
    height:62px!important;
    object-fit:cover!important;
  }

  .site-footer > div:nth-child(2){
    flex:0 0 205px!important;
    min-width:205px!important;
  }

  .site-footer > div:nth-child(2) strong{
    font-size:12px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }

  .site-footer > div:nth-child(2) .footer-address{
    font-size:10px!important;
    line-height:1.25!important;
    margin-top:3px!important;
    white-space:normal!important;
  }

  .footer-quality-badges{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    flex-wrap:wrap!important;
    flex:1 1 auto!important;
    min-width:0!important;
  }

  .footer-quality-badge{
    display:inline-flex!important;
    align-items:center!important;
    gap:3px!important;
    margin:0!important;
    font-size:9px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }

  .footer-quality-badge small{
    font-size:8px!important;
  }

  .footer-links{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    flex-wrap:wrap!important;
    max-width:360px!important;
  }

  .footer-links a{
    padding:4px 6px!important;
    font-size:9px!important;
    line-height:1.1!important;
    border-radius:4px!important;
  }

  .site-footer > p{
    flex:0 0 auto!important;
    margin:0!important;
    font-size:9px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    opacity:.75!important;
  }

  .footer-admin-dot{
    transform:scale(.75)!important;
    transform-origin:center!important;
  }
}


/* Final compact footer sizing — preserve existing colours and structure. */
@media(max-width:760px){
  .site-footer{
    gap:7px!important;
    padding:7px 10px!important;
    min-height:0!important;
    height:auto!important;
  }

  .footer-office-image-wrap{
    flex:0 0 78px!important;
    width:78px!important;
    max-width:78px!important;
    height:46px!important;
    border-radius:5px!important;
  }

  .footer-office-image{
    width:78px!important;
    height:46px!important;
    object-fit:cover!important;
  }

  .site-footer > div:nth-child(2){
    flex:0 0 165px!important;
    min-width:165px!important;
  }

  .site-footer > div:nth-child(2) strong{
    font-size:10px!important;
    line-height:1.15!important;
  }

  .site-footer > div:nth-child(2) .footer-address{
    font-size:8px!important;
    line-height:1.15!important;
    margin-top:2px!important;
  }

  .footer-quality-badges{
    gap:4px!important;
  }

  .footer-quality-badge{
    gap:2px!important;
    font-size:8px!important;
    line-height:1.05!important;
  }

  .footer-quality-badge small{
    font-size:7px!important;
  }

  .footer-links{
    gap:3px!important;
    max-width:300px!important;
  }

  .footer-links a{
    padding:3px 5px!important;
    font-size:8px!important;
    line-height:1.05!important;
    border-radius:3px!important;
  }

  .site-footer > p{
    font-size:8px!important;
    line-height:1.1!important;
  }
}


/* Header buttons — black and green professional treatment. */
.site-header .nav-menu .nav-link,
.site-header .nav-menu .nav-dropdown summary,
.site-header .nav-actions > a,
.site-header .nav-actions > button,
.site-header .nav-actions .nav-cta{
  background:#111111!important;
  color:#ffffff!important;
  border:1px solid #2f7d57!important;
}
.site-header .nav-menu .nav-link:hover,
.site-header .nav-menu .nav-dropdown summary:hover,
.site-header .nav-actions > a:hover,
.site-header .nav-actions > button:hover,
.site-header .nav-actions .nav-cta:hover{
  background:#2f7d57!important;
  color:#ffffff!important;
  border-color:#2f7d57!important;
}
@media(max-width:760px){
  .site-header .nav-menu .nav-link,
  .site-header .nav-menu .nav-dropdown summary,
  .site-header .nav-actions > a,
  .site-header .nav-actions > button,
  .site-header .nav-actions .nav-cta{
    border:2px solid #2f7d57!important;
    box-shadow:0 0 0 1px rgba(47,125,87,.25)!important;
  }
}


/* Final header button colour — dark green. */
.site-header .nav-menu .nav-link,
.site-header .nav-menu .nav-dropdown summary,
.site-header .nav-actions > a,
.site-header .nav-actions > button,
.site-header .nav-actions .nav-cta{
  background:#14532d!important;
  color:#ffffff!important;
  border-color:#14532d!important;
}
.site-header .nav-menu .nav-link:hover,
.site-header .nav-menu .nav-dropdown summary:hover,
.site-header .nav-actions > a:hover,
.site-header .nav-actions > button:hover,
.site-header .nav-actions .nav-cta:hover{
  background:#166534!important;
  color:#ffffff!important;
  border-color:#166534!important;
}
@media(max-width:760px){
  .site-header .nav-menu .nav-link,
  .site-header .nav-menu .nav-dropdown summary,
  .site-header .nav-actions > a,
  .site-header .nav-actions > button,
  .site-header .nav-actions .nav-cta{
    border:2px solid #14532d!important;
    box-shadow:0 0 0 1px rgba(20,83,45,.25)!important;
  }
}


/* Apply dark green styling to all clickable header buttons/links, including top resource links. */
.site-header .top-strip > a,
.site-header .nav-menu .nav-link,
.site-header .nav-menu .nav-dropdown summary,
.site-header .nav-actions > a,
.site-header .nav-actions > button,
.site-header .nav-actions .nav-cta{
  background:#14532d!important;
  color:#fff!important;
  border-color:#14532d!important;
}
.site-header .top-strip > a:hover,
.site-header .nav-menu .nav-link:hover,
.site-header .nav-menu .nav-dropdown summary:hover,
.site-header .nav-actions > a:hover,
.site-header .nav-actions > button:hover,
.site-header .nav-actions .nav-cta:hover{
  background:#166534!important;
  color:#fff!important;
  border-color:#166534!important;
}
@media(max-width:760px){
  .site-header .top-strip > a,
  .site-header .nav-menu .nav-link,
  .site-header .nav-menu .nav-dropdown summary,
  .site-header .nav-actions > a,
  .site-header .nav-actions > button,
  .site-header .nav-actions .nav-cta{
    border:2px solid #14532d!important;
    box-shadow:0 0 0 1px rgba(20,83,45,.22)!important;
  }
}


/* Teaching & Learning resource cards: alternating sky-green and soft-pink palette. */
.grade-list > .grade-card:nth-child(odd),
#resourceGrid .resource-card:nth-child(odd),
.resources-grid .resource-card:nth-child(odd),
.download-grid > .download-tile:nth-child(odd),
.resource-card:nth-child(odd) {
  background:#e0f7f1!important;
  border-color:#8ed9c6!important;
}
.grade-list > .grade-card:nth-child(even),
#resourceGrid .resource-card:nth-child(even),
.resources-grid .resource-card:nth-child(even),
.download-grid > .download-tile:nth-child(even),
.resource-card:nth-child(even) {
  background:#fff0f5!important;
  border-color:#f0b6cc!important;
}
.grade-list > .grade-card .grade-toggle {
  background:#c8f0e5!important;
  color:#174f43!important;
  border-bottom:1px solid #8ed9c6!important;
}
.grade-list > .grade-card:nth-child(even) .grade-toggle {
  background:#ffdce8!important;
  color:#7a2948!important;
  border-bottom-color:#f0b6cc!important;
}
.grade-list > .grade-card .subject-menu { background:transparent!important; }
.grade-list .subject-chip,
.download-grid > .download-tile,
#resourceGrid .resource-card,
.resources-grid .resource-card {
  border-radius:10px;
  box-shadow:0 4px 14px rgba(31,76,65,.07);
}
.grade-list .subject-chip:nth-child(odd) {
  background:#e0f7f1!important;
  border-color:#8ed9c6!important;
  color:#174f43!important;
}
.grade-list .subject-chip:nth-child(even) {
  background:#fff0f5!important;
  border-color:#f0b6cc!important;
  color:#7a2948!important;
}



/* Make the Holiday Tuition words visibly green and blinking. */
@keyframes holidayTuitionTextBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
a[href="#holidayTuition"],
a[href="tuition.html"],
.site-header .top-strip a[href="#holidayTuition"],
.portal-side-link[href="#holidayTuition"],
.download-tile[href="tuition.html"] {
  color: #16803c !important;
  -webkit-text-fill-color: #16803c !important;
  font-weight: 900 !important;
  animation: holidayTuitionTextBlink .8s ease-in-out infinite !important;
}
a[href="#holidayTuition"] *,
a[href="tuition.html"] * {
  color: #16803c !important;
  -webkit-text-fill-color: #16803c !important;
  animation: holidayTuitionTextBlink .8s ease-in-out infinite !important;
}


/* Professional responsive CBE Nexus homepage dashboard cards */
.home-dashboard-cards{padding:30px 18px;background:#f8fafc;border-block:1px solid #e2e8f0}
.home-dashboard-cards-inner{max-width:1200px;margin:auto}
.home-dashboard-cards-heading{text-align:center;max-width:760px;margin:0 auto 22px}
.home-dashboard-cards-heading h2{margin:5px 0 8px;color:#0f172a}
.home-dashboard-cards-heading p:last-child{margin:0;color:#64748b}
.home-dashboard-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.home-dashboard-card{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;min-height:145px;padding:18px;border-radius:15px;text-decoration:none!important;border:1px solid rgba(15,23,42,.12);box-shadow:0 4px 12px rgba(15,23,42,.07);transition:transform .18s ease,box-shadow .18s ease}
.home-dashboard-card:hover,.home-dashboard-card:focus-visible{transform:translateY(-3px);box-shadow:0 9px 20px rgba(15,23,42,.13)}
.home-dashboard-card .dashboard-card-icon{font-size:1.55rem;line-height:1.2}
.home-dashboard-card strong{font-size:1rem;line-height:1.35;font-weight:850}
.home-dashboard-card span:last-child{font-size:.87rem;line-height:1.5}
.home-dashboard-card.sky-blue{background:#e0f2fe;color:#075985;border-color:#bae6fd}
.home-dashboard-card.sky-green{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.home-dashboard-card.brown{background:#f3e8d5;color:#78350f;border-color:#e7cda8}
.home-dashboard-card.pink{background:#fce7f3;color:#9d174d;border-color:#fbcfe8}
.home-dashboard-card.grey{background:#e5e7eb;color:#374151;border-color:#d1d5db}
.home-dashboard-card.indigo{background:#e0e7ff;color:#3730a3;border-color:#c7d2fe}
@media(max-width:900px){.home-dashboard-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.home-dashboard-cards{padding:24px 13px}.home-dashboard-card-grid{grid-template-columns:1fr;gap:10px}.home-dashboard-card{min-height:0;padding:15px}}


/* High-visibility pink blinking Interactive Questions button. */
.interactive-questions-header-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 10px 16px;
  border: 2px solid #ec4899;
  border-radius: 999px;
  background: #f9a8d4;
  color: #050505 !important;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 0 0 2px rgba(236, 72, 153, .28), 0 0 16px rgba(219, 39, 119, .78);
  animation: interactive-question-pulse 1.1s ease-in-out infinite;
}
.interactive-questions-header-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -4px;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from 0deg, #fff1f7 0deg, #ec4899 65deg, #fce7f3 120deg, #db2777 190deg, #ffffff 255deg, #f472b6 320deg, #fff1f7 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: interactive-question-snake 1.5s linear infinite;
  pointer-events: none;
}
.interactive-questions-header-btn:hover,
.interactive-questions-header-btn:focus-visible {
  background: #fbcfe8;
  color: #000 !important;
  outline: 3px solid #111;
  outline-offset: 3px;
}
@keyframes interactive-question-snake { to { transform: rotate(360deg); } }
@keyframes interactive-question-pulse {
  0%, 100% { transform: translateZ(0) scale(1); opacity: 1; }
  50% { transform: translateZ(0) scale(1.025); opacity: .9; }
}
@media (max-width: 760px) {
  .interactive-questions-header-btn { min-height: 38px; padding: 8px 11px; font-size: .86rem; }
  .nav-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .interactive-questions-header-btn,
  .interactive-questions-header-btn::before { animation: none; }
}


/* Compact, professional header labels: bold, smaller, and never split words */
.site-header .nav-menu > .nav-link,
.site-header .nav-menu > .nav-dropdown > summary,
.site-header .nav-actions > a,
.site-header .nav-actions > button {
  font-size: clamp(0.76rem, 0.9vw, 0.9rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}
.site-header .nav-menu,
.site-header .nav-actions {
  gap: clamp(5px, 0.7vw, 10px) !important;
  min-width: 0;
}
.site-header .nav-menu > .nav-link,
.site-header .nav-menu > .nav-dropdown > summary {
  padding: 8px clamp(6px, 0.75vw, 11px) !important;
  flex: 0 0 auto;
}
.site-header .brand strong,
.site-header .brand small,
.site-header .brand-mark {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
@media (max-width: 900px) {
  .site-header .nav-menu > .nav-link,
  .site-header .nav-menu > .nav-dropdown > summary,
  .site-header .nav-actions > a,
  .site-header .nav-actions > button {
    font-size: 0.78rem !important;
    padding: 7px 7px !important;
  }
}
@media (max-width: 640px) {
  .site-header .nav-menu > .nav-link,
  .site-header .nav-menu > .nav-dropdown > summary,
  .site-header .nav-actions > a,
  .site-header .nav-actions > button {
    font-size: 0.72rem !important;
    padding: 6px 5px !important;
  }
}


/* Simple, high-contrast Maths Competition button. */
.math-competition-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 15px;
  border: 2px solid #be185d;
  border-radius: 999px;
  background: #f9a8d4;
  color: #111 !important;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(236, 72, 153, .18);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.math-competition-btn:hover,
.math-competition-btn:focus-visible {
  background: #fbcfe8;
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(219, 39, 119, .45);
  outline: 2px solid #111;
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .math-competition-btn { min-height: 38px; padding: 8px 11px; font-size: .86rem; }
  .site-header .nav-actions { flex-wrap: wrap; }
}


/* Performance: defer rendering of long below-the-fold sections until they approach view.
   Keeps the existing layout and content while reducing initial rendering work. */
@supports (content-visibility: auto) {
  .trust-band,
  .content-band,
  .info-band,
  .promo-band,
  .seller-band,
  .refer-band,
  .urgent-band,
  .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 650px;
  }
}

/* Avoid costly motion effects for visitors who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Keep attention animations inexpensive and respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .danger-blink-button,
  a[href="#holidayTuition"],
  a[href="tuition.html"],
  .site-header .top-strip a[href="#holidayTuition"],
  .portal-side-link[href="#holidayTuition"],
  a[href="#holidayTuition"] *,
  a[href="tuition.html"] *,
  .interactive-questions-header-btn,
  .interactive-questions-header-btn::before {
    animation: none !important;
    transition: none !important;
  }
}


/* Accessibility baseline: WCAG 2.2 AA-oriented global improvements. */
:root { --muted: #4b5563; }
html { scroll-behavior: auto; }
.cbe-skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 2147483647;
  transform: translateY(-180%); padding: 12px 16px; border-radius: 6px;
  background: #111827; color: #fff; font-weight: 800; text-decoration: underline;
  box-shadow: 0 3px 12px rgba(0,0,0,.28);
}
.cbe-skip-link:focus, .cbe-skip-link:focus-visible { transform: translateY(0); outline: 3px solid #facc15; outline-offset: 3px; }
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"]):focus-visible {
  outline: 3px solid #005fcc !important; outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #fff !important;
}
:where(button, input, select, textarea) { accent-color: #075985; }
:where(input, select, textarea) { color: #17202a; }
::placeholder { color: #59636e !important; opacity: 1; }
:where(a:not(.primary-button):not(.ghost-button):not(.download-button):not(.secondary-button):not(.whatsapp-button):not(.mpesa-header-button):not(.cart-button):not(.danger-blink-button)) { text-underline-offset: .18em; }
:where([aria-invalid="true"], .is-invalid, .error) { outline-color: #b42318; }
:where(.error, .form-error, [role="alert"]) { color: #8a1712; }
#main-content:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    scroll-animation: none !important;
  }
}
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid Highlight !important; outline-offset: 3px !important;
  }
}


/* Use the same desktop layout on phones; the fixed 1200px layout viewport is set in index.html. */


/* Keep the eight primary resource buttons on one continuous row, including on phones using desktop viewport mode. */
.site-header.cbe-header-v2 .top-strip.cbe-resource-strip {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}
.site-header.cbe-header-v2 .top-strip.cbe-resource-strip > a {
  flex: 1 1 0 !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  padding: 5px 6px !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  text-align: center !important;
}