:root {
  --surface: #f5f6f8;
  --card: #ffffff;
  --brand: #2e2a7b;
  --brand-hover: #3f3a86;
  --gold: #d4af37;
  --ink: #161a24;
  --muted: #5f687a;
  --line: #e1e5ec;
  --success: #147d64;
  --success-bg: #e8f7f2;
  --danger: #b42318;
  --danger-bg: #fff0ee;
  --radius: 1rem;
  --shadow: 0 24px 70px -35px rgba(22, 26, 36, 0.45);
  /* Shared presentation tokens for the public and learner surfaces. */
  --ui-brand: #2e2a7b;
  --ui-brand-deep: #232059;
  --ui-accent: #d4af37;
  --ui-accent-text: #80611a;
  --ui-background: #f7f7fa;
  --ui-surface: #fff;
  --ui-border: #e5e4ec;
  --ui-text: #1f1d33;
  --ui-text-secondary: #5f6072;
  --ui-success: #147d64;
  --ui-warning: #80611a;
  --ui-error: #b42318;
  --ui-space-1: .25rem;
  --ui-space-2: .5rem;
  --ui-space-3: .75rem;
  --ui-space-4: 1rem;
  --ui-space-6: 1.5rem;
  --ui-space-8: 2rem;
  --ui-space-12: 3rem;
  --ui-space-16: 4rem;
  --ui-text-sm: .875rem;
  --ui-text-base: 1rem;
  --ui-text-lg: 1.25rem;
  --ui-text-xl: 1.75rem;
  --ui-text-2xl: 2.25rem;
  --ui-text-hero: 3rem;
  --ui-radius-sm: .5rem;
  --ui-radius-md: .75rem;
  --ui-radius-lg: 1rem;
  --ui-shadow-card: 0 8px 28px -24px rgba(35, 32, 89, .3);
  --ui-content-width: 74rem;
  --ui-reading-width: 60rem;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--site-font-family, Tajawal, "Segoe UI", Arial, sans-serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

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

.construction-shell,
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    radial-gradient(circle at 10% 0%, rgba(212, 175, 55, 0.15), transparent 31rem),
    radial-gradient(circle at 100% 100%, rgba(46, 42, 123, 0.14), transparent 36rem),
    var(--surface);
}

.construction-card,
.auth-card {
  width: min(100%, 46rem);
  padding: clamp(2rem, 6vw, 5rem);
  text-align: center;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(46, 42, 123, 0.08);
  border-radius: 1.5rem;
  box-shadow: var(--shadow);
}

.construction-logo {
  width: min(17rem, 72%);
  margin-bottom: 2.5rem;
}

.auth-card {
  width: min(100%, 30rem);
  padding: clamp(2rem, 5vw, 3.5rem);
}

.auth-logo {
  width: 11rem;
  margin-bottom: 2rem;
}

.eyebrow {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--brand);
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 1rem;
  color: var(--brand);
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

h2 {
  color: var(--brand);
  line-height: 1.2;
}

.auth-card h1 {
  font-size: 2.6rem;
}

.construction-copy,
.auth-card > p,
.portal-heading p,
.panel__header p,
.empty-state p {
  color: var(--muted);
}

.construction-copy {
  max-width: 36rem;
  margin-right: auto;
  margin-bottom: 0.8rem;
  margin-left: auto;
  font-size: 1.08rem;
}

.construction-copy--arabic {
  margin-top: 1.5rem;
  font-size: 1.14rem;
}

.construction-rule {
  width: 4.5rem;
  height: 0.25rem;
  margin: 2.4rem auto 1.5rem;
  border-radius: 999px;
  background: var(--gold);
}

.text-link {
  color: var(--brand);
  font-size: 0.92rem;
  font-weight: 700;
  text-underline-offset: 0.25rem;
}

.auth-form {
  display: grid;
  gap: 1.15rem;
  margin-top: 2rem;
  text-align: start;
}

.auth-form__options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.7rem 1rem; }
.auth-form__options .text-link { white-space: nowrap; }
.auth-register-prompt { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.auth-register-prompt p { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem .6rem; margin: 0 0 .8rem; color: var(--muted); font-size: .9rem; }
.auth-register-prompt .button { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .25rem; min-height: 48px; border-radius: .65rem; }
.auth-step { margin: 0.5rem 0 1rem; color: var(--brand); font-weight: 700; }
.auth-resend-form { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.8rem 1.5rem; margin-top: 1.5rem; }
.auth-link-button { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-size: 0.86rem;
  font-weight: 750;
}

.field input {
  width: 100%;
  padding: 0.82rem 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfd5df;
  border-radius: 0.75rem;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field select,
.field textarea {
  width: 100%;
  padding: 0.82rem 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfd5df;
  border-radius: 0.75rem;
}

.field input[type="file"] {
  padding: 0.65rem;
  background: #f9fafb;
}

.field small,
.switch-field small {
  color: var(--muted);
  font-size: 0.82rem;
}

.field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(46, 42, 123, 0.12);
}

.field span,
.validation-summary {
  color: var(--danger);
  font-size: 0.82rem;
}

.validation-summary ul {
  margin: 0;
  padding-left: 1.25rem;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: 0.7rem 1.25rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 750;
  text-decoration: none;
}

.button--primary {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 12px 25px -14px rgba(46, 42, 123, 0.8);
}

.button--primary:hover {
  background: var(--brand-hover);
}

.button--quiet {
  color: var(--brand);
  background: #f0f1f6;
}

.cart-remove-button {
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
}

.cart-line-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.button--block {
  width: 100%;
}

.portal-body {
  background: var(--surface);
}

.portal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.75rem;
  padding: 0.8rem clamp(1.25rem, 4vw, 3.5rem);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.portal-brand img {
  display: block;
  width: 9.5rem;
}

.portal-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.portal-nav {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.portal-header__actions form {
  margin: 0;
}

.portal-area-name {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.portal-main {
  width: min(100% - 2rem, 76rem);
  margin: 0 auto;
  padding: 3rem 0 5rem;
}

.portal-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}

.portal-heading h1 {
  margin-bottom: 0.6rem;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
}

.portal-heading p {
  margin-bottom: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
}

.status-pill--success {
  color: var(--success);
  background: var(--success-bg);
}

.status-pill--danger {
  color: var(--danger);
  background: var(--danger-bg);
}

.panel {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px -30px rgba(22, 26, 36, 0.38);
}

.panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--line);
}

.panel__header h2,
.panel__header p {
  margin-bottom: 0;
}

.settings-panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.settings-form {
  display: grid;
  max-width: 46rem;
  gap: 1.5rem;
}

.switch-field {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem;
  background: #f8f8fb;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
}

.switch-field input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  accent-color: var(--brand);
}

.switch-field span {
  display: grid;
  gap: 0.25rem;
}

.settings-logo-preview {
  display: block;
  width: min(15rem, 70%);
  max-height: 8rem;
  margin: 0.4rem 0 0.6rem;
  object-fit: contain;
  object-position: left center;
}

.settings-actions {
  display: flex;
  justify-content: flex-start;
}

.notice {
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
}

.notice--success {
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid rgba(20, 125, 100, 0.2);
}

.panel__header p {
  margin-top: 0.35rem;
}

.table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 1rem 1.75rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.data-table th {
  color: #fff;
  background: var(--brand);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.empty-cell {
  color: var(--muted);
  text-align: center !important;
}

.table-primary,
.table-secondary {
  display: block;
}

.table-secondary {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.86rem;
}

.table-action {
  text-align: right !important;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tag {
  display: inline-flex;
  padding: 0.25rem 0.55rem;
  color: var(--brand);
  background: #efeff8;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
}

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

.form-grid--checks {
  align-items: stretch;
}

.role-fieldset {
  min-width: 0;
  margin: 0;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
}

.role-fieldset legend {
  padding: 0 0.35rem;
  color: var(--brand);
  font-size: 1rem;
  font-weight: 800;
}

.role-fieldset > p {
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.role-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem;
  background: #f8f8fb;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
}

.role-option input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.18rem;
  accent-color: var(--brand);
}

.role-option span {
  display: grid;
  gap: 0.15rem;
}

.role-option small {
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.public-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5rem;
  padding: .75rem clamp(1rem,5vw,5rem);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.public-brand img,.public-footer img{display:block;width:10rem;max-height:3.5rem;object-fit:contain}
.public-header nav,.public-actions,.action-row{display:flex;align-items:center;gap:1rem}
.public-header nav a{text-decoration:none;font-weight:750;color:var(--muted)}
.section-shell{width:min(100% - 2rem,76rem);margin-inline:auto}
.promo-strip{display:flex;justify-content:center;gap:1rem;padding:.65rem 1rem;color:#fff;background:var(--brand);text-align:center}
.landing-hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:4rem;min-height:38rem;padding-block:5rem}
.landing-hero h1,.course-detail h1,.public-catalog h1{font-size:clamp(2.7rem,7vw,5.6rem)}
.landing-hero p,.course-detail__hero p{max-width:42rem;color:var(--muted);font-size:1.15rem}
.landing-hero>img,.course-detail__hero>img{width:100%;height:30rem;object-fit:cover;border-radius:2rem;box-shadow:var(--shadow)}
.button--outline{color:var(--brand);background:transparent;border:1px solid var(--brand)}
.content-section{padding-block:5rem}.section-tint{width:100%;padding-inline:max(1rem,calc((100% - 76rem)/2));background:#efeff8}
.section-title{max-width:45rem;margin:0 auto 2.5rem;text-align:center}.section-title h2{font-size:clamp(2rem,4vw,3.5rem)}.section-title p{color:var(--muted)}
.card-grid,.feature-grid,.learning-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.35rem}
.course-card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:1.25rem;box-shadow:0 14px 35px -28px rgba(22,26,36,.55)}
.course-card>img{width:100%;height:14rem;object-fit:cover}.card-body{display:grid;gap:.75rem;padding:1.35rem}.card-body h3,.card-body p{margin:0}.card-body p{color:var(--muted)}
.feature-grid article{padding:1.5rem;text-align:center;background:#fff;border:1px solid var(--line);border-radius:1rem}.feature-grid img{width:9rem;height:5rem;object-fit:contain}.feature-grid strong{display:block;color:var(--gold);font-size:2rem}
.final-cta{text-align:center;padding:5rem 2rem;margin-block:3rem;color:#fff;background:var(--brand);border-radius:2rem}.final-cta h2,.final-cta .eyebrow{color:#fff}.action-row--center{justify-content:center}
.public-footer{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;padding:3.5rem clamp(1rem,5vw,5rem);color:#fff;background:#17153f}.public-footer p{color:#d5d3e8}
.footer-link{display:block;margin-top:.4rem;color:#d5d3e8;text-decoration:none}
.public-footer__brand,.public-footer__links,.public-footer__contact{min-width:0}
.public-footer__links strong,.public-footer__contact strong{display:block;margin-bottom:.65rem}
.public-footer__legal{grid-column:1/-1;margin:0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.18)}
.landing-empty{min-height:55vh;display:grid;place-content:center;text-align:center}.public-catalog{min-height:65vh}.course-detail{padding-block:4rem}.course-detail__hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem}.price{display:block;margin-block:1.5rem;font-size:1.5rem;color:var(--brand)}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2rem}
.checkout-box{display:flex;align-items:end;justify-content:flex-end;gap:1rem;margin-top:1.5rem;padding:1.5rem;background:#fff;border:1px solid var(--line);border-radius:1rem}.checkout-box>div:first-child{display:grid;gap:.25rem;margin-inline-end:auto}.checkout-box strong{font-size:1.35rem;color:var(--brand)}.checkout-box p{max-width:38rem;margin:0;color:var(--muted)}.checkout-review{display:grid;gap:0;padding:0;overflow:hidden}.checkout-review__line,.checkout-review__total{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.35rem;border-bottom:1px solid var(--line)}.checkout-review__total{font-size:1.2rem;background:#f7f6fb;border-bottom:0}.payment-result{display:grid;gap:1.25rem;max-width:44rem;margin-inline:auto;padding:clamp(1.5rem,5vw,3rem);text-align:center}.payment-result__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.notice--warning{color:#744d00;background:#fff7df;border:1px solid #f3d78d}.notice--danger{color:var(--danger);background:var(--danger-bg);border:1px solid rgba(180,35,24,.2)}
.checkout-review__discount{color:var(--success);background:var(--success-bg)}
.checkout-review__coupon{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;padding:1rem 1.35rem;border-top:1px solid var(--line)}
.checkout-review__coupon span{color:var(--success);font-weight:700}
.checkout-review__coupon [hidden],.checkout-review__line[hidden],.coupon-dialog [hidden]{display:none!important}
.coupon-dialog{width:min(28rem,calc(100% - 2rem));max-width:none;padding:1.75rem;border:1px solid var(--line);border-radius:1rem;box-shadow:0 1.25rem 3.5rem rgba(23,19,50,.22);color:var(--ink)}
.coupon-dialog::backdrop{background:rgba(23,19,50,.5)}
.coupon-dialog h2{margin:0 0 .5rem;font-size:1.3rem}
.coupon-dialog p{margin:0 0 1.25rem;color:var(--muted)}
.coupon-dialog .field{margin-bottom:1rem}
.coupon-dialog__error{color:var(--danger)!important;font-weight:700}
.coupon-dialog__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.learning-card{display:grid;gap:1rem;padding:1.5rem}.progress{height:.6rem;overflow:hidden;background:#e6e7ec;border-radius:1rem}.progress span{display:block;height:100%;background:var(--success)}.lesson-video{width:100%;margin-block:1rem;border-radius:.75rem;background:#000}.admin-table-panel{margin-bottom:1.5rem}

@media (max-width: 800px) {
  .public-header{flex-wrap:wrap}.public-header nav{order:3;width:100%;justify-content:center}.public-actions{gap:.4rem}.public-actions .button{padding:.55rem .8rem}
  .landing-hero,.course-detail__hero,.detail-grid{grid-template-columns:1fr}.landing-hero{padding-block:3rem;gap:2rem}.landing-hero>img,.course-detail__hero>img{height:22rem}
  .card-grid,.feature-grid,.learning-grid{grid-template-columns:1fr}.public-footer{grid-template-columns:1fr}.portal-header{align-items:flex-start}.portal-header__actions,.portal-nav{flex-wrap:wrap}.checkout-box{align-items:stretch;flex-direction:column}.checkout-box>div:first-child{margin-inline-end:0}.checkout-review__line,.checkout-review__total{align-items:flex-start;flex-direction:column}.payment-result__actions{align-items:stretch;flex-direction:column}.form-grid{grid-template-columns:1fr}
}

.empty-state {
  padding: clamp(2.5rem, 7vw, 5rem);
  text-align: center;
}

.empty-state__icon {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  margin: 0 auto 1.5rem;
  color: var(--brand);
  background: #efeff8;
  border-radius: 50%;
  font-weight: 900;
}

@media (max-width: 640px) {
  .construction-shell,
  .auth-shell {
    padding: 1rem;
  }

  .construction-card,
  .auth-card {
    border-radius: 1.1rem;
  }

  .portal-header {
    align-items: flex-start;
  }

  .portal-header__actions {
    align-items: flex-end;
    flex-direction: column;
    gap: 0.4rem;
  }

  .portal-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

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

  .portal-main {
    width: min(100% - 1rem, 76rem);
    padding-top: 2rem;
  }

  .data-table th,
  .data-table td {
    padding: 0.85rem 1rem;
  }

  .form-grid,
  .role-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Typography: Tajawal needs a touch more line-height and weight to stay crisp ---- */
body {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}

/* ---- Notices (flash messages) ---- */
.notice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.95rem 1.1rem;
  color: #3d3a57;
  background: #f4f3fa;
  border: 1px solid #e3e0f0;
  border-inline-start: 4px solid var(--brand);
  border-radius: 0.75rem;
  font-weight: 500;
  line-height: 1.8;
  animation: nl-notice-in 0.25s ease-out;
}
.notice--success { color: #0f5e4b; background: var(--success-bg); border-color: #bfe6d8; border-inline-start-color: var(--success); }
.notice--danger,
.notice--error { color: #8f1c13; background: var(--danger-bg); border-color: #f5cdc8; border-inline-start-color: var(--danger); }
.notice--warning { color: #744d00; background: #fff7df; border-color: #f3d78d; border-inline-start-color: #d39b13; }
.notice--dismissible { padding-inline-end: 3rem; }
.notice__close {
  position: absolute;
  inset-inline-end: 0.6rem;
  top: 0.6rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
  opacity: 0.65;
}
.notice__close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
.notice__close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.notice.is-dismissed { opacity: 0; transform: translateY(-4px); transition: opacity 0.18s, transform 0.18s; }
@keyframes nl-notice-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Confirmation / alert dialogs ---- */
.nl-dialog {
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.75rem 1.75rem 1.5rem;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-radius: 1.1rem;
  box-shadow: 0 30px 80px -20px rgba(23, 19, 50, 0.45);
  text-align: center;
  animation: nl-dialog-in 0.18s ease-out;
}
.nl-dialog::backdrop { background: rgba(23, 19, 50, 0.48); backdrop-filter: blur(3px); animation: nl-fade-in 0.18s ease-out; }
.nl-dialog.is-closing { animation: nl-dialog-out 0.14s ease-in forwards; }
.nl-dialog.is-closing::backdrop { animation: nl-fade-out 0.14s ease-in forwards; }
.nl-dialog__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; color: var(--brand); background: #efeef9; border-radius: 50%; }
.nl-dialog__icon svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nl-dialog--danger .nl-dialog__icon { color: var(--danger); background: var(--danger-bg); box-shadow: 0 0 0 7px #fff7f6; }
.nl-dialog--success .nl-dialog__icon { color: var(--success); background: var(--success-bg); }
.nl-dialog__title { margin: 0 0 0.5rem; color: var(--ink); font-size: 1.2rem; font-weight: 800; line-height: 1.5; letter-spacing: 0; }
.nl-dialog__message { margin: 0 0 1.5rem; color: var(--muted); font-size: 0.97rem; line-height: 1.85; }
.nl-dialog__password-label { display: block; margin-bottom: 0.4rem; color: var(--ink); font-weight: 700; }
.nl-dialog__password { display: block; width: 100%; min-height: 2.85rem; margin-bottom: 1.25rem; padding: 0.6rem 0.8rem; border: 1px solid #c9c6d7; border-radius: 0.7rem; background: #fff; color: var(--ink); direction: ltr; }
.nl-dialog__password:focus-visible { outline: 3px solid #b8922a; outline-offset: 2px; }
.nl-dialog__actions { display: flex; gap: 0.6rem; }
.nl-dialog__button { flex: 1; min-height: 2.85rem; padding: 0.6rem 1rem; border: 1px solid transparent; border-radius: 0.7rem; font-weight: 700; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; }
.nl-dialog__button--ok { color: #fff; background: var(--brand); }
.nl-dialog__button--ok:hover { background: var(--brand-hover); }
.nl-dialog--danger .nl-dialog__button--ok { background: var(--danger); }
.nl-dialog--danger .nl-dialog__button--ok:hover { background: #961c13; }
.nl-dialog__button--cancel { color: #4b4862; background: #f3f2f8; border-color: #e5e3ef; }
.nl-dialog__button--cancel:hover { background: #e9e7f2; }
.nl-dialog__button:focus-visible { outline: 3px solid #b8922a; outline-offset: 2px; }
@keyframes nl-dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes nl-dialog-out { to { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes nl-fade-in { from { opacity: 0; } }
@keyframes nl-fade-out { to { opacity: 0; } }
@media (max-width: 420px) { .nl-dialog__actions { flex-direction: column-reverse; } }
@media (prefers-reduced-motion: reduce) { .notice, .nl-dialog, .nl-dialog::backdrop { animation: none; } }

/* Shared public/learner header presentation. Counts come from CartNav, names from current claims. */
.public-cart-link { display: inline-flex; position: relative; align-items: center; gap: .45rem; min-height: 42px; padding: .5rem .65rem; border: 1px solid var(--ui-border, #e6e4ee); border-radius: 8px; color: var(--ui-brand, #2e2a7b); background: #fff; text-decoration: none; font-size: .82rem; font-weight: 700; }
.public-cart-link:hover { background: #f4f1fa; border-color: #bdb5d8; }
.public-cart-link svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.public-cart-count { display: grid; place-items: center; min-width: 21px; height: 21px; padding-inline: .25rem; border-radius: 999px; color: #fff; background: var(--ui-brand, #2e2a7b); font-size: .72rem; font-variant-numeric: tabular-nums; }
.public-account { display: flex; align-items: center; gap: .65rem; min-height: 44px; padding: .3rem .5rem; border-radius: 8px; color: var(--ui-brand, #2e2a7b); text-decoration: none; }
.public-account:hover { background: #f4f1fa; }
.public-account-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; color: #fff; background: var(--ui-brand, #2e2a7b); border-radius: 50%; font-size: .95rem; font-weight: 700; }
.public-account-copy { min-width: 0; }
.public-account-copy small, .public-account-copy strong { display: block; line-height: 1.5; }
.public-account-copy small { color: #626277; font-size: .7rem; }
.public-account-copy strong { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.learn-topbar__end .public-cart-label { display: none; }
@media (max-width: 480px) { .public-account-copy strong { max-width: 14ch; } .public-cart-label { display: none; } }

.public-menu-panel { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 1.5rem; min-width: 0; }
.public-menu-scrim { display: none; }
.public-header-cart { flex-shrink: 0; }
.public-menu-toggle { display: none; }
@media (max-width: 1024px) {
  .public-header { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: .5rem; min-height: 64px; padding: .5rem 1rem; backdrop-filter: none; }
  .public-header[data-menu-ready] { grid-template-columns: minmax(0, 1fr) 44px 44px; }
  .public-brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .public-brand img { width: 120px; max-width: 100%; max-height: 48px; }
  .public-header-cart { grid-column: 2; grid-row: 1; }
  .public-header-cart .public-cart-link { position: relative; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
  .public-header-cart .public-cart-label { display: none; }
  .public-header-cart .public-cart-count { position: absolute; inset-block-start: -.25rem; inset-inline-end: -.25rem; min-width: 18px; height: 18px; font-size: .65rem; }
  .public-header[data-menu-ready] .public-menu-toggle { display: grid; grid-column: 3; grid-row: 1; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-border); border-radius: 8px; background: #fff; color: var(--brand); cursor: pointer; }
  .public-menu-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
  .public-header .public-menu-panel { display: grid; grid-column: 1 / -1; grid-row: 2; gap: .75rem; width: 100%; }
  .public-header[data-menu-ready] .public-menu-scrim { position: fixed; inset: 64px 0 0; z-index: 1; display: block; background: rgba(20, 17, 47, .48); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .22s ease, visibility .22s; }
  .public-header[data-menu-open] .public-menu-scrim { visibility: visible; opacity: 1; pointer-events: auto; }
  .public-header[data-menu-ready] .public-menu-panel { position: fixed; inset-block: 64px 0; inset-inline-end: 0; z-index: 2; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; width: min(25rem, calc(100vw - 1.25rem)); min-width: 0; height: calc(100dvh - 64px); max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 20px 0 0 0; background: #fbfafe; box-shadow: -18px 0 50px rgba(20, 17, 47, .22); visibility: hidden; opacity: 0; transform: translateX(24px); pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility .22s; }
  [dir="rtl"] .public-header[data-menu-ready] .public-menu-panel { border-radius: 0 20px 0 0; box-shadow: 18px 0 50px rgba(20, 17, 47, .22); transform: translateX(-24px); }
  .public-header[data-menu-open] .public-menu-panel, [dir="rtl"] .public-header[data-menu-open] .public-menu-panel { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
  .public-header #public-primary-nav { display: grid; align-content: start; order: 0; width: 100%; min-height: 0; gap: .35rem; padding: 1.1rem; overflow-y: auto; overscroll-behavior: contain; }
  .public-header #public-primary-nav a { display: flex; align-items: center; gap: .75rem; min-height: 54px; padding: .7rem .9rem; border: 1px solid transparent; border-radius: 12px; color: #36334f; background: #fff; font-size: .98rem; line-height: 1.5; white-space: normal; box-shadow: 0 3px 12px rgba(31, 25, 68, .035); }
  .public-header #public-primary-nav a::before { content: "›"; display: grid; order: 2; place-items: center; width: 28px; height: 28px; flex-shrink: 0; margin-inline-start: auto; border-radius: 8px; background: #f1eff8; color: var(--brand); font: 700 1.35rem/1 Arial, sans-serif; }
  [dir="rtl"] .public-header #public-primary-nav a::before { transform: scaleX(-1); }
  .public-header #public-primary-nav a:hover, .public-header #public-primary-nav a:focus-visible, .public-header #public-primary-nav a[aria-current="page"] { border-color: #dcd6ef; background: #f2effb; color: var(--brand); }
  .public-header #public-primary-nav a[aria-current="page"] { box-shadow: inset 3px 0 var(--gold); }
  [dir="rtl"] .public-header #public-primary-nav a[aria-current="page"] { box-shadow: inset -3px 0 var(--gold); }
  .public-header #public-header-actions { display: flex; flex-direction: column; align-items: stretch; gap: .55rem; margin-top: auto; padding: 1rem 1.1rem max(1rem, env(safe-area-inset-bottom)); border-top: 1px solid #e9e5f2; background: #fff; }
  .public-header #public-header-actions .text-link { order: 2; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .4rem .6rem; border: 0; color: var(--brand); text-decoration: none; }
  .public-header #public-header-actions .button { order: 1; display: flex; align-items: center; justify-content: center; min-height: 50px; text-align: center; border-radius: 10px; }
  .public-header #public-header-actions .button--quiet { background: var(--brand); color: #fff; }
  .public-header #public-header-actions .button--quiet:hover { background: var(--brand-hover); }
  .public-header #public-header-actions .public-account { order: 1; }
  .public-header #public-header-actions .public-account-copy strong { max-width: 28ch; }
  body.public-menu-is-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .public-header .public-menu-panel, .public-header .public-menu-scrim { transition: none; } }

/* Checkout and payment: keep the price and next action easy to scan on a phone. */
.checkout-review__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0; padding: 1.15rem 1.35rem; color: var(--brand); font-size: 1.15rem; border-bottom: 1px solid var(--line); }
.checkout-review__heading span { color: var(--muted); font-size: .85rem; font-weight: 500; white-space: nowrap; }
.checkout-review__item-title { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.checkout-review__line strong, .checkout-review__total strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.checkout-review__total { color: var(--brand); font-weight: 750; }
.checkout-review__coupon .button { min-height: 44px; }
.checkout-box { flex-wrap: wrap; align-items: center; }
.checkout-box #checkoutSubmit { min-height: 48px; }
.checkout-box small { flex-basis: 100%; color: var(--muted); text-align: end; }
.payment-result__icon { display: grid; place-items: center; width: 4rem; height: 4rem; margin-inline: auto; border-radius: 50%; font-family: Arial, sans-serif; font-size: 2rem; font-weight: 700; }
.payment-result--success .payment-result__icon { color: #13653d; background: #e4f5eb; }
.payment-result--pending .payment-result__icon { color: #744d00; background: #fff3cc; }
.payment-result--failed .payment-result__icon { color: var(--danger); background: var(--danger-bg); }
.payment-result h1 { margin: 0; line-height: 1.3; }
.payment-result .notice { margin: 0; text-align: start; line-height: 1.7; }
.payment-result__reference { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem; margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.payment-result__reference strong { color: var(--ink); }

@media (max-width: 600px) {
  .checkout-page, .payment-page { padding-block: 1.75rem 3rem; }
  .checkout-page .section-title { margin-bottom: 1.35rem; text-align: start; }
  .checkout-page .section-title h1 { margin-block: .35rem .5rem; font-size: clamp(1.65rem, 7vw, 2rem); line-height: 1.35; }
  .checkout-page .section-title p { margin: 0; font-size: .92rem; line-height: 1.65; }
  .checkout-review__heading, .checkout-review__line, .checkout-review__total { padding-inline: 1rem; }
  .checkout-review__line { flex-direction: row; align-items: flex-start; }
  .checkout-review__line > .cart-line-actions { flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: .35rem; }
  [dir="rtl"] .checkout-review__line > .cart-line-actions { align-items: flex-start; }
  .checkout-review__line > .cart-line-actions strong { font-size: .95rem; }
  .checkout-review__total { flex-direction: row; align-items: baseline; gap: .5rem; }
  .checkout-review__total span { min-width: 0; }
  .checkout-review__total strong { font-size: 1.12rem; }
  .checkout-review__coupon { padding-inline: 1rem; }
  .checkout-box { gap: .65rem; margin-top: 1rem; padding: 1rem; }
  .checkout-box #checkoutSubmit { width: 100%; }
  .checkout-box small { text-align: center; line-height: 1.5; }
  .payment-result { gap: 1rem; padding: 1.5rem 1rem; }
  .payment-result h1 { font-size: clamp(1.5rem, 7vw, 1.9rem); }
  .payment-result__actions { width: 100%; }
  .payment-result__actions .button { display: flex; align-items: center; justify-content: center; min-height: 48px; width: 100%; }
}

/* Public navigation: discovery first, clear account actions, and a distinct free join CTA. */
.public-header { gap: clamp(.65rem, 1.5vw, 1.25rem); }
.public-menu-panel { gap: clamp(.75rem, 1.6vw, 1.5rem); }
.public-header #public-primary-nav { flex: 1 1 auto; justify-content: flex-start; flex-wrap: nowrap; gap: clamp(.5rem, 1vw, 1rem); min-width: 0; }
.public-header #public-primary-nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.public-header #public-primary-nav .public-explore { padding: .5rem .85rem; border: 1px solid #d9d3e9; border-radius: 8px; color: var(--brand); background: #f4f1fa; }
.public-header #public-primary-nav .public-explore:hover { background: #eae5f5; border-color: #bcb2d9; }
.public-header #public-header-actions { flex-wrap: nowrap; gap: .55rem; }
.public-header #public-header-actions .public-sign-in { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: .5rem; color: var(--brand); font-size: .9rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.public-header #public-header-actions .public-sign-in:hover { text-decoration: underline; text-underline-offset: 4px; }
.public-header #public-header-actions .public-join { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .6rem 1rem; border-radius: 8px; box-shadow: none; white-space: nowrap; }
.public-header #public-header-actions .text-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: .5rem; white-space: nowrap; text-decoration: none; }
.public-header #public-header-actions .text-link:hover { text-decoration: underline; }
.public-header-cart .public-cart-link { min-height: 44px; }

@media (max-width: 1024px) {
  .public-header { min-height: 64px; }
  .public-header #public-primary-nav { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 0; padding: .5rem 1rem; }
  .public-header #public-primary-nav a,
  .public-header #public-primary-nav .public-explore { min-height: 50px; padding: .65rem .4rem; border: 0; border-bottom: 1px solid #e9e5f2; border-radius: 0; background: transparent; box-shadow: none; color: var(--brand); font-size: .98rem; white-space: normal; }
  .public-header #public-primary-nav a::before { display: none; }
  .public-header #public-primary-nav a:hover,
  .public-header #public-primary-nav a:focus-visible,
  .public-header #public-primary-nav a[aria-current="page"],
  .public-header #public-primary-nav .public-explore:hover { background: #f2effb; }
  .public-header #public-header-actions { gap: .4rem; }
  .public-header #public-header-actions .public-sign-in,
  .public-header #public-header-actions .public-join { width: 100%; min-height: 48px; border-radius: 8px; }
  .public-header #public-header-actions .public-sign-in { order: 0; border: 1px solid #d9d3e9; background: #fff; text-decoration: none; }
  .public-header #public-header-actions .public-join { order: 0; color: #fff; background: var(--brand); }
  .public-header #public-header-actions .text-link { order: 0; min-height: 44px; }
  .public-header #public-header-actions .public-account { order: 0; }
}

/* Mobile navigation uses a quiet, full-height list like the supplied reference. */
.public-menu-icon, .public-menu-profile, .public-mobile-logout, .public-mobile-only { display: none; }
@media (max-width: 1024px) {
  .public-header #public-primary-nav .public-desktop-only,
  .public-header #public-header-actions .public-desktop-account,
  .public-header #public-header-actions .public-desktop-language { display: none; }
  .public-header[data-menu-ready] .public-menu-scrim { inset: 0; background: rgba(18, 17, 27, .5); }
  .public-header[data-menu-ready] .public-menu-panel { inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; width: min(21rem, calc(100vw - 2.25rem)); height: 100dvh; border-radius: 0 22px 22px 0; background: #fff; box-shadow: 16px 0 40px rgba(20, 17, 47, .18); transform: translateX(-100%); }
  [dir="rtl"] .public-header[data-menu-ready] .public-menu-panel { inset-inline-start: 0; inset-inline-end: auto; border-radius: 22px 0 0 22px; box-shadow: -16px 0 40px rgba(20, 17, 47, .18); transform: translateX(100%); }
  .public-header[data-menu-open] .public-menu-panel, [dir="rtl"] .public-header[data-menu-open] .public-menu-panel { transform: none; }
  .public-header .public-menu-profile { display: grid; align-content: start; gap: .2rem; padding: max(2.9rem, env(safe-area-inset-top)) 1.25rem 1.15rem; border-bottom: 1px solid #eeedf1; }
  .public-menu-profile-avatar { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: .55rem; border-radius: 50%; color: #fff; background: var(--brand); font-size: 1.3rem; font-weight: 800; }
  .public-menu-profile strong { color: #24232b; font-size: 1.2rem; line-height: 1.3; overflow-wrap: anywhere; }
  .public-menu-profile small { color: #898792; font-size: .82rem; overflow-wrap: anywhere; }
  .public-header #public-primary-nav { flex: 1 1 auto; align-content: start; gap: .15rem; padding: 4.2rem 1rem 1rem; overflow-x: hidden; overflow-y: auto; }
  .public-header .public-menu-profile + #public-primary-nav { padding-top: 1rem; }
  .public-header #public-primary-nav a,
  .public-header #public-primary-nav .public-explore { display: flex; align-items: center; gap: .8rem; min-height: 52px; padding: .65rem .55rem; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: #292830; font-size: .94rem; font-weight: 600; line-height: 1.4; white-space: normal; }
  .public-header #public-primary-nav a:hover,
  .public-header #public-primary-nav a:focus-visible,
  .public-header #public-primary-nav a[aria-current="page"] { background: #f4f2f8; color: var(--brand); box-shadow: none; }
  .public-header #public-primary-nav a::before, .public-header #public-primary-nav a::after { display: none; }
  .public-header #public-primary-nav .public-mobile-only { display: flex; }
  .public-header #public-primary-nav .public-menu-language { margin-top: .55rem; border-top: 1px solid #eeedf1; border-radius: 0; }
  .public-header #public-primary-nav .public-menu-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; color: #35343e; }
  .public-menu-icon svg { width: 21px; height: 21px; }
  .public-header #public-primary-nav a[aria-current="page"] .public-menu-icon { color: var(--brand); }
  .public-header #public-header-actions { flex: 0 0 auto; gap: .35rem; padding: .9rem 1rem max(1rem, env(safe-area-inset-bottom)); border-top: 0; background: #fff; }
  .public-header #public-header-actions .public-sign-in { min-height: 44px; border: 0; background: transparent; }
  .public-header #public-header-actions .public-join { min-height: 48px; border-radius: 999px; }
  .public-header #public-header-actions .public-mobile-logout { display: block; width: 100%; }
  .public-mobile-logout button { width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: #f0eff3; color: #292830; font: inherit; font-weight: 700; cursor: pointer; }
  .public-mobile-logout button:hover { background: #e6e4eb; }
}

/* The reference's edge-to-edge slide menu, recolored for NextLevels. */
@media (max-width: 1024px) {
  .public-header[data-menu-ready] .public-menu-panel { width: 100vw; max-width: none; border-radius: 0; background: linear-gradient(155deg, #292364, #1c1948); box-shadow: none; }
  [dir="rtl"] .public-header[data-menu-ready] .public-menu-panel { border-radius: 0; box-shadow: none; }
  .public-header .public-menu-profile { border-color: #ffffff2b; }
  .public-menu-profile-avatar { color: #232059; background: #edd17b; }
  .public-menu-profile strong { color: #fff; }
  .public-menu-profile small { color: #dfdbea; }
  .public-header #public-primary-nav { align-content: start; gap: .25rem; padding: max(4.5rem, env(safe-area-inset-top)) 1.25rem 1.25rem; }
  .public-header .public-menu-profile + #public-primary-nav { padding-top: 1rem; }
  .public-header #public-primary-nav a,
  .public-header #public-primary-nav .public-explore { justify-content: center; min-height: 54px; padding: .65rem; color: #fff; font-size: clamp(1.08rem, 4.7vw, 1.5rem); font-weight: 700; text-align: center; }
  .public-header #public-primary-nav a:hover,
  .public-header #public-primary-nav a:focus-visible,
  .public-header #public-primary-nav a[aria-current="page"] { color: #f4dc92; background: #ffffff17; }
  .public-header #public-primary-nav .public-menu-icon { display: none; }
  .public-header #public-primary-nav .public-menu-language { margin-top: .75rem; border-color: #ffffff30; color: #e8e5f5; font-size: .95rem; }
  .public-header #public-header-actions { background: transparent; border-top: 1px solid #ffffff2b; }
  .public-header #public-header-actions .public-sign-in { border: 1px solid #ffffff70; color: #fff; background: transparent; }
  .public-header #public-header-actions .public-sign-in:hover { background: #ffffff17; text-decoration: none; }
  .public-header #public-header-actions .public-join { color: #232059; background: #edd17b; }
  .public-header #public-header-actions .public-join:hover { color: #232059; background: #f5dfa0; }
  .public-mobile-logout button { color: #fff; background: #ffffff1f; }
  .public-mobile-logout button:hover { background: #ffffff30; }
}

/* Draw one menu icon from the button itself, including when an older page is still running. */
.public-menu-close-button { display: none !important; }
@media (min-width: 1025px) {
  .public-header #public-primary-nav a.public-mobile-only { display: none; }
}
@media (max-width: 1024px) {
  .public-header[data-menu-ready] .public-menu-panel { inset-block: 64px 0; height: calc(100dvh - 64px); }
  .public-header[data-menu-ready] .public-menu-toggle,
  .public-header[data-menu-ready] .public-menu-toggle:hover,
  .public-header[data-menu-ready] .public-menu-toggle[aria-expanded="true"] { position: relative; z-index: 3; border: 0; background: transparent; color: var(--brand); }
  .public-menu-toggle > .public-menu-lines,
  .public-menu-toggle > .public-menu-bars,
  .public-menu-toggle > .public-menu-close { display: none !important; }
  .public-header[data-menu-ready] .public-menu-toggle::before,
  .public-header[data-menu-ready] .public-menu-toggle::after { content: ""; position: absolute; inset-inline-start: calc(50% - 12.5px); width: 25px; height: 3px; border-radius: 1px; background: currentColor; transition: transform .3s ease, box-shadow .3s ease; }
  .public-header[data-menu-ready] .public-menu-toggle::before { top: calc(50% - 10.5px); box-shadow: 0 9px currentColor; }
  .public-header[data-menu-ready] .public-menu-toggle::after { top: calc(50% + 7.5px); }
  .public-header[data-menu-ready] .public-menu-toggle[aria-expanded="true"]::before { box-shadow: 0 9px transparent; transform: rotate(-45deg) translate(-5px, 6px); }
  .public-header[data-menu-ready] .public-menu-toggle[aria-expanded="true"]::after { transform: rotate(45deg) translate(-5px, -6px); }
  .public-header[data-menu-ready] #public-primary-nav > a { opacity: 0; transform: translateY(30px); transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1), color .2s, background .2s; }
  .public-header[data-menu-open] #public-primary-nav > a { opacity: 1; transform: translateY(0); }
  .public-header[data-menu-open] #public-primary-nav > a:nth-child(1) { transition-delay: .1s; }
  .public-header[data-menu-open] #public-primary-nav > a:nth-child(2) { transition-delay: .2s; }
  .public-header[data-menu-open] #public-primary-nav > a:nth-child(3) { transition-delay: .3s; }
  .public-header[data-menu-open] #public-primary-nav > a:nth-child(4) { transition-delay: .4s; }
  .public-header[data-menu-open] #public-primary-nav > a:nth-child(n+5) { transition-delay: .45s; }
}
@media (prefers-reduced-motion: reduce) {
  .public-header[data-menu-ready] .public-menu-toggle::before,
  .public-header[data-menu-ready] .public-menu-toggle::after,
  .public-header[data-menu-ready] #public-primary-nav > a { transition: none; }
}