/* ============================================================================
   BASE
   ============================================================================ */

body {
  overflow-x: hidden;
  font-family: var(--pa-font);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
}

.container-xxl {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

@media (max-width: 767px) {
  .call-to-action-button {
    width: 100% !important;
  }
}

/* filter group styles */
.filter-group__header {
  transition: color 0.2s ease;
}

.filter-group__header[aria-expanded="false"] .filter-group__icon {
  transform: rotate(180deg);
}

.filter-group__title {
  font-size: 18px;
}

.filter-group__checkbox-label {
  font-size: 15px;
}

/* ============================================================================
   BG TEMPLATE OVERRIDES
   ============================================================================ */

.intro-indigo-template .intro-block__title,
.intro-indigo-template .intro-block__description,
.intro-azure-template .intro-block__title,
.intro-azure-template .intro-block__description {
  text-align: left;
}

@media (max-width: 575px) {
  .intro-indigo-template .intro-block__title,
  .intro-indigo-template .intro-block__description,
  .intro-azure-template .intro-block__title,
  .intro-azure-template .intro-block__description {
    text-align: center;
  }
}

.cta-wave-top-content .cta-section,
.cta-wave-azure-content .cta-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.cta-wave-top-wave {
  height: 185px;
}

@media (max-width: 767px) {
  .cta-wave-top-wave {
    height: 100px;
  }
}

.feature-section-wave-gray .cta-section {
  padding: 5rem 0;
}

@media (max-width: 767px) {
  .feature-section-wave-gray .cta-section {
    padding: 2.5rem 0;
  }
}

@media (max-width: 575px) {
  .feature-section-wave-gray .cta-section {
    padding: 0;
  }
}

.newsletter-wave .newsletter-wave__top,
.newsletter-wave .newsletter-wave__bottom {
  height: 185px;
}

@media (max-width: 767px) {
  .newsletter-wave .newsletter-wave__top,
  .newsletter-wave .newsletter-wave__bottom {
    height: 68px;
  }
}

.contact-page-hero-wave,
.news-page-hero-wave,
.research-page-hero-wave,
.parents-page-hero-wave,
.educators-page-hero-wave {
  isolation: isolate;
}

.contact-page-hero-wave__bottom,
.news-page-hero-wave__bottom,
.research-page-hero-wave__bottom,
.parents-page-hero-wave__bottom {
  height: 185px;
}

.contact-page-hero-wave .playactive-hero__content {
  max-width: 350px;
}

@media (max-width: 767px) {
  .contact-page-hero-wave__bottom,
  .news-page-hero-wave__bottom,
  .research-page-hero-wave__bottom,
  .parents-page-hero-wave__bottom,
  .educators-page-hero-wave__bottom {
    height: 161px;
  }
}

.testimonial-wave-purple__content {
  padding: 5rem 0;
}

@media (max-width: 767px) {
  .testimonial-wave-purple__content {
    padding: 2.5rem 0;
  }
}

@media (max-width: 575px) {
  .testimonial-wave-purple__content {
    padding: 2.5rem 0 0;
  }
}

/* ============================================================================
   SPARKLE
   ============================================================================ */

.sparkle {
  width: fit-content;
}

.sparkle__icon {
  width: 66px;
  height: 48px;
}

@media (max-width: 1200px) {
  .sparkle__icon {
    width: 35px;
    height: 40px;
  }
}

/* Below lg the icon is drawn INSIDE its heading's box (2026-09-14). Hung 60% /
   65% outside it, as it is on a desktop, it crossed the 12–16px page gutter and
   the white surface's rounded corner and sat on the purple shell. The wrapper
   pads by exactly that overhang and the icon drops its offset, so it keeps the
   same place relative to the heading. `:has()` because one `.sparkle` wrapper
   carries a swril, a flourish or a blaze (which has an icon at each end). */
.sparkle:has(> .sparkle__icon.start-0) {
  padding-top: 26px;   /* 65% of the 40px icon */
  padding-left: 21px;  /* 60% of the 35px icon */
}

.sparkle:has(> .sparkle__icon--flourish.start-0) {
  padding-left: 28px;  /* 80% */
}

.sparkle:has(> .sparkle__icon.end-0) {
  padding-top: 28px;   /* 70% */
  padding-right: 32px; /* 90% */
}

@media (min-width: 992px) {
  .sparkle:has(> .sparkle__icon.start-0),
  .sparkle:has(> .sparkle__icon--flourish.start-0),
  .sparkle:has(> .sparkle__icon.end-0) {
    padding: 0;
  }

  .sparkle__icon.start-0 {
    transform: translate(-60%, -65%);
  }

  .sparkle__icon.sparkle__icon--flourish.start-0 {
    transform: translate(-80%, -65%);
  }

  .sparkle__icon.end-0 {
    transform: translate(90%, -70%);
  }
}

/* ============================================================================
   PARTNERS
   ============================================================================ */

.partners__subtitle {
  max-width: 514px;
  margin: 0 auto;
}

/* ============================================================================
   FEATURE ROW
   ============================================================================ */

.feature-row .feature-row__img-container {
  aspect-ratio: 520 / 374;
  max-width: 520px;
}

.feature-row .feature-row__img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}

.feature-row__content h2 {
  margin-bottom: 0 !important;
}

.feature-row__content p {
  margin: 0 !important;
}

@media (max-width: 575px) {
  .feature-row__content p br {
    display: none !important;
  }
}

.feature-content__title {
  max-width: 400px;
}

.feature-content__subtitle {
  max-width: 628px;
  font-size: 18px !important;
}

.feature-content__row {
  gap: 4rem;
}

.feature-content__header {
  margin-bottom: 80px;
}

@media (max-width: 767px) {
  .feature-content__header {
    margin-bottom: 50px;
  }
}

.feature-content__row .feature-row {
  padding: 0 !important;
}

.feature-content__inner .container-xxl {
  padding: 0 !important;
}

/* ============================================================================
   INTRO BLOCK
   ============================================================================ */

.intro-block {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (max-width: 575px) {
  .intro-block .btn {
    line-height: 1;
  }
}

.intro-block__main {
  max-width: 592px;
}

.intro-block__title h2 {
  margin-bottom: 0 !important;
}

.intro-block__description {
  font-size: 20px !important;
}

.intro-block__description * {
  margin: 0 !important;
}

.intro-text {
  max-width: 1000px;
  padding: 30px;
}

.intro-text a {
  text-decoration: none !important;
}

.intro-text.bg-primary a,
.intro-text.bg-secondary a,
.intro-text.bg-success a,
.intro-text.bg-danger a,
.intro-text.bg-info a  {
  color: white !important;
  text-decoration: underline !important;
}

/* ============================================================================
   NEWSLETTER BLOCK
   ============================================================================ */

.newsletter__content {
  max-width: 400px;
}

.newsletter-block__title {
  max-width: 22.0625rem;
}

.newsletter-block__description {
  font-size: 18px !important;
}

.newsletter-block__description *,
.newsletter-block__title h2 {
  margin-bottom: 0 !important;
}

.newsletter-block__form {
  border: 3px dashed var(--bs-danger);
}

.newsletter-block__form--label {
  color: #4D5E6C !important;
}

@media (max-width: 767px) {
  .newsletter-block__title {
    width: 14.5rem;
  }
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.playactive-footer__logo img {
  height: 7.5rem;
}

.playactive-footer__content {
  font-size: 14px;
}

.playactive-footer__content * {
  margin: 0 !important;
}

.playactive-footer__right > div {
  max-width: 194px;
}

.playactive-footer__links {
  font-size: 14px !important;
  font-weight: 800;
  color: #4D5E6C;
}

.playactive-footer__social {
  background-color: var(--bs-purple-dark);
  font-size: 14px;
  padding: 0 2rem;
}

.playactive-footer__copyright * {
  margin: 0 !important;
}

/* ============================================================================
   NEWS CARD
   ============================================================================ */

.news-card__media {
  aspect-ratio: 410 / 220;
}

.news-card__desc {
  font-size: 14px !important;
  color: black;
}

.news-card__desc * {
  margin: 0 !important;
}

.news-card__links .btn {
  width: 100% !important;
}

.news-section__cards {
  row-gap: 32px;
}

.news-section__header .btn {
  min-width: 11.25rem;
}

@media (max-width: 767px) {
  .news-section__header .btn {
    width: 100% !important;
  }
}

/* ============================================================================
   HERO
   ============================================================================ */

.playactive-hero {
  padding-top: 8.25rem;
  min-height: 356px;
}

.playactive-hero--compact {
  min-height: 480px;
}

.playactive-hero--standard {
  min-height: 577px;
}

.playactive-hero--full {
  min-height: 910px;
}

.playactive-hero__background {
  z-index: -1;
}

.playactive-hero__logo {
  height: 7.1875rem;
}

.playactive-hero__logo img {
  aspect-ratio: 320 / 115;
}

.playactive-hero__title {
  font-size: 36px;
}

.playactive-hero__content {
  font-size: 18px;
  font-weight: 800;
}

.playactive-hero__content * {
  margin: 0 !important;
}

.playactive-hero__content-wrapper {
  max-width: 498px;
}

.playactive-hero__content-wrapper.justify-content-center {
  max-width: 628px;
}

.playactive-hero__content-wrapper.justify-content-center h1 {
  font-weight: 900;
  font-size: 48px;
}

/* ============================================================================
   NAVBAR
   ============================================================================ */

.nav-auth-items .nav-item,
.nav-main-items__row,
.navbar-toggler {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (min-width: 992px) {
  .nav-main-items__row .nav-link,
  .navbar .nav-auth-items .nav-link {
    color: white !important;
  }

  .nav-auth-items .nav-item {
    background-image: url("/static/images/nav_auth_item_wave.b3e3964a6a26.svg");
    background-size: 100% 100%;
  }

  .nav-main-items__row {
    background-image: url("/static/images/nav_main_wave.f0255dbf0600.svg");
  }
}

@media (max-width: 991px) {
  .navbar-toggler {
    box-shadow: none !important;
    background-image: url("/static/images/nav_toggler_wave.381682b6f491.svg");
  }

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

  .navbar .navbar-collapse {
    background-color: #f4f4f4 !important;
    border-radius: 3px;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  }
}

/* ============================================================================
   FEATURE OUTCOMES
   ============================================================================ */

.outcomes .concord-image-feature .concord-image-content {
  text-align: center;
}

.outcomes .feature-row__content {
  line-height: 28px;
}

.outcomes .concord-image-feature .concord-image-content * {
  margin: 0;
  line-height: 24px;
}

.feature-outcomes .outcomes__cell {
  flex: 1 1 auto;
  min-width: 180px;
  max-width: 237px;
}

.feature-outcomes__notes * {
  margin: 0;
  max-width: 775px;
  margin: 0 auto;
}

.feature-outcomes .feature-row__img-container {
  aspect-ratio: 412 / 220;
}

.feature-outcomes .feature-row__content h2 {
  max-width: 512px;
}

@media (max-width: 991px) {
  .feature-outcomes .feature-row__content {
    text-align: center;
  }

  .feature-outcomes .feature-row__content > div {
    align-items: center !important;
  }
}

.feature-key-findings .outcomes__cell {
  flex: 1 1 auto;
  max-width: 150px;
  color: var(--bs-purple-dark);
}

.feature-key-findings .outcomes {
  margin-top: 8px;
}

@media (max-width: 575px) {
  .feature-key-findings .outcomes__cell {
    max-width: unset;
  }

  .outcomes__cell > div {
    flex-direction: row !important;
    align-items: start !important;
  }

  .outcomes__cell .concord-feature-image {
    max-width: 63.75px;
    height: unset !important;
  }

  .outcomes .concord-image-feature .concord-image-content {
    text-align: unset;
  }
}

/* ============================================================================
   CONTACT US
   ============================================================================ */

.contact-us {
  max-width: 52.5rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.contact-us__form {
  max-width: 46.875rem;
  margin: 0 auto;
  isolation: isolate;
  padding-top: 4rem;
  padding-bottom: 5rem;
}

.contact-us__form-option {
  font-size: 15px;
}

.contact-us__form--bg-gray {
  z-index: -1;
  transform: translateX(-50%);
  width: 110% !important;
  height: 100%;
  top: 0;
  left: 50%;
}

.contact-us__form--bg {
  z-index: -2;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 118%;
  height: auto;
  max-height: 100%;
}

.contact-us__form .btn {
  min-width: 11.25rem;
}

@media (max-width: 767px) {
  .contact-us__form .btn {
    width: 100% !important;
  }
}

.contact-us__form .alert p {
  margin-bottom: 0 !important;
}

.contact-us__form .accordion-button:not(.collapsed) {
  background-color: #ffffff !important;
  color: inherit;
  box-shadow: none;
}

.contact-us__form .accordion-button:focus {
  border-color: #dee2e6;
  box-shadow: none;
}

.contact-us__form .accordion-button::after {
  margin-left: auto;
}

.contact-us__form .form-control,
.contact-us__form .form-select {
  border-radius: 0.25rem;
}

/* ============================================================================
   TESTIMONIAL
   ============================================================================ */

@media (max-width: 575px) {
  .testimonial__header {
    text-align: center;
  }

  .testimonial__controls .btn {
    padding: 0px 18px !important;
  }
}

.testimonial__description {
  max-width: 628px;
}

.testimonial__description * {
  margin-bottom: 0 !important;
}

.testimonial__controls > * {
  aspect-ratio: 1;
}

.testimonial__container {
  max-width: 628px;
  width: 100%;
  isolation: isolate;
}

@media (max-width: 575px) {
  .testimonial__container {
    max-width: 90%;
    margin: 0 auto;
  }
}

.testimonial__bg {
  z-index: -1;
  pointer-events: none;
}

.testimonial__icon,
.testimonial__icon * {
  line-height: 0;
}

.testimonial__user img {
  width: 3.375rem;
  aspect-ratio: 1;
}

.testimonial__user-info p {
  font-size: 12px;
}

#testimonial-splide .splide__slide {
  pointer-events: none;
}

#testimonial-splide .splide__slide.is-active {
  pointer-events: auto;
}

/* ============================================================================
   QUOTE BLOCK
   ============================================================================ */

.quote {
  isolation: isolate;
}

.quote > .container-xxl {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.quote__header {
  padding: 0 2rem;
}

.quote__title {
  max-width: 436px;
}

.quote__text {
  font-size: 18px;
  line-height: 28px;
}

.quote__author-designation {
  font-size: 12px;
}

.quote__controls {
  top: 60%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%) !important;
  z-index: 10;
}

.quote__controls > * {
  aspect-ratio: 1;
  width: 54px;
  padding: 0 !important;
}

@media (max-width: 991px) {
  .quote__controls {
    position: relative !important;
    top: unset !important;
    left: unset !important;
    transform: unset !important;
  }
}

.quote__container {
  isolation: isolate;
  max-width: 846px;
  padding: 3rem;
}

.quote__bg {
  z-index: -1;
  pointer-events: none;
}

.quote__bg-design {
  z-index: -2;
  pointer-events: none;
  transform: scaleX(1.05) scaleY(1.15);
}

@media (max-width: 767px) {
  .quote__bg-design {
    transform: scaleX(1.2) scaleY(1.13);
  }
}

.quote .splide__track {
  padding: 2rem 0;
}

.quote_pagination button {
  width: 64px !important;
  height: 6px !important;
  opacity: 1 !important;
  transform: none !important;
  background-color: var(--bs-grey);
  border-radius: 20rem !important;
}

.quote_pagination button.is-active {
  background-color: var(--bs-primary);
}

@media (max-width: 767px) {
  .quote_pagination {
    bottom: -0.5rem !important;
  }
}

/* ============================================================================
   HOMEPAGE INTRO
   ============================================================================ */

.homepage-intro {
  isolation: isolate;
  margin-top: -18rem;
  padding-top: 1.25rem;
}

@media (max-width: 410px) {
  .homepage-intro {
    margin-top: -12rem;
  }
}

.homepage-intro__bg {
  z-index: -1;
}

@media (max-width: 991px) {
  .homepage-intro__content {
    margin-bottom: 5rem !important;
  }

  .homepage-intro__image img {
    aspect-ratio: 55/53;
  }
}

.homepage-intro__content-inner {
  height: 294px;
  width: 422px;
  isolation: isolate;
}

.homepage-intro__content-inner__bg {
  z-index: -1;
}

/* ============================================================================
   SPACER
   ============================================================================ */

.spacer { display: block; }
.spacer__none  { height: 0px; }
.spacer__xs    { height: 16px; }
.spacer__sm    { height: 32px; }
.spacer__md    { height: 44px; }
.spacer__lg    { height: 80px; }
.spacer__xl    { height: 102px; }
.spacer__xxl   { height: 120px; }
.spacer__xxxl  { height: 160px; }

@media (max-width: 576px) {
  .spacer__mobile--none  { height: 0px; }
  .spacer__mobile--xs    { height: 8px; }
  .spacer__mobile--sm    { height: 16px; }
  .spacer__mobile--md    { height: 22px; }
  .spacer__mobile--lg    { height: 40px; }
  .spacer__mobile--xl    { height: 51px; }
  .spacer__mobile--xxl   { height: 60px; }
  .spacer__mobile--xxxl  { height: 80px; }
}

/* ============================================================================
   MISC HELPERS
   ============================================================================ */

@media (max-width: 991px) {
  .concord-image-feature,
  .concord-icon-feature {
    align-items: start !important;
  }
}

/* ============================================================================
   NEWS PAGE
   ============================================================================ */

.news-page {
  max-width: 628px;
}

/* The article column is capped at 628px inside a 1102px centred wrapper, so
   whenever the related-articles sidebar is absent it would otherwise sit hard
   against the left edge. That happens routinely: the sidebar is only rendered
   when `get_similar()` returns matches above its min_score, and never on the
   members-only variant. `:only-child` covers the article page with no sidebar;
   `.is-locked` covers the members-only variant, where the sibling lock modal
   defeats `:only-child`. */
.news-page:only-child,
.news-page-wrapper.is-locked .news-page {
  margin-inline: auto;
}

.news-page__title {
  font-size: 36px;
  font-weight: 800;
}

.news-page__subtitle {
  font-size: 18px;
  font-weight: 800;
}

.news-page__image-container {
  margin-bottom: 0.875rem;
}

.news-page__image-container img {
  aspect-ratio: 1200 / 800;
  width: 100%;
  height: unset !important;
}

.news-page__body {
  font-size: 14px;
  font-weight: 500;
}

.news-page__body ul li,
.news-page__body ol li {
  margin-bottom: 1rem !important;
}

.news-page__body ul li b,
.news-page__body ol li b {
  font-weight: 800 !important;
}

.news-page__body * {
  margin: 0 !important;
}

.news-page__date {
  font-size: 0.875rem;
}

.news-page__related-articles {
  max-width: 312px;
  min-width: 280px;
}

.news-page__related-articles-image-container img {
  width: 100%;
  height: unset !important;
  aspect-ratio: 302 / 170;
}

.news-page-wrapper {
  max-width: 1102px;
  padding: 0 2rem;
}

@media (max-width: 991px) {
  .news-page__related-articles {
    max-width: unset;
  }

  .news-page__related-articles li {
    max-width: 312px;
  }
}

.news-view-page .news-page-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ==============================================================================
   DIGITAL RESOURCES
   ============================================================================ */
.digital-resources-page {
  container-type: inline-size;
  container-name: resources;
}

.digital-resources-page__title--wrapper {
  max-width: max-content;
  margin: 0 auto;
  margin-bottom: 2.25rem;
  padding: 0 2rem;
}

.digital-resources-page__title {
  width: max-content;
}

@container resources (min-width: 767px) {
  .digital-resources-page__title--wrapper {
    max-width: unset;
    margin-bottom: 2.5rem;
    padding: 0;
  }
}

.digital-resources__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

.digital-resources__filters-wrapper {
  display: none;
}

@container resources (min-width: 767px) {
  .digital-resources__content {
    flex-direction: row;
  }

  .digital-resources__filters-wrapper {
    width: 100%;
    flex: 0 0 254px;
    display: block;
  }
}

.digital-resources__header {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 2.25rem;
}

.digital-resources__search-wrapper {
  width: 100%;
}

@container resources (min-width: 767px) {
  .digital-resources__header {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 1.25rem;
  }

  .digital-resources__search-wrapper {
    max-width: 272px;
  }
}

.digital-resources__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  row-gap: 1.5rem;
  column-gap: 1.5rem;
}

@container resources (min-width: 767px) {
  .digital-resources__cards {
    row-gap: 2rem;
    column-gap: 1.25rem;
  }
}

.digital-resources__card--preview {
  padding: 20px;
  aspect-ratio: 76/107;
  height: 344px;
}

.digital-resources__card--content {
  font-size: 15px;
  padding: 0 20px 20px;
}

.digital-resources__card--content > a:first-of-type {
  margin-bottom: auto;
  flex-grow: 1;
}

.digital-resources__search-input,
.digital-resources__filter-btn {
  background-color: #F9F9F9;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #E0E0E0;
}

.digital-resources__search-input::placeholder {
  color: var(--bs-black);
}

.digital-resources__search-btn {
  margin-right: 21px;
  font-size: 22px;
  color: var(--bs-purple-dark);
  margin-top: 2px;
}

.digital-resources__filter-btn {
  margin-top: 11px;
}

@container resources (min-width: 767px) {
  .digital-resources__filter-btn {
    display: none !important;
  }
}

.digital-resources__filter-btn i {
  margin-right: 10px;
  margin-top: 2px;
}

.digital-resources__card--preview-placeholder {
  background-color: var(--bs-gray-100);
}

.digital-resources__page-link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* digital resource detail view styles */

.digital-resource {
  padding-inline: 12px;

  /* enable container queries */
  container-type: inline-size;
  container-name: digital-resource;
}

.digital-resource__wrapper {
  display: flex;
  flex-direction: column;
}

@container digital-resource (min-width: 767px) {
  .digital-resource__wrapper {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }
}

.digital-resource__title--wrapper {
  max-width: 205px;
  margin-inline: auto;
}

@container digital-resource (min-width: 500px) {
  .digital-resource__title--wrapper {
    max-width: unset;
  }
}

.digital-resource__title {
  margin-bottom: 38px !important;
}

.digital-resource__content {
  flex: 1 1 auto;
}

@container digital-resource (min-width: 767px) {
  .digital-resource__content {
    max-width: 418px;
  }
}

.digital-resource__body {
  gap: 40px;
}

.digital-resource__body * {
  margin: 0 !important;
}

.digital-resource__body > p {
  font-size: 20px;
}

@container digital-resource (min-width: 767px) {
  .digital-resource__body > p {
    font-size: 24px;
  }
}

.digital-resource__preview {
  padding: 28px;
  aspect-ratio: 61/86;
  box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.15);
  margin-top: 60px;
}

@container digital-resource (min-width: 767px) {
  .digital-resource__preview {
    max-width: 650px;
    flex: 1 1 500px;
    margin-top: 0 !important;
  }
}

.digital-resource__preview--placeholder {
  background-color: var(--bs-gray-100);
}

.digital-resource__download-btn {
  margin-top: 40px;
}

/* ==============================================================================
   PORTAL BASE
   ============================================================================ */
.portal__wrapper {
  display: grid !important;
  grid-template-columns: auto minmax(292px, 1fr);
  /* The mobile menu (.sidebar below lg) hangs from the top of this row. */
  position: relative;
}

.portal__content--wrapper {
  padding-bottom: 80px;
  padding-right: 32px;
}

.portal__content {
  border-radius: 50px;
  container-type: inline-size;
}

.portal__sidebar-toggle {
  top: 67px;
  width: 35px;
  height: 35px;
  padding: 0 !important;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.12);
}

.portal__sidebar-toggle i {
  transition: transform 0.3s ease;
}

.portal__sidebar-toggle[data-collapsed="true"] i {
  transform: rotate(180deg);
}

.portal__topbar .topbar__logo-wrapper {
  width: 262px;
}

.portal__topbar .topbar__user-btn {
  max-width: min(200px, 100%);
  overflow: hidden;
}

/* The account button beside the Menu button may shrink, so on the narrowest
   phones a long name truncates (media_identity's text-truncate) instead of
   pushing the topbar wider than the screen — at 320px a 200px button next to
   Menu overflowed by up to 20px. */
.portal__topbar .topbar__account,
.portal__topbar .topbar__account > .dropdown {
  min-width: 0;
}

/* ── Renewal-task counter pill (topbar) ──────────────────────────────
   Desktop: a circular clock that expands to the full pill on click.
   Mobile:  a full-width pill on its own line (.pa-renewal-mobile). */
.pa-renewal {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 6px;
  background: #f2f2f2;
  border-radius: 999px;
  transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.pa-renewal.is-open {
  padding-right: 18px;
}

/* Hover / keyboard-focus expand the pill exactly like a click does — the three
   `.is-open` rules below are each mirrored onto `:hover` and `:focus-within`.
   `.is-open` is still what a *click* sets, so a clicked-open pill stays open
   once the pointer leaves; hover is a transient preview on top of that.
   `:focus-within` gives keyboard users the same reveal when they tab to the
   toggle, and keeps the pill open while focus is on the panel link inside it.

   Gated on `hover: hover` / `pointer: fine` so it never fires from a simulated
   touch hover, which would latch the pill open until the next tap elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .pa-renewal:hover,
  .pa-renewal:focus-within {
    padding-right: 18px;
  }
}

/* The purple clock disc — a button on desktop, a plain span on mobile. */
.pa-renewal__toggle,
.pa-renewal__disc {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #4c4184;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pa-renewal__toggle {
  position: relative;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pa-renewal__toggle:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(76, 65, 132, 0.45);
}
.pa-renewal__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Count badge on the collapsed clock (notification style). */
.pa-renewal__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff5964;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #4c4184;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.pa-renewal.is-open .pa-renewal__badge {
  opacity: 0;
  transform: scale(0.4);
}
@media (hover: hover) and (pointer: fine) {
  .pa-renewal:hover .pa-renewal__badge,
  .pa-renewal:focus-within .pa-renewal__badge {
    opacity: 0;
    transform: scale(0.4);
  }
}

/* The revealing text panel (a link to Tasks). */
.pa-renewal__panel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #1d1444;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease 0.05s;
}
.pa-renewal.is-open .pa-renewal__panel {
  max-width: 340px;
  margin-left: 10px;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .pa-renewal:hover .pa-renewal__panel,
  .pa-renewal:focus-within .pa-renewal__panel {
    max-width: 340px;
    margin-left: 10px;
    opacity: 1;
  }
}
.pa-renewal__panel:hover,
.pa-renewal__panel:focus {
  color: #4c4184;
}

.pa-renewal__chevron {
  color: #4c4184;
}

/* Mobile: full-width pill on its own line. */
.pa-renewal-mobile {
  background: #f2f2f2;
  color: #1d1444;
  border-radius: 999px;
  padding: 7px 16px 7px 7px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  min-width: 0;
}
.pa-renewal-mobile:hover,
.pa-renewal-mobile:focus {
  color: #1d1444;
}
.pa-renewal-mobile__text {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pa-renewal,
  .pa-renewal__toggle,
  .pa-renewal__badge,
  .pa-renewal__panel {
    transition: none;
  }
}

.portal__content-wave {
  height: 75vh;
}

.portal__content--padded {
  padding: 80px;
}

@media (max-width: 991px) {
  .portal__wrapper {
    display: block;
  }

  .portal__content--wrapper {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 40px;
  }

  .portal__content--padded {
    padding: 60px 20px;
  }

  .portal__content-wave {
    height: 396px;
    width: 100% !important;
  }
}

.portal .banner__icon {
  width: auto !important;
  height: auto !important;
}

/* ==============================================================================
   SIDEBAR
   ============================================================================ */

/* Below lg the sidebar is the mobile menu: a panel that drops down under the
   topbar when #sidebarMenuToggle adds `.open`. It is positioned against
   .portal__wrapper — the row directly under the topbar — not fixed to the
   viewport. Fixed at `top: 4rem`, it assumed the topbar was the first thing on
   the screen: it covered the renewal pill that stacks under the topbar on a
   phone, and once the banner strip scrolls with the page above the topbar
   (announcements.css) it would cover the very Menu button that closes it.
   Hidden with visibility, not by sliding it off-screen: an absolute panel slid
   upwards lands over the topbar instead of out of sight. */
.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--bs-purple-dark);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.75rem);
  transition: transform 0.2s ease-out, opacity 0.2s ease-out, visibility 0s linear 0.2s;
}

.sidebar.open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.sidebar__section {
  padding-inline: 1rem;
}

@media (min-width: 992px) {
  .sidebar {
    position: relative;
    top: auto;
    left: auto;
    width: 262px;
    z-index: auto;
    background: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sidebar__section {
    padding-inline: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar {
    transition: none;
  }
}

.sidebar__link {
  position: relative;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar__link:hover {
  background-color: var(--bs-orange);
}

/* Outstanding-work counter on a sidebar entry (My Tasks). Deliberately the
   same red pill as the topbar clock's ``pa-renewal__badge``: both render the
   same number, so they should read as the same signal in two places. */
.sidebar__badge {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
}

@media (min-width: 992px) {
  .sidebar.sidebar__collapsed {
    width: unset;
  }

  .sidebar.sidebar__collapsed .sidebar__section::before {
    content: '';
    max-width: 40px;
    display: block;
    border: 2px solid currentColor;
    border-radius: var(--bs-border-radius-pill);
    margin-bottom: 13px;
  }

  .sidebar.sidebar__collapsed .sidebar__link {
    width: 35px;
    height: 35px;
    justify-content: center;
    padding: 0 !important;
  }

  .sidebar.sidebar__collapsed .sidebar__icon {
    margin-top: 2px;
  }

  .sidebar.sidebar__collapsed .sidebar__section-title,
  .sidebar.sidebar__collapsed .sidebar__label {
    display: none;
  }

  /* Collapsed to a 35px icon button there is no room for an inline pill, so
     the count sits on the icon — the same treatment the topbar clock uses when
     its panel is closed. */
  .sidebar.sidebar__collapsed .sidebar__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    margin-left: 0;
    min-width: 18px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 18px;
    box-shadow: 0 0 0 2px var(--bs-purple-dark);
  }
}


/* ============================================================================
   SIDEBAR GROUP (collapsible)
   ============================================================================ */

.sidebar__group-toggle {
  cursor: pointer;
}

.sidebar__group-chevron {
  font-size: 11px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.sidebar__group-toggle[aria-expanded="true"] .sidebar__group-chevron {
  transform: rotate(180deg);
}

/* Children list — animated open/close */
.sidebar__group-children {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  /* Indent children to sit under the icon */
  padding-left: 1rem;
}

.sidebar__group-children.is-open {
  max-height: 800px;
  opacity: 1;
}

/* Child links slightly smaller to visually subordinate them */
.sidebar__link:hover {
  background-color: var(--bs-orange) !important;
}

.sidebar__link--child .sidebar__label {
  font-size: 0.875rem !important;
}

.sidebar__link--child .sidebar__icon {
  font-size: 1rem !important;
}

/* ── Collapsed sidebar (desktop only) ───────────────────────── */
@media (min-width: 992px) {
  .sidebar.sidebar__collapsed .sidebar__group-toggle {
    width: 35px;
    height: 35px;
    justify-content: center;
    padding: 0 !important;
  }

  .sidebar.sidebar__collapsed .sidebar__group-chevron,
  .sidebar.sidebar__collapsed .sidebar__group-children {
    display: none !important;
  }
}

/* ============================================================================
   PORTAL PAGE
   ============================================================================ */

.portal-page {
  background-color: var(--bs-purple-dark);
  min-height: 100vh;
  position: relative;
  font-family: var(--pa-font);
}

.portal-header {
  background-color: var(--bs-purple-dark);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 80px;
  position: relative;
  z-index: 10;
  overflow: visible;
}

.portal-header__logo {
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  z-index: 1;
}

.portal-header__logo-img {
  height: 118px;
  width: 272px;
  object-fit: contain;
}

.portal-header__pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--bs-pa-white);
  font-family: var(--pa-font);
  font-size: 18px;
  font-weight: 700;
  border: none;
  text-decoration: none;
  cursor: pointer;
  background-color: transparent;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 16px 32px 28px;
  margin-bottom: -30px;
}

.portal-header__pill--menu {
  background-image: url("/static/images/portal_menu_blob.3822ec144ac1.svg");
  min-width: 200px;
  height: 92px;
}

.portal-header__pill--menu:hover {
  filter: brightness(0.9);
  color: var(--bs-pa-white);
}

.portal-header__pill--user {
  background-image: url("/static/images/portal_profile_blob.08dab8aa0169.svg");
  min-width: 220px;
  height: 92px;
}

@media (max-width: 991px) {
  .portal-header {
    padding: 0 24px;
  }

  .portal-header__pill {
    font-size: 16px;
    padding: 12px 24px 18px;
    margin-bottom: -24px;
  }

  .portal-header__pill--menu {
    min-width: 160px;
    height: 74px;
  }

  .portal-header__pill--user {
    min-width: 180px;
    height: 74px;
  }

  .portal-header__logo-img {
    height: 80px;
    width: auto;
  }
}

@media (max-width: 575px) {
  .portal-header {
    padding: 0 12px;
  }

  .portal-header__pill--menu {
    min-width: 120px;
    height: 60px;
  }

  .portal-header__pill--user {
    min-width: 140px;
    height: 60px;
  }

  .portal-header__pill {
    margin-bottom: -18px;
  }

  .portal-header__logo-img {
    height: 60px;
    width: auto;
  }
}

.portal-wrapper {
  padding: 60px 36px 80px;
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .portal-wrapper {
    padding: 30px 12px 40px;
  }
}

.portal-container {
  background-color: var(--bs-porcelain);
  border-radius: var(--pa-radius-container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portal-stepper-card {
  background: var(--bs-pa-white);
  border-radius: var(--pa-radius-container);
  width: 100%;
  padding: 84px 84px 64px;
}

@media (max-width: 767px) {
  .portal-stepper-card {
    padding: 60px 32px;
    border-radius: var(--pa-radius-card);
  }
}

/* Mobile first: on a phone 64px above the content card was a blank band (on the
   tailored-policy page it is the first thing under the topbar). */
.portal-content-container {
  padding: 32px 12px 48px;
  width: 100%
}

@media (min-width: 576px) {
  .portal-content-container {
    padding: 64px 12px 80px;
  }
}

@media (min-width: 1200.02px) {
  .portal-content-container {
    padding: 64px 86px 80px;
  }
}

.portal-content-card {
  background: white;
  border-radius: var(--pa-radius-card);
  box-shadow: var(--pa-shadow-card);
  width: 100%;
  padding: 2.5rem;
}

@media (max-width: 767px) {
  .portal-content-card {
    padding: 1.5rem;
    border-radius: var(--pa-radius-module);
  }
}

.portal-footer-wave {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  z-index: 0;
  background-image: url("/static/images/portal_footer_wave.d5e7aa574b97.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
  pointer-events: none;
}

.portal-video-container {
  box-shadow: none;
  padding: 80px 86px 108px;
  border-radius: var(--pa-radius-container);
}

@media (max-width: 768px) {
  .portal-video-container {
    padding: 38px;
  }
}


/* ============================================================================
   PORTAL BADGES
   ============================================================================ */

.badge-completed {
  background-color: var(--bs-orange) !important;
  color: var(--bs-pa-white);
  border-radius: var(--pa-radius-badge);
  padding: 4px 11px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--pa-font);
}

.badge-in-progress {
  background-color: var(--bs-secondary) !important;
  color: var(--bs-pa-white);
  border-radius: var(--pa-radius-badge);
  padding: 4px 11px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--pa-font);
}

.badge-locked {
  background-color: rgba(0, 0, 0, 0.2) !important;
  color: var(--bs-pa-white);
  border-radius: var(--pa-radius-badge);
  padding: 4px 11px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--pa-font);
}

/* ============================================================================
   LESSON CARD
   ============================================================================ */

.lesson-card {
  border-radius: var(--pa-radius-module) !important;
  box-shadow: var(--pa-shadow-module);
  border: 1px solid var(--bs-pa-border) !important;
  overflow: hidden;
  min-height: 230px;
}

.lesson-card .card-body {
  background: var(--pa-lesson-bg);
}

.lesson-card .card-body h3 {
  color: var(--bs-biscay);
  font-family: var(--pa-font);
  font-weight: 700;
}

.lesson-card .card-body .text-muted {
  color: var(--bs-daintree) !important;
}

/* ============================================================================
   PROGRESS BAR
   ============================================================================ */

.progress-bar-wrapper {
  background: rgba(236, 236, 245, 0.5);
  border-radius: var(--pa-radius-module);
  padding: 20px 24px;
}

.progress-bar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progress-bar__label,
.progress-bar__percent {
  font-family: var(--pa-font);
  font-size: 16px;
  font-weight: 800;
  color: var(--bs-daintree);
}

.progress-bar__label {
  font-weight: 800;
}

.progress-bar__percent {
  font-weight: 600;
}

.progress-bar__subtitle {
  font-weight: 400;
}

.progress-bar__track {
  border-radius: 15px;
  height: 16px;
  background-color: var(--bs-pa-border);
}

.progress-bar__track.progress {
  height: 20px;
  border-radius: var(--pa-radius-pill);
  background-image: repeating-linear-gradient(
    135deg,
    #f1f1f1 0px,
    #f1f1f1 6px,
    #e6e6e6 6px,
    #e6e6e6 12px
  );
}

.progress-bar__fill.progress-bar {
  border-radius: var(--pa-radius-pill);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   PROGRESS INDICATOR
   ============================================================================ */

.progress-indicator__header {
  margin-bottom: 48px;
}

.progress-indicator__title {
  font-family: var(--pa-font);
  font-weight: 800;
  font-size: 28px;
  color: var(--bs-biscay);
  margin: 0 0 16px;
}

.progress-indicator__bar {
  max-width: 100%;
}

.progress-indicator__steps {
  display: flex;
  gap: 16px;
  justify-content: center;
}

@media (max-width: 991px) {
  .progress-indicator__steps {
    flex-wrap: wrap;
  }
}

@media (max-width: 575px) {
  .progress-indicator__steps {
    flex-direction: column;
    align-items: center;
  }

  .progress-step {
    max-width: 280px;
    width: 100%;
  }
}

/* ============================================================================
   PROGRESS STEP
   ============================================================================ */

.progress-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 20px 16px;
  flex: 1;
  min-width: 0;
  max-width: 220px;
  min-height: 170px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--bs-pa-white);
}

.progress-step--azure    { background-image: url("/static/images/step_blob_azure.6c9ccfab2f7c.svg"); }
.progress-step--purple   { background-image: url("/static/images/step_blob_purple.17f5a1bab2c7.svg"); }
.progress-step--teal     { background-image: url("/static/images/step_blob_teal.6ffc6362ba47.svg"); }
.progress-step--saffron  { background-image: url("/static/images/step_blob_saffron.f2ea12039c1b.svg"); }

.progress-step--upcoming {
  background-image: url("/static/images/step_blob_outline.6c0b92cced04.svg") !important;
  color: var(--bs-orange);
}

.progress-step__badge {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--pa-font);
  background: rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 2px 14px;
  margin-bottom: 10px;
}

.progress-step--upcoming .progress-step__badge {
  background: rgba(245, 107, 0, 0.12);
}

.progress-step__body {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.progress-step__icon {
  font-size: 2.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.progress-step__info {
  min-width: 0;
}

.progress-step__title {
  font-family: var(--pa-font);
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 2px;
  line-height: 1.25;
}

.progress-step__time {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 4px;
}

.progress-step__check {
  position: absolute;
  top: 4px;
  right: 6px;
  color: var(--bs-orange);
}

.progress-step__check i {
  font-size: 2rem;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

/* ============================================================================
   QUIZ LESSON CARD
   ============================================================================ */

.quiz-lesson-card {
  background-color: var(--bs-warning);
  border-radius: var(--pa-radius-module) !important;
  box-shadow: var(--pa-shadow-module);
  transition: filter 0.15s ease;
}

a.quiz-lesson-card:hover {
  filter: brightness(0.95);
}

/* ============================================================================
   QUIZ (PORTAL — INLINE)
   ============================================================================ */

.quiz-progress-bar {
  height: 8px;
  background: var(--bs-pa-border);
  border-radius: 4px;
  overflow: hidden;
}

.quiz-progress-bar-fill {
  height: 100%;
  background: var(--bs-purple-dark);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.quiz-stepper .quiz-step          { display: none; }
.quiz-stepper .quiz-step--active  { display: block; }

.quiz-option-card {
  background: rgba(153, 203, 253, 0.2);
  border-radius: var(--pa-radius-badge) !important;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
  border: 2px solid transparent !important;
}

.quiz-option-card:hover {
  background: var(--pa-lesson-bg);
}

.quiz-option-card:has(input:checked) {
  background: rgba(139, 61, 255, 0.08);
  border-color: var(--bs-purple-dark) !important;
  box-shadow: var(--pa-shadow-module);
}

.quiz-option-card .form-check-input {
  width: 1.25em;
  height: 1.25em;
}

.quiz-option-card .form-check-input:checked {
  background-color: var(--bs-purple-dark);
  border-color: var(--bs-purple-dark);
}

.quiz-step-feedback {
  display: none;
  padding: 12px 16px;
  border-radius: var(--pa-radius-badge);
  margin-top: 15px;
}

.quiz-step-feedback--correct {
  display: block;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.quiz-step-feedback--incorrect {
  display: block;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.quiz-step-feedback > strong {
  display: block;
  margin-bottom: 4px;
}

/* ============================================================================
   STEP CARD
   ============================================================================ */

.step-card {
  --step-card-color: var(--bs-secondary);
  --step-card-bg: var(--bs-pa-white);
  --step-card-border-width: 2px;
  --step-card-border-radius: 24px;
  min-height: 157px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.step-card:hover {
  transform: translateY(-4px);
}

.step-card--locked, .step-card--completed {
  cursor: not-allowed !important;
}

/* Default border variant */
.step-card--default-border {
  background: var(--step-card-bg);
  border: var(--step-card-border-width) solid var(--step-card-color);
  border-radius: var(--step-card-border-radius);
}

.step-card--default-border.step-card--completed {
  background-color: var(--step-card-color);
  border-color: var(--step-card-color);
}

.step-card--default-border.step-card--active {
  background-color: var(--step-card-bg);
  border-color: var(--step-card-color);
}

/* SVG border wrapper */
.step-card__border {
  color: var(--step-card-color);
}

/* Show desktop, hide mobile by default — container query flips this at ≤695px */
.step-card__border .desktop-border { display: block; }
.step-card__border .mobile-border  { display: none; }

.step-card__border svg {
  width: 100%;
  height: 100%;
}

.step-card__border svg path {
  transition: stroke 0.4s ease, fill 0.4s ease;
}

/* COMPLETED — full colour fill */
.step-card--completed .step-card__border svg path {
  fill: var(--step-card-color);
  stroke: var(--step-card-color);
  stroke-width: 5;
}

/* ACTIVE — coloured border, white interior */
.step-card--active .step-card__border svg path {
  fill: #ffffff;
  stroke: var(--step-card-color);
  stroke-width: 4;
}

/* LOCKED — grey outline, white fill */
.step-card--locked .step-card__border svg path {
  fill: white;
  stroke: #D4D4D4;
  stroke-width: 4;
}

/* Checkmark */
.step-card__checkmark {
  --step-card-checkmark-size: 44px;
  top: -1px;
  right: -1px;
  width: var(--step-card-checkmark-size);
  height: var(--step-card-checkmark-size);
  background-color: var(--bs-orange);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: step-card-checkmark-pop 0.3s ease-out;
}

/* CTA overlay */
.step-card__cta {
  position: absolute;
  top: -18px;
  left: -33px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.step-card__cta-label {
  width: 94px;
  height: 58px;
}

.step-card__cta-text {
  width: 68px;
  font-size: 13px;
}

.step-card__cta-arrow {
  top: 24px;
  left: -47px;
}

/* Content */
.step-card__content {
  width: 233px;
}

/* Icon */
.step-card__icon-element {
  font-size: 48px;
  color: var(--step-card-color);
  transition: color 0.3s ease;
}

/* Badge */
.step-card__badge {
  padding: 4px 12px;
  font-size: 14px;
  background-color: var(--step-card-color);
  transition: background-color 0.3s ease;
}

/* Title */
.step-card__title {
  font-size: 18px;
  line-height: 20.7px;
  margin-bottom: 8.5px;
  color: var(--step-card-color);
  transition: color 0.3s ease;
}

/* Time */
.step-card__time {
  color: var(--step-card-color);
  transition: color 0.3s ease;
}

.step-card__time-icon { font-size: 15px; }

.step-card__time-text {
  font-size: 14px;
  line-height: 16.1px;
}

.step-card__content--has-overlay {
    flex: 1 !important;
}

/* ── COMPLETED ── */
.step-card--completed:not(.step-card--default-border) .step-card__title,
.step-card--completed:not(.step-card--default-border) .step-card__time,
.step-card--completed:not(.step-card--default-border) .step-card__icon-element { color: #fff; }

.step-card--completed .step-card__badge { background: rgba(0, 0, 0, 0.20); color: #fff; }

.step-card--completed .step-card-icon--white svg { filter: brightness(0) invert(1); }

/* ── ACTIVE ── */
.step-card--active:not(.step-card--default-border) .step-card__title,
.step-card--active:not(.step-card--default-border) .step-card__time,
.step-card--active:not(.step-card--default-border) .step-card__icon-element { color: var(--step-card-color); }

.step-card--active .step-card__badge { background-color: var(--step-card-color); color: #fff; }

/* ── LOCKED ── */
.step-card--locked .step-card__title,
.step-card--locked .step-card__time,
.step-card--locked .step-card__icon-element { color: #D4D4D4; }

.step-card--locked .step-card__badge { background-color: #D4D4D4; color: #FFFFFE; }

.step-card--locked .step-card-icon svg { color: #D4D4D4; }
.step-card--locked .step-card-icon--white svg { filter: none; }

/* ── PENDING APPROVAL ──
   Added by the step_card `pending_locked` parameter while the organization is
   awaiting Play Active approval. The greying already comes from
   .step-card--locked above; this adds the padlock so the state is not carried
   by colour alone, and reinforces "not actionable" — the markup has already
   dropped the link/button wrapper, this stops the card looking clickable. */
.step-card--pending-locked {
  cursor: not-allowed;
  user-select: none;
}

.step-card--pending-locked .step-card__lock {
  --step-card-lock-size: 34px;
  top: -1px;
  right: -1px;
  width: var(--step-card-lock-size);
  height: var(--step-card-lock-size);
  background-color: #D4D4D4;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* An already-earned step keeps its tick — sit the padlock beside it. */
.step-card--pending-locked.step-card--completed .step-card__lock {
  right: 44px;
}

/* Notice sits between the stepper header and the progress bar. Matches
   .stepper__header's own bottom gap so the rhythm is unchanged. */
.onboarding-locked-notice {
  margin-bottom: 24px;
}

/* ── Default border — completed ── */
.step-card--default-border.step-card--completed .step-card__title,
.step-card--default-border.step-card--completed .step-card__time,
.step-card--default-border.step-card--completed .step-card__icon-element { color: #fff; }

.step-card--default-border.step-card--completed .step-card__badge {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ── Default border — active ── */
.step-card--default-border.step-card--active .step-card__title,
.step-card--default-border.step-card--active .step-card__time,
.step-card--default-border.step-card--active .step-card__icon-element { color: var(--step-card-color); }

.step-card--default-border.step-card--active .step-card__badge {
  background-color: var(--step-card-color);
  color: #fff;
}

.step-card--completed:hover,
.step-card--locked:hover {
  transform: none;
  cursor: default;
}

.step-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-card-icon svg {
  display: block;
  width: 48px;
  height: 48px;
}

.step-card-icon--white svg { filter: brightness(0) invert(1); }

.step-card--active .step-card-icon--white svg {
  filter: none;
  color: var(--step-card-color);
}

.step-card--locked .step-card-icon svg,
.step-card--locked .step-card-icon--white svg {
  filter: none;
  color: #D4D4D4;
}

/* ============================================================================
   STEPPER CARD CONTAINER
   All responsive behaviour — including the mobile card layout — is driven
   by container width so it always matches the layout breakpoints.
   ============================================================================ */

.portal-stepper-card {
  container-type: inline-size;
  container-name: stepper-container;
}

/* ── COMPACT ROW: 696px–1200px container ── */
@container stepper-container (min-width: 696px) and (max-width: 1200px) {

  .stepper__cards {
    width: fit-content;
    justify-self: center;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  .stepper__cards .step-card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 134px;
  }

  .stepper__cards .step-card__border svg {
    width: 100% !important;
    height: 100% !important;
  }

  .stepper__cards .step-card__content {
    width: 100% !important;
    padding: clamp(6px, 1.5cqi, 16px) clamp(4px, 1cqi, 12px) !important;
    gap: clamp(4px, 0.8cqi, 8px) !important;
  }

  .stepper__cards .step-card__info { justify-content: center; }

  .stepper__cards .step-card-icon svg {
    width: clamp(20px, 3.5cqi, 40px) !important;
    height: clamp(20px, 3.5cqi, 40px) !important;
  }

  .stepper__cards .step-card__badge {
    font-size: clamp(8px, 1cqi, 13px) !important;
    padding: 2px clamp(4px, 0.8cqi, 10px) !important;
    margin-bottom: 3px !important;
  }

  .stepper__cards .step-card__title {
    font-size: clamp(9px, 2cqi, 15px) !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
    word-break: break-word;
  }

  .stepper__cards .step-card__time-text { font-size: clamp(8px, 0.9cqi, 12px) !important; }
  .stepper__cards .step-card__time-icon { font-size: clamp(8px, 0.9cqi, 12px) !important; }

  .stepper__cards .step-card__checkmark {
    width: 30px !important;
    height: 30px !important;
  }

  .stepper__cards .step-card__checkmark svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ── MOBILE STACK: container ≤695px ──
   Every mobile card style lives here — same trigger as the layout change,
   so viewport width and container width can never disagree.
   ──────────────────────────────────────────────────────────────────── */
@container stepper-container (max-width: 695px) {

  /* Two cards per row, each up to the design's 163px. The columns used to be a
     fixed 163px each, which needs a 342px container — wider than the stepper
     card on every common phone (≈290–330px at 360–414 wide) — so phones fell
     through to the one-column rule below and scrolled ~1,250px of narrow cards
     before reaching anything else. The borders are preserveAspectRatio="none",
     so a narrower card only stretches them. (!important throughout this block
     matches the rules it overrides, which are already !important.) */
  .stepper__cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 163px)) !important;
    justify-content: center !important;
    gap: 16px !important;
  }

  /* Card shell */
  .stepper__cards .step-card {
    flex: none !important;
    width: 100% !important;
    max-width: unset !important;
    min-height: 234px !important;
  }

  /* The "Click here to start" bubble hangs outside the card's top-left corner
     on desktop, which only works with room beside the card. In the two-up grid
     the left card sits on the container edge, so the bubble is centred on the
     card's bottom edge instead and the pointing arrow is dropped. The row gap
     leaves room for it. */
  .stepper__cards:has(.step-card__overlay) { row-gap: 36px !important; }
  .stepper__cards .step-card__overlay {
    left: 0;
    right: 0;
    bottom: -26px;
    display: flex;
    justify-content: center;
  }
  .stepper__cards .step-card__cta { position: static; }
  .stepper__cards .step-card__cta-arrow { display: none; }

  /* Show mobile SVG, hide desktop SVG */
  .stepper__cards .step-card__border .mobile-border  { display: block !important; }
  .stepper__cards .step-card__border .desktop-border { display: none !important; }

  /* Content: fill card, column-reverse so icon is at the bottom */
  .stepper__cards .step-card__content {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    flex-direction: column-reverse !important;
    /* Side padding follows the card width (≈137px per card at 375 wide). */
    padding: 32px clamp(10px, 4cqi, 20px) !important;
    gap: 8px !important;
  }

  /* Checkmark */
  .stepper__cards .step-card__checkmark { --step-card-checkmark-size: 36px; }
  .stepper__cards .step-card__checkmark svg { width: 20px !important; height: 20px !important; }

  /* Badge */
  .stepper__cards .step-card__badge {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 16.1px !important;
    margin-bottom: 12px !important;
  }

  /* Title */
  .stepper__cards .step-card__title {
    /* 18px at the design's 163px card; "Development" still fits a 137px one. */
    font-size: clamp(15px, 5.2cqi, 18px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
    overflow-wrap: anywhere;
  }

  /* Time */
  .stepper__cards .step-card__time-icon { font-size: 16px !important; }
  .stepper__cards .step-card__time-text {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16.1px !important;
  }

  /* Main icon */
  .stepper__cards .step-card-icon svg { width: 48px !important; height: 48px !important; }
}
/* ── SINGLE COLUMN: only where two cards cannot fit a readable title ──
   A 320px phone gives a 224px container (two ~104px cards — "Development" no
   longer fits), so it stacks; 360px and wider phones get two per row. */
@container stepper-container (max-width: 239px) {

  .stepper__cards {
    grid-template-columns: minmax(0, 163px) !important;
  }
}

/* ============================================================================
   STEP NAV
   ============================================================================ */

.step-nav {
  --step-nav-line-gap-left: 0.5rem;
  --step-nav-line-gap-right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0;
}

/* A skipped step's dot must actually disappear.
 *
 * The survey controller hides a dot for a page the respondent's branch skips by
 * setting `item.hidden = true` (`_updateStepNav`). That alone does nothing here:
 * the vendor stepper markup carries Bootstrap's `.d-flex`, whose
 * `display:flex!important` beats the UA stylesheet's unweighted
 * `[hidden]{display:none}` — so the dot stayed on screen keeping its authored
 * number while every later dot was renumbered down, rendering "1 2 2 3 4 5".
 *
 * The connector lines escaped it (`.flex-fill` sets `flex`, not `display`), which
 * is why the stray dot appeared with no line beside it. They are listed anyway so
 * the pair cannot drift if the vendor markup gains a display utility.
 */
.step-nav__item[hidden],
.step-nav__line[hidden] {
  display: none !important;
}

.step-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  font-family: var(--pa-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--bs-grey);
  background-color: transparent;
  border: 2px solid var(--bs-grey);
  transition: all 0.3s ease;
}

.survey-form__stepper .step-nav__item {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.step-nav__item--default .step-nav__bg--default {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--bs-primary);
  background: transparent;
}

.step-nav__item--completed .step-nav__bg--default,
.step-nav__item--active .step-nav__bg--default {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}

.survey-form__stepper .step-nav__item--active,
.survey-form__stepper .step-nav__item--completed:not(.step-nav__item--active) {
  color: var(--bs-pa-white);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.step-nav__bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-nav__bg--custom {
  color: var(--bs-primary);
}

.step-nav__bg--custom .step-nav__svg--filled {
  position: absolute;
  opacity: 0;
}

.step-nav__bg--custom .step-nav__svg--border {
  position: absolute;
}

.step-nav__item--completed .step-nav__svg--filled,
.step-nav__item--active .step-nav__svg--filled {
  opacity: 1;
}

.step-nav__item--completed .step-nav__svg--border,
.step-nav__item--active .step-nav__svg--border {
  opacity: 0;
}

.step-nav__number {
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 1rem;
  color: var(--step-nav-color);
}

.step-nav__item--completed .step-nav__number,
.step-nav__item--active .step-nav__number {
  color: #fff;
}

.step-nav__line {
  flex: 1;
  height: 2px;
  background: var(--bs-grey);
  margin-left: var(--step-nav-line-gap-left);
  margin-right: var(--step-nav-line-gap-right);
  transition: background-color 0.3s ease;
}

.step-nav__line--completed {
  background: var(--bs-primary);
}

@media (max-width: 768px) {
  .policy-step-nav__container {
    margin: 24px 11px;
  }

  .step-nav__line {
    margin-left: 2px;
    margin-right: 2px;
    min-width: 6px;
  }
}



/* ============================================================================
   STEPPER
   ============================================================================ */

.stepper {
  background: #ffffff;
  border-radius: 32px;
  padding: 40px 0;
}

.stepper__header {
  position: relative;
  margin-bottom: 24px;
}

.stepper__description {
  color: #555555;
  line-height: 1.6;
  margin: 16px 0 0 0;
  font-size: 16px;
}

.stepper__progress  { margin-bottom: 40px; }
.stepper__cards     { margin-bottom: 40px; }
.stepper__content   { margin-bottom: 40px; }
.stepper__nav       { margin-top: 40px; }

.stepper-content {
  --step-content-color: var(--bs-secondary);
  padding: 32px;
  background: #f8f9fa;
  border-radius: 24px;
  border-left: 4px solid var(--step-content-color);
}

.stepper-content__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.stepper-content__badge {
  display: inline-block;
  color: #ffffff;
  padding: 6px 16px;
  border-radius: var(--pa-radius-pill);
  font-size: 12px;
  font-weight: 600;
  background-color: var(--step-content-color);
}

.stepper-content__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: #333333;
}

.stepper-content__body {
  color: #555555;
  line-height: 1.7;
}

.stepper-content__body p { margin-bottom: 16px; }
.stepper-content__body p:last-child { margin-bottom: 0; }

.stepper--compact { padding: 24px 32px; }
.stepper--compact .stepper__header  { margin-bottom: 16px; }
.stepper--compact .stepper__progress { margin-bottom: 24px; }
.stepper--compact .stepper__cards   { margin-bottom: 24px; }
.stepper--compact .stepper__content { margin-bottom: 24px; }
.stepper--compact .stepper__nav     { margin-top: 24px; }
.stepper--transparent               { background: transparent; padding: 0; }
.stepper--centered .stepper__header { text-align: center; }
.stepper--centered .stepper__description { margin-left: auto; margin-right: auto; }

@media (max-width: 1024px) {
  .stepper { padding: 32px 0; }
}

@media (max-width: 768px) {
  .stepper {
    padding: 24px 0;
    border-radius: 24px;
  }

  .stepper__header     { margin-bottom: 20px; }
  .stepper__description { font-size: 14px; }
  .stepper__progress   { margin-bottom: 32px; }
  .stepper__cards      { margin-bottom: 32px; }
  .stepper__nav        { margin-top: 32px; }

  .stepper-content {
    padding: 24px 20px;
  }

  .stepper-content__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .stepper-content__title { font-size: 20px; }
}

/* ============================================================================
   HEADER BLOCK
   ============================================================================ */

.header {
  position: relative;
}

/* ============================================================================
   LOCK OVERLAY
   ============================================================================ */

.is-locked {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  container-name: locked-area;
}

.is-locked > *:not(.lock-overlay) {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

.lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lock-overlay__modal {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
  padding: 48px 100px;
  text-align: center;
  max-width: 620px;
}

.lock-overlay__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #ff6b8a;
  border-radius: 50%;
  margin-bottom: 24px;
}

.lock-modal__lock-icon {
  font-size: 28px;
  color: white;
}

.lock-overlay__title {
  margin: 0 0 8px;
  font-size: 32px;
  line-height: 38px;
}

.lock-overlay__subtitle {
  margin: 0 0 28px;
  font-size: 16px;
  font-weight: 600;
  line-height: 18.4px;
}

.lock-overlay__list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  text-align: left;
}

.lock-overlay__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 18px;
  color: var(--bs-navy);
}

.lock-overlay__list svg {
  width: 20px;
  height: 20px;
  color: var(--bs-success);
  flex-shrink: 0;
}

.lock-overlay__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 52px;
  padding: 14px 40px;
  background: var(--bs-correct);
  border: none;
  border-radius: var(--pa-radius-pill);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.lock-overlay__btn:hover {
  background: #14b8a6;
  color: #ffffff;
}

@container locked-area (max-width: 768px) {
  .lock-overlay { padding: 16px; }
  .lock-overlay__modal { padding: 32px 24px; height: fit-content; width: 80%; }
  .lock-overlay__title { font-size: 20px; }
  .lock-overlay__btn { width: 100%; }
}

/* ============================================================================
   MEMBERSHIP CARDS
   ============================================================================ */

.c-membership-section { padding: 0; }

.c-membership-section__header {
  text-align: center;
  margin-bottom: 40px;
}

.c-membership-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
  border-radius: 50%;
}

.c-membership-section__icon-inner {
  font-size: 28px;
  color: #ffffff;
}

.c-membership-section__title {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  color: var(--bs-navy);
  line-height: 1.3;
}

.c-membership-section__subtitle {
  margin: 12px 0 0;
  font-size: 16px;
  color: var(--bs-slate);
}

.c-membership-card-group {
  --card-columns: 3;
  display: grid;
  grid-template-columns: repeat(var(--card-columns), 1fr);
  gap: 24px;
  margin: 0 auto;
  max-width: calc(511px * var(--card-columns) + 24px * (var(--card-columns) - 1)) !important;
}

.c-membership-card-group:has(> :nth-child(1):last-child) { --card-columns: 1; }
.c-membership-card-group:has(> :nth-child(2):last-child) { --card-columns: 2; }

.c-membership-card-group:has(> :nth-child(4):last-child),
.c-membership-card-group:has(> :nth-child(5):last-child),
.c-membership-card-group:has(> :nth-child(6):last-child) { --card-columns: 3; }

@media (max-width: 900px) {
  .c-membership-card-group                                           { --card-columns: 2 !important; }
  .c-membership-card-group:has(> :nth-child(1):last-child)           { --card-columns: 1 !important; }
}

@media (max-width: 600px) {
  .c-membership-card-group { --card-columns: 1 !important; }
}

.c-membership-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: visible;
  color: #ffffff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.c-membership-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.c-membership-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: var(--pa-radius-pill);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  z-index: 1;
}

.c-membership-card__badge-icon { font-size: 14px; }

.c-membership-card__content {
  flex: 1;
  padding: 32px 24px 24px;
}

.c-membership-card__title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.c-membership-card__pricing {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
}

.c-membership-card__price  { font-size: 36px; font-weight: 800; line-height: 1; }
.c-membership-card__period { font-size: 14px; opacity: 0.85; }

.c-membership-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.c-membership-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.c-membership-card__feature-icon {
  flex-shrink: 0;
  font-size: 20px;
  margin-top: 1px;
  opacity: 0.9;
  color: #198754;
  background: radial-gradient(circle, white 0%, white 60%, transparent 60%, transparent 100%);
}

.c-membership-card__feature-text { flex: 1; font-size: 16px; }

.c-membership-card__feature-text a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.c-membership-card__feature-text a:hover { opacity: 0.8; }
.c-membership-card__feature-text strong  { font-weight: 700; }

.c-membership-card__footer { padding: 0 24px 24px; }

.c-membership-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  padding: 14px 24px;
  border: none;
  border-radius: var(--pa-radius-pill);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.c-membership-card__btn:hover { opacity: 0.85; }
.c-membership-card__btn-icon  { font-size: 20px; }

@media (max-width: 600px) {
  .c-membership-section__title    { font-size: 24px; }
  .c-membership-card__content     { padding: 28px 20px 20px; }
  .c-membership-card__title       { font-size: 18px; }
  .c-membership-card__price       { font-size: 28px; }
  .c-membership-card__footer      { padding: 0 20px 20px; }
}

/* ============================================================================
   SURVEY FORM
   ============================================================================ */

.survey-form {
  width: 100%;
  margin: 0 auto;
}

/* Survey intro — the form's own description + instructions, shown above the
   questions on every survey (self-assessment, 6M/12M/24M). */
.survey-form__intro {
  color: #1d1444;
  padding-bottom: 24px;
  border-bottom: 1px solid #eceaf3;
}
.survey-form__intro .survey-form__description {
  font-size: 16px;
  line-height: 1.5;
}
.survey-form__intro .survey-form__instructions {
  font-size: 15px;
  line-height: 1.5;
  color: #6b6685;
}
.survey-form__intro .survey-form__instructions-heading {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #1d1444;
  margin-bottom: 8px;
}
.survey-form__intro a {
  color: #8b3dff;
  text-decoration: underline;
}
.survey-form__intro a:hover,
.survey-form__intro a:focus {
  color: #6f2fcc;
}
.survey-form__intro p:last-child {
  margin-bottom: 0;
}

.survey-form__stepper {
  display: flex;
  width: 100%;
  padding: 8px;
  align-items: center;
  gap: 10px;
  border-radius: 32px;
  border: 1px solid var(--bs-grey);
  background: var(--bs-pa-white);
  box-sizing: border-box;
  margin-bottom: 32px;
}

/* A survey can have 9+ steps. The dots are flex-shrink-0 with flex-fill
   connectors, so on a narrow card the row outgrows its container.

   The previous fallback wrapped the dots onto multiple rows and dropped the
   connector lines (they are flex items too, so wrapping them left dangling
   stubs). That stopped it reading as a stepper at all — it became a bag of
   circles with no direction and no sense of progress.

   Instead: keep it a single row at every width. Shrink the dots and tighten the
   connectors on small screens, and let the row scroll horizontally as a last
   resort. A stepper that scrolls still reads as a stepper; one that wraps does
   not. */
.survey-form__stepper {
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}

.survey-form__stepper::-webkit-scrollbar {
  display: none;
}

.survey-form__stepper .step-nav {
  flex-wrap: nowrap;
  min-width: 0;
}

@media (max-width: 575.98px) {
  .survey-form__stepper {
    padding: 10px;
    border-radius: 24px;
  }

  .survey-form__stepper .step-nav {
    --step-nav-line-gap-left: 3px;
    --step-nav-line-gap-right: 3px;
  }

  .survey-form__stepper .step-nav__item {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .survey-form__stepper .step-nav__line {
    min-width: 6px;
  }
}

.survey-form__step         { display: none; }
.survey-form__step--active { display: block; }

/* Focus is moved here programmatically on step change so assistive tech follows
   the page — the scroll already shows where we are, so no focus ring. */
.survey-form__step:focus { outline: none; }

.question-block-group__header { margin-bottom: 32px; }

.question-block-group__title {
  font-family: var(--pa-font);
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  margin: 0 0 8px 0;
}

.question-block-group__description {
  font-family: var(--pa-font);
  font-size: 16px;
  line-height: 20px;
  margin: 0;
}

.question-block-group__questions {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.question-block {
  border: none;
  margin: 0;
  /* Left gutter holds the question number, which is lifted out of the legend's
     flow (below). Everything else in the block — the question text and the
     answer controls — starts after the gutter, so the answers line up under the
     text rather than under the number. Wide enough for two digits ("37."),
     since renumberVisibleQuestions() counts continuously across all steps. */
  padding: 0 0 0 32px;
  position: relative;
}

.question-block__legend {
  font-family: var(--pa-font);
  font-size: 16px;
  font-weight: 800;
  line-height: 20px;
  margin-bottom: 12px;
  display: block;
  width: 100%;
  display: flex;
  column-gap: 6px;
}

/* Sits in the block's left gutter. Taken out of the legend's flex flow so the
   question text starts at the gutter edge and wraps flush with itself. */
.question-block__number {
  font-weight: 800;
  position: absolute;
  left: 0;
  top: 0;
}

.question-block__text    { font-weight: 800; }

.question-block__required {
  color: var(--bs-primary);
  margin-left: 2px;
}

.question-block__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The clickable area is the control plus its text, and nothing else.
   `.question-block__options` is a column flex container, so a stretched item
   made the <label> span the full width of the card — every pixel of empty space
   to the right of a short answer like "Yes" selected it. On a wide survey card
   that is a very large mis-click target, and on a radio group a mis-click
   silently overwrites the previous answer. `align-self` stops the stretch;
   `width: fit-content` keeps the label off the empty space even where a parent
   is not a flex container. */
.question-block__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}

.question-block__option.form-check {
  margin-bottom: 0;
  padding-left: 0;
}

/* On a touch screen the row is the target: 44px tall (FE-11) instead of the
   24px label, with the list gap folded into that height so the rhythm barely
   changes (a 44px pitch where it was 32px). Only the height grows — the width
   stays fit-content, for the mis-click reason above. */
@media (pointer: coarse) {
  .question-block__options {
    gap: 0;
  }

  .question-block__option {
    min-height: 44px;
  }
}

/* ── Shared base ─────────────────────────────────────────────────── */
.question-block__input.form-check-input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  border: 2px solid var(--bs-grey);
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bs-pa-white);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.question-block__input.form-check-input:hover {
  border-color: var(--bs-blue-bayoux);
}
.question-block__input.form-check-input:focus {
  outline: 2px solid var(--bs-blue-bayoux);
  outline-offset: 2px;
  box-shadow: none;
}

/* ── Radio — circle shape + dot ──────────────────────────────────── */
.question-block__input.form-check-input[type="radio"] {
  border-radius: 50%;
}
.question-block__input.form-check-input[type="radio"]:checked {
  border-color: var(--bs-primary);
  background-color: var(--bs-pa-white);
  position: relative;
}
.question-block__input.form-check-input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--bs-primary);
}

/* ── Checkbox — rounded square + checkmark ───────────────────────── */
.question-block__input.form-check-input[type="checkbox"] {
  border-radius: 4px;
}
.question-block__input.form-check-input[type="checkbox"]:checked {
  border-color: var(--bs-primary);
  background-color: var(--bs-primary);
  position: relative;
}
.question-block__input.form-check-input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
}

.question-block__label.form-check-label {
  font-family: var(--pa-font);
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
  /* Shrinks and wraps rather than pushing the option past its container: with
     the option now sized to its content, a long answer would otherwise
     overflow instead of wrapping. */
  flex-shrink: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Error states ────────────────────────────────────────────────── */
.question-block--error .question-block__legend {
  color: var(--bs-danger);
}

.question-block--error .question-block__required {
  color: var(--bs-danger);
}

.question-block--error .question-block__options {
  border-left: 3px solid var(--bs-danger);
  padding-left: 10px;
  margin-left: 2px;
}

.question-block--error .question-block__input.form-check-input {
  border-color: var(--bs-danger);
}

.question-block--error input[type="text"],
.question-block--error input[type="number"],
.question-block--error input[type="email"],
.question-block--error input[type="date"],
.question-block--error textarea,
.question-block--error select {
  border-color: var(--bs-danger) !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

.question-block__error-message {
  display: none;
  color: var(--bs-danger);
  font-family: var(--pa-font);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 18px;
  margin-top: 8px;
  align-items: center;
  gap: 5px;
}

.question-block__error-message.is-visible {
  display: flex;
}

.question-block__error-message::before {
  content: "⚠";
  font-size: 0.85rem;
}

.survey-form__nav {
  margin-top: 40px;
  padding: 16px 0;
}

.survey-form__nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.survey-form__btn {
  font-family: var(--pa-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  padding: 12px 24px;
  border-radius: 24px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  text-decoration: none;
  display: inline-flex;
}

/* ── Survey form field width helpers ─────────────────────────── */
.survey-form__field--narrow { max-width: 200px; }
.survey-form__field--medium { max-width: 400px; }

/* ── Survey form action button sizing ────────────────────────────── */
.survey-form__action-btn {
  width: 302px;
  height: 54px;
}

@media (max-width: 767px) {
  .survey-form__action-btn {
    width: 100% !important;
  }
}

/* ── Survey form button colour modifiers ─────────────────────────── */
.survey-form__btn--back {
  background-color: var(--bs-purple-dark);
  color: #fff;
  border: none;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.survey-form__btn--back:disabled {
  background-color: var(--bs-purple-dark) !important;
  color: rgba(255, 255, 255, 0.45) !important;
  opacity: 0.55;
  pointer-events: none;
}

.survey-form__btn--back:not(:disabled):hover {
  background-color: #3a3068;
  color: #fff;
}

.survey-form__btn--save {
  background-color: #06B2C7;
  color: #fff;
  border: none;
  text-decoration: none;
}

.survey-form__btn--save:hover {
  background-color: #059db0;
  color: #fff;
}

.survey-form__btn--next,
.survey-form__btn--submit {
  background-color: var(--bs-primary);
  color: #fff;
  border: none;
}

.survey-form__btn--next:hover,
.survey-form__btn--submit:hover {
  background-color: var(--bs-primary-dark);
  color: #fff;
}

@media (max-width: 768px) {
  .survey-form__stepper { padding: 6px; gap: 6px; }
  .question-block-group__title { font-size: 24px; line-height: 30px; }
  .survey-form__nav-inner { flex-wrap: wrap; }
  .survey-form__btn { font-size: 14px; padding: 10px 20px; }
}

/* ============================================================================
   SELF ASSESSMENT INTRO
   ============================================================================ */

.self-assessment-intro {
  color: var(--bs-daintree);
  font-size: 15px;
  line-height: 1.6;
}

/* ============================================================================
   VIDEO ARTICLE (Lesson Card)
   ============================================================================ */

.video-article {
  --video-article-bg: #dbeafe;
  --video-article-bg-hover: #c7d8f0;
  --video-article-media-color: var(--bs-warning);
  --video-article-media-color-hover: var(--bs-orange);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Mobile first. The top padding is the badge's row: the content is centred
     vertically, so on a narrow card a long title pushed the play icon up under
     the absolutely positioned "Completed" badge. */
  min-height: 220px;
  padding: 52px 20px 24px;
  background-color: var(--video-article-bg);
  border-radius: var(--pa-radius-module);
  text-align: center;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 992px) {
  .video-article {
    min-height: 283px;
    padding: 20px 30px 36px 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-article,
  .video-article__media-link,
  .video-article__media-static,
  .video-article__thumbnail {
    transition: none;
  }
}

.video-article:hover {
  background-color: var(--video-article-bg-hover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.video-article__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--pa-radius-badge);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.video-article__badge--completed {
  background-color: var(--bs-orange);
  color: var(--bs-pa-white);
}

.video-article__badge--in_progress {
  background-color: var(--bs-secondary);
  color: var(--bs-pa-white);
}

.video-article__badge-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.video-article__media-container {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.video-article__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-article__media-link,
.video-article__media-static {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--video-article-media-color);
  transition: transform 0.2s ease, color 0.2s ease;
}

.video-article__media-link {
  text-decoration: none;
  cursor: pointer;
}

.video-article__media-icon {
  width: 72px;
  height: 72px;
  font-size: 72px;
  flex-shrink: 0;
}

.video-article__title {
  margin: 0;
  width: 100%;
  text-align: left;
  font-size: 20px;
  font-weight: 700;
  color: var(--bs-biscay);
  line-height: 28px;
  overflow-wrap: anywhere;
}

@media (min-width: 992px) {
  .video-article__badge {
    top: 22px;
    right: 22px;
  }

  .video-article__title {
    font-size: 25px;
    line-height: 36px;
  }
}

.video-article__title-link {
  color: inherit;
  text-decoration: none;
}

.video-article:hover .video-article__media-link,
.video-article:hover .video-article__media-static {
  transform: scale(1.12);
  color: var(--video-article-media-color-hover);
}

.video-article:hover .video-article__title-link {
  text-decoration: underline;
}

.video-article__media-link:focus-visible  { transform: scale(1.12); color: var(--video-article-media-color-hover); }
.video-article__title-link:focus-visible  { text-decoration: underline; }

.video-article__thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--pa-radius-module);
  transition: opacity 0.2s ease;
}

.video-article--has-thumbnail .video-article__media-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.4) 100%);
  border-radius: var(--pa-radius-module);
  pointer-events: none;
  transition: background 0.2s ease;
}

.video-article--has-thumbnail:hover .video-article__media-container::after {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
}

.video-article--has-thumbnail .video-article__media-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--pa-radius-module);
}

.video-article--has-thumbnail .video-article__media    { position: relative; z-index: 1; }
.video-article--has-thumbnail .video-article__badge    { z-index: 2; }
.video-article--has-thumbnail .video-article__media-static { color: rgba(255,255,255,0.9); }
.video-article--has-thumbnail:hover .video-article__media-static { color: #fff; }
.video-article:hover .video-article__thumbnail { opacity: 0.92; }

/* ============================================================================
   VIDEO ARTICLE GRID
   ============================================================================ */

.video-article-grid {
  display: grid;
  gap: 20px;
  width: 100%;
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .video-article-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .video-article-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .video-article-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.video-article-grid--compact { gap: 12px; }
.video-article-grid__item    { min-width: 0; }

.video-article-grid__empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.video-article-grid__empty-text {
  margin: 0;
  color: var(--bs-slate);
  font-size: 0.875rem;
  text-align: center;
}

/* ============================================================================
   VIDEO ARTICLE PANEL
   ============================================================================ */

.video-article-panel {
  background-color: #ffffff;
  border-radius: 16px;
}

.video-article-panel__header { margin-bottom: 4px; }

.video-article-panel__heading {
  margin: 0 0 8px;
  font-size: 1.375rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
}

.video-article-panel__highlight { color: var(--bs-secondary); }

.video-article-panel__subtitle-container {
  margin-top: 36px;
}

.video-article-panel__subtitle {
  font-size: 0.875rem;
  color: var(--bs-slate);
  line-height: 1.5;
}

.video-article-panel__progress {
  margin-top: 36px;
  padding: 20px 23px;
  background: rgba(236, 236, 245, 0.5);
  border-radius: var(--pa-radius-module);
}

.video-article-panel__progress-info {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--bs-slate);
  text-align: right;
}

.video-article-panel__body { margin-top: 56px; }

.video-article-panel__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  padding: 32px;
  background-color: var(--bs-warning);
  border-radius: var(--pa-radius-module);
  transition: background-color 0.2s ease;
  text-decoration-line: none;
}

.video-article-panel__cta:hover { background-color: #e5a620; }

.video-article-panel__cta-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  color: var(--bs-pa-white);
  text-decoration: none;
  font-size: 25px;
  font-weight: 700;
}

.video-article-panel__cta-link:hover,
.video-article-panel__cta-link:focus-visible { text-decoration: none; }

.video-article-panel__cta-icon {
  font-size: 45px;
  flex-shrink: 0;
  color: var(--bs-pa-white);
}

.video-article-panel__cta-text {
  color: var(--bs-pa-white);
  font-size: 25px;
  font-weight: 700;
}

/* ============================================================================
   VIDEO PLAYER
   ============================================================================ */

.video-player {
  --vp-accent:      var(--bs-teal);
  --vp-btn-color:   #3C4A56;
  --vp-controls-bg: #C8CED6;

  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--bs-pa-border);
  background-color: #000000;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.video-player__ratio { position: relative; width: 100%; }
.video-player__ratio::before { display: block; padding-top: 56.25%; content: ""; }
.video-player__ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-player__ratio--16x9::before { padding-top: 56.25%; }
.video-player__ratio--4x3::before  { padding-top: 75%; }
.video-player__ratio--1x1::before  { padding-top: 100%; }
.video-player__ratio--21x9::before { padding-top: 42.857143%; }
.video-player__iframe { border: 0; }

.video-player__wrapper { display: flex; flex-direction: column; }

.video-player__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: #000;
  cursor: pointer;
}

.video-player__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background-color: var(--vp-controls-bg);
}

.video-player__controls-left  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.video-player__seek            { flex: 1; min-width: 0; display: flex; align-items: center; }
.video-player__controls-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.video-player__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--vp-btn-color);
  transition: color 0.15s ease, transform 0.15s ease;
}

.video-player__btn:hover         { color: var(--vp-accent); transform: scale(1.1); }
.video-player__btn:focus-visible { outline: 2px solid var(--vp-accent); outline-offset: 2px; border-radius: 3px; }
.video-player__btn-icon          { font-size: 20px; }

.video-player__btn--play .video-player__btn-icon { font-size: 22px; }

.video-player__btn--stop {
  width: 18px;
  height: 18px;
  border: 2px solid var(--vp-btn-color);
  border-radius: 2px;
  background-color: #ffffff;
}

.video-player__btn--stop .video-player__btn-icon { display: none; }
.video-player__btn--stop:hover { border-color: var(--vp-accent); background-color: #F0F0F0; transform: scale(1.1); }

.video-player__btn--volume .video-player__btn-icon--volume-off          { display: none; }
.video-player__btn--volume.is-muted .video-player__btn-icon--volume-on  { display: none; }
.video-player__btn--volume.is-muted .video-player__btn-icon--volume-off { display: inline; }

.video-player__seek-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: #E2E6EA;
  outline: none;
  cursor: pointer;
}

.video-player__seek-input::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: #E2E6EA; }
.video-player__seek-input::-moz-range-track              { height: 4px; border-radius: 99px; background: #E2E6EA; border: none; }
.video-player__seek-input::-moz-range-progress           { height: 4px; border-radius: 99px; background: var(--vp-accent); }

.video-player__seek-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--vp-accent);
  border: none;
  margin-top: -5px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.video-player__seek-input::-webkit-slider-thumb:hover { transform: scale(1.3); }

.video-player__seek-input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--vp-accent);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.video-player__seek-input::-moz-range-thumb:hover { transform: scale(1.3); }
.video-player__seek-input:focus-visible { outline: 2px solid var(--vp-accent); outline-offset: 2px; }

.video-player__time {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--vp-btn-color);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.video-player__hd-badge {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--vp-btn-color);
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}

.video-player__controls:hover .video-player__hd-badge { color: var(--vp-accent); }

.video-player__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: #F1F5F9;
}

.video-player__placeholder-icon { font-size: 48px; color: #94A3B8; }
.video-player__placeholder-text { font-size: 0.875rem; color: #94A3B8; }

@media (max-width: 480px) {
  .video-player__controls  { gap: 10px; padding: 10px 12px; }
  .video-player__controls-left  { gap: 6px; }
  .video-player__controls-right { gap: 8px; }
  .video-player__btn-icon  { font-size: 16px; }
  .video-player__time      { font-size: 0.6875rem; }
  .video-player__hd-badge  { display: none; }
}

/* ============================================================================
   VIDEO PLAYER SECTION
   ============================================================================ */

.video-player-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.video-player-section__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.video-player-section__logo-icon {
  font-size: 40px;
  flex-shrink: 0;
  color: var(--bs-warning);
}

.video-player-section__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.3;
}

.video-player-section__body { width: 100%; }

@media (max-width: 575px) {
  .video-player-section__title { font-size: 1.25rem; }
}

/* ============================================================================
   ARTICLE ITEM
   ============================================================================ */

.article-item.card {
  max-width: 367px;
  border-radius: 16px;
  overflow: hidden;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.article-item__image-wrapper {
  height: 244px;
  overflow: hidden;
}

.article-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-item__body.card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-item__title.card-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 23px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.article-item__author-image {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.article-item__author-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  text-transform: uppercase;
}

.article-item__description.card-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-item__cta.btn {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--pa-radius-pill);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  width: 100%;
}

.article-item__cta.btn:hover { opacity: 0.9; color: #fff; }
.article-item__cta-icon      { font-size: 14px; }

/* ============================================================================
   ARTICLE GROUP
   ============================================================================ */

.article-group { width: 100%; }

.article-group__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.article-group__item { display: flex; }

.article-group__item .article-item.card {
  max-width: none;
  width: 100%;
}

@media (max-width: 992px) {
  .article-group__row { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

@media (max-width: 576px) {
  .article-group__row { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================================
   QUIZ PAGE
   ============================================================================ */

.quiz-page__title {
  color: #000;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
}

.quiz-page__description {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.5px;
  margin-top: 32px;
}

.quiz-page__description * { margin: 0; }

.quiz-page__form { margin-top: 60px; }

.quiz-page__question {
  border: none;
  margin: 0;
  padding: 0;
}

.quiz-page__question-title {
  color: #000;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  margin-bottom: 13.7px;
  display: block;
  width: 100%;
}

.quiz-page__required {
  color: var(--bs-primary);
  margin-left: 2px;
}

.quiz-page__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px;
}

.quiz-page__option {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 38px;
  border-radius: var(--pa-radius-module);
  border: 2px solid var(--bs-pa-border);
  background: var(--bs-bg-subtle);
  cursor: pointer;
  transition: border-color 0.15s ease;
  margin: 0;
}

.quiz-page__option:hover {
  border-color: #C0C0D4;
}

.quiz-page__option:has(.quiz-page__radio:checked) {
  border: 3px solid var(--bs-primary);
}

.quiz-page__option-text {
  color: #000;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.5px;
}

.quiz-page__radio {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  background: transparent no-repeat center / 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect width='20' height='20' rx='10' fill='white'/%3E%3Crect width='20' height='20' rx='10' fill='%23C0C7D1'/%3E%3Crect x='2' y='2' width='16' height='16' rx='8' fill='white'/%3E%3C/svg%3E");
}

.quiz-page__radio:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect width='20' height='20' rx='10' fill='white'/%3E%3Crect width='20' height='20' rx='10' fill='%236518D8'/%3E%3Crect x='4.5' y='4.5' width='11' height='11' rx='5.5' fill='white' stroke='%238B3DFF' stroke-width='5'/%3E%3C/svg%3E");
}

.quiz-page__radio:focus         { outline: none; box-shadow: none; }
.quiz-page__radio:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; border-radius: 50%; }

.quiz-page .quiz-progress         { display: none; }
.quiz-page .quiz-step             { display: none; }
.quiz-page .quiz-step--active     { display: block; }

.quiz-page .quiz-step-feedback { display: none; margin-top: 24px; }

.quiz-page .quiz-step-feedback--correct {
  display: block;
  background: var(--bs-correct);
  border: none;
  border-radius: var(--pa-radius-module);
  padding: 32px 40px;
  color: var(--bs-pa-white);
}

.quiz-page .quiz-step-feedback--incorrect {
  display: block;
  background: var(--bs-error);
  border: none;
  border-radius: var(--pa-radius-module);
  padding: 32px 40px;
  color: var(--bs-pa-white);
}

.quiz-page .quiz-step-feedback > strong:first-child {
  display: block;
  text-align: center;
  color: var(--bs-pa-white);
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  margin-bottom: 16px;
}

.quiz-page .quiz-step-feedback p,
.quiz-page .quiz-step-feedback li,
.quiz-page .quiz-step-feedback span {
  color: var(--bs-pa-white);
  font-size: 16px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.5px;
}

.quiz-page .quiz-step-feedback a  { color: #fff; font-weight: 800; text-decoration: underline; }
.quiz-page .quiz-step-feedback ul,
.quiz-page .quiz-step-feedback ol { margin: 0; padding-left: 20px; }
.quiz-page .quiz-step-feedback li { margin-bottom: 8px; }
.quiz-page .quiz-step-feedback li:last-child { margin-bottom: 0; }
.quiz-page .quiz-step-feedback li strong,
.quiz-page .quiz-step-feedback li b  { color: var(--bs-pa-white); font-weight: 800; }
.quiz-page .quiz-step-feedback ul li::marker { color: var(--bs-pa-white); }

.quiz-page__classic .quiz-page__question + .quiz-page__question { margin-top: 40px; }

@media (max-width: 768px) {
  .quiz-page__title          { font-size: 24px; line-height: 30px; }
  .quiz-page__question-title { font-size: 22px; line-height: 28px; }
  .quiz-page__option         { padding: 24px; gap: 16px; }
  .quiz-page__option-text    { font-size: 16px; }
  .quiz-page__form           { margin-top: 40px; }

  .quiz-page .quiz-step-feedback--correct,
  .quiz-page .quiz-step-feedback--incorrect { padding: 24px; border-radius: 20px; }
  .quiz-page .quiz-step-feedback > strong:first-child { font-size: 22px; line-height: 28px; }
}

/* ============================================================================
   QUIZ RESULTS
   ============================================================================ */

.quiz-results__title {
  color: var(--bs-biscay);
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
}

.quiz-results__title--passed { color: var(--bs-orange); }

.quiz-results__score-card {
  border-radius: var(--pa-radius-module);
  box-shadow: var(--pa-shadow-module);
  background: #fff;
}

.quiz-results__icon          { font-size: 1.5rem; }
.quiz-results__icon--pass    { color: var(--bs-success); }
.quiz-results__icon--fail    { color: var(--bs-danger); }

.quiz-results__label {
  color: var(--bs-slate);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5px;
}

.quiz-results__value {
  color: var(--bs-biscay);
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
}

.quiz-results__thankyou { color: #000; font-size: 16px; line-height: 20px; letter-spacing: 0.5px; }
.quiz-results__thankyou * { margin: 0; }

.quiz-results__retry {
  border-radius: var(--pa-radius-module);
  background: var(--pa-lesson-bg);
}

.quiz-results__question-block { margin: 64px 0; }

.quiz-results__question-title {
  color: #000;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  margin-bottom: 13.7px;
}

.quiz-results__options { display: flex; flex-direction: column; gap: 12px; padding: 10px; }

.quiz-results__option {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 38px;
  border-radius: var(--pa-radius-module);
  border: 2px solid var(--bs-pa-border);
  background: var(--bs-bg-subtle);
  cursor: default;
}

.quiz-results__option-text { color: #000; font-size: 20px; font-weight: 400; line-height: 20px; letter-spacing: 0.5px; }

.quiz-results__option--selected-correct {
  border: 3px solid var(--bs-success);
  background: rgba(40, 167, 69, 0.06);
}

.quiz-results__option--selected-wrong {
  border: 3px solid var(--bs-error);
  background: rgba(232, 99, 106, 0.06);
}

.quiz-results__option--correct {
  border: 3px solid var(--bs-success);
  background: rgba(40, 167, 69, 0.06);
}

.quiz-results__radio {
  width: 20px; height: 20px; min-width: 20px; min-height: 20px; flex-shrink: 0;
  background: transparent no-repeat center / 20px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect width='20' height='20' rx='10' fill='white'/%3E%3Crect width='20' height='20' rx='10' fill='%23C0C7D1'/%3E%3Crect x='2' y='2' width='16' height='16' rx='8' fill='white'/%3E%3C/svg%3E");
}

.quiz-results__radio--checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect width='20' height='20' rx='10' fill='white'/%3E%3Crect width='20' height='20' rx='10' fill='%236518D8'/%3E%3Crect x='4.5' y='4.5' width='11' height='11' rx='5.5' fill='white' stroke='%238B3DFF' stroke-width='5'/%3E%3C/svg%3E");
}

.quiz-results__radio--correct {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect width='20' height='20' rx='10' fill='white'/%3E%3Crect width='20' height='20' rx='10' fill='%2328a745'/%3E%3Crect x='4.5' y='4.5' width='11' height='11' rx='5.5' fill='white' stroke='%2328a745' stroke-width='5'/%3E%3C/svg%3E");
}

.quiz-results__radio--wrong {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect width='20' height='20' rx='10' fill='white'/%3E%3Crect width='20' height='20' rx='10' fill='%23E8636A'/%3E%3Crect x='4.5' y='4.5' width='11' height='11' rx='5.5' fill='white' stroke='%23E8636A' stroke-width='5'/%3E%3C/svg%3E");
}

.quiz-results__option-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--pa-radius-badge);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.quiz-results__option-tag--correct { background: var(--bs-success); color: #fff; }
.quiz-results__option-tag--wrong   { background: var(--bs-error);   color: #fff; }

.quiz-results__feedback {
  border-radius: var(--pa-radius-module);
  padding: 32px 40px;
  margin-top: 16px;
}

.quiz-results__feedback--correct   { background: var(--bs-correct); }
.quiz-results__feedback--incorrect { background: var(--bs-error); }

.quiz-results__feedback-title {
  display: block;
  text-align: center;
  color: var(--bs-pa-white);
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  margin-bottom: 16px;
}

.quiz-results__feedback-body,
.quiz-results__feedback-body p,
.quiz-results__feedback-body li,
.quiz-results__feedback-body span {
  color: var(--bs-pa-white);
  font-size: 16px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.5px;
}

.quiz-results__feedback-body p                 { margin-bottom: 8px; }
.quiz-results__feedback-body p:last-child      { margin-bottom: 0; }
.quiz-results__feedback-body ul,
.quiz-results__feedback-body ol                { margin: 0; padding-left: 20px; }
.quiz-results__feedback-body li                { margin-bottom: 8px; }
.quiz-results__feedback-body li:last-child     { margin-bottom: 0; }
.quiz-results__feedback-body li::marker       { color: var(--bs-pa-white); }
.quiz-results__feedback-body strong,
.quiz-results__feedback-body b                 { color: var(--bs-pa-white); font-weight: 800; }
.quiz-results__feedback-body a                 { color: #fff; font-weight: 800; text-decoration: underline; }

@media (max-width: 768px) {
  .quiz-results__title,
  .quiz-results__value         { font-size: 22px; line-height: 28px; }
  .quiz-results__score-card,
  .quiz-results__retry         { border-radius: 20px; }
  .quiz-results__question-title { font-size: 22px; line-height: 28px; }
  .quiz-results__option        { padding: 24px; gap: 16px; }
  .quiz-results__option-text   { font-size: 16px; }
  .quiz-results__feedback      { padding: 24px; border-radius: 20px; }
}


/* ============================================================================
   Account Dropdown
   ============================================================================ */

.account-dropdown__menu {
  min-width: 290px;
  max-width: 290px;
  border-radius: 18px !important;
}

.account-dropdown__header {
  background-color: var(--bs-secondary);
  border-radius: 18px;
}

.account-dropdown__header-label {
  font-size: 14px;
}

.account-dropdown__badge {
  padding: 4px 11px;
  background-color: var(--bs-tango);
  border-radius: 15px;
  font-size: 0.8rem;
}

.account-dropdown__item {
  padding: 8px 12px;
  color: #361A59;
  font-size: 0.95rem;
}

.account-dropdown__item:hover {
  background-color: rgba(153, 203, 253, 0.2);
  color: #361A59;
}

.account-dropdown__item--logout,
.account-dropdown__item--logout:hover {
  color: #D94536;
}

.account-dropdown__item-icon {
  font-size: 1.15rem;
  width: 22px;
  color: #361A59;
}

.account-dropdown__item-icon--logout {
  color: #D94536 !important;
}

.account-dropdown__footer {
  background-color: #D6DADE;
}

.account-dropdown__footer-link {
  color: #33475B;
  font-size: 0.72rem;
  opacity: 0.8;
}

.account-dropdown__footer-link:hover {
  opacity: 1;
  text-decoration: underline;
  color: var(--bs-purple-dark);
}

/* ============================================================================
   ASSESSMENT COMPLETE
   ============================================================================ */

/* ============================================================================
   ONBOARDING STEP COMPLETE — the message under the stepper on
   policy_assessment_complete, policy_tailor_complete and pd_complete.

   It replaced (2026-09-13) two centred 30px paragraphs over a fixed 352px
   button pushed to the card's right edge: three sizes of shout and a second
   alignment axis under a stepper that has one. Now a single centred column —
   a success tick, the brand's orange "Step N completed!", a heading, one
   sentence at reading size, and the theme's own button.

   `.assessment-complete__*` below is NOT retired by this: invite_step,
   payment_processing, quiz_results, onboarding_locked, policy_403 and the
   survey form still use it.

   Mobile-first (FE-3); tokens only (FE-2).
   ============================================================================ */

.pa-step-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 40rem;
  margin: 32px auto 0;
  text-align: center;
}

.pa-step-complete__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 50%;
  background-color: var(--bs-success);
  color: var(--bs-white);
}

/* 20px at weight 800 is "large text" for WCAG, which is what lets the brand
   orange meet the 3:1 it needs here (FE-11). Smaller, it would not. */
.pa-step-complete__eyebrow {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--bs-orange);
}

.pa-step-complete__heading {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--bs-navy);
  text-wrap: balance;
}

.pa-step-complete__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bs-slate);
  text-wrap: pretty;
}

.pa-step-complete__actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
}

.pa-step-complete__actions .btn {
  width: 100%;
}

@media (min-width: 576px) {
  .pa-step-complete__actions .btn {
    width: auto;
    min-width: 16rem;
  }
}

@media (min-width: 768px) {
  .pa-step-complete {
    gap: 14px;
    margin-top: 48px;
  }

  .pa-step-complete__heading {
    font-size: 28px;
  }

  .pa-step-complete__lead {
    font-size: 18px;
  }
}

/* ============================================================================
   PD CERTIFICATE — the certificate under the stepper on pd_certificate.

   Built like pd_complete (2026-09-14): the certificate sits in the stepper's own
   white card, then ONE action row carries Download and Continue together. It
   used to be a second shadowed card in a padded grey container, which on a phone
   ran into the sticky step nav and left a grey band below, with Download alone
   at the top right and a fixed-ratio box leaving blank space under the image.

   Mobile-first (FE-3); tokens only (FE-2).
   ============================================================================ */

.pa-certificate {
  max-width: 48rem;
  margin: 24px auto 0;
}

.pa-certificate__preview {
  margin: 0;
}

.pa-certificate__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pa-radius-badge);
  box-shadow: var(--pa-shadow-module);
}

.pa-certificate__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.pa-certificate__actions .btn {
  width: 100%;
}

@media (min-width: 576px) {
  .pa-certificate__actions {
    flex-direction: row;
    justify-content: center;
  }

  .pa-certificate__actions .btn {
    width: auto;
    min-width: 14rem;
  }
}

@media (min-width: 768px) {
  .pa-certificate {
    margin-top: 48px;
  }
}

.assessment-complete__body {
  max-width: 1096px;
  margin-left: 2rem;
  margin-right: 2rem;
}

.assessment-complete__title {
  font-size: 30px;
  line-height: 36px;
}

.assessment-complete__sub-title {
  font-size: 20px;
  line-height: 24px;
}

.assessment-complete__btn {
  width: 352px;
  height: 54px;
}

.assessment-complete__btn--narrow {
  width: 302px;
  height: 54px;
}

@media (max-width: 767px) {
  .assessment-complete__btn,
  .assessment-complete__btn--narrow {
    width: 100% !important;
  }
}

/* ── Tighten the policy tailor container on smaller screens ── */
.policy-tailor {
  padding: 40px 32px 42px;
}

.policy-tailor__title {
  font-family: Nunito, sans-serif;
  font-size: 30px;
  line-height: 36px;
  color: #000;
  margin-bottom: 12px;
}

.policy-tailor__description {
  font-family: Nunito, sans-serif;
  font-size: 16px;
  line-height: 20px;
  color: #000;
  margin-bottom: 28px;
}

.policy-tailor__section {
  margin-bottom: 28px;
}

.policy-tailor__section-title {
  font-family: Nunito, sans-serif;
  font-size: 20px;
  line-height: 24px;
}

.policy-tailor__item-col {
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 20px;
  break-inside: avoid;
}

.policy-tailor__items-grid {
  columns: 2;
  column-gap: 1.5rem;
}

@media (max-width: 767px) {
  .policy-tailor__items-grid {
    columns: 1;
  }
}

.policy-tailor__item { cursor: pointer; }
.policy-tailor__item--mandatory { cursor: default; }

.policy-tailor__item-label {
  font-family: Nunito, sans-serif;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}

.policy-item-cb__mark {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 2px solid #ccc;
  background: #fff;
  transition: background-color .15s, border-color .15s;
  margin-top: 1px;
}

.policy-item-cb__icon {
  font-size: 11px;
  display: none;
}

.policy-item-cb:checked + .policy-item-cb__mark {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.policy-item-cb:checked + .policy-item-cb__mark .policy-item-cb__icon {
  display: inline;
}

.policy-tailor__item:not(.policy-tailor__item--mandatory):hover .policy-item-cb__mark {
  border-color: var(--bs-primary);
}

.policy-item-cb:disabled + .policy-item-cb__mark {
  opacity: 0.6;
  cursor: not-allowed;
}

.policy-tailor__footer-btn { height: 53px; }
.policy-tailor__footer-label {
  font-family: Nunito, sans-serif;
  font-size: 20px;
  line-height: 24px;
}

/* A procedure is author-entered rich text and can carry a long URL or a
   hyphen-free compound; in a multi-column layout that pushes the column past
   its track and the page sideways. */
.policy-tailor__item-label {
  overflow-wrap: anywhere;
  min-width: 0;
}

@media (max-width: 767px) {
  /* Give the tick list its screen back: 32px each side of an already-padded
     container leaves a phone about 250px of usable width. */
  .policy-tailor {
    padding: 28px 16px 32px;
  }
  .policy-tailor__title {
    font-size: 24px;
    line-height: 30px;
  }
  .policy-tailor__section-title {
    font-size: 18px;
    line-height: 22px;
  }
  .policy-tailor__footer-label {
    font-size: 17px;
    line-height: 22px;
  }
}

/* ============================================================================
   POLICY VIEW
   ============================================================================ */

.portal-content__policy-view {
  background: transparent;
  box-shadow: none;
  border-radius: none;
  padding: 0;
}

.policy-view__back {
  color: #4c4184;
  text-decoration: none;
  font-weight: 600;
}

.policy-finish__note {
  font-size: 14px;
  line-height: 20px;
  color: var(--bs-slate);
}

/* ── Overflow containment for the rendered policy document ─────────────
   The document is author-built from StreamField blocks, so its contents are
   not fully known here: an editor can drop in an image at its natural size, a
   wide table, or a paragraph carrying an unbroken URL. Any one of those is
   wider than a phone's column and takes the whole page sideways with it.
   Constrain them at the container rather than chasing each block. */
.portal-content__left-policy img,
.portal-content__left-policy svg,
.portal-content__left-policy video {
  max-width: 100%;
}

/* The page/procedure logos are sized by height with `object-fit: contain`, so
   capping their width shrinks the box without distorting the artwork. */
.policy-page__logo,
.policy-procedures__logo {
  max-width: 100%;
}

.portal-content__left-policy p,
.portal-content__left-policy li,
.portal-content__left-policy h1,
.portal-content__left-policy h2,
.portal-content__left-policy h3,
.portal-content__left-policy h4 {
  overflow-wrap: anywhere;
}

/* A table cannot wrap, so it gets its own scroll rather than scrolling the
   page. `display: block` is what makes overflow apply to a table element. */
.portal-content__left-policy table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

/* Sticky nav animation */
.policy-step-nav {
  width: 100%;
  position: sticky;
  top: 0;
  height: 0;
  z-index: 900;
  opacity: 0;
  transform: translateY(-120%);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}


.policy-step-nav--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.policy-step-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 42px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: -1;
  /* Fade bottom edge to transparent */
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.policy-step-nav__container {
  margin: 24px;
  padding: 12px;
  border-radius: 48px;
  background: white;
}

.policy-step-nav__inner .step-nav__item {
  border: none;
}

.policy-step-nav__inner .step-nav__item--completed:not(.step-nav__item--active) {
  background: transparent;
}

.policy-step-nav__inner .step-nav__bg--custom {
  color: var(--step-nav-color);
}

.policy-step-nav__inner .step-nav__line--completed {
  background: var(--step-nav-line-color);
}


@media (max-width: 767.98px) {
  .policy-step-nav {
    height: 58px;
  }

  .policy-step-nav::before {
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
}

/* Step tooltip cards */
.policy-step-card {
  position: fixed;
  z-index: 910;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.96);
  transition: opacity .2s ease, transform .2s ease;
}

.policy-step-card--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Sidebar spacing */
.policy-sidebar {
  top: 24px;
  gap: 36px;
}
/* TOC */
.policy-toc {
  gap: 15px;
}

.policy-toc__title {
  font-size: 30px;
  line-height: 36px;
}

.policy-toc__list {
  gap: 8px;
}

.policy-toc__link {
  line-height: 20px;
  width: fit-content;
}

.policy-toc__link:hover,
.policy-toc__link--active {
  color: var(--bs-primary) !important;
  font-weight: 800 !important;
}

/* Finish card */
.policy-finish {
  gap: 32px;
}

.policy-finish__title {
  font-size: 30px;
  line-height: 36px;
}

.policy-finish__btn {
  padding: 19px 38.5px;
}

.policy-finish_download__btn {
  padding: 19px 38.5px;
}

/* Row spacing override */
.policy-content-row {
  column-gap: 36px;
  row-gap: 36px;
}

.portal-content__left-policy {
  row-gap: 32px;
}

.portal-content__right-policy {
  top: 128px !important;
  z-index: 1;
}

/* ── Cover page block ────────────────────────────────────────── */
.policy-cover {
  border-radius: 28px;
  background: #fbfbfc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 1169px;
  box-shadow: 8px 8px 15px 0 rgba(23, 16, 63, 0.08), inset 0 0 0 24px white, inset 0 0 0 25px #e7ebee;
  padding: 64px;
  position: relative;
}

.policy-cover__logo {
  margin-bottom: 3rem;
}

.policy-cover__logo img {
  width: 420px;
  height: auto;
}

.policy-cover__title {
  font-size: 52px !important;
  font-weight: 700;
  color: #4c4284;
  margin-bottom: 36px;
  line-height: 1.3;
}

.policy-cover__org-title {
  font-size: 38px !important;
  font-weight: 400 !important;
  color: #4c4284;
  margin-bottom: 36px;
  line-height: 1.6;
}

.policy-cover__subtitle-container {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  position: absolute;
  bottom: 64px;
  left: 64px;
  right: 64px;
}

.policy-cover__subtitle {
  font-size: 16px !important;
  color: #4c4284;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ── Policy page ─────────────────────────────────────────────── */
.policy-page {
  border-radius: 28px;
  background: #fbfbfc;
  min-height: 400px;
  box-shadow: 8px 8px 15px 0 rgba(23, 16, 63, 0.08), inset 0 0 0 24px white, inset 0 0 0 25px #e7ebee;
  padding: 64px;
}

.policy-page h1,
.policy-page h2,
.policy-page h3,
.policy-page h4 {
  font-weight: 700;
  color: #4c4284;
  line-height: 1.3;
}

.policy-page h1 { font-size: 38px; margin-bottom: 24x; }
.policy-page h2 { font-size: 30px; margin-bottom: 14px; }
.policy-page h3 { font-size: 26px; margin-bottom: 8px; }
.policy-page h4 { font-size: 20px; margin-bottom: 8px; }

.policy-page p {
  font-size: 16px;
  color: #4c4284;
  margin-bottom: 1rem;
  line-height: 1.8;
}

.policy-page a { color: var(--bs-primary); }

.policy-page ul,
.policy-page ol { margin-bottom: 8px; }

.policy-page li {
  font-size: 16px;
  color: #4c4284;
}

/* ── Procedures block (dark purple — selected) ───────────────── */
.policy-procedures--selected {
  border-radius: 28px;
  background: #4c4284;
  min-height: 400px;
  box-shadow: 8px 8px 15px 0 rgba(23, 16, 63, 0.08), inset 0 0 0 24px white, inset 0 0 0 25px #e7ebee;
  padding: 64px;
  color: #fff;
}

.policy-procedures--selected .policy-procedures__heading {
  color: #fff;
  font-size: 30px;
  margin-bottom: 24px;
  line-height: 1.3;
  font-weight: 700;
}

.policy-procedures--selected .policy-procedures__subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.policy-procedures--selected .policy-section__heading {
  color: #fff;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 16px;
}

.policy-procedures--selected .policy-items-list {
  list-style: disc !important;
  padding-left: 40px;
  margin: 0 0 30px 0;
  overflow: visible;
}

.policy-procedures--selected .policy-item {
  display: list-item !important;
  list-style-type: disc !important;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.5;
}

/* ── Procedures block (light — unselected) ───────────────────── */
.policy-procedures--unselected {
  border-radius: 28px;
  background: #fbfbfc;
  min-height: 400px;
  box-shadow: 8px 8px 15px 0 rgba(23, 16, 63, 0.08), inset 0 0 0 24px white, inset 0 0 0 25px #e7ebee;
  padding: 64px;
  color: #fff;
}

.policy-procedures--unselected .policy-procedures__heading {
  color: #4c4284;
  font-size: 30px;
  margin-bottom: 24px;
  line-height: 1.3;
  font-weight: 700;
}

.policy-procedures--unselected .policy-procedures__subtitle {
  color: #4c4284;
}

.policy-procedures--unselected .policy-section__heading {
  color: #4c4284;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 16px;
}

.policy-procedures--unselected .policy-items-list {
  list-style: disc !important;
  padding-left: 40px;
  margin: 0 0 16px 0;
  overflow: visible;
}

.policy-procedures--unselected .policy-item {
  display: list-item !important;
  list-style-type: disc !important;
  font-size: 16px;
  line-height: 1.5;
  color: #4c4284;
}

.policy-procedures--unselected li,
.policy-procedures--selected li {
  font-size: 17px;
}

/* ── Shared footer & logo ────────────────────────────────────── */

.policy-page #references {
  font-size: 14px;
  margin-bottom: 0;
}

.policy-page__footer,
.policy-procedures__footer {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: auto;
  padding-top: 32px;
}

.policy-page__logo,
.policy-procedures__logo {
  height: 150px;
  width: auto;
  object-fit: contain;
  object-position: bottom right;
  display: block;
}

/* ── Pledge block ────────────────────────────────────────────── */
.policy-pledge {
  background: #4c4284;
  border-radius: 32px;
  padding: 40px 48px;
  margin-bottom: 64px;
}

.policy-pledge__heading {
  font-size: 26px;
  font-weight: 600;
  color: #fff !important;
  margin-bottom: 20px;
  line-height: 1.3;
}

.policy-pledge__body p,
.policy-pledge__body li {
  font-size: 17px;
  color: #fff !important;
  font-weight: 400;
  font-style: italic;
  line-height: 1.7;
  margin-bottom: 0;
}

/* ── References section ──────────────────────────────────────── */
.policy-references__container {
  display: flex;
  flex-direction: row;
}

.policy-references {
  font-size: 14px;
  color: #4c4284;
  line-height: 1.7;
  margin-bottom: 1rem;
  flex: 0.5;
}

.policy-references p,
.policy-references li {
  font-size: 14px !important;
  color: #4c4284 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.7;
}

.policy-references__container .policy-page__footer {
  flex: 0.5;
}


/* ============================================================================
   MOBILE OVERRIDES  (≤ 991px / Bootstrap lg breakpoint)
   ============================================================================ */

@media (max-width: 991.98px) {

  /* ── Layout ───────────────────────────────────────────────── */
  .policy-content-row {
    margin-top: 24px !important;
  }

  .portal-content__left-policy {
    row-gap: 20px;
  }

  /* ── Cover page ───────────────────────────────────────────── */
  .policy-cover {
    min-height: unset;
    padding: 40px 28px;
    padding-bottom: 160px;
    border-radius: 20px;
  }

  .policy-cover__logo img {
    width: 100%;
    max-width: 260px;
  }

  .policy-cover__title {
    font-size: 32px !important;
    margin-bottom: 20px;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .policy-cover__org-title {
    font-size: 24px !important;
    margin-bottom: 20px;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .policy-cover__subtitle-container {
    position: static;
    margin-top: 28px;
    left: unset;
    right: unset;
    bottom: unset;
    row-gap: 8px;
  }

  .policy-cover__subtitle {
    font-size: 14px !important;
  }

  /* ── Policy pages & procedure blocks ─────────────────────── */
  .policy-page,
  .policy-procedures--selected,
  .policy-procedures--unselected {
    padding: 38px;
    border-radius: 20px;
    min-height: unset;
  }

  /* The A4-proportioned page padding is the document's own look and reads
     fine on a tablet; on a phone 38px each side of a ~330px column leaves the
     text in a gutter. */
  @media (max-width: 575.98px) {
    .policy-page,
    .policy-procedures--selected,
    .policy-procedures--unselected {
      padding: 24px 18px;
    }
  }

  .policy-page h1 { font-size: 26px; margin-bottom: 18px; word-break: break-word; }
  .policy-page h2 { font-size: 22px; margin-bottom: 16px; word-break: break-word; }
  .policy-page h3 { font-size: 19px; margin-bottom: 12px; word-break: break-word; }
  .policy-page h4 { font-size: 17px; margin-bottom: 10px; word-break: break-word; }

  .policy-page p,
  .policy-page li {
    font-size: 15px;
  }

  .policy-procedures--selected .policy-procedures__heading,
  .policy-procedures--unselected .policy-procedures__heading {
    font-size: 22px;
  }

  .policy-procedures--selected .policy-section__heading,
  .policy-procedures--unselected .policy-section__heading {
    font-size: 17px;
  }

  .policy-procedures--selected .policy-item,
  .policy-procedures--unselected .policy-item {
    font-size: 15px;
  }

  /* ── TOC sidebar ──────────────────────────────────────────── */
  .policy-sidebar {
    gap: 16px;
    top: 0;
  }

  .policy-toc__title {
    font-size: 20px;
    line-height: 28px;
  }

  /* ── Pledge block ─────────────────────────────────────────── */
  .policy-pledge {
    padding: 28px 24px;
    border-radius: 20px;
    margin-bottom: 32px;
  }

  .policy-pledge__heading {
    font-size: 20px;
  }

  .policy-pledge__body p,
  .policy-pledge__body li {
    font-size: 15px;
  }

  /* ── References ───────────────────────────────────────────── */
  .policy-references__container {
    flex-direction: column;
  }

  .policy-references,
  .policy-references__container .policy-page__footer {
    flex: unset;
    width: 100%;
  }

  /* ── Footer logos ─────────────────────────────────────────── */
  .policy-page__logo,
  .policy-procedures__logo {
    height: 90px;
  }

  .policy-section__heading {
    word-break: break-all;
  }
}

/* ── Extra-small phones (≤ 575px) ──────────────────────────── */
/* The page and procedure padding for this width is the `24px 18px` set inside
   the block above. This block used to restate it as `32px 36px`, which, being
   later in the file, silently undid that phone fix — and gave the cover more
   side padding on a phone (36px) than on a tablet (28px). */
@media (max-width: 575.98px) {

  .policy-cover {
    padding: 32px 20px;
    padding-bottom: 140px;
  }

  .policy-cover__title    { font-size: 26px !important; }
  .policy-cover__org-title { font-size: 20px !important; }

  .policy-page h1 { font-size: 22px; }
  .policy-page h2 { font-size: 19px; }
  .policy-page h3 { font-size: 17px; }
}
/* ============================================================================
   POLICY 403
   ============================================================================ */

.policy-403__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: rgba(255, 89, 100, 0.12);
}

.policy-403__icon {
  font-size: 2rem;
  color: var(--bs-danger);
}

@media (max-width: 1200px) {
  .policy-page__footer img {
    height: 60px;
  }

  .policy-references__container {
    flex-direction: column;
  }
}

/* ============================================================================
   Media Identity Component
   ============================================================================ */

.media-identity__avatar {
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-pa-white);
  flex-shrink: 0;
}

.media-identity__avatar--sm {
  width: 24px;
  height: 24px;
}

.media-identity__avatar--md {
  width: 38px;
  height: 38px;
}

.media-identity__avatar--lg {
  width: 52px;
  height: 52px;
}

.media-identity__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.media-identity__subtitle {
  color: rgba(255, 255, 255, 0.7);
}

.portal-news-section .news-card {
  background-color: white;
  gap: 0 !important;
}

.portal-news-section .news-card .news-card__media img {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.portal-news-section .news-card .news-card__body {
  padding: 20px;
}


/* ─────────────────────────────────────────────────────────────
   Global messages banner (success / error / warning / info)
   Rendered by portal_base.html and onboarding portal_base.html
───────────────────────────────────────────────────────────── */
.pa-messages {
  margin-bottom: 16px;
}

.pa-message {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  word-break: break-word;
}

.pa-message > i {
  flex-shrink: 0;
  margin-top: 2px;
}

.pa-message > span,
.pa-message > strong,
.pa-message > p,
.pa-message > *:not(i) {
  flex: 1 1 0;
  min-width: 0;
}

.pa-message--success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.pa-message--error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.pa-message--info {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.pa-message--warning {
  background: var(--bs-warning);
  color: #92400e;
}

/* ============================================================================
   Banner Overrides
   ============================================================================ */

.concord-webpage .concord_messages {
  z-index: 2000;
}

.concord-webpage .banner__icon,
.portal .banner__icon {
  width: auto !important;
  height: auto !important;
}

/* ============================================================================
  Discount Card
============================================================================ */

/* Mobile first: stacked, image on top. It becomes a row only when the portal
   content area (.portal__content is an inline-size container) is wide enough
   for a 400px image, the 64px gap AND a text column that holds the 253px CTA.
   It used to switch at the lg VIEWPORT breakpoint, but at lg the sidebar takes
   262px: at 992 wide the text column was left ~136px and the CTA ran 20px out
   of the card. */
.discount-card {
  flex-direction: column;
  padding: 16px;
  gap: 20px;
  box-shadow: 3px 3px 8px 0 rgba(23, 16, 63, 0.08);
}

.discount-card__media {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.discount-card__content { min-width: 0; }

.discount-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 253 / 164;
}

.discount-card__badge {
  top: 0;
  right: 0;
  width: 68px;
  height: 68px;
}

.discount-card__badge-text {
  color: #CA9120;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  filter: drop-shadow(1px -1px 2px #FFD26D);
}

.discount-card__badge-percent {
  font-size: 16px;
  vertical-align: super;
}

.discount-card__partner-logo {
  max-width: 100%;
  height: auto;
}

.discount-card__tags { gap: 10px; }

.discount-card__tag {
  height: 26.747px;
  padding: 4px 11px;
  gap: 6px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 16.1px;
  white-space: nowrap;
}

.discount-card__title { font-size: 24px; line-height: 24px; }

.discount-card__description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.discount-card__cta {
  width: 100%;
  height: 54px;
  padding: 14px 32px;
  margin-top: 4px;
}

@container (min-width: 860px) {
  .discount-card { flex-direction: row; gap: 64px; padding: 20px; }
  .discount-card__media { width: auto; display: block; }
  .discount-card__image { width: 400.516px; height: 316.384px; aspect-ratio: 100 / 79; }
  .discount-card__badge { right: -40px; width: 127.032px; height: 125.962px; }
  .discount-card__badge-text { font-size: 45px; }
  .discount-card__badge-percent { font-size: 30px; }
  .discount-card__partner-logo { height: 80px; }
  .discount-card__cta { width: 253px; }
}

/* ============================================================================
   404 Error Page
   ============================================================================ */

.error-page {
  background: url("/static/images/404_bg.904e101815a7.png") no-repeat center center;
  background-size: cover;
}

/* A fixed background only from lg: iOS Safari does not support
   `background-attachment: fixed` and instead scales the image to the height of
   the whole page, so on a phone the photo rendered blown-up and blurred. */
@media (min-width: 992px) {
  .error-page {
    background-attachment: fixed;
  }
}

.error-page__logo {
  width: 25.3125rem;
  max-width: 100%;
  height: 6.5625rem;
  margin-bottom: 2.5rem;
}

.error-page__card {
  border-radius: 12px;
}

.error-page__content {
  max-width: 758px;
}

.error-page__title {
  font-weight: 900 !important;
  max-width: 592px;
}

.error-page__sub-title {
  font-size: 30px;
  max-width: 460px;
}

.error-page__description {
  max-width: 512px;
}

@media (max-width: 575px) {
  .error-page__logo {
    width: 117px;
    height: 42px;
  }

  .error-page__title {
    font-size: 24px !important;
    font-weight: 800 !important;
  }

  .error-page__sub-title {
    font-size: 18px !important;
  }
}

/* ============================================================================
   Shipping Address
   One card, two halves: the notices explaining the membership pack, then a rule,
   then the address form. Measured in a container query rather than a viewport
   media query so the card reflows on its own width — it sits inside the portal
   shell, whose padding makes the card far narrower than the viewport.
   ============================================================================ */
.shipping {
    container-type: inline-size;
    container-name: shipping-card;
}

.shipping__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0;
}

.shipping__header {
    margin-bottom: 20px;
}

/* No max-width here: the notices, inputs and divider all run the full width of
   the card, so capping only the paragraphs left them ending short against
   everything around them. The card's own width is the measure. */
.shipping__intro {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: var(--bs-slate);
    margin-bottom: 0;
}

/* ── Notices ─────────────────────────────────────────────────────────── */

.shipping__notices {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
}

/* A tinted panel with an accent rule reads as an aside. The previous solid
   danger/warning fills competed with the form for attention and turned into
   tall slabs of saturated colour once they wrapped on a narrow screen. */
.shipping__notice {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-radius: var(--pa-radius-badge);
    border-left: 5px solid transparent;
}

.shipping__notice-icon {
    font-size: 20px;
    line-height: 1.5;
    flex-shrink: 0;
}

.shipping__notice-text {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0;
    color: var(--bs-purple-deep);
}

.shipping__notice-label {
    font-weight: 700;
}

.shipping__notice--danger {
    background-color: rgba(var(--bs-danger-rgb), 0.1);
    border-left-color: var(--bs-danger);
}

.shipping__notice--danger .shipping__notice-icon {
    color: var(--bs-danger-dark);
}

.shipping__notice--warning {
    background-color: rgba(var(--bs-warning-rgb), 0.18);
    border-left-color: var(--bs-warning);
}

/* The warning tint is a pale amber, so the icon needs a darker tone than
   --bs-warning itself to stay visible against it. */
.shipping__notice--warning .shipping__notice-icon {
    color: #B07A00;
}

/* ── Form ────────────────────────────────────────────────────────────── */

.shipping__divider {
    border: 0;
    border-top: 1px solid var(--bs-pa-border);
    opacity: 1;
    margin: 36px 0;
}

.shipping__form-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 8px;
}

.shipping__form {
    margin-top: 28px;
}

.shipping__form-row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.shipping__label {
    font-size: 15px;
    font-weight: 600;
    color: var(--bs-purple-deep);
    margin-bottom: 6px;
}

.shipping__required {
    color: var(--bs-danger);
}

.shipping__optional {
    font-weight: 400;
    color: var(--bs-slate);
}

/* Inputs inherit Bootstrap sizing; only the resting border and focus ring are
   restated so they match the portal's palette rather than Bootstrap blue. */
.shipping__form .form-control,
.shipping__form .form-select {
    border-color: var(--bs-pa-border);
    border-radius: var(--pa-radius-badge);
    padding: 12px 16px;
    font-size: 16px;
}

.shipping__form .form-control:focus,
.shipping__form .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.shipping__form .form-control.is-invalid,
.shipping__form .form-select.is-invalid {
    border-color: var(--bs-danger);
}

.shipping__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--bs-pa-border);
}

.shipping__submit-btn {
    padding: 16px 38px;
    font-weight: 700;
}

/* ── Narrow card ─────────────────────────────────────────────────────── */

@container shipping-card (max-width: 575px) {
    .shipping__title {
        font-size: 26px;
    }

    .shipping__form-heading {
        font-size: 21px;
    }

    .shipping__notice {
        padding: 16px 18px;
        gap: 12px;
    }

    .shipping__notice-text,
    .shipping__intro {
        font-size: 15px;
    }

    .shipping__divider {
        margin: 28px 0;
    }

    .shipping__actions {
        margin-top: 28px;
        padding-top: 24px;
    }

    /* A full-bleed button is the easiest tap target on a phone. */
    .shipping__submit-btn {
        width: 100%;
        padding: 16px 24px;
    }
}

/* Container queries need a supporting browser; without one the card keeps its
   desktop type scale, which would overflow a phone. Repeat the essentials as a
   viewport fallback for those engines only. */
@supports not (container-type: inline-size) {
    @media (max-width: 767.98px) {
        .shipping__title {
            font-size: 26px;
        }

        .shipping__form-heading {
            font-size: 21px;
        }

        .shipping__submit-btn {
            width: 100%;
        }
    }
}

/* ==========================================================================
   Playful Bytes Banner
   ========================================================================== */

.playful-bytes-banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: #0A84FF;
}

.playful-bytes-banner__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.playful-bytes-banner__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 24px;
  text-shadow: 0px 1px 10px rgba(0, 0, 0, 0.4);
}

.playful-bytes-banner__title {
  color: #FFFFFF;
  font-weight: 900;
  font-size: 24px;
  line-height: 28px;
  margin: 0 0 16px;
}

.playful-bytes-banner__cta {
  display: flex;
}

.playful-bytes-banner__button {
  gap: 8px;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 900;
  line-height: 13px;
  text-align: center;
  box-shadow: 0 0px 16px rgba(0, 0, 0, 0.4);
}

@container resources (min-width: 576px) {
  .playful-bytes-banner__content {
    padding: 32px;
    max-width: 80%;
  }

  .playful-bytes-banner__title {
    font-size: 32px;
    line-height: 36px;
    margin-bottom: 20px;
  }
}

@container resources (min-width: 768px) {
  .playful-bytes-banner {
    aspect-ratio: 121 / 30;
    border-radius: 22px;
  }

  .playful-bytes-banner__image {
    border-radius: 22px;
    opacity: 1;
  }

  .playful-bytes-banner__content {
    padding: 40px;
    max-width: 60%;
  }

  .playful-bytes-banner__title {
    font-size: 34px;
    line-height: 36px;
    margin-bottom: 14px;
  }

  .playful-bytes-banner__button {
    padding: 14px 32px;
    gap: 12px;
    font-size: 14px;
    line-height: 15px;
  }
}

@container resources (min-width: 992px) {
  .playful-bytes-banner__content {
    padding: 40px 48px;
    max-width: 55%;
  }

  .playful-bytes-banner__title {
    font-size: 40px;
    line-height: 44px;
    margin-bottom: 12px;
  }
}

@container resources (min-width: 1200px) {
  .playful-bytes-banner__title {
    font-size: 48px;
    line-height: 52px;
    margin-bottom: 20px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Organization switcher

   Two pieces: a compact trigger row in the profile dropdown, and a modal
   holding the full list. Keeping the list out of the dropdown stops the
   profile menu growing with the number of organizations, and lets the list
   inherit Bootstrap's responsive modal sizing rather than needing a
   hand-built mobile layout.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Trigger row (profile dropdown) ─────────────────────────────────────── */

.org-switcher-trigger {
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}

.org-switcher-trigger__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}

.org-switcher-trigger__current {
  font-size: 11.5px;
  color: #9ca3af;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-switcher-trigger__count {
  flex-shrink: 0;
  background: #efeaff;
  color: #4b3bcb;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
}

/* ── Modal ──────────────────────────────────────────────────────────────── */

.org-switcher-modal__content {
  border: none;
  border-radius: 18px;
  overflow: hidden;
}

.org-switcher-modal__header {
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid #ececf3;
}

.org-switcher-modal__title {
  font-size: 19px;
  font-weight: 800;
  color: #1a1040;
  margin: 0 0 2px;
}

.org-switcher-modal__subtitle {
  font-size: 13px;
  color: #9ca3af;
}

/* modal-dialog-scrollable already scrolls this region; the padding just keeps
   rows off the rounded corners. */
.org-switcher-modal__body {
  padding: 10px;
}

.org-switcher-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: none;
  text-align: left;
  font-family: inherit;
  margin-bottom: 6px;
}

.org-switcher-option--action {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.org-switcher-option--action:hover,
.org-switcher-option--action:focus-visible {
  background: #f8f6ff;
  border-color: #d9d4f7;
}

.org-switcher-option--current {
  background: #f6f4ff;
  border-color: #d9d4f7;
}

.org-switcher-option__mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bs-purple-deep, #361A59);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  overflow: hidden;
}

.org-switcher-option__mark--current {
  background: var(--bs-primary, #8B3DFF);
}

.org-switcher-option__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.org-switcher-option__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.org-switcher-option__name {
  font-size: 14px;
  font-weight: 700;
  color: #1a1040;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-switcher-option__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #9ca3af;
  margin-top: 2px;
}

.org-switcher-option__pill {
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.org-switcher-option__pill--suspended { background: #fff4e5; color: #b45309; }
.org-switcher-option__pill--archived  { background: #f1f1f4; color: #4b5563; }
.org-switcher-option__pill--pending   { background: #eef2ff; color: #4338ca; }

.org-switcher-option__current-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bs-primary, #8B3DFF);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.org-switcher-option__go {
  color: #c3c7d1;
  flex-shrink: 0;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .org-switcher-modal__header { padding: 16px 16px 12px; }
  .org-switcher-modal__title { font-size: 17px; }
  .org-switcher-option { padding: 10px; gap: 10px; }
  .org-switcher-option__mark { width: 36px; height: 36px; }

  /* The badge competes with a long org name on narrow screens — the tinted
     row already signals "current", so drop the label and keep the tick. */
  .org-switcher-option__current-badge span { display: none; }
}

body .impersonation-banner {
  opacity: 0.5;
}