/* 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://jenniferturnerdesigns.com/fonts/spotify/SpotifyMix-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spotify Mix';
    src: url('https://jenniferturnerdesigns.com/fonts/spotify/SpotifyMix-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    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 — FINAL DARK THEME
   ========================================================================== */
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,
body[data-controller="tree_activity"] .activitysection,
body[data-controller="tree_activity"] .activitysection__content,
body[data-controller="tree_activity"] .activitysection > header,
body[data-controller="tree_activity"] .activitysection header { background:#111111 !important; color:#fff !important; }
body[data-controller="tree_activity"] .course__fullwidthcontainer { padding:0 !important; }
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; }
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"] .activitysection__name { font-family:"Spotify Mix Title","Spotify Mix",Arial,sans-serif !important; color:#fff !important; }
body[data-controller="tree_activity"] .activityheading__name, body[data-controller="tree_activity"] .u-headingpage--activity, body[data-controller="tree_activity"] .activitysection__name { font-weight:800 !important; letter-spacing:-.02em !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"] .course__headercontainer 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, 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"] .activitysection__content, body[data-controller="tree_activity"] .activitysection__content * { color:#fff !important; }
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"] button[id^="path-section-toggle-"], body[data-controller="tree_activity"] .activitysection__toggle { background:transparent !important; border:0 !important; box-shadow:none !important; color:#fff !important; }
body[data-controller="tree_activity"] .activitysection__header *, body[data-controller="tree_activity"] .activitysection__header--toggle *, body[data-controller="tree_activity"] button[id^="path-section-toggle-"] *, body[data-controller="tree_activity"] .activitysection__toggle * { background:transparent !important; color:#fff !important; }
body[data-controller="tree_activity"] .activityheading__metadata, body[data-controller="tree_activity"] .activityheading__metadata *, 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:#ccc !important; }
body[data-controller="tree_activity"] .enrollmentmessage, body[data-controller="tree_activity"] .enrollmentmessage--in-progress { background:transparent !important; border:0 !important; box-shadow:none !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,.05) !important; border:1px solid rgba(49,104,246,.20) !important; border-radius:4px !important; color:#fff !important; }
body[data-controller="tree_activity"] .enrollmentmessage__container * { color:#fff !important; }
body[data-controller="tree_activity"] .button--primary, body[data-controller="tree_activity"] .quickstartbtn { background:#fff !important; border-color:#fff !important; color:#111 !important; font-weight:800 !important; }
body[data-controller="tree_activity"] .button--primary *, body[data-controller="tree_activity"] .quickstartbtn * { color:#111 !important; }
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:transparent !important; color:#fff !important; }
body[data-controller="tree_activity"] .course__headercontainer hr, body[data-controller="tree_activity"] .course__contentcontainer hr, body[data-controller="tree_activity"] .course__footercontainer hr { border-color:#535353 !important; }
body[data-controller="tree_activity"] footer, body[data-controller="tree_activity"] .footer, body[data-controller="tree_activity"] .appfooter { background:#111 !important; color:#fff !important; }
body[data-controller="tree_activity"] footer *, body[data-controller="tree_activity"] .footer *, body[data-controller="tree_activity"] .appfooter * { color:#fff !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 .appswitchermenu__content, #app-org-switcher .appswitcher__menu, #app-org-switcher .appswitcher__content, #app-org-switcher .menu, #app-org-switcher .menu__content { background:#111 !important; color:#fff !important; border:1px solid #535353 !important; box-shadow:0 8px 24px rgba(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:#fff !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: #111111 !important;
  color: #ffffff !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;
}
/* ==========================================================
   SPOTIFY ADVERTISING ACADEMY
   GLOBAL LEARNER DARK THEME
   ========================================================== */

body {
    margin: 0;
    background-color: #111111;
    color: #FFFFFF;
}

/* Main learner surfaces */
main,
.main,
.main--student {
    background-color: #111111;
}

/* Standard learner text */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p,
main li {
    color: #FFFFFF;
}

/* ==========================================================================
   23. HOMEPAGE FAQ — CENTER ALIGNMENT FIX
   Keeps the FAQ block aligned to the same centered content width used by
   the Get Certified section without affecting other learner pages.
   ========================================================================== */

.faq-section,
.spotify-faq,
.spotify-faq-section,
.faqs-section,
.home-faq,
.homepage-faq {
  width: min(calc(100% - 128px), 942px) !important;
  max-width: 942px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

.faq-section__inner,
.faq-section .faq-inner,
.faq-section .faq-container,
.spotify-faq__inner,
.spotify-faq .faq-inner,
.spotify-faq .faq-container,
.spotify-faq-section__inner,
.spotify-faq-section .faq-inner,
.spotify-faq-section .faq-container,
.faqs-section__inner,
.faqs-section .faq-inner,
.faqs-section .faq-container,
.home-faq__inner,
.home-faq .faq-inner,
.home-faq .faq-container,
.homepage-faq__inner,
.homepage-faq .faq-inner,
.homepage-faq .faq-container {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

.faq-section__inner,
.spotify-faq__inner,
.spotify-faq-section__inner,
.faqs-section__inner,
.home-faq__inner,
.homepage-faq__inner {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.2fr) !important;
  column-gap: 64px !important;
  align-items: start !important;
}

.faq-section__title,
.faq-section__questions,
.faq-section .faq-title,
.faq-section .faq-questions,
.spotify-faq__title,
.spotify-faq__questions,
.spotify-faq .faq-title,
.spotify-faq .faq-questions,
.spotify-faq-section__title,
.spotify-faq-section__questions,
.faqs-section__title,
.faqs-section__questions,
.home-faq__title,
.home-faq__questions,
.homepage-faq__title,
.homepage-faq__questions {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

@media (max-width: 1100px) {
  .faq-section,
  .spotify-faq,
  .spotify-faq-section,
  .faqs-section,
  .home-faq,
  .homepage-faq {
    width: min(calc(100% - 64px), 942px) !important;
  }

  .faq-section__inner,
  .spotify-faq__inner,
  .spotify-faq-section__inner,
  .faqs-section__inner,
  .home-faq__inner,
  .homepage-faq__inner {
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr) !important;
    column-gap: 40px !important;
  }
}

@media (max-width: 820px) {
  .faq-section,
  .spotify-faq,
  .spotify-faq-section,
  .faqs-section,
  .home-faq,
  .homepage-faq {
    width: min(calc(100% - 40px), 620px) !important;
  }

  .faq-section__inner,
  .spotify-faq__inner,
  .spotify-faq-section__inner,
  .faqs-section__inner,
  .home-faq__inner,
  .homepage-faq__inner {
    grid-template-columns: 1fr !important;
    row-gap: 32px !important;
  }
}

/* ==========================================================================
   23. HOMEPAGE FAQ — FIGMA ALIGNMENT
   Align FAQ left edge with the resource buttons above
   ========================================================================== */

.faq-section,
.spotify-faq,
.spotify-faq-section,
.faqs-section,
.home-faq,
.homepage-faq {
  width: calc(100% - 128px) !important;
  max-width: 1160px !important;
  margin-left: 64px !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Inner wrapper */
.faq-section__inner,
.faq-section .faq-inner,
.faq-section .faq-container,
.spotify-faq__inner,
.spotify-faq .faq-inner,
.spotify-faq .faq-container,
.spotify-faq-section__inner,
.spotify-faq-section .faq-inner,
.spotify-faq-section .faq-container,
.faqs-section__inner,
.faqs-section .faq-inner,
.faqs-section .faq-container,
.home-faq__inner,
.home-faq .faq-inner,
.home-faq .faq-container,
.homepage-faq__inner,
.homepage-faq .faq-inner,
.homepage-faq .faq-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Desktop two-column layout */
.faq-section__inner,
.spotify-faq__inner,
.spotify-faq-section__inner,
.faqs-section__inner,
.home-faq__inner,
.homepage-faq__inner {
  display: grid !important;
  grid-template-columns: minmax(360px, 0.9fr) minmax(470px, 1.1fr) !important;
  column-gap: 72px !important;
  align-items: start !important;
}

/* Left title column */
.faq-section__title,
.spotify-faq__title,
.spotify-faq-section__title,
.faqs-section__title,
.home-faq__title,
.homepage-faq__title,
.faq-section .faq-title,
.spotify-faq .faq-title,
.spotify-faq-section .faq-title,
.faqs-section .faq-title,
.home-faq .faq-title,
.homepage-faq .faq-title {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* Right questions column */
.faq-section__questions,
.spotify-faq__questions,
.spotify-faq-section__questions,
.faqs-section__questions,
.home-faq__questions,
.homepage-faq__questions,
.faq-section .faq-questions,
.spotify-faq .faq-questions,
.spotify-faq-section .faq-questions,
.faqs-section .faq-questions,
.home-faq .faq-questions,
.homepage-faq .faq-questions {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* Tablet */
@media (max-width: 1100px) {
  .faq-section,
  .spotify-faq,
  .spotify-faq-section,
  .faqs-section,
  .home-faq,
  .homepage-faq {
    width: calc(100% - 64px) !important;
    max-width: none !important;
    margin-left: 32px !important;
    margin-right: auto !important;
  }

  .faq-section__inner,
  .spotify-faq__inner,
  .spotify-faq-section__inner,
  .faqs-section__inner,
  .home-faq__inner,
  .homepage-faq__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 40px !important;
  }
}

/* Mobile */
@media (max-width: 820px) {
  .faq-section,
  .spotify-faq,
  .spotify-faq-section,
  .faqs-section,
  .home-faq,
  .homepage-faq {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin-left: 20px !important;
    margin-right: auto !important;
  }

  .faq-section__inner,
  .spotify-faq__inner,
  .spotify-faq-section__inner,
  .faqs-section__inner,
  .home-faq__inner,
  .homepage-faq__inner {
    grid-template-columns: 1fr !important;
    row-gap: 32px !important;
  }
}



/* ==========================================================================
   23. HOMEPAGE FAQ — FIGMA ALIGNMENT (VERIFIED INTELLUM CLASSES)
   Actual markup:
   section.faq-section > .faq-inner > .faq-intro + .faq-list
   ========================================================================== */

/*
   Intellum wraps the embedded FAQ inside .catalogcards__htmlcontent,
   which is what was shifting the entire section to the right.
   Let this specific embedded-HTML wrapper use the full available width.
*/
section.catalogcards:has(.faq-section) .catalogcards__htmlcontent {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* FAQ outer section */
section.faq-section {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 80px 64px 96px !important;
  background-color: #111111 !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Figma two-column layout */
section.faq-section > .faq-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 64px !important;
  align-items: start !important;

  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Left column */
section.faq-section .faq-intro {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Right accordion column */
section.faq-section .faq-list {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Keep FAQ heading/subheading aligned to the column edge */
section.faq-section .faq-heading,
section.faq-section .faq-subheading {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Tablet */
@media (max-width: 1100px) {
  section.faq-section {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  section.faq-section > .faq-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 40px !important;
  }
}

/* Mobile */
@media (max-width: 820px) {
  section.faq-section {
    padding: 64px 20px 72px !important;
  }

  section.faq-section > .faq-inner {
    grid-template-columns: 1fr !important;
    row-gap: 32px !important;
  }
}



/* ==========================================================================
   23. HOMEPAGE FAQ — FINAL FIGMA ALIGNMENT
   Verified Intellum markup:
   section.catalogcards > .catalogcards__htmlcontent
   > section.faq-section > .faq-inner > .faq-intro + .faq-list
   ========================================================================== */

/*
   Intellum centers this catalogcards block inside a narrower content wrapper.
   Break ONLY the FAQ catalogcards section back out to the full viewport so
   its 64px left edge matches the resource buttons above.
*/
section.catalogcards:has(.faq-section) {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Remove the inner Intellum width constraint for this FAQ block only */
section.catalogcards:has(.faq-section) .catalogcards__htmlcontent {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* FAQ outer frame — Figma uses 64px side padding */
section.faq-section {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 80px 64px 96px !important;
  background-color: #111111 !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Figma two-column layout */
section.faq-section > .faq-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 64px !important;
  align-items: start !important;
  box-sizing: border-box !important;
}

/* Left intro column */
section.faq-section .faq-intro {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Right accordion column */
section.faq-section .faq-list {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep title/subtitle flush with the section's left edge */
section.faq-section .faq-heading,
section.faq-section .faq-subheading {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Tablet */
@media (max-width: 1100px) {
  section.faq-section {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  section.faq-section > .faq-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 40px !important;
  }
}

/* Mobile */
@media (max-width: 820px) {
  section.faq-section {
    padding: 64px 20px 72px !important;
  }

  section.faq-section > .faq-inner {
    grid-template-columns: 1fr !important;
    row-gap: 32px !important;
  }
}

/* ==========================================================================
   24. CERTIFICATIONS SEARCH — READABILITY / CONTRAST
   Verified markup:
   form#topic-search-form.search
   > label.search__label
   > input#topic-search.search__input
   ========================================================================== */

body[data-controller="catalogs"] #topic-search.search__input,
body[data-controller="catalogs"] input#topic-search.search__input {
  background-color: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #535353 !important;
  border-radius: 4px !important;
  opacity: 1 !important;
  caret-color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: none !important;
}

/* Placeholder must remain readable even when the field is not focused */
body[data-controller="catalogs"] #topic-search.search__input::placeholder,
body[data-controller="catalogs"] input#topic-search.search__input::placeholder {
  color: #cccccc !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #cccccc !important;
}

/* Search icon / label treatment */
body[data-controller="catalogs"] #topic-search-form .search__label,
body[data-controller="catalogs"] #topic-search-form .search__label *,
body[data-controller="catalogs"] #topic-search-form .search__label::before,
body[data-controller="catalogs"] #topic-search-form .search__label::after {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Hover */
body[data-controller="catalogs"] #topic-search.search__input:hover {
  border-color: #b3b3b3 !important;
}

/* Keyboard / focus state */
body[data-controller="catalogs"] #topic-search.search__input:focus,
body[data-controller="catalogs"] #topic-search.search__input:focus-visible {
  background-color: #111111 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Chrome autofill protection */
body[data-controller="catalogs"] #topic-search.search__input:-webkit-autofill,
body[data-controller="catalogs"] #topic-search.search__input:-webkit-autofill:hover,
body[data-controller="catalogs"] #topic-search.search__input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #111111 inset !important;
  box-shadow: 0 0 0 1000px #111111 inset !important;
  caret-color: #ffffff !important;
}

/* ==========================================================================
   25. GLOBAL LEARNER FOOTER — READABILITY / CONTRAST
   Verified Intellum markup:
   footer#page-footer.appfooter.footer
   > .appfooter__content.footer__content
   ========================================================================== */

footer#page-footer.appfooter.footer,
footer#page-footer .appfooter__content,
footer#page-footer .footer__content {
  background-color: #111111 !important;
  color: #ffffff !important;
}

/* All standard footer text/links */
footer#page-footer .appfooter__item,
footer#page-footer .footer__item,
footer#page-footer .appfooter__customcontent,
footer#page-footer .footer__customcontent,
footer#page-footer a,
footer#page-footer p,
footer#page-footer span,
footer#page-footer label {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Terms & Conditions */
footer#page-footer a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Locale label + trigger */
footer#page-footer .menulist--footer,
footer#page-footer .appfooter__item--locale,
footer#page-footer #app-locale-label,
footer#page-footer #app-locale-trigger,
footer#page-footer #app-locale-trigger *,
footer#page-footer .menulist__trigger,
footer#page-footer .menulist__trigger * {
  color: #ffffff !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* Keep locale trigger readable in hover/focus states */
footer#page-footer #app-locale-trigger:hover,
footer#page-footer #app-locale-trigger:focus,
footer#page-footer #app-locale-trigger:focus-visible,
footer#page-footer .menulist__trigger:hover,
footer#page-footer .menulist__trigger:focus,
footer#page-footer .menulist__trigger:focus-visible {
  color: #ffffff !important;
  background: transparent !important;
  opacity: 1 !important;
}

/* Dropdown itself is a light system menu — keep its options dark */
footer#page-footer #app-locale-menu,
footer#page-footer #app-locale-menu *,
footer#page-footer .menulist__listbox--footer,
footer#page-footer .menulist__listbox--footer * {
  color: #111111 !important;
}

/* Powered by text + Intellum mark */
footer#page-footer .appfooter__item:last-child,
footer#page-footer .footer__item:last-child,
footer#page-footer [class*="powered"],
footer#page-footer [class*="powered"] *,
footer#page-footer img,
footer#page-footer svg {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* SVG marks/icons should inherit the visible footer color */
footer#page-footer svg,
footer#page-footer svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Give footer content consistent horizontal alignment */
footer#page-footer .appfooter__content,
footer#page-footer .footer__content {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   26. PROFILE DROPDOWN — USER HEADER READABILITY
   ========================================================================== */

#usermenu .appusermenu__header,
#usermenu .appusermenu__header--user,
#usermenu .appusermenu__header--user *,
#usermenu .appusermenu__headingcontainer,
#usermenu .appusermenu__headingcontainer * {
  color: #111111 !important;
  opacity: 1 !important;
}

/* ==========================================================================
   27. MY LEARNING — VERIFIED REACT WRAPPER TEXT CONTRAST
   ========================================================================== */

body[data-controller="my_learning"] .js-react-my-learning h1,
body[data-controller="my_learning"] .js-react-my-learning h2,
body[data-controller="my_learning"] .js-react-my-learning h3,
body[data-controller="my_learning"] .js-react-my-learning h4,
body[data-controller="my_learning"] .js-react-my-learning h5,
body[data-controller="my_learning"] .js-react-my-learning h6,
body[data-controller="my_learning"] .js-react-my-learning p,
body[data-controller="my_learning"] .js-react-my-learning li,
body[data-controller="my_learning"] .js-react-my-learning a,
body[data-controller="my_learning"] .js-react-my-learning span,
body[data-controller="my_learning"] .js-react-my-learning [role="heading"],
body[data-controller="my_learning"] .js-react-my-learning [role="status"] {
  color: #ffffff !important;
}

/* Preserve dark text inside light controls */
body[data-controller="my_learning"] .js-react-my-learning input,
body[data-controller="my_learning"] .js-react-my-learning select,
body[data-controller="my_learning"] .js-react-my-learning option,
body[data-controller="my_learning"] .js-react-my-learning button {
  color: #111111;
}

/* ==========================================================================
   28. CERTIFICATION PATH PROGRESS MARKERS
   Uses CSS variables so each path can carry its own accent if a path-specific
   class/attribute is available. Default remains Fundamentals yellow.
   ========================================================================== */

body[data-controller="tree_activity"] {
  --path-accent: #F5FF46;
}

/* Known/likely slug hooks */
body[data-controller="tree_activity"] [href*="strategy-planning"],
body[data-controller="tree_activity"] [href*="strategy"] {
  --path-accent: #91EEDA;
}

body[data-controller="tree_activity"] [href*="media-buying"],
body[data-controller="tree_activity"] [href*="media"] {
  --path-accent: #D8A3FF;
}

/* Base marker: black center + accent border */
body[data-controller="tree_activity"] .courselist__marker {
  position: relative !important;
  border-radius: 50% !important;
  background-color: #111111 !important;
  border: 2px solid var(--path-accent) !important;
  box-sizing: border-box !important;
}

/* Common completion-state variants */
body[data-controller="tree_activity"] .courselist__item[data-status="complete"] .courselist__marker,
body[data-controller="tree_activity"] .courselist__item[data-status="completed"] .courselist__marker,
body[data-controller="tree_activity"] .courselist__item[data-status="passed"] .courselist__marker {
  background-color: var(--path-accent) !important;
  border-color: var(--path-accent) !important;
}

/* Black check for completed */
body[data-controller="tree_activity"] .courselist__item[data-status="complete"] .courselist__marker::after,
body[data-controller="tree_activity"] .courselist__item[data-status="completed"] .courselist__marker::after,
body[data-controller="tree_activity"] .courselist__item[data-status="passed"] .courselist__marker::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111111 !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  z-index: 2;
}

/* Hide native completed icon */
body[data-controller="tree_activity"] .courselist__item[data-status="complete"] .courselist__marker svg,
body[data-controller="tree_activity"] .courselist__item[data-status="completed"] .courselist__marker svg,
body[data-controller="tree_activity"] .courselist__item[data-status="passed"] .courselist__marker svg {
  opacity: 0 !important;
}

/* ==========================================================================
   29. INTELLUM MODALS / POPUPS — WHITE MODAL = BLACK TEXT
   Buttons intentionally left unchanged.
   ========================================================================== */

.dialog .dialog__content {
  color: #111111 !important;
}

.dialog .dialog__header,
.dialog .dialog__header h1,
.dialog .dialog__header h2,
.dialog .dialog__header h3,
.dialog .dialog__contentbody,
.dialog .dialog__contentbody p,
.dialog .dialog__contentbody span,
.dialog .dialog__contentbody strong,
.dialog .dialog__contentbody em,
.dialog .dialog__contentbody li {
  color: #111111 !important;
}

.dialog .dialog__close {
  color: #111111 !important;
}

/* ==========================================================================
   30. CERTIFICATION PATH ACCENTS — FINAL VERIFIED OVERRIDES
   Fundamentals path:          3346550 / #F5FF46
   Strategy & Planning path:   3346548 / #91EEDA
   Media & Buying path:        3346557 / #D8A3FF
   ========================================================================== */

/* Set the accent at page level based on the actual learner-path links
   Intellum renders inside each course page. */
body[data-controller="tree_activity"]:has(a[href*="/student/path/3346550/"]) {
  --path-accent: #F5FF46;
}

body[data-controller="tree_activity"]:has(a[href*="/student/path/3346548/"]) {
  --path-accent: #91EEDA;
}

body[data-controller="tree_activity"]:has(a[href*="/student/path/3346557/"]) {
  --path-accent: #D8A3FF;
}

/* --------------------------------------------------------------------------
   CONTINUE LEARNING BUTTON
   -------------------------------------------------------------------------- */
body[data-controller="tree_activity"] .activityheading__quickstart .continuelearningbtn,
body[data-controller="tree_activity"] .activityheading__quickstart .quickstartbtn,
body[data-controller="tree_activity"] .activityheading__quickstart .button--primary {
  background-color: var(--path-accent) !important;
  border-color: var(--path-accent) !important;
  color: #111111 !important;
  font-weight: 800 !important;
}

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

/* --------------------------------------------------------------------------
   COURSE / ENROLLMENT PROGRESS
   Accent any native Intellum progress UI without changing page structure.
   -------------------------------------------------------------------------- */
body[data-controller="tree_activity"] .enrollmentmessage__container,
body[data-controller="tree_activity"] .enrollmentmessage--in-progress .enrollmentmessage__container {
  border-color: var(--path-accent) !important;
  background-color: #111111 !important;
}

/* Native HTML progress */
body[data-controller="tree_activity"] progress {
  accent-color: var(--path-accent) !important;
}

body[data-controller="tree_activity"] progress::-webkit-progress-bar {
  background-color: #111111 !important;
  border: 1px solid var(--path-accent) !important;
}

body[data-controller="tree_activity"] progress::-webkit-progress-value {
  background-color: var(--path-accent) !important;
}

body[data-controller="tree_activity"] progress::-moz-progress-bar {
  background-color: var(--path-accent) !important;
}

/* Intellum/custom progress bars */
body[data-controller="tree_activity"] [role="progressbar"],
body[data-controller="tree_activity"] [class*="progressbar"],
body[data-controller="tree_activity"] [class*="progress-bar"] {
  border-color: var(--path-accent) !important;
  accent-color: var(--path-accent) !important;
}

body[data-controller="tree_activity"] [role="progressbar"] > *,
body[data-controller="tree_activity"] [class*="progressbar"] > *,
body[data-controller="tree_activity"] [class*="progress-bar"] > * {
  background-color: var(--path-accent) !important;
}

/* --------------------------------------------------------------------------
   ACTIVITY PROGRESSION CIRCLES
   Not complete: black center + pathway-color outline, no ellipsis/icon.
   Complete: pathway-color fill + black checkmark.
   -------------------------------------------------------------------------- */
body[data-controller="tree_activity"] .courselist__marker {
  position: relative !important;
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
  border: 2px solid var(--path-accent) !important;
  border-radius: 50% !important;
  background: #111111 !important;
  box-sizing: border-box !important;
  color: transparent !important;
}

/* Remove Intellum's native dots/in-progress artwork. */
body[data-controller="tree_activity"] .courselist__marker svg,
body[data-controller="tree_activity"] .courselist__marker .courselist__icon {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Support the likely completion values Intellum may emit. */
body[data-controller="tree_activity"] .courselist__item[data-status="complete"] .courselist__marker,
body[data-controller="tree_activity"] .courselist__item[data-status="completed"] .courselist__marker,
body[data-controller="tree_activity"] .courselist__item[data-status="passed"] .courselist__marker,
body[data-controller="tree_activity"] .courselist__item[data-status="finished"] .courselist__marker {
  background: var(--path-accent) !important;
  border-color: var(--path-accent) !important;
}

/* Black check on completed activities. */
body[data-controller="tree_activity"] .courselist__item[data-status="complete"] .courselist__marker::after,
body[data-controller="tree_activity"] .courselist__item[data-status="completed"] .courselist__marker::after,
body[data-controller="tree_activity"] .courselist__item[data-status="passed"] .courselist__marker::after,
body[data-controller="tree_activity"] .courselist__item[data-status="finished"] .courselist__marker::after {
  content: "✓" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #111111 !important;
  font-family: Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================================================
   31. HOMEPAGE CUSTOM HERO — RESPONSIVE MEDIA
   Desktop = video/GIF; tablet + mobile <=1024px = mobile image
   ========================================================================== */

.spotify-home-hero {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.spotify-home-hero picture {
  display: block !important;
  width: 100% !important;
}

.spotify-home-hero img,
.spotify-home-hero__desktop,
.spotify-home-hero__mobile {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
}

.spotify-home-hero__desktop {
  display: block !important;
}

.spotify-home-hero__mobile {
  display: none !important;
}

@media screen and (max-width: 1024px) {
  .spotify-home-hero__desktop {
    display: none !important;
  }

  .spotify-home-hero__mobile {
    display: block !important;
  }
}


/* ==========================================================================
   32. HOMEPAGE VALUE CARDS — TOP ALIGN ALL THREE
   Keeps Practice for Performance aligned with the first two cards.
   ========================================================================== */

.spotify-value-props,
.spotify-value-props__grid,
.value-props,
.value-props__grid,
.value-cards,
.value-cards__grid {
  align-items: stretch !important;
}

.spotify-value-props__card,
.spotify-value-card,
.value-props__card,
.value-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-self: stretch !important;
}

.spotify-value-props__card-content,
.spotify-value-card__content,
.value-props__card-content,
.value-card__content,
.spotify-value-props__card-body,
.spotify-value-card__body,
.value-props__card-body,
.value-card__body {
  margin-top: 0 !important;
  padding-top: 0 !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.spotify-value-props__card:nth-child(3) > *,
.spotify-value-card:nth-child(3) > *,
.value-props__card:nth-child(3) > *,
.value-card:nth-child(3) > * {
  margin-top: 0 !important;
}

/* ==========================================================================
   33. HOMEPAGE VALUE PROPS — SAFE THIRD-CARD ALIGNMENT
   Only move "Practice for Performance" content upward.
   Does not alter the card/grid/flex structure.
   ========================================================================== */

.vp-card--green .vp-content {
  transform: translateY(-29px) !important;
}
.vp-header h2 {
    font-family: 'Spotify Mix', Arial, sans-serif !important;
}