/* Theming CSS */
  /* Header color */
  .u-org--header {
    background-color: #111111 !important;
  }


  /* Header text color */
  .u-org--header {
    color: #000000;
  }

  button.u-org--header.appheader__button:hover,
  button.u-org--header.appheader__button:active {
    background-color: rgba(0, 0, 0, 0.1) !important;
  }

  button.u-org--header:not(.appnav__link):hover,
  button.u-org--header:not(.appnav__link):active,
  button.u-org--header:not(.appnav__link):focus {
    color: #000000;
  }

  button.u-org--header.appheader__searchbutton,
  button.u-org--header.appheader__categoriesbutton,
  input[type="search"].u-org--header {
    border-color: rgba(0, 0, 0, 0.3) !important;
  }

  button.u-org--header.appheader__searchbutton:hover,
  button.u-org--header.appheader__searchbutton:active,
  button.u-org--header.appheader__searchbutton:focus,
  button.u-org--header.appheader__searchbutton:focus-visible,
  button.u-org--header.appheader__categoriesbutton:hover,
  button.u-org--header.appheader__categoriesbutton:active,
  button.u-org--header.appheader__categoriesbutton:focus,
  button.u-org--header.appheader__categoriesbutton:focus-visible,
  input[type="search"].u-org--header:hover,
  input[type="search"].u-org--header:active,
  input[type="search"].u-org--header:focus,
  input[type="search"].u-org--header:focus-visible {
    border-color: rgba(0, 0, 0, 0.5) !important;
  }

  input[type="search"].u-org--header:focus {
    border-color: transparent !important;
  }

  .u-org--header .search__input--appheader:not(:focus):-ms-input-placeholder {
    color: #000000;
  }

  .u-org--header .search__input--appheader:not(:focus)::-ms-input-placeholder {
    color: #000000;
  }

  .u-org--header .search__input--appheader:not(:focus)::placeholder {
    color: #000000;
  }


  /* Organization color */
  .u-orgcolor--color,
  .u-orgcolor--hovercolor:hover {
    color: #1ED760 !important;
  }
  .u-orgcolor--bg,
  .u-orgcolor--hoverbg:hover {
    background-color: #1ED760 !important;
  }
  .u-orgcolor--border,
  .u-orgcolor--border:link,
  .u-orgcolor--border:visited,
  .u-orgcolor--border:hover,
  .u-orgcolor--border:active,
  .u-orgcolor--border:focus {
    border-color: #1ED760;
    color: #1ED760;
  }
  .u-orgcolor--borderonly,
  .u-orgcolor--borderonly:link,
  .u-orgcolor--borderonly:visited,
  .u-orgcolor--borderonly:hover,
  .u-orgcolor--borderonly:active,
  .u-orgcolor--borderonly:focus {
    border-color: #1ED760;
  }
  .u-orgcolor--borderhover:hover,
  .u-orgcolor--borderhover:hover {
    border-color: #1ED760;
  }
  .u-orgcolor--svgfill {
    color: #1ED760;
    fill: #1ED760;
  }
  .u-orgcolor--svgstroke {
    color: #1ED760;
    stroke: #1ED760;
  }
  .u-orgcolor--svgall {
    color: #1ED760;
    fill: #1ED760;
    stroke: #1ED760;
  }
  .u-org--svgactive[data-active="true"],
  .u-org--svgactive:hover {
    color: #1ED760 !important;
    stroke: #1ED760 !important;
  }
  .u-org--barchart:after {
    background-color: #1ED760 !important;
  }
  .u-org--piechart {
    color: rgba(0, 0, 0, 0.15);
    stroke: #1ED760;
  }
  .u-org--tooltip {
    background-color: #1ED760;
  }
  .u-org--tooltiptop:before {
    border-top-color: #1ED760;
  }
  .u-org--tooltipright:before {
    border-right-color: #1ED760;
  }
  .u-org--tooltipbottom:before {
    border-bottom-color: #1ED760;
  }
  .u-org--tooltipleft:before {
    border-left-color: #1ED760;
  }
  .updatecard__heading--new:before {
    background-color: #1ED760;
  }
  .session:before {
    background-color: #1ED760;
  }
  .activityprogress__value {
    background-color: #1ED760;
  }
}
  .iconbutton,
  .comments__headerbutton, {
    color: #1ED760;
  }

  .u-org--catalogflag {
    background-image: linear-gradient(225deg, #1ED760 50%, transparent 50%);
  }

  .u-org--catalogflagsearch {
    background-image: linear-gradient(225deg, #1ED760 50%, transparent 50%);
  }

  .u-org--catalogflag-in-progress {
    background-image: linear-gradient(225deg, #fff 47%, #1ED760 3%, transparent 50%);
    border-top: 1px solid #1ED760;
    border-right: 1px solid #1ED760;
    svg {
      color: #1ED760;
    }
  }

  .u-org--enrollmentmsgimage {
    background-color: #1ED760
  }

  .u-org--catalogflagbg {
    background-image: linear-gradient(225deg, #1ED760 50%, transparent 50%);
  }
  .u-org--catalogflagfill {
    color: #1ED760;
    fill: #1ED760;
  }

  .u-org--tabactive,
  .u-org--tab:hover,
  .u-org--tab:active,
  .u-org--tab:focus {
    border-color: #1ED760;
  }
  .link--primary,
  .u-org--link,
  .u-org--link:link,
  .u-org--link:visited,
  .u-org--link:hover,
  .u-org--link:active,
  .u-org--link:focus {
    color: #1ED760;
  }
  .u-org--linkhover:hover,
  .u-org--linkhover:active,
  .u-org--linkhover:focus {
    color: #1ED760;
  }

.button--primary:not([disabled]),
  .button--primary:link,
  .button--primary:visited,
  .button--primary:hover,
  .button--primary:active,
  .button--primary:focus,
  .blankslate .button,
  .coursebar__btn--active,
  .coursebar__btn--active:hover,
  .coursebar__btn--active:focus,
  .tagbutton--selected:not(.tagbutton--taxonomy) {
    background-color: #1ED760 !important;
    border-color: #1ED760 !important;
    color: #fff !important;
  }


  .tooltip {
    background-color: #1ED760;
  }
  .tooltip--left::before {
    border-left-color: #1ED760;
  }
  .tooltip--right::before {
    border-right-color: #1ED760;
  }
  .tooltip--bottom::before,
  .tooltip--bottom-left::before,
  .tooltip--bottom-right::before {
    border-bottom-color: #1ED760;
  }
  .tooltip--top::before,
  .tooltip--top-left::before,
  .tooltip--top-right::before {
    border-top-color: #1ED760;
  }
  .checkbox--primary .checkbox__input:checked + .checkbox__ui {
    background-color: #1ED760;
    border: 2px solid #1ED760;
  }
  .question .checkbox__input:checked + .checkbox__ui {
    background-color: #1ED760;
    border: 1px solid #1ED760;
  }
  .question .radio__input:checked + .radio__ui {
    border-color: #1ED760;
  }
  .question .radio__input:checked + .radio__ui::before {
    background-color: #1ED760;
  }
  .assessment__completedicon, .assessment__gradingicon {
    background-color: #1ED760;
  }
  .enrollmentmsg__image.enrollmentmsg__image--complete  {
    background-color: #1ED760;
  }

  .rank__listitem .radio__input:checked + .radio__ui {
    border-color: #1ED760;
  }
  .rank__listitem .radio__input:checked + .radio__ui::before {
    background-color: #1ED760;
  }
  .sharelinks__link:hover,
  .sharelinks__link:focus,
  .sharelinks__link.button:hover,
  .sharelinks__link.button:focus {
    color: #1ED760;
  }
  .rating input[type="radio"]:not([disabled]) + label {
    color: #1ED760;
  }
  .courselist__item[data-status="completed"] .courselist__marker, .courselist__item[data-status="in-progress"] .courselist__marker,
  .pathmenu__sectionitem[data-status="completed"] .pathmenu__itemmarker, .pathmenu__sectionitem[data-status="in-progress"] .pathmenu__itemmarker {
    color: #1ED760;
  }
  .courselist__item[data-status="in-progress"]:not([data-shape]) .courselist__marker {
    border-color: #1ED760;
  }

    .u-org--catalogflag-in-progress svg {
    color: #1ED760;
  }
}
  .pageoutline__currentlink,
  .pageoutline__currentlink:hover,
  .pageoutline__currentlink:focus {
    color: #1ED760;
  }
  .tagbutton--selected,
  .tagbutton--selected:hover,
  .tagbutton--selected:active,
  .tagbutton--selected.tagbutton--taxonomy:hover,
  .tagbutton--selected.tagbutton--taxonomy:active {
    border-color: inherit !important;
    background-color: #1ED760;
  }
  .tagbutton--selected.tagbutton--taxonomy {
    background-color: #1ED7600c !important;
    border-color: #1ED760 !important;
  }
  .datepicker .pika-prev,
  .datepicker .pika-next {
    border: 1px solid #1ED760;
  }
  .datepicker .pika-prev,
  .datepicker .is-rtl .pika-next {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2025'%20version%3D'1.1'%3E%3Cpolyline%20fill%3D'none'%20stroke%3D'%231ED760'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20points%3D'16.7%209.4%2011.6%2012.4%2016.6%2015.3'%2F%3E%3C%2Fsvg%3E");
  }
  .datepicker .pika-next,
  .datepicker .is-rtl .pika-prev {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20version%3D'1.1'%20viewBox%3D'0%200%2030%2025'%3E%3Cpath%20d%3D'M12.6%209.5L17.7%2012.4%2012.6%2015.3'%20fill-opacity%3D'0'%20stroke%3D'%231ED760'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
  }
  .datepicker .is-today .pika-button {
    color: #1ED760;
  }
  .datepicker .is-selected .pika-button,
  .datepicker .is-selected .pika-button:hover {
    background: #1ED760;
  }
  .banner__icon {
    color: #1ED760;
    background: #1ED760;
  }

  /* Branding logo */
  .header__titleicon.u-org--titleicon {
    max-width: 120px;
  }
  @media (min-width: 370px) {
    .header__titleicon.u-org--titleicon {
      max-width: 160px;
    }
  }
  .u-org--titleicon + .header__titletext,
  .u-org--titleicon + .sidemenu__titletext {
    display: none;
  }
  .u-org--header .header__titlelink {
    text-overflow: clip;
  }

  /* Custom CSS */
  /* ==========================================================================SPOTIFY ADVERTISING ACADEMY — INTELLUM CUSTOM CSSVersion 2.2 — Custom Search icon + corrected header spacing========================================================================== */

/* ==========================================================================

SPOTIFY FONT REGISTRATION========================================================================== */

@font-face {font-family: "Spotify Mix";src: url("https://encore.scdn.co/fonts/SpotifyMixUI-Regular-76c92fb1a35c462f73429fa8865163eb.woff2")format("woff2");font-style: normal;font-weight: 400;font-display: swap;}

@font-face {font-family: "Spotify Mix";src: url("https://encore.scdn.co/fonts/SpotifyMixUI-Bold-09c45a3a0ce9d2971e62cb26e97760fb.woff2")format("woff2");font-style: normal;font-weight: 700;font-display: swap;}

@font-face {font-family: "Spotify Mix Title";src: url("https://encore.scdn.co/fonts/SpotifyMixUITitleVariable-08bab3354d40f74e5177917b5ae80894.woff2")format("woff2");font-style: normal;font-weight: 100 900;font-display: swap;}

/* ==========================================================================2. DESIGN TOKENS========================================================================== */

:root {--grid-max-width: 1440px;--grid-columns: 12;--grid-margin: 64px;--grid-gutter: 48px;

--color-spotify-black: #111111;--color-spotify-green: #1ed760;--color-white: #ffffff;

--color-gray-20: #242424;--color-gray-30: #535353;--color-gray-80: #cccccc;

--color-aqua: #91eeda;--color-violet: #d8a3ff;--color-yellow: #f5ff46;

/* Increased to provide breathing room above and below controls */--header-height: 56px;

--header-logo-width: 180px;--header-logo-art-height: 25px;

--header-item-gap: 8.57px;--header-item-padding-x: 8.57px;}

/* ==========================================================================3. BASE TYPOGRAPHY========================================================================== */

html,body,button,input,select,textarea,p,a,li,span,label,legend,table,th,td {font-family:"Spotify Mix",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;}

body {margin: 0;background-color: var(--color-spotify-black);color: var(--color-white);}

h1,h2,h3,h4,h5,h6,.u-headingpage--activity,.activityheading__name {font-family:"Spotify Mix Title","Spotify Mix",sans-serif;

color: inherit;}

h1,.u-headingpage--activity,.activityheading__name {font-weight: 800;}

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

/* ==========================================================================4. PAGE FOUNDATION========================================================================== */

html,body,main,.catalog,.catalogpage,.cataloghome,.catalog-home,.catalog__content,.cataloghome__content,.homepage,.homepage__content,.page,.pagecontent,.page-content,.maincontent,.main-content,.contentwrapper,.content-wrapper,.student-home,.student-catalog {background-color: var(--color-spotify-black) !important;color: var(--color-white);}

/* ==========================================================================5. ADS.SPOTIFY GRID========================================================================== */

.grid-container {width: 100%;max-width: var(--grid-max-width);

margin-right: auto;margin-left: auto;

padding-right: var(--grid-margin);padding-left: var(--grid-margin);

box-sizing: border-box;

display: grid;grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));column-gap: var(--grid-gutter);}

/* ==========================================================================6. ACCESSIBILITY========================================================================== */

main a {color: inherit;}

main a,button,input,select,textarea {outline: none;}

main a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-spotify-green) !important;
  outline-offset: 3px !important;
}

/* ==========================================================================7. LEARNER HEADER FOUNDATION========================================================================== */

.appheader,.appheader__navigation,.appheader__titlelink,.appnav,.appnav__text,.appnav__list {background-color: var(--color-spotify-black) !important;color: var(--color-white) !important;}

.appheader,.appheader__navigation,.appheader__section--title,.appheader__section--menu,.appheader__section--nav,.appnav,.appnav__text,exceed-nav-text {min-height: var(--header-height) !important;height: var(--header-height) !important;}

.appheader__navigation,.appheader__section--title,.appheader__section--menu,.appheader__section--nav,.appnav,.appnav__text,exceed-nav-text {align-items: center !important;}

.appheader__navigation {display: flex; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box;}

.appheader__section--title {flex: 0 0 auto;min-width: 0;margin-right: var(--header-item-gap);}

.appheader__section--menu,.appheader__section--nav,.appheader__navigation {min-width: 0;}

.appnav,.appnav__text,exceed-nav-text {flex: 0 1 auto;min-width: max-content;overflow: visible;}

/* ==========================================================================8. HEADER LOGO========================================================================== */

.appheader__titlelink {display: flex !important;align-items: center !important;justify-content: flex-start;

width: var(--header-logo-width);min-width: var(--header-logo-width);height: var(--header-height);

padding: 0 !important;margin: 0;

box-sizing: border-box;}

.appheader__titleimage {display: block;

width: var(--header-logo-width) !important;height: auto !important;

max-width: var(--header-logo-width) !important;max-height: var(--header-logo-art-height) !important;

object-fit: contain;object-position: left center;}

/* ==========================================================================9. LEFT-SIDE NAVIGATION========================================================================== */

.appheader .appnav__list {display: flex;align-items: stretch;flex-wrap: nowrap;

gap: var(--header-item-gap);

min-height: var(--header-height);height: var(--header-height);

margin: 0;padding: 0; width: max-content; min-width: max-content;}

.appheader .appnav__listitem:not(.hidden) {display: flex;align-items: stretch;flex: 0 0 auto;

min-height: var(--header-height);height: var(--header-height);

margin: 0;padding: 0;}

/* Preserve Intellum’s hidden overflow item */

.appheader .appnav__listitem.hidden,.appheader li.hidden,.appheader [hidden] {display: none !important;}

.appheader .appnav__link {display: flex;align-items: center;justify-content: center;

min-height: var(--header-height);height: var(--header-height);

padding: 0 var(--header-item-padding-x);

margin: 0;

box-sizing: border-box;white-space: nowrap;}

/* ==========================================================================10. NAVIGATION TYPOGRAPHY========================================================================== */

.appheader .appnav__link,.appheader .appnav__link,.appheader .appnav__link,.appheader .appnav__link,.appheader .appnav__link,.appheader .appnav__link,.appheader .appnav__link--current,.appheader .appnav__link[aria-current="page"] {color: var(--color-white) !important;

font-family:"Spotify Mix Title","Spotify Mix",sans-serif;

font-size: 12px;font-weight: 800;line-height: 15.4px;letter-spacing: 0;

text-decoration: none !important;}

/* ==========================================================================11. RIGHT-SIDE HEADER LAYOUT========================================================================== */

.appheader__section--menu,.appheader__navigation > .appheader__section:last-child {margin-left: auto;}

.appheader__section--menu {display: flex;align-items: center !important;justify-content: flex-end;

min-height: var(--header-height) !important;height: var(--header-height) !important;

gap: 14px;}

/* ==========================================================================12. SEARCH — CUSTOM CSS MAGNIFYING GLASS========================================================================== */

.appheader .appheader__searchbutton,.appheader button.u-org--header.appheader__searchbutton {position: relative;

display: inline-flex !important;align-items: center !important;justify-content: flex-start !important;

width: auto !important;min-width: 112px !important;height: 38px !important;

padding: 0 10px 0 36px !important;margin: 0 !important;

background: transparent !important;background-color: transparent !important;color: var(--color-white) !important;

border: 0 !important;border-color: transparent !important;border-radius: 0 !important;

font-family: "Spotify Mix", sans-serif !important;font-size: 14px !important;font-weight: 400 !important;line-height: 18px !important;

box-shadow: none !important;text-decoration: none !important;}

/*Completely hide Intellum’s native Search SVG.Its graphic includes the square that was becoming white.*/

.appheader .appheader__searchbuttonicon,.appheader .appheader__icon--searchbuttonicon,.appheader .appheader__searchbutton svg {display: none !important;}

/* Magnifying-glass circle */

.appheader .appheader__searchbutton::before {content: "";

position: absolute;left: 9px;top: 50%;

width: 12px;height: 12px;

border: 2px solid var(--color-white);border-radius: 50%;

background: transparent;

box-sizing: border-box;

transform: translateY(-58%);}

/* Magnifying-glass handle */

.appheader .appheader__searchbutton::after {content: "";

position: absolute;left: 20px;top: 24px;

width: 7px;height: 2px;

background-color: var(--color-white);border-radius: 2px;

transform: rotate(45deg);transform-origin: left center;}

.appheader .appheader__searchbutton *,.appheader .appheader__searchbutton span {color: var(--color-white) !important;opacity: 1 !important;}

/* Keep Search transparent in all states */

.appheader .appheader__searchbutton,.appheader .appheader__searchbutton,.appheader .appheader__searchbutton {background: transparent !important;background-color: transparent !important;color: var(--color-white) !important;

border: 0 !important;

outline: 0 !important;box-shadow: none !important;}

/* ==========================================================================13. TOPICS PILL========================================================================== */

.appheader__categories {display: inline-flex;align-items: center;

height: 38px;

color: var(--color-white) !important;background: transparent !important;}

.appheader button.u-org--header.appheader__categoriesbutton,.appheader button.button.button--toggle.appheader__categoriesbutton.u-org--header {display: inline-flex !important;align-items: center !important;justify-content: space-between !important;

width: 132px !important;min-width: 132px !important;

height: 38px !important;min-height: 38px !important;

padding: 0 16px !important;margin: 0 !important;

background: transparent !important;background-color: transparent !important;color: var(--color-white) !important;

border: 1px solid var(--color-white) !important;border-radius: 999px !important;

font-family: "Spotify Mix", sans-serif !important;font-size: 14px !important;font-weight: 400 !important;line-height: 18px !important;letter-spacing: 0 !important;

text-align: left;text-decoration: none !important;

appearance: none !important;box-shadow: none !important;opacity: 1 !important;}

.appheader .appheader__categoriesbutton *,.appheader .appheader__categoriesbutton span,.appheader .appheader__categoriesbutton div {color: var(--color-white) !important;opacity: 1 !important;}

.appheader .appheader__categoriesbutton svg,.appheader .appheader__categoriesbutton [class*="icon"] {color: var(--color-white) !important;

border: 0 !important;outline: 0 !important;box-shadow: none !important;}

/* Keep pill transparent with white outline in every state */

.appheader button.u-org--header.appheader__categoriesbutton,.appheader button.u-org--header.appheader__categoriesbutton,.appheader button.u-org--header.appheader__categoriesbutton,.appheader button.u-org--header.appheader__categoriesbutton[aria-expanded="true"],.appheader button.button.button--toggle.appheader__categoriesbutton.u-org--header,.appheader button.button.button--toggle.appheader__categoriesbutton.u-org--header,.appheader button.button.button--toggle.appheader__categoriesbutton.u-org--header,.appheader button.button.button--toggle.appheader__categoriesbutton.u-org--header[aria-expanded="true"] {background: transparent !important;background-color: transparent !important;color: var(--color-white) !important;

border: 1px solid var(--color-white) !important;

outline: 0 !important;box-shadow: none !important;}

/* ==========================================================================14. APP LAUNCHER AND PROFILE========================================================================== */

#app-org-switcher,#profile-button {display: flex;align-items: center;justify-content: center;

width: 36px;height: 38px;

padding: 0;margin: 0;

color: var(--color-white) !important;background-color: transparent !important;

border: 0 !important;}

#app-org-switcher,#app-org-switcher,#profile-button,#profile-button {background-color: transparent !important;outline: 0 !important;}

.appheader svg,.appnav svg,.appheader [class*="icon"] {color: var(--color-white) !important;}

#app-org-switcher svg,#profile-button svg {fill: currentColor;}

/* ==========================================================================15. PROFILE DROPDOWN========================================================================== */

#usermenu .appusermenu__actionlist,#usermenu .appusermenu__actionlistitem,#usermenu .btn__logout {background-color: var(--color-white) !important;}

#usermenu .appusermenu__actionlink,#usermenu .appusermenu__actionlink,#usermenu .appusermenu__actionlink,#usermenu .appusermenu__actionlink,#usermenu .appusermenu__actionlink,#usermenu .appusermenu__actionlink,#usermenu .appusermenu__actionlink *,#usermenu .btn__logout,#usermenu .btn__logout *,#usermenu .btn__logout a,#usermenu .btn__logout button {color: var(--color-spotify-black) !important;text-decoration: none !important;}

#usermenu .appusermenu__actionlink svg,#usermenu .appusermenu__actionlink i,#usermenu .appusermenu__actionlink [class*="icon"],#usermenu .btn__logout svg,#usermenu .btn__logout i,#usermenu .btn__logout [class*="icon"] {color: var(--color-spotify-black) !important;fill: currentColor !important;}

#usermenu .appusermenu__actionlink,#usermenu .appusermenu__actionlink,#usermenu .btn__logout,#usermenu .btn__logout {background-color: #f3f3f3 !important;color: var(--color-spotify-black) !important;}

#usermenu .appusermenu__header,#usermenu .appusermenu__header--user,#usermenu .appusermenu__header--user * {color: var(--color-white) !important;}

/* ==========================================================================16. BUTTONS========================================================================== */

.button--primary,.quickstartbtn {font-family: "Spotify Mix", sans-serif;font-weight: 700;}

.button--primary {background-color: var(--color-spotify-green);border-color: var(--color-spotify-green);color: var(--color-spotify-black);}

.button--primary,.button--primary {background-color: var(--color-white);border-color: var(--color-white);color: var(--color-spotify-black);}

/* ==========================================================================17. HOMEPAGE SECTIONS========================================================================== */

.home-section,.homepage-section,.catalog-section {background-color: var(--color-spotify-black);color: var(--color-white);}

.home-section__title,.homepage-section__title,.catalog-section__title {color: var(--color-white);

font-family:"Spotify Mix Title","Spotify Mix",sans-serif;

font-weight: 700;}

/* ==========================================================================18. CERTIFICATION / TOPIC CARDS========================================================================== */

.catalogcard,.catalog-card,.contentcard,.content-card,.topiccard,.topic-card {overflow: hidden;

background-color: var(--color-spotify-black);border-color: var(--color-gray-30);

color: var(--color-white);}

.catalogcard a,.catalog-card a,.contentcard a,.content-card a,.topiccard a,.topic-card a {color: inherit;}

.catalogcard__title,.catalog-card__title,.contentcard__title,.content-card__title,.topiccard__title,.topic-card__title {color: var(--color-white);

font-family: "Spotify Mix", sans-serif;font-weight: 700;}

/* ==========================================================================19. CUSTOM EMBEDDED HTML SECTIONS========================================================================== */

.spotify-section {width: 100%;

padding-top: 80px;padding-bottom: 80px;

background-color: var(--color-spotify-black);color: var(--color-white);

box-sizing: border-box;}

.spotify-section *,.spotify-section *::before,.spotify-section *::after {box-sizing: border-box;}

.spotify-section h2 {margin-top: 0;margin-bottom: 20px;

color: var(--color-white);

font-family:"Spotify Mix Title","Spotify Mix",sans-serif;

font-size: clamp(2rem, 4vw, 4rem);font-weight: 700;line-height: 1.05;}

.spotify-section h3 {color: inherit;

font-family:"Spotify Mix Title","Spotify Mix",sans-serif;

font-weight: 700;}

.spotify-section p {color: inherit;

font-family: "Spotify Mix", sans-serif;font-size: 1rem;line-height: 1.5;}

/* ==========================================================================20. MY LEARNING PAGE========================================================================== */

.profile__name,.profile__title,.profile__role,.profile__details,.profileheader,.profileheader *,.mylearning-profile,.mylearning-profile *,.mylearning__navigation,.mylearning__navigation a,.mylearning__navigation span,.mylearning__navigation li,.mylearning,.mylearning h1,.mylearning h2,.mylearning h3,.mylearning h4,.mylearning p,.mylearning .heading,.mylearning .title,.mylearning .empty-state,.mylearning .empty-state * {color: var(--color-white) !important;}

.mylearning input[type="search"],.mylearning input[type="text"],.mylearning select {background-color: var(--color-gray-20);color: var(--color-white);

border: 1px solid var(--color-gray-30);}

.mylearning input::placeholder {color: var(--color-gray-80);}

/* ==========================================================================21. FOOTER========================================================================== */

footer,.footer,.appfooter {background-color: var(--color-spotify-black);color: var(--color-white);}

footer a,.footer a,.appfooter a {color: var(--color-white);}

/* ==========================================================================22. RESPONSIVE========================================================================== */

@media (max-width: 1024px) {
  :root {--grid-margin: 32px;--grid-gutter: 24px;

--header-logo-width: 150px;
--header-logo-art-height: 21px;

--header-item-gap: 7px;
--header-item-padding-x: 7px;

}

.appheader .appheader__searchbutton {min-width: 100px !important;}

.appheader button.u-org--header.appheader__categoriesbutton {width: 116px !important;min-width: 116px !important;}}

@media (max-width: 768px) {
  :root {--header-logo-width: 138px;--header-logo-art-height: 20px;

--header-item-gap: 6px;
--header-item-padding-x: 6px;

}

.appheader .appheader__searchbutton {width: 40px !important;min-width: 40px !important;

padding-right: 0 !important;
padding-left: 34px !important;

overflow: hidden;

color: transparent !important;

}

.appheader .appheader__searchbutton span {color: transparent !important;}

.appheader button.u-org--header.appheader__categoriesbutton {width: 100px !important;min-width: 100px !important;

padding: 0 12px !important;

}

.spotify-section {padding-top: 56px;padding-bottom: 56px;}}

@media (max-width: 600px) {
  :root {--grid-margin: 20px;--grid-gutter: 16px;

--header-logo-width: 125px;
--header-logo-art-height: 19px;

    --header-item-gap: 4px;
    --header-item-padding-x: 5px;
  }
}
	/* ==========================================================================GET CERTIFIED SECTION========================================================================== */

.spotify-certifications,.spotify-certifications *,.spotify-certifications *::before,.spotify-certifications *::after {box-sizing: border-box;}

.spotify-certifications {width: min(calc(100% - 128px), 942px);margin: 0 auto;padding: 80px 0 96px;

background-color: #111111;color: #ffffff;}

/* Each certification row */.spotify-certifications .cert-row {position: relative;

display: grid;grid-template-columns: 440px minmax(0, 1fr);align-items: center;column-gap: 48px;

width: 100%;min-height: 266px;

margin: 0 0 48px;padding: 0;

color: #ffffff;cursor: pointer;}

.spotify-certifications .cert-row {margin-bottom: 0;}

/* Keyboard focus */.spotify-certifications .cert-row {outline: 3px solid #1ed760;outline-offset: 6px;}

/* Image area */.spotify-certifications .cert-image {width: 440px;height: 266px;

overflow: hidden;border-radius: 8px;

background-color: #242424;}

.spotify-certifications .cert-image img {display: block;

width: 100%;height: 100%;

object-fit: cover;object-position: center;}

/* Text column */.spotify-certifications .cert-content {display: flex;flex-direction: column;justify-content: center;

min-width: 0;}

/* Beginner / Advanced eyebrow */.spotify-certifications .cert-level {margin: 0 0 24px;

color: #ffffff;

font-family:"Spotify Mix",Arial,sans-serif;

font-size: 16px;font-weight: 500;line-height: 1.4;}

/* Heading */.spotify-certifications .cert-content h3 {margin: 0 0 16px !important;

color: #ffffff !important;

font-family:"Spotify Mix Title","Spotify Mix",Arial,sans-serif !important;

font-size: 32px !important;font-weight: 800 !important;line-height: 110% !important;letter-spacing: -0.03em !important;}

/* Description */.spotify-certifications .cert-content p {max-width: 420px;margin: 0 0 20px !important;

color: #ffffff !important;

font-family:"Spotify Mix",Arial,sans-serif !important;

font-size: 18px !important;font-weight: 400 !important;line-height: 160% !important;letter-spacing: 0 !important;}

/* Metadata row */.spotify-certifications .cert-meta {display: flex;align-items: center;flex-wrap: wrap;gap: 8px;

color: #ffffff;

font-family:"Spotify Mix",Arial,sans-serif;

font-size: 14px;font-weight: 400;line-height: 1.4;}

.spotify-certifications .cert-meta span:not(.green-dot)::after {content: "•";margin-left: 8px;opacity: 0.7;}

.spotify-certifications .cert-meta span:nth-child(2)::after {content: "";margin: 0;}

.spotify-certifications .green-dot {display: inline-block;

width: 8px;height: 8px;

margin-left: 2px;

border-radius: 50%;background-color: #1ed760;}

/* Hover state */.spotify-certifications .cert-row {transition:transform 180ms ease,opacity 180ms ease;}

.spotify-certifications .cert-row {transform: translateY(-2px);}

.spotify-certifications .cert-row .cert-content h3 {text-decoration: underline;text-decoration-color: #1ed760;text-underline-offset: 5px;}

/* Responsive */@media (max-width: 1100px) {.spotify-certifications {width: min(calc(100% - 64px), 942px);}

.spotify-certifications .cert-row {grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);column-gap: 32px;}

.spotify-certifications .cert-image {width: 100%;}}

@media (max-width: 820px) {.spotify-certifications {width: min(calc(100% - 40px), 620px);padding: 64px 0 72px;}

.spotify-certifications .cert-row {grid-template-columns: 1fr;row-gap: 24px;

margin-bottom: 56px;

}

.spotify-certifications .cert-image {width: 100%;height: auto;aspect-ratio: 440 / 266;}

.spotify-certifications .cert-level {margin-bottom: 16px;}

.spotify-certifications .cert-content h3 {font-size: 28px !important;}
	}

/* ==========================================================================
   NATIVE INTELLUM COURSE / CERTIFICATION PATH PAGE
   White course body + Spotify-black text
   Global learner header intentionally left untouched
   ========================================================================== */

/* White page canvas beneath the hero/header */
body[data-controller="tree_activity"],
body[data-controller="tree_activity"] main#main.main--student,
body[data-controller="tree_activity"] .coursepage,
body[data-controller="tree_activity"] .coursepage__content,
body[data-controller="tree_activity"] article.course,
body[data-controller="tree_activity"] .course__headercontainer,
body[data-controller="tree_activity"] .course__header,
body[data-controller="tree_activity"] .course__contentcontainer,
body[data-controller="tree_activity"] .course__footercontainer {
  background-color: #ffffff !important;
  color: #111111 !important;
}

/* Preserve the animated desktop/mobile hero image */
body[data-controller="tree_activity"] .course__fullwidthcontainer {
  padding: 0 !important;
}

/* Course headings */
body[data-controller="tree_activity"] .course__header h1,
body[data-controller="tree_activity"] .course__header h2,
body[data-controller="tree_activity"] .course__header h3,
body[data-controller="tree_activity"] .course__contentcontainer h1,
body[data-controller="tree_activity"] .course__contentcontainer h2,
body[data-controller="tree_activity"] .course__contentcontainer h3,
body[data-controller="tree_activity"] .course__contentcontainer h4,
body[data-controller="tree_activity"] .course__contentcontainer h5,
body[data-controller="tree_activity"] .course__contentcontainer h6,
body[data-controller="tree_activity"] .activityheading__name {
  color: #111111 !important;
  font-family: "Spotify Mix Title", "Spotify Mix", Arial, sans-serif !important;
}

body[data-controller="tree_activity"] .course__header h1,
body[data-controller="tree_activity"] .activityheading__name {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Course body copy */
body[data-controller="tree_activity"] .course__header p,
body[data-controller="tree_activity"] .course__contentcontainer p,
body[data-controller="tree_activity"] .course__contentcontainer li,
body[data-controller="tree_activity"] .course__contentcontainer label {
  color: #111111 !important;
  font-family: "Spotify Mix", Arial, sans-serif !important;
}

/* Native accordion/module controls */
body[data-controller="tree_activity"] .course__contentcontainer button,
body[data-controller="tree_activity"] .course__contentcontainer button *,
body[data-controller="tree_activity"] .course__contentcontainer [role="button"],
body[data-controller="tree_activity"] .course__contentcontainer [role="button"] * {
  color: #111111 !important;
  font-family: "Spotify Mix Title", "Spotify Mix", Arial, sans-serif !important;
}

/* Metadata and secondary information */
body[data-controller="tree_activity"] .course__headercontainer small,
body[data-controller="tree_activity"] .course__headercontainer time,
body[data-controller="tree_activity"] .course__headercontainer [class*="meta"],
body[data-controller="tree_activity"] .course__headercontainer [class*="author"],
body[data-controller="tree_activity"] .course__headercontainer [class*="duration"] {
  color: #535353 !important;
}

/* Enrollment/status banner — Figma: #3168F6 at 5% fill, 20% border */
body[data-controller="tree_activity"] .enrollmentmessage,
body[data-controller="tree_activity"] .enrollmentmessage__container,
body[data-controller="tree_activity"] .enrollmentmessage--in-progress,
body[data-controller="tree_activity"] .enrollmentmessage--in-progress .enrollmentmessage__container {
  background-color: rgba(49, 104, 246, 0.05) !important;
  border: 1px solid rgba(49, 104, 246, 0.20) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: #111111 !important;
}

body[data-controller="tree_activity"] .enrollmentmessage__container {
  min-height: 38px !important;
  padding: 10px 15px 10px 10px !important;
}

body[data-controller="tree_activity"] .enrollmentmessage *,
body[data-controller="tree_activity"] .enrollmentmessage__container * {
  color: #111111 !important;
}

/* Continue Learning — Spotify black per Figma */
body[data-controller="tree_activity"] .button--primary,
body[data-controller="tree_activity"] .quickstartbtn {
  background-color: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
  font-family: "Spotify Mix", Arial, sans-serif !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body[data-controller="tree_activity"] .button--primary *,
body[data-controller="tree_activity"] .quickstartbtn * {
  color: #ffffff !important;
}

body[data-controller="tree_activity"] .button--primary:hover,
body[data-controller="tree_activity"] .quickstartbtn:hover {
  background-color: #242424 !important;
  border-color: #242424 !important;
}

/* Secondary actions beside Continue Learning */
body[data-controller="tree_activity"] .course__header button:not(.button--primary),
body[data-controller="tree_activity"] .course__header a:not(.button--primary),
body[data-controller="tree_activity"] .course__header button:not(.button--primary) *,
body[data-controller="tree_activity"] .course__header a:not(.button--primary) * {
  background-color: transparent !important;
  color: #111111 !important;
}

/* Dividers */
body[data-controller="tree_activity"] .course__headercontainer hr,
body[data-controller="tree_activity"] .course__contentcontainer hr,
body[data-controller="tree_activity"] .course__contentcontainer [class*="divider"] {
  border-color: #cccccc !important;
}

/* White footer on native course/path pages */
body[data-controller="tree_activity"] footer,
body[data-controller="tree_activity"] .appfooter {
  background-color: #ffffff !important;
  color: #111111 !important;
}

body[data-controller="tree_activity"] footer a,
body[data-controller="tree_activity"] .appfooter a {
  color: #111111 !important;
}

/* ========================================================================== 
   COURSE PAGE POLISH — v2.5
   Fix native module headings, status-banner double border, and app-switcher menu
   ========================================================================== */

/* Native module/accordion triggers must remain white with black text. */
body[data-controller="tree_activity"] .course__contentcontainer button,
body[data-controller="tree_activity"] .course__contentcontainer [role="button"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #111111 !important;
}

body[data-controller="tree_activity"] .course__contentcontainer button *,
body[data-controller="tree_activity"] .course__contentcontainer [role="button"] * {
  background: transparent !important;
  background-color: transparent !important;
  color: #111111 !important;
}

/* Extra coverage for Intellum's native section-title wrappers. */
body[data-controller="tree_activity"] .course__contentcontainer [class*="section"] h1,
body[data-controller="tree_activity"] .course__contentcontainer [class*="section"] h2,
body[data-controller="tree_activity"] .course__contentcontainer [class*="section"] h3,
body[data-controller="tree_activity"] .course__contentcontainer [class*="section"] h4,
body[data-controller="tree_activity"] .course__contentcontainer [class*="section"] button,
body[data-controller="tree_activity"] .course__contentcontainer [class*="section"] [role="button"] {
  background: transparent !important;
  background-color: transparent !important;
  color: #111111 !important;
}

/* Status banner: outer wrapper is layout only; inner container owns the single border. */
body[data-controller="tree_activity"] .enrollmentmessage,
body[data-controller="tree_activity"] .enrollmentmessage--in-progress {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #111111 !important;
}

body[data-controller="tree_activity"] .enrollmentmessage__container,
body[data-controller="tree_activity"] .enrollmentmessage--in-progress .enrollmentmessage__container {
  min-height: 38px !important;
  padding: 10px 15px 10px 10px !important;
  background-color: rgba(49, 104, 246, 0.05) !important;
  border: 1px solid rgba(49, 104, 246, 0.20) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: #111111 !important;
}

body[data-controller="tree_activity"] .enrollmentmessage__body,
body[data-controller="tree_activity"] .enrollmentmessage__maintextcontainer,
body[data-controller="tree_activity"] .enrollmentmessage__image,
body[data-controller="tree_activity"] .enrollmentmessage__container * {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #111111 !important;
}

/* App launcher dropdown: keep the flyout Spotify black instead of white. */
#app-org-switcher [role="menu"],
#app-org-switcher [role="listbox"],
#app-org-switcher .navmenu__menu,
#app-org-switcher .navmenu__content,
#app-org-switcher .appswitchermenu,
#app-org-switcher .appswitchermenu__content,
#app-org-switcher .appswitcher__menu,
#app-org-switcher .appswitcher__content,
#app-org-switcher .menu,
#app-org-switcher .menu__content {
  background-color: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #535353 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

#app-org-switcher [role="menu"] *,
#app-org-switcher [role="listbox"] *,
#app-org-switcher .navmenu__menu *,
#app-org-switcher .navmenu__content *,
#app-org-switcher .appswitchermenu *,
#app-org-switcher .appswitcher__menu *,
#app-org-switcher .menu * {
  color: #ffffff !important;
}

#app-org-switcher a,
#app-org-switcher button:not(#app-org-switcher),
#app-org-switcher [role="menuitem"],
#app-org-switcher [role="option"] {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

#app-org-switcher a:hover,
#app-org-switcher a:focus-visible,
#app-org-switcher [role="menuitem"]:hover,
#app-org-switcher [role="menuitem"]:focus-visible,
#app-org-switcher [role="option"]:hover,
#app-org-switcher [role="option"]:focus-visible {
  background-color: #242424 !important;
  color: #ffffff !important;
}


/* ==========================================================================
   ENROLLMENT MESSAGE TEXT — v2.6
   Keep the Figma blue-tint container, but use Spotify black for content.
   ========================================================================== */
body[data-controller="tree_activity"] .enrollmentmessage__maintextcontainer,
body[data-controller="tree_activity"] .enrollmentmessage__maintextcontainer *,
body[data-controller="tree_activity"] .enrollmentmessage__image,
body[data-controller="tree_activity"] .enrollmentmessage__image *,
body[data-controller="tree_activity"] .enrollmentmessage__container a,
body[data-controller="tree_activity"] .enrollmentmessage__container span,
body[data-controller="tree_activity"] .enrollmentmessage__container p {
  color: #111111 !important;
}

body[data-controller="tree_activity"] .enrollmentmessage__container svg,
body[data-controller="tree_activity"] .enrollmentmessage__container svg *,
body[data-controller="tree_activity"] .enrollmentmessage__container i {
  color: #111111 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ========================================================================== 
   NATIVE COURSE SECTION HEADERS — v2.7
   Intellum renders pathway sections inside .course__footercontainer, not only
   .course__contentcontainer. Keep those native accordion rows white/transparent.
   ========================================================================== */
body[data-controller="tree_activity"] .course__footercontainer,
body[data-controller="tree_activity"] .course__footercontainer section,
body[data-controller="tree_activity"] .course__footercontainer header {
  background-color: #ffffff !important;
  color: #111111 !important;
}

body[data-controller="tree_activity"] .course__footercontainer button,
body[data-controller="tree_activity"] .course__footercontainer [role="button"],
body[data-controller="tree_activity"] .course__footercontainer button:hover,
body[data-controller="tree_activity"] .course__footercontainer button:focus,
body[data-controller="tree_activity"] .course__footercontainer button:active,
body[data-controller="tree_activity"] .course__footercontainer [role="button"]:hover,
body[data-controller="tree_activity"] .course__footercontainer [role="button"]:focus,
body[data-controller="tree_activity"] .course__footercontainer [role="button"]:active {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #111111 !important;
}

body[data-controller="tree_activity"] .course__footercontainer button *,
body[data-controller="tree_activity"] .course__footercontainer [role="button"] *,
body[data-controller="tree_activity"] .course__footercontainer h1,
body[data-controller="tree_activity"] .course__footercontainer h2,
body[data-controller="tree_activity"] .course__footercontainer h3,
body[data-controller="tree_activity"] .course__footercontainer h4,
body[data-controller="tree_activity"] .course__footercontainer h5,
body[data-controller="tree_activity"] .course__footercontainer h6 {
  background: transparent !important;
  background-color: transparent !important;
  color: #111111 !important;
}

body[data-controller="tree_activity"] .course__footercontainer button::before,
body[data-controller="tree_activity"] .course__footercontainer button::after,
body[data-controller="tree_activity"] .course__footercontainer [role="button"]::before,
body[data-controller="tree_activity"] .course__footercontainer [role="button"]::after {
  background-color: transparent !important;
}

/* ========================================================================== 
   ACTIVITY SECTION HEADERS — v2.8
   Exact native Intellum selectors confirmed in DevTools.
   Removes black bars while preserving Spotify-black heading text.
   ========================================================================== */
body[data-controller="tree_activity"] .activitysection,
body[data-controller="tree_activity"] .activitysection__header,
body[data-controller="tree_activity"] .activitysection__header--toggle,
body[data-controller="tree_activity"] .activitysection__header--toggle:hover,
body[data-controller="tree_activity"] .activitysection__header--toggle:focus,
body[data-controller="tree_activity"] .activitysection__header--toggle:active,
body[data-controller="tree_activity"] .activitysection__name,
body[data-controller="tree_activity"] .activitysection__toggle,
body[data-controller="tree_activity"] .activitysection__content {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-controller="tree_activity"] .activitysection__header--toggle {
  width: 100% !important;
  border: 0 !important;
  color: #111111 !important;
}

body[data-controller="tree_activity"] .activitysection__name,
body[data-controller="tree_activity"] .activitysection__header--toggle h1,
body[data-controller="tree_activity"] .activitysection__header--toggle h2,
body[data-controller="tree_activity"] .activitysection__header--toggle h3,
body[data-controller="tree_activity"] .activitysection__header--toggle span,
body[data-controller="tree_activity"] .activitysection__toggle {
  background: transparent !important;
  background-color: transparent !important;
  color: #111111 !important;
}


/* ==========================================================================
   NATIVE ACTIVITY SECTION HEADER WRAPPER — v2.9
   Intellum uses plain <header> elements inside each activity section.
   The global learner-header rule no longer targets every HTML header.
   ========================================================================== */
body[data-controller="tree_activity"] .activitysection > header,
body[data-controller="tree_activity"] .activitysection header,
body[data-controller="tree_activity"] header.activitysection__header,
body[data-controller="tree_activity"] button.activitysection__header--toggle,
body[data-controller="tree_activity"] button[id^="path-section-toggle-"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #111111 !important;
}

body[data-controller="tree_activity"] .activitysection__name,
body[data-controller="tree_activity"] .activitysection__toggle,
body[data-controller="tree_activity"] .activitysection header h1,
body[data-controller="tree_activity"] .activitysection header h2,
body[data-controller="tree_activity"] .activitysection header h3,
body[data-controller="tree_activity"] .activitysection header span {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #111111 !important;
}

/* ========================================================================== 
   NATIVE COURSE TYPOGRAPHY — v3.0
   The Spotify font files already load globally. Intellum's native course
   component rules override them, so this section targets the actual course DOM.
   ========================================================================== */
body[data-controller="tree_activity"] .coursepage,
body[data-controller="tree_activity"] .coursepage__content,
body[data-controller="tree_activity"] article.course,
body[data-controller="tree_activity"] .course__headercontainer,
body[data-controller="tree_activity"] .course__header,
body[data-controller="tree_activity"] .course__contentcontainer,
body[data-controller="tree_activity"] .course__footercontainer,
body[data-controller="tree_activity"] .activitysection,
body[data-controller="tree_activity"] .activitysection__content {
  font-family: "Spotify Mix", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}

body[data-controller="tree_activity"] .coursepage p,
body[data-controller="tree_activity"] .coursepage li,
body[data-controller="tree_activity"] .coursepage label,
body[data-controller="tree_activity"] .coursepage a,
body[data-controller="tree_activity"] .coursepage button,
body[data-controller="tree_activity"] .coursepage input,
body[data-controller="tree_activity"] .coursepage select,
body[data-controller="tree_activity"] .coursepage textarea,
body[data-controller="tree_activity"] .coursepage span,
body[data-controller="tree_activity"] .course__headercontainer p,
body[data-controller="tree_activity"] .course__headercontainer li,
body[data-controller="tree_activity"] .course__headercontainer label,
body[data-controller="tree_activity"] .course__headercontainer a,
body[data-controller="tree_activity"] .course__headercontainer button,
body[data-controller="tree_activity"] .course__headercontainer span,
body[data-controller="tree_activity"] .course__contentcontainer p,
body[data-controller="tree_activity"] .course__contentcontainer li,
body[data-controller="tree_activity"] .course__contentcontainer label,
body[data-controller="tree_activity"] .course__contentcontainer a,
body[data-controller="tree_activity"] .course__contentcontainer button,
body[data-controller="tree_activity"] .course__contentcontainer span,
body[data-controller="tree_activity"] .course__footercontainer p,
body[data-controller="tree_activity"] .course__footercontainer li,
body[data-controller="tree_activity"] .course__footercontainer label,
body[data-controller="tree_activity"] .course__footercontainer a,
body[data-controller="tree_activity"] .course__footercontainer button,
body[data-controller="tree_activity"] .course__footercontainer span {
  font-family: "Spotify Mix", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}

body[data-controller="tree_activity"] .activityheading__name,
body[data-controller="tree_activity"] .u-headingpage--activity,
body[data-controller="tree_activity"] .coursepage h1,
body[data-controller="tree_activity"] .coursepage h2,
body[data-controller="tree_activity"] .coursepage h3,
body[data-controller="tree_activity"] .coursepage h4,
body[data-controller="tree_activity"] .coursepage h5,
body[data-controller="tree_activity"] .coursepage h6,
body[data-controller="tree_activity"] .course__headercontainer h1,
body[data-controller="tree_activity"] .course__headercontainer h2,
body[data-controller="tree_activity"] .course__headercontainer h3,
body[data-controller="tree_activity"] .course__contentcontainer h1,
body[data-controller="tree_activity"] .course__contentcontainer h2,
body[data-controller="tree_activity"] .course__contentcontainer h3,
body[data-controller="tree_activity"] .course__contentcontainer h4,
body[data-controller="tree_activity"] .course__contentcontainer h5,
body[data-controller="tree_activity"] .course__contentcontainer h6,
body[data-controller="tree_activity"] .course__footercontainer h1,
body[data-controller="tree_activity"] .course__footercontainer h2,
body[data-controller="tree_activity"] .course__footercontainer h3,
body[data-controller="tree_activity"] .course__footercontainer h4,
body[data-controller="tree_activity"] .course__footercontainer h5,
body[data-controller="tree_activity"] .course__footercontainer h6,
body[data-controller="tree_activity"] .activitysection__name {
  font-family: "Spotify Mix Title", "Spotify Mix", Arial, sans-serif !important;
}

body[data-controller="tree_activity"] .activityheading__name,
body[data-controller="tree_activity"] .u-headingpage--activity {
  font-weight: 800 !important;
}

body[data-controller="tree_activity"] .activitysection__name {
  font-weight: 700 !important;
}
/* =========================================================
   NATIVE COURSE TYPOGRAPHY — USE REGISTERED SPOTIFY FAMILY
   ========================================================= */

body[data-controller="tree_activity"],
body[data-controller="tree_activity"] button,
body[data-controller="tree_activity"] input,
body[data-controller="tree_activity"] textarea,
body[data-controller="tree_activity"] select,
body[data-controller="tree_activity"] .coursepage,
body[data-controller="tree_activity"] .coursepage * {
  font-family: "Spotify Mix", Arial, sans-serif !important;
}

/* Main course title */
body[data-controller="tree_activity"] .activityheading__name {
  font-family: "Spotify Mix", Arial, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: -0.02em !important;
}

/* Native pathway section headings */
body[data-controller="tree_activity"] .activitysection__name,
body[data-controller="tree_activity"] .activitysection__header h1,
body[data-controller="tree_activity"] .activitysection__header h2,
body[data-controller="tree_activity"] .activitysection__header h3 {
  font-family: "Spotify Mix", Arial, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: -0.02em !important;
}

/* Body copy and checklist text */
body[data-controller="tree_activity"] .activitysection__content,
body[data-controller="tree_activity"] .activitysection__content p,
body[data-controller="tree_activity"] .activitysection__content li,
body[data-controller="tree_activity"] .activitysection__content label,
body[data-controller="tree_activity"] .activitysection__content span {
  font-family: "Spotify Mix", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Metadata */
body[data-controller="tree_activity"] .activityheading__metadata,
body[data-controller="tree_activity"] .activityheading__metadata * {
  font-family: "Spotify Mix", Arial, sans-serif !important;
  font-weight: 400 !important;
}

/* Continue Learning */
body[data-controller="tree_activity"] .button--primary,
body[data-controller="tree_activity"] .quickstartbtn {
  font-family: "Spotify Mix", Arial, sans-serif !important;
  font-weight: 800 !important;
}
/* ==========================================================================
   MY LEARNING — VERIFIED PAGE SCOPE
   body: data-controller="my_learning"
   ========================================================================== */

body[data-controller="my_learning"],
body[data-controller="my_learning"] main.main--student,
body[data-controller="my_learning"] .js-react-my-learning {
  background-color: #ffffff !important;
  color: #111111 !important;
}
/* ==========================================================================
   MY LEARNING — FOOTER
   ========================================================================== */

body[data-controller="my_learning"] footer,
body[data-controller="my_learning"] .footer,
body[data-controller="my_learning"] .appfooter {
  background-color: #111111 !important;
  color: #ffffff !important;
}

/* Footer text + links */
body[data-controller="my_learning"] footer *,
body[data-controller="my_learning"] .footer *,
body[data-controller="my_learning"] .appfooter * {
  color: #ffffff !important;
}

/* Keep links readable */
body[data-controller="my_learning"] footer a,
body[data-controller="my_learning"] .footer a,
body[data-controller="my_learning"] .appfooter a {
  color: #ffffff !important;
}
/* ==========================================================================
   MY LEARNING — LOCALE DROPDOWN
   Keep dropdown text dark on light control
   ========================================================================== */

body[data-controller="my_learning"] footer select,
body[data-controller="my_learning"] .footer select,
body[data-controller="my_learning"] .appfooter select,
body[data-controller="my_learning"] footer select option,
body[data-controller="my_learning"] .footer select option,
body[data-controller="my_learning"] .appfooter select option {
  color: #111111 !important;
}