/* ==========================================================
   CUSTOM CSS STRUCTURE
   1) Tokens, global layout, and navigation
   2) Frontpage v5 (fp5-)
   3) Courses listing (cl-)
   4) Course detail page (cp-)
   5) Lessons, quizzes, and challenge content
   6) News and readable content
   7) Account, wallet, withdrawals, onboarding
   8) Shared utilities (search, feedback, footer)
   ========================================================== */
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-sans-serif);
  /* theme.css sets the base weight to 600 — reset it to the body role */
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  background: #fff;
}

:root {
  --site-header-height: 56px;
  --font-family-sans-serif: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --text-heading: #2C3038;
  --text-body: #555A64;
  --text-muted: #8c98a4;
  --text-light: #adb5bd;
  --text-link: #009b72;
  --primary: #009b72;
  --primary-2: #046865;
  --primary-3: #192d35;
  --primary-4: #1c5e4e;
  --accent-yellow: #eddd53;

  /* Type roles — size + weight + leading + tracking (see DESIGN_SYSTEM.md) */
  --fs-display: clamp(2.25rem, 4.4vw, 3.25rem);
  --fs-heading: clamp(1.75rem, 3vw, 2.25rem);
  --fs-subhead: 1.75rem;
  --fs-title: 1.3125rem;
  --fs-lead: 1.0625rem;
  --fs-strong: 1rem;
  --fs-body: 0.875rem;
  --fs-meta: 0.8125rem;
  --fs-micro: 0.6875rem;
  --fw-body: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-subhead: 1.2;
  --lh-title: 1.3;
  --lh-lead: 1.5;
  --lh-strong: 1.25;
  --lh-body: 1.55;
  --lh-meta: 1.4;
  --lh-micro: 1.3;
  --lh-none: 1;
  --ls-display: -0.025em;
  --ls-heading: -0.02em;
  --ls-subhead: -0.015em;
  --ls-title: -0.01em;
  --ls-caps: 0.08em;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-base: 1rem;
  --fs-md: 1.1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;
  --radius-btn: 10px;
  --radius-pill: 999px;
  --radius-btn-sm: 6px;
  --radius-input: 8px;
  --radius-card: 0.875rem;
  --radius-circle: 50%;
  --focus-ring: 0 0 0 0.2rem rgba(0, 155, 114, 0.35);
  --focus-ring-inset: inset 0 0 0 2px rgba(0, 155, 114, 0.4);
  --focus-ring-on-dark: 0 0 0 0.2rem rgba(255, 255, 255, 0.55);
  --light: #f2f4f2;
  --border-subtle: #e1e6e1;
}

/* Override theme.css Nunito hardcodes (Outfit is the public-site sans). */
.tooltip,
.popover,
.irs,
.plyr {
  font-family: var(--font-family-sans-serif);
}

/* Type roles. A role is a bundle: never use the size without the weight. */
.t-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.t-heading {
  font-size: var(--fs-heading);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.t-subhead {
  font-size: var(--fs-subhead);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-subhead);
}

.t-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

.t-lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-body);
  line-height: var(--lh-lead);
}

.t-strong {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
}

.t-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

.t-meta {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
}

.t-micro {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* Element defaults — theme.css ships headings at 700 and body/small at 600. */
h1, .h1,
.display-1, .display-2, .display-3, .display-4 {
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h2, .h2 {
  font-size: var(--fs-heading);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

h3, .h3 {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

h4, .h4 {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
}

h5, .h5 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
}

h6, .h6 {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-meta);
}

.lead,
.content-readable {
  font-size: var(--fs-lead);
  font-weight: var(--fw-body);
  line-height: var(--lh-lead);
}

small, .small {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
}

/* Weight only — the theme's own size, leading and `.btn-sm` / `.btn-lg`
   modifiers come later in theme.css and must keep winning on size. */
.btn {
  font-weight: var(--fw-semibold);
}

/* theme.css uses !important on both, at 700 and 600 respectively */
.font-weight-bold {
  font-weight: var(--fw-semibold) !important;
}

/* Not in Bootstrap — templates use it for the 500 step. */
.font-weight-medium {
  font-weight: var(--fw-medium) !important;
}

.font-weight-normal {
  font-weight: var(--fw-body) !important;
}

/* Beat theme.css `.bg-light { #F7F9FC !important }` — mockup surface-light is #f2f4f2. */
.bg-light {
  background-color: var(--light) !important;
}

a.bg-light:hover,
a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
  background-color: #e8ece8 !important;
}

/* Primary-4 color utilities (theme only defines primary through primary-3) */
.bg-primary-4 {
  background-color: var(--primary-4) !important;
}

a.bg-primary-4:hover,
a.bg-primary-4:focus,
button.bg-primary-4:hover,
button.bg-primary-4:focus {
  background-color: #154b3e !important;
}

.text-primary-4 {
  color: var(--primary-4) !important;
}

.btn-primary-4 {
  color: #fff;
  background-color: var(--primary-4);
  border-color: var(--primary-4);
  box-shadow: none;
}

.btn-primary-4:hover {
  color: #fff;
  background-color: #154b3e;
  border-color: #134438;
}

.btn-primary-4:focus,
.btn-primary-4.focus {
  box-shadow: 0 0 0 0.2rem rgba(28, 94, 78, 0.5);
}

.btn-primary-4.disabled,
.btn-primary-4:disabled {
  color: #fff;
  background-color: var(--primary-4);
  border-color: var(--primary-4);
}

.btn-primary-4:not(:disabled):not(.disabled):active,
.btn-primary-4:not(:disabled):not(.disabled).active,
.show > .btn-primary-4.dropdown-toggle {
  color: #fff;
  background-color: #134438;
  border-color: #113d32;
}

.btn-primary-4:not(:disabled):not(.disabled):active:focus,
.btn-primary-4:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary-4.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(28, 94, 78, 0.5);
}

/* Buttons for dark / primary-4 surfaces */
.btn-on-dark-solid {
  color: var(--primary-4);
  background-color: #fff;
  border-color: #fff;
  box-shadow: none;
}

.btn-on-dark-solid:hover {
  color: var(--primary);
  background-color: #fff;
  border-color: #fff;
  text-decoration: none;
  box-shadow: none;
}

.btn-on-dark-solid:focus,
.btn-on-dark-solid:focus-visible {
  color: var(--primary);
  background-color: #fff;
  border-color: #fff;
  text-decoration: none;
  box-shadow: var(--focus-ring-on-dark);
}

.btn-on-dark-solid:not(:disabled):not(.disabled):active,
.btn-on-dark-solid:not(:disabled):not(.disabled).active {
  color: var(--primary);
  background-color: #fff;
  border-color: #fff;
}

.btn-on-dark-outline {
  color: #fff;
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: none;
}

.btn-on-dark-outline:hover {
  color: var(--primary-4);
  background-color: #fff;
  border-color: #fff;
  text-decoration: none;
  box-shadow: none;
}

.btn-on-dark-outline:focus,
.btn-on-dark-outline:focus-visible {
  color: var(--primary-4);
  background-color: #fff;
  border-color: #fff;
  text-decoration: none;
  box-shadow: var(--focus-ring-on-dark);
}

.btn-on-dark-outline:not(:disabled):not(.disabled):active,
.btn-on-dark-outline:not(:disabled):not(.disabled).active {
  color: var(--primary-4);
  background-color: #fff;
  border-color: #fff;
}

.shadow {
  box-shadow:none;
}

.navbar-container {
  border-bottom: 1px solid var(--border-subtle);
}

.navbar-container.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}

@media (max-width: 991.98px) {
  .navbar-container.sticky-top {
    transition: transform 0.25s ease;
  }

  .navbar-container.navbar-container--scroll-hidden {
    transform: translateY(-100%);
    pointer-events: none;
  }

  body.navbar-scroll-hidden .cp-subnav {
    top: 0;
  }

  /* Global Goals rail is desktop/tablet only — mobile uses the collapse menu. */
  .nav-goals {
    display: none;
  }
}

.navbar-container:has(nav[data-overlay]:not(.scrolled)) {
  border-bottom: none;
}

/* Frontpage: nav becomes position-fixed when scrolled */
nav.navbar[data-overlay].scrolled,
nav.navbar[data-overlay].navbar-toggled-show {
  border-bottom: 1px solid var(--border-subtle);
}

/* Global Goals submenu rail under the main nav */
.nav-goals {
  background: var(--light);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-goals__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3.125rem;
  overflow: hidden;
}

.nav-goals__label {
  flex: 0 0 auto;
  margin-right: 0.5rem;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-body);
}

.nav-goals__rail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

.nav-goals__rail .chip {
  flex: 0 0 auto;
  background: #fff;
  border-color: var(--border-subtle);
  color: var(--text-heading);
}

.nav-goals__rail .chip:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.nav-goals__rail .chip--active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.nav-goals__all {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 1rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  white-space: nowrap;
  color: var(--primary);
  text-decoration: none;
}

.nav-goals__all:hover {
  color: var(--primary-2);
  text-decoration: none;
}

@media (max-width: 1030px) {
  .nav-goals__rail {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  }

  .nav-goals__all {
    margin-left: 0;
  }
}

.flex-container{
  flex-grow: 1;
}

/* Reusable leaf texture, opt-in only on the element that has `.bg-leaf-pattern`. */
.bg-leaf-pattern {
  position: relative;
}
.bg-leaf-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/img/leaf-bg.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}
.bg-leaf-pattern > * {
  position: relative;
  z-index: 1;
}

/* Account: "Support our Mission" (#support-us) is shown for self-hosted wallets only (not managed).
   The decorative .blob uses transform: scale(3) in theme CSS, which overflows the card and can
   extend scrollable height past the footer as empty grey area. */
#support-us.card {
  overflow: hidden;
}

.btn.disabled, .btn:disabled {
   opacity: 1; 
}

/* Global button shape */
.btn {
  border-radius: var(--radius-btn);
}

.btn-sm,
.btn-lg,
.btn-group-sm > .btn,
.btn-group-lg > .btn {
  border-radius: var(--radius-btn);
}

.btn-cta {
  padding: 0.875rem 2rem;
  font-size: var(--fs-lead);
;
  font-weight: var(--fw-body)}

.btn-text {
  display: inline-flex;
  align-items: center;
  font-size: 0.9375rem; /* 15px */
  font-weight: var(--fw-medium);
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.btn-text svg {
  transition: transform 0.15s ease;
}

.btn-text:hover {
  color: var(--primary-2);
  text-decoration: none;
}

.btn-text:hover svg {
  transform: translateX(2px);
}

.btn-text:focus-visible {
  color: var(--primary-2);
  text-decoration: none;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.btn-text:focus-visible svg {
  transform: translateX(2px);
}

/* Selection chips (pill shape — filters, popular search terms) */
.chip {
  display: inline-block;
  padding: 0.35rem 1rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-pill);
  background: #fff;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.chip:hover {
  background: var(--primary);
  color: #fff;
  text-decoration: none;
}

.chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.chip--active {
  background: var(--primary);
  color: #fff;
}

.nav {
  justify-content: center;
}

/* Center text links with the Account/Login button (without align-items:center,
   stretched nav-items leave link text top-aligned). */
.navbar-nav {
  align-items: center;
}

.navbar-nav > .nav-item {
  display: flex;
  align-items: center;
}

.navbar-nav .nav-link {
  font-size: 1.1875rem; /* 19px — closer to the Account button */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  display: inline-flex;
  align-items: center;
}

@media (min-width: 992px) {
  /* Match the Account/Login btn-sm box height so link text sits on the same center. */
  .navbar-nav .nav-link {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 2.25rem; /* ~.btn-sm: 0.34375*2 pad + 0.875*1.5 line + 2px*2 border */
  }
}

.navbar {
  padding: 0.75rem 1rem;
}


/* Non-navbar dropdowns: use custom PNG arrow (navbar uses theme's built-in SVG carets) */
.dropdown-toggle:not(.nav-link):after {
  background-image: url('/img/icons/interface/drop-down-arrow.png');
  transform: none;
  margin: 5px;
  background-size: cover;
  width: 0.7rem;
  height: 0.7rem;
}

/* Non-dark navbar (News, Challenges, etc.): theme default caret is white, invisible on
   white bg. Set primary-colored SVG arrow and full opacity. */
.navbar:not(.navbar-dark) .navbar-nav .nav-link.dropdown-toggle:after {
  background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.376 11.584C14.6728 11.7819 14.6728 12.2181 14.376 12.416L9.77735 15.4818C9.44507 15.7033 9 15.4651 9 15.0657L9 8.93426C9 8.53491 9.44507 8.29671 9.77735 8.51823L14.376 11.584Z' fill='%23009b72'/%3e%3c/svg%3e");
  opacity: 1;
}

/* Overlay navbar scrolled / toggled: primary-colored links + arrow */
.navbar.navbar-dark.scrolled .navbar-nav .nav-link,
.navbar.navbar-dark.navbar-toggled-show .navbar-nav .nav-link {
  color: var(--primary);
}

.navbar.navbar-dark.scrolled .navbar-nav .nav-link:hover,
.navbar.navbar-dark.navbar-toggled-show .navbar-nav .nav-link:hover {
  color: var(--primary-2);
}

.navbar.navbar-dark.scrolled .navbar-nav .nav-link.dropdown-toggle:after,
.navbar.navbar-dark.navbar-toggled-show .navbar-nav .nav-link.dropdown-toggle:after {
  background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.376 11.584C14.6728 11.7819 14.6728 12.2181 14.376 12.416L9.77735 15.4818C9.44507 15.7033 9 15.4651 9 15.0657L9 8.93426C9 8.53491 9.44507 8.29671 9.77735 8.51823L14.376 11.584Z' fill='%23009b72'/%3e%3c/svg%3e");
  opacity: 1;
}

.icon{
  filter: invert(29%) sepia(78%) saturate(3850%) hue-rotate(153deg) brightness(103%) contrast(101%);
}

.no-filter{
  filter:none;
}

.navbar-dark .navbar-toggler .navbar-toggler-open,
.navbar-dark .navbar-toggler .navbar-toggler-close {
  filter: brightness(0) invert(1);
  transition: filter 0.2s ease;
}

.navbar-dark.scrolled .navbar-toggler .navbar-toggler-open,
.navbar-dark.scrolled .navbar-toggler .navbar-toggler-close,
.navbar-dark.navbar-toggled-show .navbar-toggler .navbar-toggler-open,
.navbar-dark.navbar-toggled-show .navbar-toggler .navbar-toggler-close {
  filter: none;
}

.navbar:not(.navbar-dark) .navbar-toggler .navbar-toggler-open,
.navbar:not(.navbar-dark) .navbar-toggler .navbar-toggler-close {
  filter: invert(37%) sepia(92%) saturate(1281%) hue-rotate(139deg) brightness(92%) contrast(101%);
}

/* FRONTPAGE */
.badge-disabled {
  color: #fff;
  background-color: #c5c5c5;
}

.modal {
  z-index: 1050 !important;
}

.modal-backdrop {
  z-index: 1040 !important;
}

/* Challenge UI */

.small-badge {
  display: inline-block;
  padding: 0.5rem 0.5rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  letter-spacing: 0;
  border-radius: 0.3125rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Challenge cards: status badges (completed + category) — shared pill */
.challenge-card-status-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem !important;
  background: #fff !important;
  color: var(--text-heading) !important;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-subhead);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  max-width: calc(100% - 2rem);
  text-align: left;
}

.challenge-card-status-badge--completed {
  bottom: 0.75rem;
  right: 1rem;
}

.challenge-card-status-badge--category {
  top: 0.75rem;
  left: 1rem;
  bottom: auto;
  right: auto;
  z-index: 3;
  text-decoration: none !important;
}

.challenge-card-status-badge--category:hover,
.challenge-card-status-badge--category:focus {
  text-decoration: none !important;
  color: var(--text-heading) !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.16);
}

.challenge-card-status-badge--completed.small-badge,
.challenge-card-status-badge--category.small-badge {
  font-size: var(--fs-xs);
  padding: 0.35rem 0.5rem !important;
}

.challenge-card-status-badge--completed.small-badge {
  bottom: 0.5rem;
  right: 1.5rem;
}

.challenge-card-status-badge--category.small-badge {
  top: 0.5rem;
  left: 1.5rem;
}

.challenge-card-status-badge__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CHALLENGE QUIZ */
.quiz-card {
  overflow: hidden;
}

.quiz-header {
  display: flex;
  align-items: center;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px dashed #dee2e6;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  gap: 0.5rem;
}

.quiz-header__counter {
  white-space: nowrap;
}

.quiz-header__score {
  margin-left: auto;
  white-space: nowrap;
  color: var(--text-link);
}

.quiz-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.75rem;
  color: var(--text-muted);
  transition: color 0.15s;
}

.quiz-close-btn:hover {
  color: var(--text-heading);
  text-decoration: none;
}

.quiz-body {
  padding: 1.75rem 1.5rem 1.25rem;
}

.quiz-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.quiz-question {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-meta);
  color: var(--text-heading);
}

.quiz-answers {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.quiz-answer-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  text-align: left;
}

.quiz-answer-btn:hover:not(:disabled) {
  border-color: var(--text-link);
  background: #f0faf6;
}

.quiz-answer-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 155, 114, 0.15);
}

.quiz-answer-btn__text {
  flex: 1;
  margin-right: 0.5rem;
}

.quiz-answer-btn__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.quiz-answer-btn.correct {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.quiz-answer-btn.wrong {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}

.quiz-answer-btn.quiz-answer-btn--disabled:not(.correct):not(.wrong) {
  background: #f7f9fc;
  border-color: #e8ecf0;
  color: var(--text-light);
  cursor: default;
}

/* feedback area below quiz body */
.quiz-feedback-area {
  padding: 0 1.5rem 1.5rem;
}

.quiz-result-message {
  text-align: center;
  padding: 0.75rem 0;
  font-size: var(--fs-strong);
;
  font-weight: var(--fw-semibold)}

.quiz-result-message--correct {
  color: var(--primary);
}

.quiz-result-message--wrong {
  color: #dc3545;
}

.quiz-explanation {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-input);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.quiz-explanation h5 {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  margin-bottom: 0.5rem;
}

.quiz-explanation--correct {
  background: #e8f8f2;
  border-left: 4px solid var(--primary);
  color: var(--text-heading);
}

.quiz-explanation--wrong {
  background: #fdf0f1;
  border-left: 4px solid #dc3545;
  color: var(--text-heading);
}

@media (max-width: 575.98px) {
  .quiz-body {
    padding: 1.25rem 1rem 1rem;
  }
  .quiz-feedback-area {
    padding: 0 1rem 1.25rem;
  }
  .quiz-answer-btn {
    padding: 0.75rem 0.85rem;
    font-size: var(--fs-sm);
  }
  .quiz-header {
    padding: 0.75rem 1rem;
    font-size: var(--fs-sm);
  }
}

/* CHALLENGES OVERVIEW */

.challenges-filter-btn {
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold) !important;
  text-decoration: none !important;
}

.challenges-filter-btn.btn-outline-success:not(.active):hover,
.challenges-filter-btn.btn-outline-success:not(.active):focus {
  background-color: #e8f8f2 !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

#filterGroupCategories .challenges-category-chip-icon {
  filter: none;
  transition: filter 0.2s ease;
}

#filterGroupCategories {
  gap: 0.5rem;
}

#filterGroupCategories .challenges-filter-btn {
  margin-right: 0 !important;
  max-width: 100%;
}

#filterGroupCategories .challenges-filter-btn.active .challenges-category-chip-icon {
  filter: brightness(0) invert(1);
}

/* ACTIVITIES */

#player-container {
  width: 100%;
  margin: 0 auto; /* Center the video horizontally */
  position: relative; /* For positioning the iframe */
  padding-bottom: 56.25%; /* 16:9 aspect ratio (56.25% = 9/16 * 100) */
  height: 0;
  margin-bottom: 1.25rem;
}

#player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.challenge h1,
.challenge h2, 
.challenge h3, 
.challenge h4, 
.challenge h5, 
.challenge h6,
.challenge .display-1, 
.challenge .display-2, 
.challenge .display-3, 
.challenge .display-4, 
.challenge .h1, 
.challenge .h2, 
.challenge .h3, 
.challenge .h4, 
.challenge .h5 {
  margin-top: 1.5em;
}

.challenge img {
  border-radius: 0.3125rem !important;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-style: none;
  transition: opacity 0.3s ease;
}

.challenge img:hover {
  opacity: 0.8;
}

/* IMAGE PLACEHOLDERS */

.challenge .img-placeholder {
  border: 2px dashed #b0bec5;
  border-radius: 8px;
  padding: 20px;
  margin: 1.5rem auto;
  max-width: 85%;
  background: #f9fafb;
  text-align: center;
}
.challenge .img-placeholder-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #78909c;
  margin-bottom: 8px;
}
.challenge .img-placeholder-label::before {
  content: "\1F5BC\FE0F";
  margin-right: 6px;
}
.challenge .img-placeholder-prompt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: #546e7a;
  background: #eceff1;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 6px;
  word-break: break-word;
}
.challenge .img-placeholder-alt {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  font-style: italic;
  color: #90a4ae;
}

/* SNIPPET BOXES */

.challenge .snippet {
  border-radius: 8px;
  padding: 16px 20px;
  margin: 1.5rem 0;
}
.challenge .snippet-header,
.challenge .aside-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.challenge .snippet-header::before,
.challenge .aside-header::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  background-color: currentColor;
  opacity: 0.9;
  -webkit-mask: var(--box-icon) center / contain no-repeat;
  mask: var(--box-icon) center / contain no-repeat;
}
.challenge .snippet-header {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.challenge .snippet-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}
.challenge .snippet-body p:last-child {
  margin-bottom: 0;
}

.challenge .snippet-didyouknow {
  background: #f3f0ff;
  color: #3d2e6e;
}
.challenge .snippet-didyouknow .snippet-header::before {
  --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
}

.challenge .snippet-greenaction {
  background: #eefbf3;
  color: #1a5c2e;
}
.challenge .snippet-greenaction .snippet-header::before {
  --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
}

.challenge .snippet-mythfact {
  background: #fff4eb;
  color: #6e2a0a;
}
.challenge .snippet-mythfact .snippet-header::before {
  --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

.challenge .snippet-numbers {
  background: #edf7f6;
  color: #0a4a4d;
}
.challenge .snippet-numbers .snippet-header::before {
  --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
}

.challenge .snippet-labelwatch {
  background: #fff8eb;
  color: #6e5400;
}
.challenge .snippet-labelwatch .snippet-header::before {
  --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='black'/%3E%3C/svg%3E");
}

.challenge .snippet-quickswap {
  background: #f0faf0;
  color: #2d6a2d;
}
.challenge .snippet-quickswap .snippet-header::before {
  --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
}

.challenge .snippet-deepdive {
  background: #f5f5f5;
  color: #343a40;
}
.challenge .snippet-deepdive .snippet-header::before {
  --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
}

.challenge .snippet-reflection {
  background: #eef4ff;
  color: #1e3a6e;
}
.challenge .snippet-reflection .snippet-header::before {
  --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E");
}

.challenge .snippet-warning {
  background: #fff0f0;
  color: #6e1a1a;
}
.challenge .snippet-warning .snippet-header::before {
  --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

.challenge .snippet-keyterm {
  background: #f0eeff;
  color: #2e2870;
}
.challenge .snippet-keyterm .snippet-header::before {
  --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* FULL-WIDTH ASIDE BOXES (optional supporting context — distinct from snippets) */

.challenge .aside {
  border-radius: var(--radius-btn);
  padding: 20px 22px;
  margin: 2rem 0;
  width: 100%;
  box-sizing: border-box;
}
.challenge .aside-header {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  margin-bottom: 10px;
  text-transform: none;
}
.challenge .aside-body {
  font-size: var(--fs-lead);
  font-weight: var(--fw-body);
  line-height: var(--lh-lead);
}
.challenge .aside-body p:last-child {
  margin-bottom: 0;
}

.challenge .aside-deepdive {
  background: linear-gradient(180deg, #f0f7ff 0%, #eef3fa 100%);
  color: #1e3354;
}
.challenge .aside-deepdive .aside-header::before {
  --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/%3E%3Cpath d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/%3E%3C/svg%3E");
}

.challenge .aside-howto {
  background: linear-gradient(180deg, #eefbf4 0%, #e8f6ee 100%);
  color: #143d28;
}
.challenge .aside-howto .aside-header::before {
  --box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 18H3'/%3E%3Cpath d='m15 18 2 2 4-4'/%3E%3Cpath d='M11 12H3'/%3E%3Cpath d='m15 12 2 2 4-4'/%3E%3Cpath d='M11 6H3'/%3E%3Cpath d='m15 6 2 2 4-4'/%3E%3C/svg%3E");
}

#activityPage .challenge img:hover {
  opacity: 1;
}

/* Lesson body — long-form lead; in-content headings step down from the hero h1.
   overflow: visible so the Plyr settings popup is never clipped by the lesson card. */
#activityPage .challenge {
  overflow: visible;
  font-size: var(--fs-lead);
  font-weight: var(--fw-body);
  line-height: var(--lh-lead);
  color: var(--text-body);
}

#activityPage .challenge h2 {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--text-heading);
}

#activityPage .challenge h3 {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: var(--text-heading);
}

#activityPage .challenge h4 {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  color: var(--text-heading);
}

#activityPage .challenge h5,
#activityPage .challenge h6 {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-meta);
  color: var(--text-heading);
}

#activityPage .challenge strong,
#activityPage .challenge b {
  font-weight: var(--fw-semibold);
}

#activityPage .challenge figcaption {
  margin-top: 0.35rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--text-muted);
}

#activityPage .challenge .references-section h5 {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
}
/* Modal styles are handled by Bootstrap's default modal classes */

.hide {
  display: none!important;
}

.goals{
  list-style-type: none;
  padding-inline-start: 0px;
  margin-bottom:0px;
}

.goals li{
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}


.goals li:before {
  content: '✓';
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 1em;
  height: 1em;
}

/* News and readable content */

.news-article img {
  border-radius: 0.3125rem !important;
  max-width: 100%;
  height: auto;
}

/* CKEditor block images in news body only (hero is outside .news-article) */
.news-article figure.image {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

.news-article figure.image > figcaption {
  margin-top: 0.5rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--text-muted);
  text-align: center;
}

.news-article figure.image img {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Terms / privacy / editorial — long-form legal & policy pages.
   ~900px matches the docs content column: wide enough for nested lists,
   still a readable measure for multi-section prose. */
.policy-page {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.policy-page__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .policy-page__header {
    margin-bottom: 2.5rem;
  }
}

.policy-page__doc h2 {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.policy-page__doc h2:first-of-type {
  margin-top: 0;
}

.policy-page__doc p,
.policy-page__doc ul {
  margin-bottom: 1rem;
}

.policy-page__doc li {
  margin-bottom: 0.35rem;
}

/* Lesson and result heroes (activity + result pages) */
#activityPage .single-challenge-hero img {
  height: clamp(200px, 42vw, 300px);
  object-fit: cover;
}

.single-challenge-hero-overlay {
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%);
}

.challenge-result-page .single-challenge-hero-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.8) 100%);
}

.single-challenge-hero-content {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem 1.5rem;
}

.single-challenge-hero-title {
  font-size: var(--fs-heading);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

.single-challenge-hero-meta {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
}

.single-challenge-shortdesc,
.single-challenge-shortdesc p {
  font-size: var(--fs-lead);
  font-weight: var(--fw-body);
  line-height: var(--lh-lead);
}

.single-challenge-shortdesc {
  max-width: 72ch;
}

/* Account course cards: ongoing/saved progress bar */
.single-challenge-cta-btn__progress {
  width: min(26rem, 82%);
  height: 0.38rem;
  border-radius: var(--radius-pill);
  background: #dbe3ea;
  overflow: hidden;
}

.single-challenge-cta-btn__progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--primary);
}

/* Learning paths */
.learning-path-card {
  border: 1px solid #e8edf2;
  border-radius: 1rem;
  padding: 1.5rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.learning-path-card:hover {
  border-color: #cfe8df;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}

.learning-path-card__icon-wrap {
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.learning-path-card__icon-wrap.bg-primary-4 .learning-path-card__icon {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.learning-path-card__icon {
  display: block;
  opacity: 0.92;
}

.learning-path-card__title {
  margin-bottom: 0.65rem;
}

.learning-path-card__desc {
  font-size: 0.95rem;
  line-height: var(--lh-body);
  margin-bottom: 1rem;
}

.learning-path-card__reward {
  white-space: nowrap;
}

.learning-path-card__completed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-btn);
  background: #e8f8f2;
  color: var(--primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-strong);
  line-height: var(--lh-lead);
}

.path-progress {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  width: 100%;
}

.path-progress__segment {
  flex: 1 1 0;
  height: 0.28rem;
  border-radius: var(--radius-pill);
  background: #e5ebf0;
}

.path-progress__segment--done {
  background: var(--primary);
}

.path-progress__segment--in-progress {
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary) 55%, #e5ebf0 55%, #e5ebf0 100%);
}

.learning-path-course-list__number {
  min-width: 1.5rem;
  font-weight: var(--fw-semibold);
}

.learning-path-course-list__tick {
  font-size: 1.25rem;
  line-height: var(--lh-none);
  font-weight: var(--fw-semibold);
}

.account-learning-paths .learning-path-card {
  margin-bottom: 1rem;
}

.account-learning-paths__row {
  border: 1px solid #e8edf2;
  border-radius: 0.85rem;
  padding: 1rem 1.15rem;
  background: #fff;
}

.account-learning-paths__row + .account-learning-paths__row {
  margin-top: 0.75rem;
}

@media (max-width: 767.98px) {
  #activityPage .challenge img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #activityPage .single-challenge-hero img {
    height: clamp(280px, 72vw, 380px);
  }

  .single-challenge-hero-content {
    padding: 1rem 1.25rem;
  }
}

/* Account, wallet, onboarding */

#site-banner {
  top: 0;
  z-index: 1000;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-2) 100%);
  font-size: 1.1rem;
  font-weight: var(--fw-semibold);
  color: white; 
  padding: 10px; 
  text-align: center;
}

#site-banner a{
  color: white;
  text-decoration: none;
}

/* Reward accordion body links use default theme link color */
#reward-accordion .card .collapse a {
  color: var(--text-link);
  text-decoration: underline;
}

#reward-accordion a:hover{
  color: inherit;
}

/* Reward multipliers: large mobile-friendly card rows */
#reward-accordion .card {
  border-radius: 0.75rem;
  overflow: hidden;
}
#reward-accordion .card > [data-toggle="collapse"] {
  display: block;
  text-decoration: none;
}
#reward-accordion .card > [data-toggle="collapse"] .d-flex {
  align-items: center !important;
}
#reward-accordion .card > [data-toggle="collapse"] h6 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  font-size: var(--fs-md);
  line-height: 1.35;
}
#reward-accordion .card > [data-toggle="collapse"] .badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  min-width: 3.5rem;
  height: 2.9rem;
  border-radius: 0.7rem;
  margin-right: 0 !important;
  padding: 0 0.35rem;
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-align: center;
}
#reward-accordion .reward-multiplier-info-icon {
  flex-shrink: 0;
  opacity: 0.9;
  transform: none !important;
  transition: opacity 0.15s ease;
}
#reward-accordion .card > [data-toggle="collapse"][aria-expanded="true"] .reward-multiplier-info-icon,
#reward-accordion .card > [data-toggle="collapse"][aria-expanded="false"] .reward-multiplier-info-icon {
  transform: none !important;
}
#reward-accordion .card > [data-toggle="collapse"]:not(.bg-success) .reward-multiplier-info-icon {
  color: var(--text-link);
  filter: invert(29%) sepia(78%) saturate(3850%) hue-rotate(153deg) brightness(103%) contrast(101%);
}
#reward-accordion .card > [data-toggle="collapse"].bg-success .reward-multiplier-info-icon {
  color: #fff;
  filter: brightness(0) invert(1);
}
#reward-accordion .card > [data-toggle="collapse"].bg-success h6 {
  color: #fff !important;
}
#reward-accordion .card > [data-toggle="collapse"].bg-success .badge {
  background: #0b7f6f;
  color: #fff;
}
@media (max-width: 767.98px) {
  #reward-accordion .card > [data-toggle="collapse"] {
    padding: 1rem !important;
  }
  #reward-accordion .card > [data-toggle="collapse"] h6 {
    font-size: var(--fs-strong);
    gap: 0.65rem;
  ;
  font-weight: var(--fw-semibold)}
  #reward-accordion .card > [data-toggle="collapse"] .badge {
    width: 3.2rem;
    min-width: 3.2rem;
    height: 2.65rem;
    font-size: 1.1rem;
    padding: 0 0.3rem 0 0.5rem;
  }
}

/* Onboarding */

body.onboarding-overflow-hidden {
  overflow: hidden;
}
.onboarding-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s;
}
.onboarding-overlay.visible {
  visibility: visible;
  opacity: 1;
  backdrop-filter: blur(5px);
  display: flex;
}

.onboarding-overlay.hidden {
  display: none;
}

.onboarding-popup {
  background: white;
  border-radius: var(--radius-btn);
  max-width: 650px;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
}
.onboarding-popup img {
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.onboarding-page {
  display: none;
}

.onboarding-page-content {
  padding: 20px;
}

.onboarding-page.visible {
  display: block;
}

.onboarding-page img {
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.onboarding-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-top: 1px solid #ccc;
}
.onboarding-footer .onboarding-navigation {
  display: flex;
}
.onboarding-footer .onboarding-navigation button {
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}

#onboarding-prev-page{
  background: #ffffff;
  color: #ccc;
}


.onboarding-footer .onboarding-pagination {
  display: flex;
  align-items: center;
}
.onboarding-footer .onboarding-pagination span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: var(--radius-circle);
  background-color: #ccc;
}
.onboarding-footer .onboarding-pagination span.active {
  background-color: var(--primary);
}

button:focus {
  outline:none;
}

/* Citations - inline links */
.citation-link {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}
.citation-link:hover {
  text-decoration: underline;
  color: #007a5c;
}

/* Citations - reference list at bottom of lesson */
.references-section {
  margin-top: 2.5rem;
  margin-bottom: 0;
  padding-top: 1.5rem;
  padding-bottom: 0;
  border-top: 1px solid #dee2e6;
}
.references-section h5 {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  margin-bottom: 0.75rem;
  color: #495057;
}
.references-list {
  padding-left: 1.25rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: #6c757d;
}
.references-list li {
  margin-bottom: 0.5rem;
}
.references-list li em {
  font-style: italic;
}
.reference-source-link {
  margin-left: 0.35rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--primary);
  text-decoration: none;
}
.reference-source-link:hover {
  text-decoration: underline;
}

/* Login / quiz gate / withdraw / error: fill space between header and footer, center card vertically */
.flex-container:has(.login-page-section),
.flex-container:has(.contact-page-section),
.flex-container:has(.withdraw-page),
.flex-container:has(.error-page-section) {
  display: flex;
  flex-direction: column;
}
.flex-container:has(.login-page-section) > main,
.flex-container:has(.contact-page-section) > main,
.flex-container:has(.withdraw-page) > main,
.flex-container:has(.error-page-section) > main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.flex-container:has(.login-page-section) > main,
.flex-container:has(.contact-page-section) > main,
.flex-container:has(.error-page-section) > main {
  min-height: 0;
}
.login-page-section,
.contact-page-section,
.withdraw-page,
.error-page-section {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Login card — type roles from DESIGN_SYSTEM; no separator above Email */
.login-card {
  padding: 1.5rem;
}
.login-card__title {
  margin: 0 0 0.5rem;
}
.login-card__lead {
  margin: 0;
}
/* Blank line between “Please log in…” and “New?” */
.login-card__note {
  margin: 1rem 0 0;
}
.login-card__section-title--with-badge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.login-card__last-used.chip {
  margin-left: 0.75rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  pointer-events: none;
}
.login-card__section-title--with-badge .login-card__last-used.chip {
  margin-left: 0;
}
.login-card__section {
  margin-top: 1.5rem;
}
.login-card__section-title {
  margin: 0 0 0.75rem;
}
.login-card__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
}
.login-card__divider::before,
.login-card__divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.login-card__legal {
  margin-top: 0.75rem;
}

@media (min-width: 768px) {
  .login-card {
    padding: 1.75rem 2rem;
  }
}

/* Shared coherent UI helpers */
.site-logo {
  display: block;
  height: 1.375rem; /* 22px */
  width: auto;
  max-width: 100%;
}

.site-logo--footer {
  height: 3rem;
  filter: brightness(0) invert(1);
}

@media (min-width: 992px) {
  .site-logo {
    height: 1.5rem; /* 24px — a bit smaller so it doesn't dominate the bar */
  }

  .site-logo--footer {
    height: 3.5rem;
  }
}

.maintenance-page__logo {
  display: block;
  width: min(100%, 18rem);
  height: auto;
  margin: 0 auto 2.5rem;
}

.maintenance-page__title {
  margin: 0 0 1.25rem;
  color: #fff;
}

.maintenance-page__message {
  margin: 0 0 2rem;
  color: rgba(255, 255, 255, 0.92);
}

.maintenance-page__message > :last-child {
  margin-bottom: 0;
}

.maintenance-page__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}

@media (min-width: 768px) {
  .maintenance-page__logo {
    width: min(100%, 22rem);
  }
}

.site-banner-close {
  float: right;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.2rem;
}

.footer-social-row {
  gap: 12px;
}

.footer-icon-link,
.footer-backtotop-link {
  line-height: 0;
}

.footer-cookie-link {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}

.footer-cookie-link:hover,
.footer-cookie-link:focus {
  color: inherit;
  text-decoration: underline;
}

.feedback-flash {
  top: 84px;
  right: 16px;
  max-width: 380px;
}

.feedback-trigger-desktop {
  top: 50%;
  right: -34px;
  transform: translateY(-50%);
  z-index: 1030;
}

.feedback-trigger-desktop-btn {
  border-radius: 0 !important;
  transform: rotate(-90deg);
  transform-origin: center;
}

.feedback-trigger-mobile {
  top: 50%;
  right: -28px;
  transform: translateY(-50%);
  z-index: 1030;
}

.feedback-trigger-mobile-btn {
  border-radius: 0 !important;
  transform: rotate(-90deg);
  transform-origin: center;
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
  line-height: var(--lh-subhead);
}

@media (max-width: 991.98px) {
  #siteFeedbackModal .modal-footer {
    justify-content: center;
    gap: 0.6rem;
  }

  #siteFeedbackModal .modal-footer .btn {
    min-width: 140px;
  }
}

@media (max-width: 575.98px) {
  .feedback-flash {
    top: auto;
    right: 12px;
    left: 12px;
    bottom: 140px;
    max-width: none;
  }

  #siteFeedbackModal .modal-dialog {
    margin: 0.75rem;
  }

  #siteFeedbackModal .modal-body {
    padding: 1rem;
  }

  #siteFeedbackModal .modal-footer {
    padding: 0.75rem 1rem 1rem;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
  }
}

.mission-cta-content {
  z-index: 2;
}

.mission-cta-image {
  width: 75%;
  z-index: 2;
}

.challenges-filter-modal {
  overflow: hidden;
}

.challenges-filter-modal .modal-dialog {
  max-width: 460px;
  width: 100%;
  height: 100%;
  margin: 0 0 0 auto;
}

.challenges-filter-modal .modal-content {
  height: 100%;
}

.challenges-filter-form {
  flex: 1;
  min-height: 0;
}

.challenges-filter-modal .modal-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.challenges-category-chip-icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 767.98px) {
  .challenges-filter-modal .modal-header {
    padding: 0.75rem 1rem;
  }

  .challenges-filter-modal .modal-body {
    padding: 0.85rem 1rem;
  }

  .challenges-filter-modal .modal-body h6 {
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
  }

  .challenges-filter-modal .modal-body hr {
    margin-top: 0.65rem;
    margin-bottom: 0.65rem;
  }

  .challenges-filter-modal .modal-body [id^="filterGroup"] {
    margin-bottom: 0.8rem !important;
    gap: 0.35rem;
  }

  .challenges-filter-modal .modal-body [id^="filterGroup"] .challenges-filter-btn {
    margin-right: 0.35rem !important;
    margin-bottom: 0.35rem !important;
    padding: 0.28rem 0.65rem !important;
    font-size: 0.78rem !important;
    line-height: var(--lh-heading);
  }

  .challenges-filter-modal .modal-body #filterGroupCategories .challenges-category-chip-icon {
    width: 15px;
    height: 15px;
    margin-left: 0 !important;
    margin-right: 0.35rem !important;
  }
}

.activity-back-link {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
}

.activity-progress-track {
  height: 0.35rem;
  background-color: rgba(15, 23, 42, 0.15);
}

/* ==========================================================
   News pages (news-*)
   Public /news listing + /news/:slug article — shared tokens,
   pills, follow band; article uses .news-detail
   ========================================================== */

.news-page {
  --news-hero-bg: #0a0f0d;
  --news-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06);
  --news-shadow-featured: 0 20px 48px rgba(4, 39, 35, 0.28);
  --news-transition: 0.15s ease;
  background: #fff;
}

.news-page .news-hero {
  position: relative;
  overflow: hidden;
  background: var(--news-hero-bg);
  background-image:
    radial-gradient(65% 120% at 6% -30%, rgba(0, 214, 150, 0.42) 0%, rgba(0, 214, 150, 0) 62%),
    radial-gradient(80% 130% at 104% 110%, rgba(4, 104, 101, 0.6) 0%, rgba(4, 104, 101, 0) 60%);
  padding: 4.75rem 0 9.375rem;
}

.news-page .news-hero__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-radial-gradient(
    circle at 92% 114%,
    rgba(255, 255, 255, 0.4) 0 2px,
    transparent 2px 68px
  );
  opacity: 0.22;
}

.news-page .news-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.125rem;
}

.news-page .news-hero__eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: var(--ls-caps);
}

.news-page .news-hero__title {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: #fff;
}

.news-page .news-hero__lead {
  margin: 0;
  width: 100%;
  font-size: var(--fs-lead);
  font-weight: var(--fw-body);
  line-height: var(--lh-lead);
  color: rgba(255, 255, 255, 0.78);
}

.news-page .news-featured-wrap {
  background: #fff;
  margin-top: -6.25rem;
  position: relative;
  z-index: 1;
  padding-bottom: 0.5rem;
}

.news-page .news-featured {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  background: #fff;
  border: 1px solid rgba(10, 61, 56, 0.12);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: var(--news-shadow-featured);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--news-transition), box-shadow var(--news-transition);
}

.news-page .news-featured:hover {
  color: inherit;
  text-decoration: none;
  border-color: rgba(0, 155, 114, 0.28);
}

.news-page .news-featured:focus-visible {
  outline: none;
  box-shadow: var(--news-shadow-featured), var(--focus-ring);
}

.news-page .news-featured__media {
  position: relative;
  background: var(--light);
  min-height: 18.75rem;
}

.news-page .news-featured__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-page .news-featured__body {
  padding: 2.5rem 2.75rem 2.625rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}

.news-page .news-featured__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.news-page .news-featured__date {
  color: var(--text-muted);
  letter-spacing: var(--ls-caps);
}

.news-page .news-featured__title {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}

.news-page .news-featured__summary {
  margin: 0;
  max-width: 44ch;
  font-size: var(--fs-lead);
  font-weight: var(--fw-body);
  line-height: var(--lh-lead);
  color: var(--text-body);
}

.news-page .news-featured__summary p {
  margin: 0;
}

.news-page .news-featured__cta {
  margin-top: 0.375rem;
  pointer-events: none;
}

.news-page .news-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.8125rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
}

.news-page .news-pill--solid {
  background: var(--primary);
  color: #fff;
}

.news-page .news-pill--outline {
  border: 1.5px solid rgba(0, 155, 114, 0.28);
  color: var(--primary-4);
  background: transparent;
}

.news-page .news-pill--on-media {
  position: absolute;
  left: 0.875rem;
  top: 0.875rem;
  z-index: 1;
  background: #fff;
  color: var(--primary-4);
}

.news-page a.news-pill--outline:hover {
  background: var(--light);
  color: var(--primary-4);
  text-decoration: none;
}

/* --- Article detail (/news/:slug) ------------------------------------ */

.news-page--article .news-detail {
  padding: 2.5rem 0 1rem;
}

.news-page--article .news-detail__inner {
  max-width: 56rem;
}

.news-page--article .news-detail__back {
  display: inline-block;
  margin-bottom: 1.75rem;
  color: var(--text-muted);
  text-decoration: none;
}

.news-page--article .news-detail__back:hover {
  color: var(--primary-4);
  text-decoration: none;
}

.news-page--article .news-detail__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.news-page--article .news-detail__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.news-page--article .news-detail__date {
  margin: 0;
  color: var(--text-muted);
  letter-spacing: var(--ls-caps);
}

.news-page--article .news-detail__title {
  margin: 0;
  color: var(--text-heading);
}

.news-page--article .news-detail__media {
  margin: 0 0 2.5rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--light);
}

.news-page--article .news-detail__img {
  display: block;
  width: 100%;
  height: auto;
}

.news-page--article .news-detail__body {
  margin-bottom: 2.5rem;
}

.news-page--article .news-detail__body > :first-child {
  margin-top: 0;
}

.news-page--article .news-about {
  margin: 0 0 2.5rem;
  padding: 1.5rem 1.625rem;
  background: var(--light);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}

.news-page--article .news-about__title {
  margin: 0 0 0.75rem;
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--text-heading);
}

.news-page--article .news-about__body {
  margin: 0 0 0.875rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.news-page--article .news-about__tagline {
  margin: 0;
  color: var(--text-heading);
}

.news-page--article .news-detail__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: 1.75rem;
  margin-bottom: 3rem;
  border-top: 1px solid rgba(10, 61, 56, 0.12);
}

.news-page--article .news-detail__share {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.news-page--article .news-detail__share-label {
  color: var(--text-heading);
}

.news-page--article .news-detail__share-links {
  display: flex;
  gap: 0.5rem;
}

.news-page--article .news-detail__share-link {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-circle);
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background var(--news-transition);
}

.news-page--article .news-detail__share-link:hover {
  background: var(--primary-2);
  text-decoration: none;
}

.news-page--article .news-detail__share-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.news-page--article .news-detail__share-link img {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) invert(1);
}

.news-page .news-archive {
  background: #fff;
  padding: 3.75rem 0 1.5rem;
}

.news-page .news-filters {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.75rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-subtle);
}

.news-page .news-filters__eyebrow {
  margin: 0 0 0.625rem;
  color: var(--primary-4);
  letter-spacing: var(--ls-caps);
}

.news-page .news-filters__title {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}

.news-page .news-filters__chips {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.news-page .news-filters__chips .chip {
  color: var(--text-heading);
  border-color: var(--border-subtle);
  background: #fff;
}

.news-page .news-filters__chips .chip__count {
  margin-left: 0.35em;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.news-page .news-filters__chips .chip:hover,
.news-page .news-filters__chips .chip.chip--active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.news-page .news-filters__chips .chip:hover .chip__count,
.news-page .news-filters__chips .chip.chip--active .chip__count {
  color: rgba(255, 255, 255, 0.72);
}

.news-page .news-empty {
  margin: 2rem 0 3rem;
  color: var(--text-muted);
  text-align: center;
}

.news-page .news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.news-page .news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--news-shadow-card);
  transition: border-color var(--news-transition), background var(--news-transition);
}

.news-page .news-card:hover {
  border-color: rgba(0, 155, 114, 0.28);
  background: var(--light);
}

.news-page .news-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--light);
}

.news-page .news-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-page .news-card__body {
  padding: 1.25rem 1.375rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1;
}

.news-page .news-card__date {
  color: var(--text-muted);
  letter-spacing: var(--ls-caps);
}

.news-page .news-card__title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--text-heading);
}

.news-page .news-card__summary {
  margin: 0;
  flex: 1;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.news-page .news-card__summary p {
  margin: 0;
}

.news-page .news-card__more {
  margin-top: 0.25rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  color: var(--primary);
}

.news-page .news-pagination {
  padding: 1.5rem 0 4rem;
}

.news-page .news-pagination .page-link {
  min-width: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  border-radius: var(--radius-btn);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  color: var(--text-heading);
}

.news-page .news-pagination .page-item.active .page-link {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.news-page .news-pagination .page-item.disabled .page-link {
  color: var(--text-light);
}

.news-page .news-follow {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-2) 100%);
  padding: 4rem 0;
}

.news-page .news-follow__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1.5px, transparent 1.7px);
  background-size: 24px 24px;
  opacity: 0.14;
}

.news-page .news-follow__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.25rem;
  flex-wrap: wrap;
}

.news-page .news-follow__copy {
  max-width: 46ch;
}

.news-page .news-follow__eyebrow {
  margin: 0 0 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: var(--ls-caps);
}

.news-page .news-follow__title {
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: #fff;
}

.news-page .news-follow__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

@media (max-width: 1000px) {
  .news-page .news-featured {
    grid-template-columns: 1fr;
  }

  .news-page .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .news-page .news-hero {
    padding: 3.5rem 0 7.5rem;
  }

  .news-page .news-featured-wrap {
    margin-top: -5rem;
  }

  .news-page .news-featured__body {
    padding: 1.75rem 1.5rem 1.875rem;
  }

  .news-page .news-grid {
    grid-template-columns: 1fr;
  }

  .news-page .news-archive {
    padding-top: 2.5rem;
  }

  .news-page .news-follow {
    padding: 3rem 0;
  }

  .news-page--article .news-detail {
    padding-top: 1.75rem;
  }

  .news-page--article .news-detail__footer {
    margin-bottom: 2rem;
  }
}

.icon-invert {
  filter: invert(1);
}

/* Contact card — mirrors login type/spacing roles */
.contact-card__intro {
  margin-bottom: 1.25rem;
}
.contact-card__title {
  margin: 0 0 0.5rem;
}
.contact-card__lead {
  margin: 0;
}
.contact-card {
  padding: 1.5rem;
}
.contact-card__label {
  display: block;
  margin-bottom: 0.35rem;
}
.contact-card .form-group:last-of-type {
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .contact-card {
    padding: 1.75rem 2rem;
  }
}

/* Account course cards (ongoing/saved) */
.frontpage-featured-title-link {
  color: #fff !important;
}

.frontpage-featured-image {
  height: clamp(210px, 28vw, 330px);
  object-fit: cover;
}

.frontpage-featured-image-overlay {
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 35%, rgba(0, 0, 0, 0.82) 100%);
}

.frontpage-featured-image-content {
  left: 0;
  bottom: 0;
}

.withdraw-state-hidden {
  display: none;
}

.withdraw-processing-spinner {
  width: 3rem;
  height: 3rem;
}

.withdraw-tx-hash {
  font-family: var(--font-family-monospace);
  word-break: break-all;
}

.withdraw-history-table th,
.withdraw-history-table td {
  vertical-align: middle;
}

.withdraw-history-destination {
  font-family: var(--font-family-monospace);
}

.withdraw-history-tx-link {
  font-family: var(--font-family-monospace);
  font-size: 0.82rem;
}

.withdraw-history-mobile-meta {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: #6c757d;
}

.withdraw-history-mobile-tx {
  margin-top: 0.3rem;
}

.withdraw-history-mobile-tx a {
  font-size: 0.8rem;
  font-weight: var(--fw-semibold);
}

@media (min-width: 768px) {
  .withdraw-page .withdraw-form {
    max-width: 860px;
  }

  .withdraw-page .withdraw-amount-group {
    display: flex;
    align-items: stretch;
  }

  .withdraw-page .withdraw-amount-group > .form-control {
    flex: 1 1 auto;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
  }

  .withdraw-page .withdraw-amount-append {
    margin-left: 0.5rem;
  }

  .withdraw-page .withdraw-amount-append .btn {
    border-radius: 0.25rem;
  }
}

@media (max-width: 767.98px) {
  .withdraw-page .withdraw-card {
    padding: 0.95rem;
  }

  .withdraw-page .withdraw-title-text {
    display: block;
    font-size: var(--fs-subhead);
    line-height: var(--lh-heading);
  ;
  font-weight: var(--fw-semibold)}

  .withdraw-page .withdraw-card > .text-muted {
    margin-bottom: 0.85rem;
    line-height: 1.35;
  }

  .withdraw-page .withdraw-form .form-group {
    margin-bottom: 0.9rem !important;
  }

  .withdraw-page .withdraw-form label {
    margin-bottom: 0.4rem;
    font-weight: var(--fw-semibold);
    color: #2c3440;
  }

  .withdraw-page .withdraw-amount-group {
    display: block;
  }

  .withdraw-page .withdraw-amount-group > .form-control {
    width: 100%;
    margin-bottom: 0.5rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
  }

  .withdraw-page .withdraw-amount-append {
    display: block;
    width: 100%;
  }

  .withdraw-page .withdraw-amount-append .btn {
    width: 100%;
    border-radius: 0.25rem;
  }

  .withdraw-page .withdraw-submit-btn {
    width: 100%;
    margin-top: 0.15rem !important;
  }

  .withdraw-page .form-text {
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .withdraw-page .feedback-trigger-mobile {
    right: -34px;
  }

  .withdraw-page .withdraw-history-card {
    padding: 0.95rem;
  }

  .withdraw-page .withdraw-history-card h4 {
    margin-bottom: 0.75rem !important;
  }

  .withdraw-page .withdraw-history-table th,
  .withdraw-page .withdraw-history-table td {
    padding: 0.45rem 0.35rem;
  }

  .withdraw-page .withdraw-history-table td:last-child {
    min-width: 96px;
  }
}

.countdown-emphasis {
  font-weight: var(--fw-semibold);
}

.account-name-pencil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  margin: 0;
  border: none;
  background: transparent;
  color: #9aa3af;
  border-radius: 4px;
  cursor: pointer;
  line-height: var(--lh-none);
  flex-shrink: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.account-name-pencil:hover,
.account-name-pencil:focus {
  color: var(--primary);
  background-color: rgba(0, 155, 114, 0.08);
  outline: none;
}

.account-name-pencil:focus-visible {
  box-shadow: 0 0 0 2px rgba(0, 155, 114, 0.35);
}

.account-name-wrap #account-name-form .form-control-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: var(--fs-body);
;
  font-weight: var(--fw-body)}

.account-bento {
  background: #f8fafc;
  border: 1px solid #e8ecf0;
  border-radius: 14px;
  padding: 16px 18px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.account-bento:hover {
  border-color: #dce3ea;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.account-bento__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-bento__icon--b3tr { background: #e6eeff; }
.account-bento__icon--vot3 { background: #d9ffb0; }
.account-bento__icon--value { background: #ffe0b2; }
.account-bento__icon--multiplier { background: #ede9fe; }

.account-bento__value {
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-subhead);
  color: #1e293b;
}

.account-bento__suffix {
  font-size: 0.9rem;
  font-weight: var(--fw-semibold);
  color: #64748b;
}

.account-bento__label {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 2px;
}

/* Lesson audio (Plyr) — minimal layout only; Plyr's own CSS handles controls + menu */
.lesson-audio {
  overflow: visible;
}

.lesson-audio__label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.lesson-audio > audio,
.lesson-audio .plyr {
  flex: 1 1 auto;
  min-width: 0;
  --plyr-color-main: var(--text-link);
}

.lesson-audio .plyr--audio .plyr__controls {
  background: transparent;
  padding: 0;
}

.lesson-audio .plyr__control[data-plyr='settings'] {
  display: none;
}

/* Accessibility: skip link for keyboard users */
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10000;
  padding: 0.5rem 1rem;
  background: #fff;
  color: #1B4332;
  border: 2px solid #1B4332;
  border-radius: 0.25rem;
  text-decoration: none;
}

/* Lesson paywall — teaser fade + signup CTA */
.lesson-gated {
  position: relative;
}

.lesson-infographic {
  text-align: center;
}

.lesson-infographic__img,
.lesson-infographic img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.lesson-infographic-share .lesson-infographic-share__icon {
  color: #fff;
}

.lesson-fade {
  position: relative;
  max-height: 6rem;
  overflow: hidden;
  margin-top: -0.5rem;
  margin-bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0) 100%);
  filter: blur(3px);
  user-select: none;
  pointer-events: none;
}

.lesson-paywall-cta {
  position: relative;
  margin-top: -2rem;
  padding-top: 2.5rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 2rem);
}

.lesson-paywall-cta__inner {
  background: #f8faf9;
  border: 1px solid rgba(0, 155, 114, 0.2);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(27, 67, 50, 0.08);
}

.lesson-paywall-cta__progress-bar {
  height: 0.3rem;
  border-radius: var(--radius-pill);
  background-color: #e9ecef;
}

.lesson-paywall-cta__progress-caption {
  text-align: center;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
}

.lesson-paywall-cta__actions {
  margin-bottom: 0;
}

.lesson-paywall-cta__btn {
  min-width: 14rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  gap: 0.25rem;
}

.lesson-paywall-cta__free-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  flex-shrink: 0;
}

.lesson-paywall-cta__outline-item {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

.lesson-paywall-cta__trust-block {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 0.75rem;
}

.lesson-paywall-cta__tagline {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  margin-bottom: 0.5rem;
}

.lesson-paywall-cta__eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.lesson-paywall-cta__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
}

.lesson-paywall-cta__trust-dot {
  opacity: 0.45;
  user-select: none;
}

@media (max-width: 575.98px) {
  .lesson-paywall-cta__btn {
    display: block;
    width: 100%;
  }
}

.lesson-video-locked {
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lesson-video-locked p {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
}

.partner-callout__label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .lesson-fade {
    filter: none;
    opacity: 0.65;
  }
}

@media (prefers-contrast: more) {
  .lesson-paywall-cta__inner {
    border-width: 2px;
    border-color: var(--primary);
  }
}

/* Course search box */
.course-search {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.course-search--lg .course-search__input {
  font-size: 1.125rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.course-search__field {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid #dee2e6;
  border-radius: var(--radius-input);
  background: #fff;
  overflow: hidden;
}

.course-search__field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 155, 114, 0.15);
}

.course-search__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0.45;
}

.course-search__input {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  padding-left: 2.75rem;
  padding-right: 1rem;
  border: 0;
  border-radius: 0;
  min-height: 3rem;
  background: transparent;
}

.course-search__input:focus {
  border-color: transparent;
  box-shadow: none;
}

.course-search__submit {
  position: static;
  flex-shrink: 0;
  align-self: stretch;
  margin: 0;
  border-radius: 0;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border: 0;
  border-left: 1px solid #dee2e6;
  background: #f7f9fc;
  color: var(--text-body);
  font-weight: var(--fw-semibold);
  box-shadow: none;
}

.course-search__submit:hover {
  background: #eef1f4;
  color: var(--text-heading);
  border-color: #dee2e6;
  box-shadow: none;
}

.course-search__submit:focus,
.course-search__submit:focus-visible {
  background: #eef1f4;
  color: var(--text-heading);
  border-color: #dee2e6;
  box-shadow: none;
  outline: none;
}

.course-search__submit:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(0, 155, 114, 0.35);
}

.course-search__field:focus-within .course-search__submit {
  border-left-color: rgba(0, 155, 114, 0.25);
}

.course-search__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 1050;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: var(--radius-input);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  max-height: 20rem;
  overflow-y: auto;
}

.course-search__option {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 1rem;
  color: #212529;
  text-decoration: none;
  border-bottom: 1px solid #f1f3f5;
}

.course-search__option:last-child {
  border-bottom: none;
}

.course-search__option:hover,
.course-search__option--active {
  background: #f0faf6;
  color: var(--primary);
  text-decoration: none;
}

.course-search__option-title {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
}

.course-search__option-meta {
  font-size: var(--fs-meta);
  color: #6c757d;
;
  font-weight: var(--fw-medium)}

.course-search__option--active .course-search__option-meta {
  color: #007a5a;
}

.course-search__footer {
  display: block;
  padding: 0.75rem 1rem;
  text-align: center;
  font-weight: var(--fw-semibold);
  color: var(--primary);
  text-decoration: none;
  background: #f8f9fa;
}

.course-search__footer:hover {
  background: #f0faf6;
  text-decoration: none;
  color: #007a5a;
}

.course-search__empty {
  padding: 1rem;
  text-align: center;
  color: #6c757d;
  font-size: 0.9375rem;
}

.course-search__popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  justify-content: center;
}

.course-search__popular-label {
  font-size: var(--fs-body);
  color: #6c757d;
;
  font-weight: var(--fw-body)}

@media (max-width: 575.98px) {
  .course-search__submit {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    font-size: var(--fs-body);
  ;
  font-weight: var(--fw-body)}
}

/* ==========================================================
   Frontpage v5
   Layout comes from Bootstrap 4 utilities; this block only
   covers what utilities cannot express.
   ========================================================== */

/* --- typography ------------------------------------------------------ */
/* Match Homepage Gradient v2 mockup type scale (px → rem at 16px root). */
.fp5-eyebrow {
  font-size: 0.75rem; /* 12px */
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}

.fp5-h1 {
  font-size: 3.75rem; /* 60px */
  font-weight: var(--fw-medium);
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: #192d35;
}

.fp5-h2 {
  font-size: 2.5rem; /* 40px */
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--ls-heading);
  color: #192d35;
}

.fp5-lead {
  font-size: 1.125rem; /* 18px — section intros */
  line-height: 1.5;
}

/* How-it-works step cards */
.fp5-step-title {
  font-size: 1.25rem; /* 20px */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  letter-spacing: var(--ls-subhead);
  color: var(--text-heading);
}

.fp5-step-body {
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6;
}

.fp5-step-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

@media (max-width: 760px) {
  .fp5-h1 {
    font-size: 2.125rem; /* 34px */
    line-height: 1.15;
  }

  .fp5-h2 {
    font-size: 1.625rem; /* 26px */
  }
}


.fp5-section-intro {
  max-width: 34rem;
}

/* --- hero ------------------------------------------------------------ */
.fp5-hero {
  --fp5-hero-ink: #fff;
  --fp5-hero-ink-muted: rgba(255, 255, 255, 0.78);
  --fp5-hero-accent: #9be8cd;
  position: relative;
  overflow: hidden;
  background: #0b3a31;
  background-image:
    radial-gradient(72% 130% at 2% -18%, rgba(0, 214, 150, 0.42) 0%, rgba(0, 214, 150, 0) 64%),
    radial-gradient(62% 110% at 96% 2%, rgba(0, 155, 114, 0.34) 0%, rgba(0, 155, 114, 0) 60%),
    radial-gradient(92% 132% at 104% 112%, rgba(4, 104, 101, 0.72) 0%, rgba(4, 104, 101, 0) 64%);
  padding: 6rem 0 4.75rem; /* 96px / 76px — mockup breathing room */
}

/* Diagonal hairline overlay (replaces the old glow + dots). */
.fp5-hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.4) 0 1px,
    transparent 1px 32px
  );
  opacity: 0.05;
}

.fp5-hero__inner {
  position: relative;
}

/* Left column: open up stacked copy so it doesn’t read as one dense block. */
.fp5-hero__copy .fp5-hero-badge {
  margin-bottom: 1.25rem; /* 20px */
}

.fp5-hero__copy .fp5-h1 {
  margin-bottom: 1.5rem; /* 24px — air under the headline */
}

.fp5-hero__copy .fp5-lead {
  margin-bottom: 2.25rem; /* 36px — clear pause before search */
}

.fp5-hero__social {
  margin-top: 1.75rem; /* 28px */
}

.fp5-hero .fp5-h1 {
  color: var(--fp5-hero-ink);
}

.fp5-hero .fp5-lead {
  font-size: 1.1875rem; /* 19px */
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: 0.005em;
  color: var(--fp5-hero-ink-muted);
  max-width: 44ch;
}

/* Wide screens: room for the headline line, smaller visual, intentional air between. */
@media (min-width: 992px) {
  .fp5-hero__copy {
    padding-right: 1.5rem;
  }

  .fp5-hero-visual {
    max-width: 26.5rem; /* ~424px — slightly smaller collage */
    margin-left: auto;
  }
}

@media (min-width: 1200px) {
  .fp5-hero__copy {
    padding-right: 2rem;
  }

  .fp5-hero-visual {
    max-width: 28.75rem; /* ~460px */
  }
}

@media (max-width: 760px) {
  .fp5-hero {
    padding: 2.75rem 0 3rem; /* 44px / 48px */
  }

  .fp5-hero__copy .fp5-h1 {
    margin-bottom: 1.125rem;
  }

  .fp5-hero__copy .fp5-lead {
    margin-bottom: 1.75rem;
  }
}

.fp5-hero-members {
  font-size: var(--fs-meta); /* 13px */
  line-height: 1.3;
  color: var(--fp5-hero-ink-muted);
;
  font-weight: var(--fw-medium)}

.fp5-hero-members strong {
  font-weight: var(--fw-semibold);
  color: var(--fp5-hero-ink);
}

.fp5-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 1rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  box-shadow: none;
  font-size: 0.75rem; /* 12px */
  font-weight: var(--fw-medium);
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.fp5-hero-visual {
  position: relative;
  padding: 0 0 4.875rem 1.375rem;
}

.fp5-hero-visual__tint {
  position: absolute;
  left: 0;
  top: 1.625rem;
  width: 88%;
  height: 78%;
  border-radius: 1.5rem;
  background: rgba(53, 229, 168, 0.16);
  transform: rotate(-3deg);
}

.fp5-hero-visual__frame {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  transform: rotate(1.4deg);
}

.fp5-hero-visual__photo {
  display: block;
  width: 100%;
  height: auto;
}

.fp5-hero-card {
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  width: 19.625rem;
  max-width: 100%;
  padding: 1.125rem 1.25rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(10, 61, 56, 0.14);
  border-radius: 0.875rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
  transform: rotate(-1.6deg);
}

.fp5-hero-card__flag {
  display: inline-block;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-pill);
  background: #0a3d38;
  font-size: 0.625rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.fp5-hero-card__rating {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  color: var(--primary);
}

.fp5-hero-card__title {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}

.fp5-hero-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.75rem;
  font-size: var(--fs-meta);
  line-height: var(--lh-lead);
  color: var(--text-body);
;
  font-weight: var(--fw-medium)}

.fp5-hero-card__partner {
  margin-bottom: 0.75rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  color: var(--text-muted);
}

.fp5-hero-card__partner-link {
  position: relative;
  z-index: 2;
}

.fp5-hero-card__meta {
  gap: 0.75rem;
}

.fp5-hero-card__cta {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  pointer-events: none;
}

.fp5-hero-card__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0.75rem;
}

.fp5-hero-card__hit:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Overhangs the frame's top-right corner, balancing the card at bottom-left. */
.fp5-hero-earned {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.875rem 0.4375rem 0.5rem;
  background: #fff;
  border: 1px solid rgba(10, 61, 56, 0.14);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transform: rotate(2.5deg);
}

.fp5-hero-earned__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-circle);
  background: rgba(0, 155, 114, 0.14);
  color: #007a5a;
}

.fp5-hero-earned__text {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.fp5-hero-earned__value {
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-title);
  color: var(--text-heading);
}

.fp5-hero-earned__label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Stacked under lg: keep the photo from filling the whole column width. */
@media (max-width: 991.98px) {
  .fp5-hero-visual {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Keep the collage on phones: photo full width, card overlapping its bottom. */
@media (max-width: 575.98px) {
  .fp5-hero-badge {
    font-size: 0.625rem;
    letter-spacing: 0.04em;
  }

  .fp5-hero-visual {
    padding: 0 0 3.25rem;
  }

  .fp5-hero-visual__tint {
    display: none;
  }

  .fp5-hero-card {
    left: 0.375rem;
    right: 0.375rem;
    bottom: -1.5rem;
    width: auto;
    padding: 1rem 1rem 1.125rem;
  }

  .fp5-hero-card__title {
    font-size: 1.125rem;
  }

  .fp5-hero-earned {
    display: none;
  }
}

.fp5-hero-search .course-search {
  max-width: 32rem;
  margin-left: 0;
  margin-right: 0;
}

.fp5-hero-search .course-search__field {
  border: none;
  border-radius: 0.875rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  padding: 0 0.275rem 0 0;
}

.fp5-hero-search .course-search__field:focus-within {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), var(--focus-ring-on-dark);
}

.fp5-hero-search .course-search__input {
  font-size: 0.9375rem; /* 15px */
  font-weight: var(--fw-body);
  min-height: 2.25rem; /* was 3rem — tall bar */
  padding-top: 0;
  padding-bottom: 0;
}

.fp5-hero-search .course-search__submit {
  border-radius: var(--radius-btn);
  border-left: 0;
  align-self: center;
  margin-right: 0;
  background: #eef1f4;
  color: var(--text-heading);
  font-size: var(--fs-body); /* 14px */
  font-weight: var(--fw-medium);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
;
  font-weight: var(--fw-body)}

.fp5-hero-search .course-search__submit:hover,
.fp5-hero-search .course-search__submit:focus,
.fp5-hero-search .course-search__submit:focus-visible {
  background: #e5e9ed;
  color: var(--text-heading);
  border-color: transparent;
  box-shadow: none;
}

.fp5-hero-search .course-search__submit:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(0, 155, 114, 0.35);
}

.fp5-hero-search .course-search__field:focus-within .course-search__submit {
  border-left-color: transparent;
}

.fp5-hero-search .course-search__popular {
  justify-content: flex-start;
}

.fp5-hero-search .course-search__popular-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-meta); /* 13px */
  font-weight: var(--fw-medium);
;
  font-weight: var(--fw-medium)}

.fp5-hero-search .chip {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: var(--fs-meta); /* 13px */
  font-weight: var(--fw-medium);
  padding: 0.3125rem 0.875rem;
;
  font-weight: var(--fw-medium)}

.fp5-hero-search .chip:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.fp5-hero-search .chip:focus-visible {
  box-shadow: var(--focus-ring-on-dark);
}

.fp5-avatar-stack {
  display: inline-flex;
  flex-shrink: 0;
}

.fp5-avatar {
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-circle);
  border: 2px solid #0a3d38;
  object-fit: cover;
  background: #eef2f5;
}

.fp5-avatar + .fp5-avatar {
  margin-left: -0.55rem;
}

/* --- stat strip ------------------------------------------------------ */
.fp5-statbar {
  /* theme.css sets section { padding: 3.75–7.5rem 0 } — compact strip only */
  padding: 1.2rem 0;
  background-color: #edf0ecb3;
  background-image: radial-gradient(
    60% 220% at 8% -80%,
    rgba(0, 155, 114, 0.18) 0%,
    rgba(0, 155, 114, 0) 62%
  );
  border-bottom: 1px solid rgba(0, 155, 114, 0.16);
}

.fp5-statbar__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  text-align: center;
}

.fp5-stat {
  min-width: 0;
  padding: 0 0.375rem;
}

.fp5-stat:not(:last-child) {
  border-right: 1px solid rgba(0, 155, 114, 0.2);
}

@media (min-width: 768px) {
  .fp5-stat {
    padding: 0 1.5rem;
  }
}

.fp5-stat__value {
  font-size: 2.125rem; /* 34px */
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-heading);
  color: #0a3d38;
}

.fp5-stat__label {
  margin-top: 0.5rem;
  font-size: var(--fs-micro); /* 11px */
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-2);
;
  font-weight: var(--fw-medium)}

/* --- category chips above the course grid ---------------------------- */
.fp5-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --- square icon tile (steps, categories, promise) -------------------- */
.fp5-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.7rem;
  background: rgba(0, 155, 114, 0.1);
  color: var(--primary);
  flex-shrink: 0;
}

.fp5-step-label {
  font-size: 0.75rem; /* 12px */
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  color: var(--text-light);
}

/* --- category tiles --------------------------------------------------- */
.fp5-cat-tile {
  display: flex;
  height: 100%;
  min-height: 8.25rem;
  padding: 1.25rem 1.125rem;
  background: #fff;
  border: none;
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.fp5-cat-tile:hover {
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.fp5-cat-tile:focus-visible {
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.fp5-cat-tile__body {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
}

.fp5-cat-tile__content {
  flex: 1 1 auto;
  min-width: 0;
}

.fp5-cat-tile__name {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: #192d35;
}

.fp5-cat-tile__count {
  margin-top: 0.4rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

.fp5-cat-tile__icon {
  flex: 0 0 3.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: var(--radius-circle);
  background: rgba(0, 155, 114, 0.1);
}

.fp5-cat-tile__bg-icon {
  width: 2rem;
  height: 2rem;
  pointer-events: none;
  object-fit: contain;
}

.fp5-cat-tile--all {
  background: var(--primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.fp5-cat-tile--all:hover {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

.fp5-cat-tile--all:focus-visible {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.fp5-cat-tile--all .fp5-cat-tile__name {
  color: #fff;
}

.fp5-cat-tile--all .fp5-cat-tile__count {
  color: rgba(255, 255, 255, 0.75);
}

.fp5-cat-tile__icon--all {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.fp5-cat-tile:hover .fp5-cat-tile__icon--all,
.fp5-cat-tile:focus-visible .fp5-cat-tile__icon--all {
  background: rgba(255, 255, 255, 0.24);
}

/* --- dashed "explore all" tile in the course grid --------------------- */
.fp5-explore-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 13.75rem;
  padding: 1.75rem;
  border: 1.5px dashed #dee2e6;
  border-radius: 0.875rem;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.fp5-explore-tile:hover {
  text-decoration: none;
  border-color: var(--primary);
}

.fp5-explore-tile:focus-visible {
  text-decoration: none;
  border-color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.fp5-explore-tile__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.875rem;
  border-radius: var(--radius-circle);
  background: rgba(0, 155, 114, 0.1);
  color: var(--primary);
}

/* --- rewards panel ---------------------------------------------------- */
.fp5-rewards-panel {
  background: #0a3d38;
  border-radius: 1.25rem;
}

.fp5-rewards-panel .fp5-stat__label {
  color: #fff;
}

.fp5-rewards-panel__value {
  font-size: clamp(2.5rem, 7vw, 3.25rem);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  color: #fff;
}

.fp5-rewards-panel__note {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.875rem;
}

.fp5-rewards-panel__badge {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.12);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: #fff;
}

.fp5-check-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.7rem;
  flex-shrink: 0;
  border: 1px solid #ffffff17;
}

.fp5-check-tile svg {
  display: block;
}

.fp5-bullet-check {
  color: var(--primary);
  flex-shrink: 0;
}

/* --- testimonials ----------------------------------------------------- */
.fp5-community-visual {
  position: relative;
  max-width: 25rem;
  margin: 0 auto;
  padding: 0 1.25rem 1.25rem 0;
}

/* Same box as the photo, nudged down-right so only a sliver shows. */
.fp5-community-visual__accent {
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  right: 0;
  bottom: 0;
  border-radius: 1.375rem;
  background: rgba(0, 155, 114, 0.16);
  transform: rotate(2.5deg);
}

.fp5-community-visual__frame {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(10, 61, 56, 0.16);
  transform: rotate(-1.8deg);
}

.fp5-community-visual__photo {
  display: block;
  width: 100%;
  height: auto;
}

.fp5-community-stat {
  position: absolute;
  left: -0.875rem;
  bottom: 0.375rem;
  padding: 0.9375rem 1.25rem;
  border-radius: 1rem;
  background: #0a3d38;
  box-shadow: 0 12px 28px rgba(10, 61, 56, 0.22);
  transform: rotate(-3deg);
}

.fp5-community-stat__value {
  font-size: 1.625rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-heading);
  color: #fff;
}

.fp5-community-stat__label {
  margin-top: 0.375rem;
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.fp5-community-stat__star {
  margin-left: 0.125rem;
  font-size: 1.125rem;
  color: #f5c842;
}

@media (max-width: 575.98px) {
  .fp5-community-visual {
    padding: 0;
  }

  .fp5-community-visual__accent {
    display: none;
  }

  .fp5-community-visual__frame {
    transform: none;
  }

  .fp5-community-stat {
    left: 0.75rem;
    bottom: 0.75rem;
    transform: none;
  }
}

.fp5-testimonial-card {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.fp5-stars {
  color: var(--primary);
  font-size: var(--fs-strong);
  letter-spacing: 2px;
  line-height: var(--lh-none);
;
  font-weight: var(--fw-semibold)}

.fp5-quote {
  font-size: var(--fs-strong);
  font-weight: var(--fw-body);
  line-height: 1.6;
  color: #192d35;
}

.fp5-quote-name {
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}

.fp5-quote-meta {
  font-weight: var(--fw-body);
}

.fp5-quote-avatar {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-circle);
  object-fit: cover;
  flex-shrink: 0;
  background: #eef2f5;
}

/* --- site footer (used on every page) --------------------------------- */
footer.fp5-site-footer {
  background-color: #0a3d38 !important;
  background-image: none !important;
  /* theme.css sets footer { padding: 3.75–7.5rem 0 } on all footers */
  padding: 3rem 0 1.25rem;
  border-top: none;
}

.fp5-footer-vebetter {
  height: 16px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.55;
}

.fp5-footer-heading {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.fp5-footer-link {
  display: block;
  padding: 0.25rem 0;
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
;
  font-weight: var(--fw-body)}

.fp5-footer-link:hover,
.fp5-footer-link:focus {
  color: #fff;
  text-decoration: none;
}

.fp5-footer-note {
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.55);
;
  font-weight: var(--fw-medium)}

.fp5-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-meta);
  color: rgba(255, 255, 255, 0.5);
;
  font-weight: var(--fw-medium)}

.fp5-footer-bottom a,
.fp5-footer-bottom button {
  color: rgba(255, 255, 255, 0.5);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.fp5-footer-bottom a:hover,
.fp5-footer-bottom button:hover {
  color: #fff;
}

/* ==========================================================
   Courses listing (/courses)
   ========================================================== */

.cl-page {
  background: #f7f9fc;
  --cl-text-muted: #6b7785;
  --cl-accent: #00805e;
}

.cl-container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.cl-title {
  font-size: 2.125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}

.cl-page-header {
  row-gap: 0.75rem;
}

.cl-main-controls {
  gap: 0.75rem;
  width: 100%;
}

.cl-header-search {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.cl-header-search .course-search {
  max-width: none;
  margin: 0;
}

.cl-header-search .course-search__field {
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  padding: 0.25rem 0.25rem 0.25rem 0;
}

.cl-header-search .course-search__input {
  min-height: 2.25rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

.cl-header-search .course-search__submit {
  align-self: center;
  margin: 0;
  border-radius: var(--radius-btn);
  border-left: 0;
  padding: 0.375rem 0.875rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
}

.cl-result-count {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--cl-text-muted);
}

.cl-clear-filters {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--cl-accent);
  text-decoration: none;
}

.cl-clear-filters:hover,
.cl-clear-filters:focus-visible {
  color: var(--primary-2);
  text-decoration: underline;
  outline: none;
  box-shadow: var(--focus-ring);
}

.cl-layout {
  align-items: stretch;
}

.cl-sidebar-col {
  padding-top: 0.25rem;
  align-self: stretch;
}

@media (min-width: 992px) {
  .cl-page-header {
    margin-bottom: 1rem !important;
  }

  .cl-main-controls {
    justify-content: flex-end;
  }

  .cl-header-search {
    flex: 1 1 auto;
    min-width: 220px;
    max-width: 28rem;
  }

  .cl-sort {
    flex-shrink: 0;
  }

  .cl-sidebar {
    padding-top: 0.125rem;
  }
}

.cl-grid-col {
  min-width: 0;
}

.cl-sidebar {
  position: sticky;
  top: 5rem;
}

.cl-toolbar {
  gap: 0.75rem;
}

.cl-toolbar__left,
.cl-toolbar__right {
  gap: 0.5rem;
}

.cl-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--cl-text-muted);
}

.cl-sort__select {
  border: 1px solid #e8ecf0;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--text-heading);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  padding: 0.375rem 2rem 0.375rem 0.75rem;
}

.cl-sort__select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cl-applied-filters {
  gap: 0.375rem;
}

.cl-applied-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  border: 1px solid #d7e8e2;
  background: #e8f8f2;
  color: var(--cl-accent);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.cl-applied-chip:hover {
  background: #dff3eb;
  color: var(--primary-2);
  text-decoration: none;
}

.cl-applied-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.cl-applied-chip__remove {
  font-size: var(--fs-strong);
  line-height: var(--lh-none);
;
  font-weight: var(--fw-semibold)}

.cl-applied-clear {
  color: var(--cl-accent);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.cl-applied-clear:hover {
  text-decoration: underline;
}

.cl-grid-col--loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

#course_cards.cl-grid-col--loading {
  position: relative;
}

.cl-filter-block > summary {
  list-style: none;
  cursor: pointer;
}

.cl-filter-block > summary::-webkit-details-marker {
  display: none;
}

.cl-filter-block > summary::after {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.35rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  vertical-align: 0.1rem;
  opacity: 0.55;
}

.cl-filter-block[open] > summary::after {
  transform: rotate(-135deg);
  vertical-align: -0.05rem;
}

.cl-filter-rows {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.cl-filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-radius: var(--radius-input);
  background: transparent;
  color: var(--text-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.cl-filter-row:hover {
  background: #fff;
  color: var(--text-heading);
  text-decoration: none;
}

.cl-filter-row:focus-visible {
  background: #fff;
  color: var(--text-heading);
  text-decoration: none;
  outline: none;
  box-shadow: var(--focus-ring-inset);
}

.cl-filter-row--active {
  background: #e8f8f2;
  font-weight: var(--fw-semibold);
}

.cl-filter-row--active:hover,
.cl-filter-row--active:focus-visible {
  background: #dff3eb;
}

.cl-filter-row--disabled {
  opacity: 0.45;
}

.cl-filter-row__check,
.cl-filter-row__radio {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border: 2px solid #c5ced8;
  border-radius: 0.25rem;
  background: #fff;
}

.cl-filter-row__radio {
  border-radius: var(--radius-circle);
}

.cl-filter-row--active .cl-filter-row__check,
.cl-filter-row--active .cl-filter-row__radio {
  border-color: var(--cl-accent);
  background: var(--cl-accent);
  box-shadow: inset 0 0 0 2px #fff;
}

.cl-filter-row__name {
  flex: 1;
  line-height: var(--lh-title);
}

.cl-filter-row__count {
  flex-shrink: 0;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--cl-text-muted);
}

.cl-chip-group {
  gap: 0.375rem;
}

.challenges-filter-chip {
  cursor: pointer;
}

.cl-empty-filter-link {
  font-weight: var(--fw-semibold);
  text-decoration: underline;
}

.cl-sidebar-heading {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-meta);
  color: var(--text-heading);
}

.cl-reset-link {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--cl-accent);
  text-decoration: none;
}

.cl-reset-link:hover {
  color: var(--primary-2);
  text-decoration: none;
}

.cl-filter-block {
  margin-bottom: 1rem;
}

.cl-group-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--cl-text-muted);
  margin-bottom: 0.5rem;
}

.cl-cat-group {
  margin-top: 0.875rem;
}

.cl-cat-group__label {
  padding: 0 0.625rem;
  margin-bottom: 0.375rem;
}

.cl-cat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: none;
  border-radius: var(--radius-input);
  background: transparent;
  color: var(--text-heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  text-align: left;
  text-decoration: none;
  transition: background 0.15s ease;
}

.cl-cat-row:hover {
  background: #fff;
  color: var(--text-heading);
  text-decoration: none;
}

.cl-cat-row:focus-visible {
  background: #fff;
  color: var(--text-heading);
  text-decoration: none;
  outline: none;
  box-shadow: var(--focus-ring-inset);
}

.cl-cat-row--active,
.cl-cat-row--all.cl-cat-row--active {
  background: #e8f8f2;
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
}

.cl-cat-row--active:hover,
.cl-cat-row--active:focus,
.cl-cat-row--active:focus-visible,
.cl-cat-row--all.cl-cat-row--active:hover,
.cl-cat-row--all.cl-cat-row--active:focus,
.cl-cat-row--all.cl-cat-row--active:focus-visible {
  background: #dff3eb;
  color: var(--text-heading);
  text-decoration: none;
}

.cl-cat-row--all {
  margin-bottom: 0.25rem;
}

.cl-cat-row__icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  object-fit: contain;
}

.cl-cat-row__name {
  flex: 1;
  line-height: var(--lh-title);
  color: var(--text-heading);
}

.cl-cat-row__count {
  flex-shrink: 0;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--cl-text-muted);
}

.cl-cat-row:hover .cl-cat-row__name,
.cl-cat-row:focus .cl-cat-row__name,
.cl-cat-row:focus-visible .cl-cat-row__name,
.cl-cat-row--active .cl-cat-row__name,
.cl-cat-row--active:hover .cl-cat-row__name,
.cl-cat-row--active:focus .cl-cat-row__name,
.cl-cat-row--active:focus-visible .cl-cat-row__name {
  color: var(--text-heading);
}

.cl-cat-row:hover .cl-cat-row__count,
.cl-cat-row:focus .cl-cat-row__count,
.cl-cat-row:focus-visible .cl-cat-row__count,
.cl-cat-row--active .cl-cat-row__count,
.cl-cat-row--active:hover .cl-cat-row__count,
.cl-cat-row--active:focus .cl-cat-row__count,
.cl-cat-row--active:focus-visible .cl-cat-row__count {
  color: var(--cl-text-muted);
}

.cl-card {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cl-card:hover {
  border-color: rgba(0, 155, 114, 0.16);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  color: inherit;
  text-decoration: none;
}

div.cl-card:not(.cl-card--linked):hover {
  border-color: #e8ecf0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.cl-card__media {
  height: 200px;
  overflow: hidden;
  background: #eef2f5;
}

.cl-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cl-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3125rem 0.625rem;
  background: #fff;
  border-radius: 0.35rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  color: var(--text-body);
  max-width: calc(100% - 1.5rem);
}

.cl-card__badge-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
}

.cl-card--linked {
  position: relative;
  cursor: pointer;
}

.cl-card__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cl-card__partner {
  position: relative;
  z-index: 2;
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-pill);
  background: #f1f5f9;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  color: var(--text-body);
}

.cl-card__partner-link {
  color: var(--text-link);
  text-decoration: none;
}

.cl-card__partner-link:hover {
  color: var(--primary-2);
  text-decoration: none;
}

.cl-card__unavailable {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 2;
}

.cl-card__completed.challenge-card-status-badge--completed {
  bottom: 0.75rem;
  right: 0.75rem;
}

.cl-card__body {
  padding: 1.25rem 1.25rem 1.375rem;
  gap: 0.5rem;
}

.cl-card__title {
  font-size: 1.1875rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: var(--text-heading);
  margin: 0;
}

.cl-card__rating {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}

.cl-card__rating-meta {
  font-weight: var(--fw-body);
  color: var(--text-muted);
}

.course-review-card {
  border-color: #e5e7eb !important;
}

.course-review-form__textarea {
  resize: vertical;
  min-height: 5.5rem;
}

.course-review-stars {
  display: inline-flex;
  gap: 0.2rem;
}

.course-review-star {
  border: 0;
  background: transparent;
  color: #d1d5db;
  font-size: 1.6rem;
  line-height: var(--lh-none);
  padding: 0.1rem 0.15rem;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

.course-review-form--compact .course-review-stars {
  gap: 0.05em;
}

.course-review-form--compact .course-review-star {
  font-size: 0.95rem;
  padding: 0;
  line-height: var(--lh-none);
}

.course-review-star:hover,
.course-review-star.is-active {
  color: var(--text-link, var(--primary));
}

.course-review-form.is-submitting .course-review-star {
  opacity: 0.65;
  cursor: wait;
}

.course-review-form__success-stars {
  color: var(--text-link, var(--primary));
  letter-spacing: 0.05em;
}

.course-review-star:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.course-review-form--compact {
  display: inline-flex;
  align-items: center;
}

.challenge-results-stars {
  color: var(--text-link, var(--primary));
  letter-spacing: 0.05em;
  font-size: 0.95rem;
}

.course-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-subhead);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.course-save-btn:hover,
.course-save-btn:focus-visible {
  background: rgba(0, 0, 0, 0.5);
  border-color: #fff;
  color: #fff;
  text-decoration: none;
  outline: none;
}

.course-save-btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}

.course-save-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.course-save-btn__icon {
  flex-shrink: 0;
}

.course-save-btn__error {
  flex-basis: 100%;
  font-size: var(--fs-meta);
  color: #ffb4b4;
;
  font-weight: var(--fw-medium)}

.account-saved-card .position-relative {
  min-height: 12rem;
}

.account-saved-card__unsave {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.account-saved-card__unsave:hover,
.account-saved-card__unsave:focus-visible {
  background: rgba(0, 0, 0, 0.65);
  border-color: #fff;
  outline: none;
}

.account-saved-card__unsave:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cl-card__desc {
  font-size: 0.9rem;
  font-weight: var(--fw-body);
  line-height: var(--lh-lead);
  color: var(--text-body);
  margin: 0 0 0.375rem;
}

.cl-card__meta {
  gap: 0.625rem;
  margin-top: auto;
}

.cl-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--text-body);
  white-space: nowrap;
}

.cl-card__meta-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
}

.cl-card__meta-icon {
  opacity: 0.7;
}

.cl-empty {
  text-align: center;
  padding: 3.75rem 1.25rem;
  background: #f7f9fc;
  border-radius: 0.875rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
}

.cl-pagination .page-link {
  width: 2.375rem;
  height: 2.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-btn);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}

.cl-pagination .page-item.active .page-link {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

@media (max-width: 991.98px) {
  .cl-page-header .col-lg-3 + .col-lg-9 {
    margin-top: 0.25rem;
  }

  .cl-main-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .cl-header-search {
    flex: 0 0 auto;
  }

  .cl-sort {
    align-self: flex-end;
    flex: 0 0 auto;
  }
}

@media (max-width: 575.98px) {
  .cl-title {
    font-size: var(--fs-subhead);
  ;
  font-weight: var(--fw-semibold)}
}

/* Course overview — UN SDG alignment panel */
.single-challenge-sdg__rail {
  min-height: 100%;
}

.single-challenge-sdg__goal-num {
  font-size: 3rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-heading);
}

.single-challenge-sdg__goal-title {
  margin-bottom: 0.5rem;
  font-size: var(--cp-fs-meta);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.07em;
  line-height: 1.35;
}

.single-challenge-sdg__icon-wrap {
  margin-top: 0.35rem;
}

.single-challenge-sdg__icon {
  max-width: 88px;
  height: auto;
  opacity: 0.95;
  filter: brightness(0) invert(1);
}

.single-challenge-sdg__rail-footnote-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.single-challenge-sdg__rail-footnote {
  font-size: var(--cp-fs-meta);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  color: var(--cp-on-dark);
}

.single-challenge-sdg__rail .single-challenge-sdg__rail-learn-more {
  align-self: flex-start;
  font-size: var(--cp-fs-meta);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  color: #fff;
  text-decoration: underline;
}

.single-challenge-sdg__rail .single-challenge-sdg__rail-learn-more:hover,
.single-challenge-sdg__rail .single-challenge-sdg__rail-learn-more:focus {
  color: #fff;
}

.single-challenge-sdg__eyebrow {
  margin-bottom: 0.5rem;
  font-size: var(--cp-fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-link);
}

.single-challenge-sdg__targets-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.single-challenge-sdg__targets-label,
.single-challenge-sdg__secondary-label {
  font-size: var(--cp-fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.07em;
  line-height: var(--lh-title);
  text-transform: uppercase;
  color: var(--cp-muted);
}

.single-challenge-sdg__target {
  border: 1px solid #e8ecef;
  border-radius: var(--radius-input);
  background: #fafbfc;
}

.single-challenge-sdg__target-badge {
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 0.35rem;
  font-size: var(--cp-fs-meta);
  font-weight: var(--fw-semibold);
  color: #fff !important;
  cursor: help;
}

.single-challenge-sdg__target-badge:focus {
  outline: 2px solid var(--cp-heading);
  outline-offset: 2px;
}

/* official UN target wording is long; the default 200px tooltip is unreadably tall */
.tooltip.single-challenge-sdg__tip .tooltip-inner {
  max-width: 320px;
  padding: 0.5rem 0.65rem;
  font-size: var(--cp-fs-meta);
  font-weight: var(--fw-body);
  line-height: 1.45;
  text-align: left;
}

.single-challenge-sdg__target-text {
  font-size: var(--cp-fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-lead);
  color: var(--cp-heading);
}

.single-challenge-sdg__secondary {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e8ecef;
}

.single-challenge-sdg__secondary-label {
  display: block;
  margin-bottom: 0.45rem;
}

.single-challenge-sdg__secondary-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.4rem 0.5rem;
}

.single-challenge-sdg__secondary-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.25rem 0.6rem 0.25rem 0.45rem;
  border-radius: 0.35rem;
  font-size: var(--cp-fs-meta);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: #fff;
  white-space: nowrap;
}

.single-challenge-sdg__secondary-chip:hover,
.single-challenge-sdg__secondary-chip:focus {
  color: #fff;
  opacity: 0.92;
}

.single-challenge-sdg__secondary-num {
  font-weight: var(--fw-semibold);
  min-width: 1rem;
  text-align: center;
}

.single-challenge-sdg__secondary-name {
  font-weight: var(--fw-semibold);
}

@media (max-width: 767.98px) {
  .single-challenge-sdg__rail-inner {
    min-height: auto;
  }

  .single-challenge-sdg__icon-wrap {
    display: none;
  }

  .single-challenge-sdg__rail-footnote-wrap {
    margin-top: 0.75rem !important;
  }
}

@media (max-width: 400px) {
  /* long goal titles would otherwise push the chip past the card edge */
  .single-challenge-sdg__secondary-chip {
    white-space: normal;
  }
}

/* ==========================================================
   UN Global Goals page (ugg-) — /un-global-goals
   ========================================================== */

.ugg-page {
  --ugg-hero-bg: #0a3d38;
  --ugg-cta-bg: #1c5e4e;
  --ugg-surface: #f7f9fc;
  --ugg-border: #e2e8f0;
  --ugg-accent-light: #7fd6b8;
  --ugg-muted: #8c98a4;
  --ugg-radius-card: var(--radius-card);
  --ugg-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
  --ugg-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.07);
}

.ugg-container {
  max-width: 71.25rem;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.ugg-page > section:last-child {
  border-bottom: none;
}

.ugg-eyebrow {
  margin-bottom: 0.875rem;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-link);
}

.ugg-eyebrow--hero {
  color: #fff;
}

.ugg-h1 {
  margin: 0 0 1.25rem;
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: #fff;
  text-wrap: pretty;
}

.ugg-h2 {
  margin: 0 0 0.5rem;
  font-size: var(--fs-heading);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}

.ugg-h3 {
  margin: 0 0 0.5rem;
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--text-heading);
}

.ugg-lead {
  margin: 0 0 2.125rem;
  font-size: var(--fs-lead);
  font-weight: var(--fw-body);
  line-height: var(--lh-lead);
  color: rgba(255, 255, 255, 0.74);
}

.ugg-section-lead {
  margin: 0 0 1.75rem;
  font-size: var(--fs-lead);
  font-weight: var(--fw-body);
  line-height: var(--lh-lead);
  color: var(--text-body);
}

.ugg-section-sub {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--ugg-muted);
}

.ugg-section-sub--tight {
  margin-bottom: 1.25rem;
}

/* --- hero ------------------------------------------------------------- */
.ugg-hero {
  position: relative;
  overflow: hidden;
  /* theme.css sets section { padding: 3.75–7.5rem 0 } */
  padding: 0;
  background: var(--ugg-hero-bg);
}

.ugg-hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 3rem;
  align-items: center;
  padding: 3rem 0;
}

.ugg-stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.ugg-stat-pill {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5625rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
}

.ugg-stat-pill__value {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-title);
  color: #fff;
}

.ugg-stat-pill__label {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  color: rgba(255, 255, 255, 0.62);
}

.ugg-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.625rem;
}

.ugg-swatch {
  position: relative;
  display: flex;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.625rem;
  background: var(--ugg-goal-color, var(--primary));
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.ugg-swatch {
  text-decoration: none;
}

a.ugg-swatch:hover,
a.ugg-swatch:focus {
  transform: scale(1.06);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

.ugg-swatch--dim {
  opacity: 0.45;
  cursor: default;
}

.ugg-swatch__num {
  position: absolute;
  top: 0.4375rem;
  left: 0.5625rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  color: rgba(255, 255, 255, 0.85);
}

.ugg-swatch__icon {
  width: 74%;
  height: 74%;
  margin-top: 0.375rem;
  opacity: 0.95;
  filter: brightness(0) invert(1);
}

.ugg-mosaic__caption {
  margin: 1rem 0 0;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: rgba(255, 255, 255, 0.5);
}

/* --- goal grid -------------------------------------------------------- */
.ugg-section {
  padding: 3rem 0;
  border-bottom: 1px solid var(--ugg-border);
}

.ugg-section--muted {
  background: var(--ugg-surface);
}

.ugg-section--white {
  background: #fff;
}

.ugg-section__intro {
  margin-bottom: 1.25rem;
}

.ugg-goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.75rem, 1fr));
  gap: 1.125rem;
}

.ugg-goal-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ugg-border);
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: var(--ugg-shadow-card);
}

.ugg-goal-card--dim {
  opacity: 0.62;
}

a.ugg-goal-card--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

a.ugg-goal-card--link:hover,
a.ugg-goal-card--link:focus {
  color: inherit;
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.13);
}

a.ugg-goal-card--link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ugg-goal-card__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 7.375rem;
  padding: 1rem 1.125rem 1.125rem;
  background: var(--ugg-goal-color, var(--primary));
}

.ugg-goal-card__header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.ugg-goal-card__num {
  font-size: var(--fs-subhead);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-subhead);
  color: rgba(255, 255, 255, 0.62);
}

.ugg-goal-card__icon {
  flex-shrink: 0;
  width: 2.625rem;
  height: 2.625rem;
  opacity: 0.95;
  filter: brightness(0) invert(1);
}

.ugg-goal-card__title {
  margin: 0.875rem 0 0;
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: #fff;
  text-wrap: pretty;
}

.ugg-goal-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem 1.125rem 0.875rem;
}

.ugg-goal-card__blurb {
  flex: 1;
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.ugg-goal-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6875rem;
  border-top: 1px solid #eef2f6;
}

.ugg-goal-card__count {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  color: #a9b3bd;
}

.ugg-goal-card__count--active {
  color: var(--text-link);
}

.ugg-goal-card__arrow {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  color: #c3cbd4;
}

/* --- how we connect --------------------------------------------------- */
.ugg-connect {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 2rem;
}

.ugg-connect--solo {
  grid-template-columns: 1fr;
  max-width: 40rem;
}

.ugg-steps {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ugg-step {
  display: flex;
  gap: 1rem;
}

.ugg-step__badge {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5625rem;
  background: rgba(0, 155, 114, 0.12);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  color: var(--text-link);
}

.ugg-step__title {
  margin: 0 0 0.375rem;
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: var(--text-heading);
}

.ugg-step__text {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* --- course mock panel ------------------------------------------------ */
.ugg-mock {
  overflow: hidden;
  border: 1px solid var(--ugg-border);
  border-radius: 1rem;
  box-shadow: var(--ugg-shadow-md);
}

.ugg-mock__label {
  padding: 0.625rem 1.125rem;
  border-bottom: 1px solid var(--ugg-border);
  background: var(--ugg-surface);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  line-height: var(--lh-micro);
  text-transform: uppercase;
  color: var(--ugg-muted);
}

.ugg-mock__body {
  padding: 1.375rem 1.5rem 1.5rem;
}

.ugg-mock__course-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ugg-mock__course-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
}

.ugg-mock__course-icon img {
  filter: brightness(0) invert(1);
}

.ugg-mock__course-title {
  display: block;
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: var(--text-heading);
  text-decoration: none;
}

.ugg-mock__course-title:hover,
.ugg-mock__course-title:focus {
  color: var(--text-link);
  text-decoration: none;
}

.ugg-mock__course-goal {
  margin-top: 0.3125rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
}

.ugg-mock__targets {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.ugg-mock__target {
  display: flex;
  gap: 0.6875rem;
  align-items: flex-start;
}

.ugg-mock__target-badge {
  flex-shrink: 0;
  padding: 0.3125rem 0.5625rem;
  border-radius: 0.375rem;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  color: #fff;
}

.ugg-mock__target-text {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.ugg-mock__secondary {
  margin-top: 1.125rem;
  padding-top: 0.9375rem;
  border-top: 1px solid #eef2f6;
}

.ugg-mock__secondary-label {
  margin-bottom: 0.625rem;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  line-height: var(--lh-micro);
  text-transform: uppercase;
  color: var(--ugg-muted);
}

.ugg-mock__secondary-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ugg-mock__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.375rem 0.8125rem 0.375rem 0.4375rem;
  border: 1px solid var(--ugg-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  color: var(--text-body);
  text-decoration: none;
}

.ugg-mock__chip:hover,
.ugg-mock__chip:focus {
  color: var(--text-heading);
  text-decoration: none;
  border-color: #cfd6dd;
}

.ugg-mock__chip-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.3125rem;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  color: #fff;
}

/* --- target code anatomy ---------------------------------------------- */
.ugg-codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  align-items: center;
  margin-bottom: 1.75rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--ugg-border);
  border-radius: 1rem;
  background: var(--ugg-surface);
}

.ugg-codes__row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ugg-codes__visual {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.625rem;
}

.ugg-codes__block {
  padding: 0.875rem 1rem;
  border-radius: 0.625rem;
  font-size: var(--fs-subhead);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-subhead);
}

.ugg-codes__block--filled {
  background: var(--ugg-code-color, #3f7e44);
  color: #fff;
}

.ugg-codes__block--outline {
  border: 1.5px solid var(--ugg-code-color, #3f7e44);
  background: #fff;
  color: var(--ugg-code-color, #3f7e44);
}

.ugg-codes__block--dashed {
  border: 1.5px dashed var(--ugg-code-color, #3f7e44);
  background: #fff;
  color: var(--ugg-code-color, #3f7e44);
  padding-left: 1.125rem;
  padding-right: 1.125rem;
}

.ugg-codes__dot {
  font-size: var(--fs-subhead);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-subhead);
  color: #c3cbd4;
}

.ugg-codes__label {
  margin-bottom: 0.375rem;
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  color: var(--text-heading);
}

.ugg-codes__text {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* --- FAQ -------------------------------------------------------------- */
.ugg-faq {
  margin-top: 0;
}

.ugg-faq__question {
  padding-right: 1.25rem;
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: var(--text-heading);
}

.ugg-faq__mark {
  flex-shrink: 0;
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  color: var(--ugg-muted);
  transition: transform 0.15s ease;
}

.ugg-faq__toggle:not(.collapsed) .ugg-faq__mark {
  transform: rotate(45deg);
}

.ugg-faq__toggle {
  border: none;
  box-shadow: none;
  background: transparent;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.ugg-faq__toggle:hover {
  background: #f8faf9;
}

.ugg-faq__toggle:focus,
.ugg-faq__toggle:active,
.ugg-faq__toggle:focus:active {
  outline: none;
  box-shadow: none;
  border: none;
  background: #f8faf9;
}

.ugg-faq__toggle:focus-visible {
  outline: 2px solid rgba(44, 48, 56, 0.2);
  outline-offset: 2px;
}

.ugg-faq__answer {
  max-width: 74ch;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* --- CTA band --------------------------------------------------------- */
.ugg-cta {
  position: relative;
  overflow: hidden;
  background: var(--ugg-cta-bg);
  padding: 3rem 0;
}

.ugg-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 0;
}

.ugg-cta__title {
  margin: 0 0 0.625rem;
  font-size: var(--fs-heading);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: #fff;
}

.ugg-cta__lead {
  margin: 0;
  max-width: 52ch;
  font-size: var(--fs-lead);
  font-weight: var(--fw-body);
  line-height: var(--lh-lead);
  color: rgba(255, 255, 255, 0.72);
}

.ugg-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.9375rem 1.875rem;
  border-radius: var(--radius-btn);
  background: #fff !important;
  border-color: #fff !important;
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  color: var(--ugg-hero-bg) !important;
}

.ugg-cta__btn:hover,
.ugg-cta__btn:focus {
  background: #f4f7f6 !important;
  border-color: #f4f7f6 !important;
  color: var(--ugg-hero-bg) !important;
}

/* --- responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .ugg-hero__grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .ugg-connect {
    grid-template-columns: 1fr;
  }

  .ugg-codes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ugg-container {
    padding: 0 1.25rem;
  }

  .ugg-hero__grid {
    padding: 2.5rem 1.5rem;
    gap: 1.75rem;
  }

  .ugg-section {
    padding: 3rem 0;
  }

  .ugg-cta {
    padding: 3rem 0;
  }

  .ugg-mock {
    box-shadow: none;
  }

  .ugg-codes__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .ugg-cta__btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .ugg-mosaic {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
  }
}

/* ==========================================================
   Course page (cp-) — single course detail

   The whole page uses the scale below and nothing else; sections
   differ by role, not by ad-hoc values. Primary prose (the course
   introduction) is the largest body text, compact UI text inside
   cards is smaller so it never competes with it.

     title  1.25rem    section headings
     lead   1.0625rem  primary prose (course introduction)
     base   1rem       secondary prose, module + FAQ titles
     sm     0.9375rem  compact UI text (goals, lessons, reviews)
     meta   0.8125rem  meta rows, captions, footnotes
     label  0.6875rem  uppercase eyebrows and badges

   Weights: 700 titles/labels, 600 UI text, 400 prose.
   Colors: heading / body / muted / accent, plus white on dark.
   ========================================================== */

:root {
  --cp-fs-title: 1.25rem;
  --cp-fs-lead: 1.0625rem;
  --cp-fs-base: 1rem;
  --cp-fs-sm: 0.9375rem;
  --cp-fs-meta: 0.8125rem;
  --cp-fs-label: 0.6875rem;
  --cp-heading: var(--text-heading);
  --cp-body: var(--text-body);
  /* darker than --text-muted, which fails contrast at meta/label sizes */
  --cp-muted: #6e7686;
  --cp-on-dark: rgba(255, 255, 255, 0.82);
  --cp-on-dark-muted: rgba(255, 255, 255, 0.6);
  --cp-star: #d99a1f;
}

/* --- shared text roles ------------------------------------------------ */
.cp-section__title {
  margin-bottom: 0.75rem;
  font-size: var(--cp-fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--cp-heading);
}

.cp-section__sub {
  margin-bottom: 1.25rem;
  font-size: var(--cp-fs-meta);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  color: var(--cp-muted);
}

.cp-prose {
  font-size: var(--cp-fs-base);
  font-weight: var(--fw-body);
  line-height: 1.7;
  color: var(--cp-body);
}

.cp-prose--lead {
  font-size: var(--cp-fs-lead);
  line-height: 1.75;
}

.cp-prose > :first-child {
  margin-top: 0;
}

.cp-prose > :last-child {
  margin-bottom: 0;
}

.cp-prose p {
  margin-bottom: 0.9rem;
}

.cp-prose p:empty {
  display: none;
}

.cp-prose ul,
.cp-prose ol {
  margin-bottom: 0.9rem;
  padding-left: 1.25rem;
}

.cp-prose li {
  margin-bottom: 0.35rem;
}

.cp-prose strong,
.cp-prose b {
  font-weight: var(--fw-semibold);
  color: var(--cp-heading);
}

.cp-prose a {
  color: var(--text-link);
  text-decoration: underline;
}

.cp-prose h3,
.cp-prose h4,
.cp-prose h5 {
  margin: 1.5rem 0 0.5rem;
  font-size: var(--cp-fs-base);
  font-weight: var(--fw-semibold);
  color: var(--cp-heading);
}

.cp-text {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--cp-heading);
}

.cp-meta {
  font-size: var(--cp-fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--cp-muted);
}

.cp-label {
  font-size: var(--cp-fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cp-muted);
}

.cp-stars {
  color: var(--cp-star);
  letter-spacing: 0.06em;
  line-height: var(--lh-none);
}

/* theme.css sets section { padding: 3.75–7.5rem 0 }; cards own their spacing */
.cp-hero,
.cp-section {
  padding: 0;
}

.cp-hero {
  min-height: 0;
  background: #08221d;
  overflow: hidden;
}

.cp-hero__media {
  inset: 0;
  opacity: 0.92;
}

.cp-hero__img {
  object-fit: cover;
  object-position: center 45%;
}

.cp-hero__overlay {
  inset: 0;
  background: linear-gradient(95deg, rgba(6, 32, 27, 0.94) 0%, rgba(6, 32, 27, 0.78) 40%, rgba(6, 32, 27, 0.22) 100%);
}

.cp-hero__content {
  padding-top: 2rem;
  padding-bottom: 2.75rem;
  z-index: 1;
}

.cp-hero__back {
  margin-bottom: 1rem;
  font-size: var(--cp-fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--cp-on-dark);
}

.cp-hero__back:hover,
.cp-hero__back:focus {
  color: #fff;
}

.cp-hero__category-wrap {
  margin-bottom: 1rem;
}

.cp-hero__category {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--cp-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--cp-fs-meta);
}

.cp-hero__title {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-heading);
  max-width: 18ch;
  margin-bottom: 1.25rem;
}

/* shortdesc is stored as HTML and usually already wrapped in <p> */
.cp-hero__desc {
  max-width: 56ch;
  margin-bottom: 1.5rem;
  font-size: var(--cp-fs-lead);
  font-weight: var(--fw-body);
  line-height: 1.6;
  color: var(--cp-on-dark);
}

.cp-hero__desc p {
  margin-bottom: 0.5rem;
}

.cp-hero__desc p:last-child {
  margin-bottom: 0;
}

.cp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-bottom: 1.75rem;
}

.cp-hero__meta-item {
  gap: 0.65rem;
}

.cp-hero__meta-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cp-hero__meta-value {
  font-size: var(--cp-fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

.cp-hero__meta-label {
  font-size: var(--cp-fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: var(--lh-heading);
  color: var(--cp-on-dark-muted);
}

.cp-hero__meta-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  flex-shrink: 0;
}

.cp-hero__meta-icon img {
  filter: brightness(0) invert(1);
}

.cp-hero__meta-icon svg {
  stroke: #fff;
}

.cp-hero__meta-icon svg[fill="currentColor"] {
  fill: #fff;
  stroke: none;
}

.cp-hero__cta {
  gap: 0.75rem;
}

.cp-hero__cta-primary {
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.75rem;
  font-size: var(--cp-fs-base);
  font-weight: var(--fw-semibold);
  box-shadow: 0 6px 20px rgba(0, 155, 114, 0.35);
}

.cp-hero .course-save-btn {
  padding: 0.7rem 1.25rem;
  font-size: var(--cp-fs-base);
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}

.cp-hero .course-save-btn:hover,
.cp-hero .course-save-btn:focus-visible {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.7);
}

.cp-hero .course-save-btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.85);
}

.cp-subnav {
  top: var(--cp-nav-height, 56px);
  z-index: 1010;
}

.cp-subnav__links {
  scrollbar-width: none;
}

.cp-subnav__links::-webkit-scrollbar {
  display: none;
}

.cp-subnav__link {
  font-weight: var(--fw-semibold);
  font-size: var(--cp-fs-sm);
  color: var(--cp-body);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.cp-subnav__link.active,
.cp-subnav__link:hover {
  color: var(--text-link);
}

.cp-subnav__link.active {
  border-bottom-color: var(--text-link);
}

.cp-section {
  /* Set by course page script: sticky navs + same gap as .cp-main */
  scroll-margin-top: var(--cp-scroll-margin, 7.5rem);
}

.cp-card {
  display: block;
  margin-bottom: 0;
  box-shadow: none !important;
}

.cp-partner-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.875rem;
  background: #0a3d38;
  color: #fff;
}

.cp-partner-card__eyebrow {
  margin: 0;
  font-size: var(--cp-fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: var(--lh-title);
  color: rgba(255, 255, 255, 0.55);
}

.cp-partner-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.75rem;
  padding: 1rem;
  border-radius: var(--radius-input);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease;
}

a.cp-partner-card__mark:hover,
a.cp-partner-card__mark:focus {
  text-decoration: none;
  color: inherit;
}

a.cp-partner-card__mark:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-on-dark);
}

.cp-partner-card__logo {
  display: block;
  max-width: 100%;
  max-height: 3rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cp-partner-card__name {
  display: block;
  text-align: center;
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: var(--cp-heading);
  overflow-wrap: anywhere;
}

/* Without a logo there is nothing that needs a light backdrop, so the name
   reads as the card heading instead of a full-width white panel. */
.cp-partner-card__mark--text {
  justify-content: flex-start;
  min-height: 0;
  margin-top: -0.5rem;
  margin-bottom: -0.25rem;
  padding: 0;
  border-radius: 0;
  background: none;
}

.cp-partner-card__mark--text .cp-partner-card__name {
  text-align: left;
  color: #fff;
}

a.cp-partner-card__mark--text:hover .cp-partner-card__name,
a.cp-partner-card__mark--text:focus .cp-partner-card__name {
  text-decoration: underline;
}

a.cp-partner-card__mark--text:focus-visible {
  box-shadow: none;
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
  border-radius: 0.25rem;
}

.cp-partner-card__text {
  margin: 0;
  font-size: var(--cp-fs-sm);
  font-weight: var(--fw-body);
  line-height: 1.6;
  color: var(--cp-on-dark);
}

.cp-partner-card__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--cp-on-dark-muted);
}

.cp-partner-card__note-icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: rgba(255, 255, 255, 0.5);
}

.cp-partner-card__note-text {
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: inherit;
}

.cp-partner-card__policy-link {
  color: inherit;
  font-weight: var(--fw-semibold);
  text-decoration: underline;
}

.cp-partner-card__policy-link:hover,
.cp-partner-card__policy-link:focus {
  color: #fff;
  text-decoration: underline;
}

.cp-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cp-main > .cp-card:last-child {
  margin-bottom: 0;
}

.cp-card__inner {
  padding: 1.5rem;
}

.cp-page__container {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

.cp-page__row {
  align-items: flex-start;
}

/* Rail column must match main column height so position:sticky has room to stick. */
.cp-page__row > .cp-rail-col {
  align-self: stretch;
}

.cp-card.single-challenge-sdg .single-challenge-sdg__rail-inner,
.cp-card.single-challenge-sdg > .row > div > .p-4 {
  padding: 1.5rem !important;
}

.cp-rail {
  position: sticky;
  top: var(--cp-scroll-margin, 7.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cp-progress-ring__label {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cp-fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--cp-heading);
}

.cp-rail__title {
  font-size: var(--cp-fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--cp-heading);
}

.cp-goal-item {
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: #f5f6f7;
  border: 1px solid #e8eaed;
}

.cp-goal-item__check {
  margin-top: 0.15rem;
  color: var(--primary);
}

.cp-goal-item__text {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-lead);
  color: var(--cp-body);
}

.cp-hookfig-grid {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.cp-hookfig {
  background: #f4f7f5;
  border: 1px solid #e8eaed;
  border-radius: var(--radius-input);
  padding: 1rem 1.125rem;
}

.cp-hookfig__value {
  color: var(--primary, #1a7a6e);
  /* Flip and static figures can sit in the same row — keep one value size. */
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  margin-bottom: 0.5rem;
}

.cp-hookfig__desc {
  color: var(--cp-body);
  font-size: var(--fs-body);
  line-height: 1.45;
}

.cp-hookfig--flip {
  position: relative;
  display: block;
  width: 100%;
  height: 6rem;
  min-height: 6rem;
  padding: 0;
  text-align: left;
  cursor: pointer;
  perspective: 1000px;
  transition: height 0.35s ease;
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  font: inherit;
  /* Faces are absolutely positioned; do not use Bootstrap .h-100 (collapses height). */
  background: transparent;
  border: none;
}

.cp-hookfig--flip:focus {
  outline: none;
}

.cp-hookfig--flip:focus-visible {
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 155, 114, 0.35));
  border-radius: var(--radius-input);
}

.cp-hookfig__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.45s ease;
  transform-style: preserve-3d;
}

.cp-hookfig--flip[aria-expanded="true"] .cp-hookfig__inner {
  transform: rotateY(180deg);
}

.cp-hookfig__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  /* Match static .cp-hookfig; extra right clears the Flip affordance. */
  padding: 1rem 3rem 1rem 1.125rem;
  border-radius: var(--radius-input);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #f4f7f5;
  border: 1px solid #e8eaed;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cp-hookfig--flip:hover .cp-hookfig__face {
  background: #eef3f0;
  border-color: #d6ded9;
}

.cp-hookfig__face--front {
  z-index: 2;
}

.cp-hookfig__face--back {
  z-index: 1;
  justify-content: flex-start;
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
  transform: rotateY(180deg);
  overflow: hidden;
}

.cp-hookfig--flip:not([aria-expanded="true"]) .cp-hookfig__face--back,
.cp-hookfig--flip[aria-expanded="true"] .cp-hookfig__face--front {
  visibility: hidden;
  pointer-events: none;
}

.cp-hookfig--flip .cp-hookfig__value {
  display: block;
  margin-bottom: 0.35rem;
}

.cp-hookfig__label {
  display: block;
  color: var(--cp-body);
  font-size: var(--cp-fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
}

.cp-hookfig--flip .cp-hookfig__desc {
  margin: 0;
}

.cp-hookfig__flip {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  /* Sits on the #f4f7f5 face, where --cp-muted drops below 4.5:1. */
  color: var(--cp-body);
  font-size: var(--cp-fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  line-height: var(--lh-none);
  transition: color 0.2s ease;
}

.cp-hookfig--flip:hover .cp-hookfig__flip {
  color: var(--cp-heading);
}

@media (prefers-reduced-motion: reduce) {
  .cp-hookfig__inner {
    transition: none;
    transform: none !important;
  }

  .cp-hookfig__face--back {
    transform: none;
  }

  .cp-hookfig--flip:not([aria-expanded="true"]) .cp-hookfig__face--back {
    opacity: 0;
  }

  .cp-hookfig--flip[aria-expanded="true"] .cp-hookfig__face--front {
    opacity: 0;
  }

  .cp-hookfig--flip[aria-expanded="true"] .cp-hookfig__face--back,
  .cp-hookfig--flip:not([aria-expanded="true"]) .cp-hookfig__face--front {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

.cp-goals-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: none;
  color: var(--cp-muted);
  font-size: var(--cp-fs-meta);
  font-weight: var(--fw-medium);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.cp-goals-more-btn:hover,
.cp-goals-more-btn:focus {
  color: var(--text-link);
  outline: none;
}

.cp-goals-more-btn__arrow {
  color: var(--text-light);
  font-size: 0.9rem;
  line-height: var(--lh-none);
}

.cp-module__num {
  width: 34px;
  height: 34px;
  background: #f4f7f6;
  font-weight: var(--fw-semibold);
  font-size: var(--cp-fs-meta);
  color: var(--cp-heading);
}

.cp-module__num--done {
  background: var(--primary);
  color: #fff;
}

.cp-module__header {
  border-radius: 0;
}

.cp-assessment-reward {
  margin-top: 0.25rem;
  gap: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color 0.15s ease;
}

a.cp-assessment-reward:hover {
  color: #fff;
  text-decoration: none;
}

.cp-assessment-reward .cp-lesson__title {
  color: #fff;
}

.cp-assessment-reward .cp-meta {
  color: rgba(255, 255, 255, 0.82);
}

.cp-assessment-reward .cp-lesson__type {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.cp-assessment-reward__copy {
  min-width: 0;
}

.cp-assessment-reward__action {
  flex: 1 1 auto;
  max-width: 100%;
  margin-left: 0;
  white-space: normal;
  text-align: center;
}

.cp-assessment-reward__cta {
  background: #fff;
  color: var(--primary-4);
  border: 1px solid #fff;
}

.cp-assessment-reward__cta:hover {
  background: #f4f7f6;
  color: var(--primary-4);
}

.cp-assessment-reward .btn-outline-light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

.cp-assessment-reward .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: #fff;
}

@media (max-width: 575.98px) {
  .cp-assessment-reward__action {
    flex: 1 1 100%;
  }
}

@media (min-width: 576px) {
  .cp-assessment-reward__action {
    flex: 0 1 auto;
    margin-left: auto;
  }
}

.cp-module__title {
  display: block;
  font-size: var(--cp-fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--cp-heading);
}

.cp-module__status {
  padding: 0.3rem 0.6rem;
  font-size: var(--cp-fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cp-module__status--todo {
  background: #f1f4f6;
  color: var(--cp-muted);
}

.cp-module__body-intro {
  font-size: var(--cp-fs-sm);
  font-weight: var(--fw-body);
  line-height: 1.6;
  color: var(--cp-body);
}

.cp-module__body-intro > :last-child {
  margin-bottom: 0;
}

.cp-lesson {
  color: inherit;
  transition: background-color 0.15s ease;
}

.cp-lesson__title {
  display: block;
  font-size: var(--cp-fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-meta);
  color: var(--cp-heading);
}

.cp-lesson__cta {
  font-size: var(--cp-fs-meta);
  font-weight: var(--fw-semibold);
}

.cp-lesson--done .cp-lesson__title {
  text-decoration: line-through;
}

.cp-lesson__type {
  width: 30px;
  height: 30px;
  background: #f4f7f6;
}

.cp-reviews__score {
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  color: var(--cp-heading);
}

.cp-rating-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.cp-rating-row__label,
.cp-rating-row__count {
  flex-shrink: 0;
  width: 2rem;
  font-size: var(--cp-fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--cp-muted);
}

.cp-rating-row__count {
  text-align: right;
}

.cp-rating-row__track {
  flex-grow: 1;
  height: 8px;
  margin: 0;
}

.cp-review-avatar {
  width: 38px;
  height: 38px;
  font-size: var(--cp-fs-meta);
}

.cp-review__name {
  font-size: var(--cp-fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--cp-heading);
}

.cp-review__text {
  margin-bottom: 0;
  font-size: var(--cp-fs-sm);
  font-weight: var(--fw-body);
  line-height: 1.65;
  color: var(--cp-body);
}

.cp-reviews--compact .cp-reviews__score {
  font-size: 1.125rem;
}

.cp-reviews--compact .cp-review-avatar {
  width: 28px;
  height: 28px;
  font-size: var(--cp-fs-label);
}

.cp-reviews--compact .cp-review-card--compact {
  padding: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.cp-reviews--compact .cp-review-card--compact:last-child {
  margin-bottom: 0 !important;
}

.cp-reviews--compact .cp-rating-row {
  margin-bottom: 0.375rem;
}

.cp-reviews--compact .cp-review__text {
  font-size: var(--cp-fs-meta);
  line-height: var(--lh-body);
  color: var(--cp-muted);
}

.cp-review__text--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.cp-review__text--expandable.cp-review__text--truncated {
  cursor: pointer;
}

.cp-review__text--expandable.cp-review__text--truncated:hover {
  color: var(--cp-body);
}

.cp-review__text--expandable.cp-review__text--expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  cursor: pointer;
  color: var(--cp-body);
}

.cp-faq__question {
  padding-right: 1rem;
  font-size: var(--cp-fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-meta);
  color: var(--cp-heading);
}

.cp-faq .cp-prose {
  font-size: var(--cp-fs-sm);
  line-height: var(--lh-body);
}

.cp-faq__icon {
  width: 26px;
  height: 26px;
  background: #f4f7f6;
  font-size: var(--cp-fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  color: var(--cp-muted);
}

.cp-faq__toggle:not(.collapsed) .cp-faq__icon {
  transform: rotate(45deg);
}

.cp-faq__toggle {
  border: none;
  box-shadow: none;
  background: transparent;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.cp-faq__toggle:hover {
  background: #f8faf9;
}

.cp-faq__toggle:focus,
.cp-faq__toggle:active,
.cp-faq__toggle:focus:active {
  outline: none;
  box-shadow: none;
  border: none;
  background: #f8faf9;
}

.cp-faq__toggle:focus-visible {
  outline: 2px solid rgba(44, 48, 56, 0.2);
  outline-offset: 2px;
}

.cp-related__title {
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-title);
  color: var(--cp-heading);
}

.cp-related__link {
  font-size: var(--cp-fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-link);
}

.cp-mobile-cta {
  z-index: 1035;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.cp-mobile-cta__pct {
  font-size: var(--cp-fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-subhead);
  color: var(--cp-heading);
}

.cp-mobile-cta__meta {
  font-size: var(--cp-fs-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-subhead);
  color: var(--cp-muted);
}

.cp-page {
  padding-bottom: 2.5rem;
}

@media (max-width: 991.98px) {
  .cp-subnav {
    display: none;
  }

  .cp-rail {
    position: static;
  }

  .cp-page {
    padding-bottom: 4.5rem;
  }

  .cp-main .cp-card {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  .cp-main .cp-card__inner {
    padding: 1.25rem 1.125rem;
  }

  .cp-related-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }

  .cp-related-row::-webkit-scrollbar {
    display: none;
  }

  .cp-related-row > [class*="col-"] {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
  }

  body:has(.cp-mobile-cta) .feedback-trigger-mobile {
    bottom: 5.5rem;
  }
}

@media (max-width: 767.98px) {
  .cp-hero__content {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .cp-hero__title {
    max-width: none;
    margin-bottom: 1rem;
  }

  .cp-hero__desc {
    margin-bottom: 1.75rem;
  }

  .cp-hero__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    width: 100%;
    max-width: 17.5rem;
    margin-left: auto;
    margin-right: auto;
    gap: 0.75rem 0.85rem;
    margin-bottom: 2rem;
  }

  .cp-hero__meta-item {
    min-width: 0;
  }

  .cp-hero__meta-value {
    font-size: var(--cp-fs-sm);
    font-weight: var(--fw-semibold);
  }

  .cp-hero__meta-label {
    font-size: 0.625rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
  }

  .cp-hero__cta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }

  .cp-hero__cta .btn {
    width: auto;
    max-width: 100%;
    margin-right: 0 !important;
  }

  .cp-hero__cta-primary {
    padding: 0.6rem 1.5rem;
  }

  .cp-hero .course-save-btn {
    padding: 0.55rem 1.15rem;
  }
}

/* ==========================================================
   Knowledge Partners page (kp-*)
   Public sales page at /knowledge-partners
   ========================================================== */

.kp-page {
  --kp-border: #e8ecf0;
  --kp-surface: #f7f9fc;
  --kp-surface-subtle: #f4f7f5;
  --kp-surface-inert: #eef2f5;
  --kp-radius-card: var(--radius-card);
  --kp-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06);
  --kp-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --kp-hero-bg: #0a3d38;
  --kp-accent-light: #6fd6b4;
  --kp-success-bg: rgba(0, 155, 114, 0.08);
}

.kp-container {
  max-width: 71.25rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* --- typography ------------------------------------------------------ */
.kp-eyebrow {
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.875rem;
}

.kp-eyebrow--hero {
  color: var(--kp-accent-light);
}

.kp-h1 {
  font-size: clamp(1.8125rem, 4.5vw, 3.125rem);
  font-weight: var(--fw-semibold);
  line-height: 1.08;
  letter-spacing: var(--ls-heading);
  color: #fff;
  margin-bottom: 1.25rem;
}

.kp-h2 {
  font-size: clamp(1.5625rem, 3.2vw, 2.25rem);
  font-weight: var(--fw-semibold);
  line-height: 1.12;
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
  margin-bottom: 0.875rem;
}

.kp-h2--spaced {
  margin-bottom: 2.25rem;
}

.kp-lead {
  font-size: 1.1875rem;
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 1.875rem;
  max-width: 48ch;
}

.kp-section__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
;
  font-weight: var(--fw-body)}

.kp-text-link {
  font-weight: var(--fw-semibold);
  font-size: 0.9375rem;
  color: var(--primary);
}

.kp-text-link:hover {
  color: var(--primary-2);
  text-decoration: none;
}

/* --- sections -------------------------------------------------------- */
.kp-section {
  padding: 4.75rem 0;
}

.kp-section--white {
  background: #fff;
}

.kp-section--muted {
  background: #f1f5f9;
}

.kp-section--info {
  background: rgba(0, 155, 114, 0.06);
  border-top: 1px solid var(--kp-border);
  border-bottom: 1px solid var(--kp-border);
}

.kp-section__intro {
  margin-bottom: 2.5rem;
}

.kp-section__policy-link {
  display: inline-block;
  margin-top: 1rem;
}

.kp-section__intro--wide {
  max-width: none;
}

@media (min-width: 992px) {
  .kp-section__intro--wide .kp-h2 {
    white-space: nowrap;
  }
}

/* --- hero ------------------------------------------------------------ */
.kp-hero {
  background: var(--kp-hero-bg);
  position: relative;
  overflow: hidden;
  padding-top: 5rem;
}

.kp-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 0;
}

.kp-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.375rem;
}

.kp-hero__link {
  font-weight: var(--fw-semibold);
  font-size: 0.9375rem;
  color: var(--kp-accent-light);
}

.kp-hero__link:hover {
  color: #fff;
  text-decoration: none;
}

.kp-hero__preview {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1.25rem;
  padding: 1.375rem;
}

.kp-hero__preview-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
}

.kp-hero__preview-note {
  font-size: 0.78125rem;
  line-height: var(--lh-lead);
  color: rgba(255, 255, 255, 0.5);
  margin: 0.875rem 0 0;
}

.kp-hero__preview-surface {
  background: #fff;
  border-radius: var(--kp-radius-card);
  overflow: hidden;
}

.kp-hero__preview-surface .cl-card {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* --- stats band ------------------------------------------------------ */
.kp-stats {
  padding-top: 3.5rem;
  padding-bottom: 2.125rem;
}

.kp-stats__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 1.625rem;
}

.kp-stats__value {
  font-size: 2rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  color: #fff;
}

.kp-stats__label {
  margin-top: 0.5rem;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* --- benefit / audience cards ---------------------------------------- */
.kp-benefits-grid,
.kp-audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.375rem;
}

.kp-audience-grid {
  grid-template-columns: repeat(3, 1fr);
}

.kp-benefit-card {
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-card);
  padding: 1.625rem;
  background: var(--kp-surface-subtle);
}

.kp-benefit-card__title {
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: var(--primary-2);
  margin-bottom: 0.75rem;
}

.kp-benefit-card__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}

/* --- past partner logos ---------------------------------------------- */
.kp-partner-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.kp-partner-logos__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.25rem;
  padding: 1.25rem;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-card);
  background: #fff;
  cursor: default;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kp-partner-logos__item:hover,
.kp-partner-logos__item:focus,
.kp-partner-logos__item:focus-within {
  border-color: rgba(0, 155, 114, 0.35);
  box-shadow: var(--kp-shadow-md);
  outline: none;
}

.kp-partner-logos__tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.75rem);
  z-index: 5;
  width: min(16rem, calc(100vw - 2.5rem));
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--kp-border);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: var(--kp-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(0.35rem);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}

.kp-partner-logos__tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0.625rem;
  height: 0.625rem;
  margin-left: -0.3125rem;
  margin-top: -0.3125rem;
  border-right: 1px solid var(--kp-border);
  border-bottom: 1px solid var(--kp-border);
  background: #fff;
  transform: rotate(45deg);
}

.kp-partner-logos__item:hover .kp-partner-logos__tooltip,
.kp-partner-logos__item:focus .kp-partner-logos__tooltip,
.kp-partner-logos__item:focus-within .kp-partner-logos__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.kp-partner-logos__tooltip-title {
  margin: 0 0 0.25rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  color: var(--text-heading);
}

.kp-partner-logos__tooltip-text {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--text-body);
;
  font-weight: var(--fw-medium)}

.kp-partner-logos__img {
  max-width: 100%;
  max-height: 3.25rem;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Flatten every mark to one dark grey so no brand colour competes with the page. */
  filter: brightness(0);
  opacity: 0.62;
}

.kp-partner-logos__img--tall {
  max-height: 4.75rem;
}

.kp-partner-logos__name {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  letter-spacing: 0.01em;
  text-align: center;
  color: rgba(0, 0, 0, 0.62);
}

/* --- compare block --------------------------------------------------- */
.kp-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.kp-compare__col {
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-card);
  background: var(--kp-surface-subtle);
  padding: 1.75rem;
}

.kp-compare__col--highlight {
  border: 2px solid var(--primary);
  background: var(--kp-success-bg);
  padding: calc(1.75rem - 1px);
  box-shadow: var(--kp-shadow-md);
}

.kp-compare__heading {
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.kp-compare__col--highlight .kp-compare__heading {
  color: var(--primary-2);
}

.kp-compare__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.kp-compare__list li {
  display: flex;
  gap: 0.6875rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-body);
}

.kp-compare__icon--x {
  color: #dc3545;
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
  line-height: var(--lh-meta);
}

.kp-compare__check {
  flex-shrink: 0;
  margin-top: 0.1875rem;
  color: var(--primary);
}

/* --- steps ----------------------------------------------------------- */
.kp-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.625rem;
}

.kp-step {
  border-top: 3px solid var(--primary);
  padding-top: 1.125rem;
}

.kp-step:nth-child(n+2) {
  border-top-color: rgba(0, 155, 114, 0.25);
}

.kp-step__num {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.kp-step__title {
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  color: var(--text-heading);
  margin-bottom: 0.5625rem;
}

.kp-step__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}

/* --- tiers ----------------------------------------------------------- */
.kp-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.375rem;
  align-items: start;
}

.kp-tier-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius-card);
  box-shadow: var(--kp-shadow-card);
  padding: 1.75rem;
}

.kp-tier-card--featured {
  border: 2px solid var(--primary);
  box-shadow: var(--kp-shadow-md);
  padding: calc(1.75rem - 1px);
}

.kp-tier-card__badge {
  position: absolute;
  top: -0.75rem;
  left: 1.5rem;
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4375rem 0.8125rem;
  border-radius: var(--radius-pill);
}

.kp-tier-card__name {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  margin-bottom: 0.5rem;
}

.kp-tier-card__desc {
  font-size: 0.9375rem;
  line-height: var(--lh-body);
  color: var(--text-body);
  margin-bottom: 1.25rem;
}

.kp-tier-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}

.kp-tier-card__list li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  font-size: 0.90625rem;
  line-height: var(--lh-lead);
  color: var(--text-body);
}

.kp-tier-card__list svg {
  flex-shrink: 0;
  margin-top: 0.1875rem;
  color: var(--primary);
}

.kp-tier-card__btn {
  display: block;
  text-align: center;
  padding: 0.875rem;
  border-radius: var(--radius-btn);
  font-weight: var(--fw-semibold);
  font-size: 0.9375rem;
}

.kp-tier-card__btn--outline {
  border: 1.5px solid var(--primary);
  color: var(--primary);
}

.kp-tier-card__btn--outline:hover {
  background: var(--kp-success-bg);
  color: var(--primary-2);
  text-decoration: none;
}

.kp-tier-card__btn--solid {
  background: var(--primary);
  color: #fff;
}

.kp-tier-card__btn--solid:hover {
  background: var(--primary-2);
  color: #fff;
  text-decoration: none;
}

/* --- FAQ ------------------------------------------------------------- */
.kp-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
}

.kp-faq-item__q {
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--text-heading);
  margin-bottom: 0.5625rem;
}

.kp-faq-item__a {
  font-size: 0.96875rem;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
}

/* --- closing CTA ----------------------------------------------------- */
.kp-cta {
  background: var(--primary-4);
  position: relative;
  overflow: hidden;
  padding: 4.75rem 0;
}

.kp-cta__inner {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kp-cta__title {
  font-size: clamp(1.75rem, 3.5vw, 2.375rem);
  font-weight: var(--fw-semibold);
  line-height: 1.14;
  letter-spacing: var(--ls-heading);
  color: #fff;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .kp-cta__title {
    white-space: nowrap;
  }
}

.kp-cta__lead {
  font-size: 1.09375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 1.875rem;
  max-width: 56ch;
}

.kp-cta__note {
  font-size: 0.84375rem;
  line-height: var(--lh-lead);
  color: rgba(255, 255, 255, 0.55);
  margin: 1.125rem 0 0;
}

/* --- mobile sticky CTA ----------------------------------------------- */
.kp-mobile-cta {
  display: none;
}

/* --- responsive ------------------------------------------------------ */
@media (max-width: 1000px) {
  .kp-hero__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .kp-audience-grid,
  .kp-tiers-grid,
  .kp-steps-grid,
  .kp-partner-logos {
    grid-template-columns: repeat(2, 1fr);
  }

  .kp-benefits-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .kp-container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .kp-section {
    padding: 3rem 0;
  }

  .kp-hero {
    padding-top: 2.75rem;
  }

  .kp-hero__grid {
    gap: 2rem;
  }

  .kp-stats__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.375rem 1rem;
  }

  .kp-stats__value {
    font-size: 1.625rem;
  }

  .kp-benefits-grid,
  .kp-audience-grid,
  .kp-compare,
  .kp-steps-grid,
  .kp-tiers-grid,
  .kp-faq-grid {
    grid-template-columns: 1fr;
  }

  .kp-lead {
    font-size: var(--fs-strong);
  ;
  font-weight: var(--fw-semibold)}

  .kp-mobile-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--kp-border);
    padding: 0.75rem 1rem;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
  }

  .kp-mobile-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.25rem;
    border-radius: var(--radius-btn);
    background: var(--primary);
    color: #fff;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-strong);
  }

  .kp-mobile-cta__btn:hover {
    background: var(--primary-2);
    color: #fff;
    text-decoration: none;
  }

  .fp5-site-footer {
    padding-bottom: 4.875rem;
  }
}


/* ==========================================================
   Account dashboard (acct-*)
   Member dashboard at /account
   ========================================================== */

.acct-page {
  --acct-hero-bg: #0a3d38;
  --acct-hero-card: #23504c;
  --acct-surface: #f7f9fc;
  --acct-border: #e8ecf0;
  --acct-border-muted: #d7dee6;
  --acct-radius-card: var(--radius-card);
  --acct-radius-sm: 0.5rem;
  --acct-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06);
  --acct-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --acct-success-bg: rgba(0, 155, 114, 0.08);
  --acct-primary-10: rgba(0, 155, 114, 0.1);
  background: var(--light);
  min-height: 50vh;
}

.acct-container {
  max-width: 71.25rem;
  margin-left: auto;
  margin-right: auto;
}

/* --- Hero band ------------------------------------------------------- */

.acct-hero {
  /* theme.css sets section { padding: 3.75–7.5rem 0 } */
  padding: 0;
  background: var(--acct-hero-bg);
  position: relative;
  overflow: hidden;
  color: #fff;
}

.acct-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.25rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.acct-hero__copy {
  flex: 1;
  min-width: 18rem;
}

.acct-hero__title {
  font-size: var(--fs-heading);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: #fff;
  margin: 0 0 0.625rem;
}

.acct-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: #fff;
  flex-wrap: wrap;
}

.acct-hero__meta-note {
  font-weight: var(--fw-body);
  opacity: 0.75;
}

.acct-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.acct-hero__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.8125rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.acct-hero__btn:hover,
.acct-hero__btn:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  text-decoration: none;
  outline: none;
}

.acct-hero__btn--ghost {
  border-color: transparent;
}

.acct-hero__name-form {
  display: none;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.acct-hero__name-form.is-open {
  display: inline-flex;
}

.acct-hero__name-form .form-control {
  max-width: 12rem;
}

.acct-hero__error {
  color: #fecaca;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  margin-top: 0.5rem;
}

.acct-hero__error:empty,
.acct-hero__error.d-none {
  display: none;
}

/* Wallet card in hero */

.acct-hero__wallet {
  flex: none;
  width: 24.5rem;
  box-sizing: border-box;
  background: var(--acct-hero-card);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--acct-radius-card);
  padding: 1.375rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.acct-hero__wallet--setup {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.acct-hero__wallet--setup .acct-hero__wallet-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
}

.acct-hero__wallet-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.75rem;
}

.acct-hero__wallet-amount {
  display: flex;
  align-items: baseline;
  gap: 0.4375rem;
}

.acct-hero__wallet-value {
  font-size: var(--fs-subhead);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-subhead);
}

.acct-hero__wallet-unit {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  opacity: 0.85;
}

.acct-hero__wallet-usd {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  opacity: 0.78;
  margin-top: 0.5rem;
}

.acct-hero__wallet-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  align-items: stretch;
}

.acct-hero__wallet-cta {
  text-align: center;
  padding: 0.5625rem 1.125rem;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--acct-hero-bg);
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  text-decoration: none;
  border: 1.5px solid #fff;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.acct-hero__wallet-cta:hover,
.acct-hero__wallet-cta:focus-visible {
  background: var(--light);
  color: var(--acct-hero-bg);
  text-decoration: none;
  outline: none;
  box-shadow: var(--focus-ring-on-dark);
}

.acct-hero__wallet-cta--quiet {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  font-weight: var(--fw-semibold);
}

.acct-hero__wallet-cta--quiet:hover,
.acct-hero__wallet-cta--quiet:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}

.acct-hero__wallet-cta.disabled,
.acct-hero__wallet-cta[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.acct-hero__wallet-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.acct-hero__wallet-links a {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: #fff;
  opacity: 0.85;
  text-decoration: none;
}

.acct-hero__wallet-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

.acct-hero__wallet-sep {
  width: 1px;
  height: 0.6875rem;
  background: rgba(255, 255, 255, 0.35);
}

.acct-hero__wallet-sub {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  opacity: 0.75;
  margin-top: 0.35rem;
}

/* --- Main grid ------------------------------------------------------- */

.acct-main {
  /* theme.css sets section { padding: 3.75–7.5rem 0 } */
  padding: 2rem 0 3.5rem;
}

.acct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.75rem;
  align-items: start;
}

.acct-col {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  min-width: 0;
}

.acct-rail {
  position: sticky;
  top: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.acct-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
}

.acct-section-head h2 {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--text-heading);
  margin: 0;
}

.acct-section-head p {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin: 0.375rem 0 0;
}

.acct-section-link {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  color: var(--text-link);
  text-decoration: none;
  flex: none;
}

.acct-section-link:hover {
  color: var(--primary-2);
  text-decoration: none;
}

/* --- Continue card --------------------------------------------------- */

.acct-continue {
  background: #fff;
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-radius-card);
  box-shadow: var(--acct-shadow-md);
  overflow: hidden;
}

.acct-continue__inner {
  display: flex;
  align-items: stretch;
}

.acct-continue__thumb {
  position: relative;
  width: 14.75rem;
  flex: none;
  overflow: hidden;
  background: var(--acct-surface);
}

.acct-continue__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 10rem;
}

.acct-continue__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: #fff;
  color: var(--text-heading);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  padding: 0.375rem 0.625rem;
  border-radius: var(--acct-radius-sm);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-continue__body {
  flex: 1;
  padding: 1.375rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.625rem;
  min-width: 0;
}

.acct-continue__eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--primary);
}

.acct-continue__title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--text-heading);
  margin: 0;
  text-wrap: pretty;
}

.acct-continue__progress {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 0.125rem;
}

.acct-continue__bar {
  flex: 1;
  height: 0.5rem;
  border-radius: 99px;
  background: var(--light);
  overflow: hidden;
}

.acct-continue__bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--primary);
}

.acct-continue__count {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--text-heading);
  flex: none;
}

.acct-continue__cta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.375rem;
}

.acct-continue__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.5625rem 1.125rem;
  border-radius: var(--radius-btn);
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  text-decoration: none;
  transition: background 0.15s ease;
}

.acct-continue__cta:hover,
.acct-continue__cta:focus-visible {
  background: var(--primary-2);
  color: #fff;
  text-decoration: none;
  outline: none;
  box-shadow: var(--focus-ring);
}

.acct-continue__eta {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

/* --- In-progress rows ------------------------------------------------ */

.acct-ip-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.acct-ip-row-wrap {
  position: relative;
}

.acct-ip-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-radius-card);
  box-shadow: var(--acct-shadow-card);
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
  position: relative;
}

.acct-ip-row:hover,
.acct-ip-row:focus-within {
  background: #eef9f4;
  border-color: #c7e5da;
}

.acct-ip-row__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.acct-ip-row__hit:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.acct-ip-row__thumb {
  width: 5.25rem;
  height: 3.5rem;
  border-radius: var(--acct-radius-sm);
  overflow: hidden;
  flex: none;
  background: var(--acct-surface);
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.acct-ip-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.acct-ip-row__body {
  flex: 1;
  min-width: 0;
}

.acct-ip-row__title {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: var(--text-heading);
  margin-bottom: 0.25rem;
}

.acct-ip-row__meta {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--text-muted);
}

.acct-ip-row__progress {
  width: 7.5rem;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.acct-ip-row__bar {
  flex: 1;
  height: 0.375rem;
  border-radius: 99px;
  background: var(--light);
  overflow: hidden;
}

.acct-ip-row__bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--primary);
}

.acct-ip-row__pct {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  flex: none;
}

.acct-ip-row__unsave {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  z-index: 2;
  pointer-events: auto;
}

.acct-ip-row__unsave:hover,
.acct-ip-row__unsave:focus-visible {
  background: #fff;
  color: var(--primary-2);
  outline: none;
}

/* --- Learning path cards --------------------------------------------- */

.acct-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
}

.acct-path-card {
  background: #fff;
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-radius-card);
  box-shadow: var(--acct-shadow-card);
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
}

.acct-path-card__top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.acct-path-card__icon {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.5625rem;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.acct-path-card__icon img {
  width: 1.3125rem;
  height: 1.3125rem;
  filter: brightness(0) invert(1);
}

.acct-path-card__pct {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  flex-shrink: 0;
  line-height: var(--lh-strong);
}

.acct-path-card__title {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: var(--text-heading);
  margin: 0;
  text-wrap: pretty;
}

.acct-path-card__desc {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--text-muted);
  margin: 0;
  text-wrap: pretty;
}

.acct-path-card__next {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--text-muted);
}

.acct-path-card__next-copy {
  min-width: 0;
}

.acct-path-card__next strong {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}

.acct-path-card__cta {
  margin-top: auto;
  text-align: center;
  padding: 0.5625rem;
  border-radius: var(--radius-btn);
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  text-decoration: none;
  background: #fff;
  transition: background 0.15s ease, color 0.15s ease;
  display: block;
  box-sizing: border-box;
}

.acct-path-card__cta:hover,
.acct-path-card__cta:focus-visible {
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  outline: none;
}

.acct-path-card__cta.is-disabled,
.acct-path-card__cta[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.acct-path-card .path-progress {
  margin: 0;
}

/* --- Completed & rewards history ------------------------------------- */

.acct-history {
  background: #fff;
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-radius-card);
  box-shadow: var(--acct-shadow-card);
  overflow: hidden;
}

.acct-history__header {
  padding: 1.25rem 1.375rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.acct-history__header h2 {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--text-heading);
  margin: 0 0 0.375rem;
}

.acct-history__header p {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin: 0;
}

.acct-history__chips {
  display: flex;
  gap: 0.5rem;
}

.acct-history__chip {
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  cursor: pointer;
  background: #fff;
  border: 1.5px solid var(--acct-border);
  color: var(--text-body);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.acct-history__chip:hover {
  border-color: var(--primary);
}

.acct-history__chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.acct-history__swipe-hint {
  display: none;
  padding: 0 1.375rem 0.75rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.acct-history__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.acct-history__table {
  min-width: 41.25rem;
}

.acct-history__head,
.acct-history__row {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr) 3.625rem 5.25rem 6.5rem 5.625rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8125rem 1.375rem;
}

.acct-history__head {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  background: var(--acct-surface);
  border-top: 1px solid var(--acct-border);
  border-bottom: 1px solid var(--acct-border);
}

.acct-history__head > div {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.acct-history__row {
  border-bottom: 1px solid var(--acct-border);
  transition: background 0.15s ease;
}

.acct-history__row:hover {
  background: var(--acct-surface);
}

.acct-history__row.is-hidden {
  display: none;
}

.acct-history__date {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.acct-history__course {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: var(--text-heading);
  text-decoration: none;
}

.acct-history__course:hover {
  color: var(--primary);
  text-decoration: none;
}

.acct-history__score,
.acct-history__reward {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--text-heading);
}

.acct-history__reward {
  color: var(--primary-2);
}

.acct-history__stars {
  display: flex;
  gap: 0.125rem;
  align-items: center;
}

.acct-history__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
}

.acct-history__pill--paid {
  background: var(--acct-primary-10);
  color: var(--primary-2);
}

.acct-history__pill--pending {
  background: var(--light);
  color: var(--text-muted);
}

.acct-history__pill a {
  color: inherit;
  text-decoration: none;
}

.acct-history__pill a:hover {
  text-decoration: underline;
}

.acct-history__footer {
  padding: 0.875rem 1.375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.acct-history__expand {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  color: var(--primary);
  min-height: 2.75rem;
}

.acct-history__expand:hover {
  color: var(--primary-2);
}

.acct-history__summary {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.acct-history__empty {
  padding: 1.5rem 1.375rem;
  color: var(--text-muted);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

/* Compact review form in history */
.acct-history .course-review-form--compact {
  margin: 0;
}

/* --- Advanced disclosure --------------------------------------------- */

.acct-advanced {
  background: #fff;
  border: 1px dashed var(--acct-border-muted);
  border-radius: var(--acct-radius-card);
  padding: 1rem 1.25rem;
}

.acct-advanced > summary {
  cursor: pointer;
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
  list-style: none;
}

.acct-advanced > summary::-webkit-details-marker {
  display: none;
}

.acct-advanced__body {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.acct-advanced__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.acct-advanced__code {
  flex: 1;
  min-width: 15rem;
  font-family: var(--font-family-monospace);
  font-size: var(--fs-meta);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--acct-surface);
  border: 1px solid var(--acct-border);
  border-radius: 0.375rem;
  padding: 0.5625rem 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-advanced__copy {
  padding: 0.5625rem 1rem;
  border-radius: var(--radius-btn);
  border: 1.5px solid var(--primary);
  background: #fff;
  color: var(--primary);
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  cursor: pointer;
}

.acct-advanced__copy:hover {
  background: var(--acct-success-bg);
}

.acct-advanced__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
}

.acct-advanced__tile {
  background: var(--acct-surface);
  border-radius: 0.375rem;
  padding: 0.625rem 0.75rem;
}

.acct-advanced__tile-value {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}

.acct-advanced__tile-label {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.acct-advanced__diagnostics {
  background: var(--acct-surface);
  border: 1px solid var(--acct-border);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
}

.acct-advanced__dev-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

a.acct-advanced__copy {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* --- Wallet setup panel (no wallet) ---------------------------------- */

.acct-wallet-setup {
  background: #fff;
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-radius-card);
  box-shadow: var(--acct-shadow-card);
  padding: 1.25rem 1.5rem;
}

.acct-wallet-setup h2 {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  margin: 0 0 0.75rem;
  color: var(--text-heading);
}

/* --- Rail: tips ------------------------------------------------------ */

.acct-tip {
  background: var(--acct-surface);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-radius-card);
  padding: 1.125rem;
  position: relative;
  overflow: hidden;
}

.acct-tip__autoplay-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #e8ece9;
  pointer-events: none;
}

.acct-tip__autoplay-track[hidden] {
  display: none;
}

.acct-tip__autoplay-fill {
  height: 100%;
  width: 0%;
  background: #b8c2bc;
}

.acct-tip__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  margin-bottom: 0.8125rem;
}

.acct-tip__intent {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.acct-tip__nav {
  display: flex;
  gap: 0.375rem;
}

.acct-tip__nav[hidden] {
  display: none;
}

.acct-tip__nav button {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4375rem;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--acct-border);
  color: var(--text-muted);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.acct-tip__nav button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .acct-tip__autoplay-track {
    display: none !important;
  }
}

.acct-tip__title-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}

.acct-tip__icon {
  width: 1.875rem;
  height: 1.875rem;
  flex: none;
  border-radius: var(--radius-input);
  background: var(--acct-primary-10);
  display: flex;
  align-items: center;
  justify-content: center;
}

.acct-tip__icon img {
  width: 1rem;
  height: 1rem;
  opacity: 0.75;
}

.acct-tip__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: var(--text-heading);
  text-wrap: pretty;
}

.acct-tip__value {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 99px;
  background: var(--acct-primary-10);
  color: var(--primary-2);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
}

.acct-tip__body {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0 0 0.75rem;
  text-wrap: pretty;
}

.acct-tip__progress {
  margin: 0 0 0.75rem;
}

.acct-tip__progress-label {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  margin-bottom: 0.375rem;
}

.acct-tip__progress-bar {
  height: 0.5rem;
  border-radius: 99px;
  background: var(--light);
  overflow: hidden;
}

.acct-tip__progress-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--primary);
}

.acct-tip__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  min-height: 1.25rem;
}

.acct-tip__cta {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--primary-2);
  text-decoration: none;
}

.acct-tip__cta:hover {
  text-decoration: underline;
}

.acct-tip__dots {
  display: none;
  gap: 0.3125rem;
  position: absolute;
  right: 1.125rem;
  bottom: 1.125rem;
  margin-top: 0;
}

.acct-tip__dots[hidden] {
  display: none;
}

.acct-tip__dots button {
  width: 0.375rem;
  height: 0.375rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  cursor: pointer;
  background: #d3dbd6;
}

.acct-tip__dots button.is-active {
  background: var(--primary);
}

.acct-tip__slide {
  display: none;
}

.acct-tip__slide.is-active {
  display: block;
}

/* --- Rail: boost summary --------------------------------------------- */

.acct-boost-summary {
  background: #fff;
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-radius-card);
  box-shadow: var(--acct-shadow-card);
  padding: 1.25rem;
}

.acct-boost-summary__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.acct-boost-summary__top h3 {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: var(--text-heading);
  margin: 0;
}

.acct-boost-summary__factor {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--primary);
}

.acct-boost-summary__copy {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text-muted);
  margin: 0.5rem 0 0;
}

.acct-boost-summary__copy strong {
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
}

.acct-boost-summary__progress-label {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--text-muted);
  margin: 0.875rem 0 0.375rem;
}

.acct-boost-summary__bar {
  height: 0.5rem;
  border-radius: 99px;
  background: var(--light);
  overflow: hidden;
  margin-top: 0.875rem;
}

.acct-boost-summary__bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--primary);
}

.acct-boost-summary__refresh {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--text-link);
}

/* --- Rail: boosts list ----------------------------------------------- */

.acct-boosts {
  background: #fff;
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-radius-card);
  box-shadow: var(--acct-shadow-card);
  padding: 1.25rem;
}

.acct-boosts__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

.acct-boosts__top h3 {
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: var(--text-heading);
  margin: 0;
}

.acct-boosts__count {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  flex: none;
}

.acct-boosts__intro {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--text-muted);
  margin: 0 0 0.875rem;
  text-wrap: pretty;
}

.acct-boosts__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.acct-boost {
  border-radius: 0.375rem;
  border: 1px solid var(--acct-border);
  background: #fff;
  overflow: hidden;
}

.acct-boost--unlocked {
  background: var(--acct-success-bg);
  border-color: #c7e5da;
}

.acct-boost__toggle {
  width: 100%;
  display: flex;
  gap: 0.6875rem;
  align-items: flex-start;
  text-align: left;
  padding: 0.6875rem 0.75rem;
  background: none;
  border: 0;
  cursor: pointer;
}

.acct-boost__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.875rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  background: var(--light);
  color: var(--text-body);
  padding: 0 0.35rem;
}

.acct-boost--unlocked .acct-boost__chip {
  background: var(--primary);
  color: #fff;
}

.acct-boost__text {
  min-width: 0;
  flex: 1;
}

.acct-boost__label {
  display: block;
  font-size: var(--fs-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-strong);
  color: var(--text-heading);
}

.acct-boost__meta {
  display: block;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--text-muted);
  margin-top: 0.125rem;
}

.acct-boost--unlocked .acct-boost__meta {
  color: var(--primary-2);
}

.acct-boost__caret {
  flex: none;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* Closed panels use the HTML hidden attribute (display:none !important).
   Open panels remove [hidden] and rely on .is-open for flex layout. */
.acct-boost__panel {
  padding: 0 0.75rem 0.8125rem;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
  border-top: 1px solid var(--acct-border);
  margin-top: 0.125rem;
  padding-top: 0.75rem;
}

.acct-boost.is-open .acct-boost__panel {
  display: flex;
}

.acct-boost__desc {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.acct-boost__tiers-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3125rem;
}

.acct-boost__tier {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3125rem;
}

.acct-boost__tier-value {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.875rem;
  height: 1.25rem;
  border-radius: 0.3125rem;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  background: var(--acct-primary-10);
  color: var(--primary-2);
  padding: 0 0.3rem;
}

.acct-boost__tier-req {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-meta);
  color: var(--text-body);
}

.acct-boost__status {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--text-heading);
}

/* Compact referral share inside boost panel */
.acct-boost__share {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.acct-boost__share-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--acct-border);
  border-radius: 0.375rem;
  padding: 0.4375rem 0.5rem 0.4375rem 0.6875rem;
}

.acct-boost__share-url {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  background: transparent;
  padding: 0;
}

.acct-boost__share-copy {
  flex: none;
  padding: 0.3125rem 0.5625rem;
  border-radius: 0.375rem;
  border: 1px solid var(--acct-border);
  background: var(--acct-surface);
  color: var(--text-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.acct-boost__share-social {
  display: flex;
  gap: 0.5rem;
}

.acct-boost__share-social a {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-circle);
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.acct-boost__share-social a:hover {
  background: var(--primary-2);
}

.acct-boost__share-social img {
  width: 1rem;
  height: 1rem;
  filter: brightness(0) invert(1);
}

.acct-flash {
  max-width: 71.25rem;
  margin: 1.5rem auto 0;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* --- Responsive ------------------------------------------------------ */

@media (max-width: 1000px) {
  .acct-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .acct-rail {
    position: static;
  }

  .acct-hero__inner {
    flex-wrap: wrap;
    gap: 1.25rem;
  }

  .acct-hero__wallet {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .acct-flash {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .acct-hero__inner {
    padding-top: 2rem;
    padding-bottom: 2rem;
    align-items: flex-start;
  }

  .acct-hero__wallet {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .acct-hero__wallet-actions {
    flex: 1 0 100%;
  }

  .acct-hero__wallet-cta {
    padding: 0.5rem 1rem;
  }

  .acct-hero__btn {
    padding: 0.75rem 1.125rem;
  }

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

  .acct-continue__thumb {
    width: 100%;
    height: 9.375rem;
  }

  .acct-continue__cta {
    padding: 0.5rem 1rem;
  }

  .acct-ip-row {
    flex-wrap: wrap;
    padding: 0.75rem;
  }

  .acct-ip-row__thumb {
    width: 4rem;
    height: 3rem;
  }

  .acct-ip-row__progress {
    flex: 1 0 100%;
    width: auto;
    margin-top: 0.375rem;
  }

  .acct-paths {
    grid-template-columns: 1fr;
  }

  .acct-history__swipe-hint {
    display: block;
  }

  .acct-history__head,
  .acct-history__row {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .acct-history__expand {
    min-height: 2.75rem;
    padding: 0 0.125rem;
  }

  .acct-history__chip {
    height: 2.75rem;
    padding: 0 1.125rem;
  }

  .acct-tip__nav button {
    width: 2.5rem;
    height: 2.5rem;
  }

  .acct-tip__foot {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  .acct-tip__dots {
    gap: 0.125rem;
    margin-left: 0;
    bottom: 0.875rem;
    right: 0.75rem;
  }

  .acct-tip__dots button {
    width: 0.5625rem;
    height: 0.5625rem;
    padding: 0.5rem;
    background-clip: content-box;
    box-sizing: content-box;
  }
}

@media (max-width: 480px) {
  .acct-hero__inner {
    gap: 1.125rem;
  }

  .acct-hero__wallet {
    padding: 1.125rem;
  }

  .acct-advanced__grid {
    grid-template-columns: 1fr;
  }

  .acct-advanced__row code,
  .acct-advanced__code {
    flex: 1 0 100%;
    min-width: 0;
  }

  .acct-advanced__copy {
    flex: 1 0 100%;
    min-height: 2.75rem;
  }
}


/* Challenge result page (moved from course_result.ejs) */
.challenge-result-page .challenge-result-shell {
  border-radius: 0.35rem;
}

.challenge-result-page .single-challenge-hero img {
  height: clamp(230px, 40vw, 320px);
  object-fit: cover;
}

.challenge-result-page .challenge-result-summary {
  border-color: #e5e7eb !important;
}

.challenge-result-page .challenge-result-row {
  padding: 0.8rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.challenge-result-page .challenge-result-row:last-child {
  border-bottom: 0;
}

@media (max-width: 767.98px) {
  .challenge-result-page .single-challenge-hero img {
    height: clamp(190px, 58vw, 260px);
  }

  .challenge-result-page .challenge-result-row {
    padding: 0.7rem 0;
  }
}

/* Wallet selection (moved from wallet_selection.ejs; colors kept as-is) */
.wallet-option-card {
  border: 1px solid #d7e3ef;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.wallet-option-card:hover {
  border-color: #8cb6d9;
  box-shadow: 0 8px 20px rgba(44, 88, 128, 0.08);
  transform: translateY(-2px);
}
.wallet-option-card.selected {
  border-color: #4a9cff;
  box-shadow: 0 0 0 3px rgba(74, 156, 255, 0.12);
  background: #f8fbff;
}
.wallet-option-card--managed {
  position: relative;
  overflow: hidden;
  border: 1px solid #1f9d55;
  box-shadow: 0 1px 0 rgba(31, 157, 85, 0.08);
}
.wallet-option-card--managed:hover {
  border-color: #178045;
  box-shadow: 0 8px 24px rgba(31, 157, 85, 0.14);
  transform: translateY(-2px);
}
.wallet-option-card--managed.selected {
  border-color: #178045;
  box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.22);
  background: #f2faf5;
}
.wallet-recommended-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 7.25rem;
  height: 7.25rem;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.wallet-recommended-ribbon span {
  position: absolute;
  display: block;
  width: 10.5rem;
  padding: 0.55rem 0;
  top: 1.65rem;
  right: -2.85rem;
  background: linear-gradient(135deg, #1f9d55 0%, var(--primary) 100%);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  line-height: var(--lh-micro);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(45deg);
  transform-origin: center center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.benefit-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}
.benefit-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.35rem;
}
.benefit-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #1f9d55;
  font-weight: var(--fw-semibold);
}

/* Frontpage lead / muted-on-dark utilities (moved from inline styles) */
.fp5-lead--narrow {
  max-width: 40rem;
}
.fp5-lead--cta {
  max-width: 42rem;
  color: rgba(255, 255, 255, 0.85);
}
.fp5-muted-on-dark {
  color: rgba(255, 255, 255, 0.7);
}
.fp5-muted-on-dark--soft {
  color: rgba(255, 255, 255, 0.55);
}

/* Learning paths eyebrow — hoist letter-spacing only */
.lp-eyebrow {
  letter-spacing: var(--ls-caps);
}