:root {
        --font: "FK Grotesk", sans-serif;
        --alt-font: "FK Grotesk", sans-serif;
        --accent-color: #1c1917;
        --secondary-color: #feae0f;
        --link-color: #1c1917;
        --accent-highlight-color: #1c1917;
        --accent-highlight-background-color: #e8e5e3;
        --accent-tinted-color-70: #bbbab9;
        --accent-tinted-color-80: #d2d1d1;
        --accent-tinted-color-90: #e8e8e8;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #38322e;
        --secondary-hover-color: #d99101;
        --secondary-contrast-color: #111;
        --link-hover-color: #544b45;
      }
      
body { background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1499701412/zazd71fdlwwp9ucucoac.jpg'); background-attachment: fixed; background-size: cover; }
.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/6a4cc8b5-f759-47ae-8618-d17d82b3588b/jwzyh60cqqmz-samsara-logo-primary.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
@font-face {
  font-family: 'FK Grotesk';
  src: url('https://d9ylfbta65t3x.cloudfront.net/fonts/fk-grotesk/FKGrotesk-Regular.woff2')
    format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FK Grotesk';
  src: url('https://d9ylfbta65t3x.cloudfront.net/fonts/fk-grotesk/FKGrotesk-Medium.woff2')
    format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FK Grotesk';
  src: url('https://d9ylfbta65t3x.cloudfront.net/fonts/fk-grotesk/FKGrotesk-Bold.woff2')
    format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FK Grotesk Mono';
  src: url('https://d9ylfbta65t3x.cloudfront.net/fonts/fk-grotesk/FKGroteskMono-Regular.woff2')
    format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FK Grotesk Mono';
  src: url('https://d9ylfbta65t3x.cloudfront.net/fonts/fk-grotesk/FKGroteskMono-Medium.woff2')
    format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FK Grotesk Mono';
  src: url('https://d9ylfbta65t3x.cloudfront.net/fonts/fk-grotesk/FKGroteskMono-Bold.woff2')
    format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body,
:root {
  font-family: 'FK Grotesk', system-ui, sans-serif;
}

/* Colors */

:root {
  /* ── remapped legacy Academy tokens (same names, new brand values) ── */
  --color-blue: #feae0f; /* was #0369ea → Signal Yellow */
  --color-variant-blue: #403d37; /* was #a0cfff → Gray 700 */
  --color-snow: #eae8e3; /* was #F0F6FE → Gray 100 */
  --color-charcoal: #1c1917; /* was #101e2d → Black / Gray 900 */
  --color-ash: #eae8e3; /* was #f3f6fb → Gray 100 */
  --color-navy: #403d37; /* was #00263E → Gray 700 */
  --color-black: #1c1917; /* was #000000 → warm black */
  --color-white: #ffffff;
  --color-academy-red: #ee2b35; /* was #E11D2E → Red 500 */

  /* ── brand accent ── */
  --color-yellow: #feae0f; /* Signal Yellow (primary accent) */

  /* ── gray scale ── */
  --color-gray-50: #f5f4f1;
  --color-gray-100: #eae8e3;
  --color-gray-200: #e0ddd5;
  --color-gray-300: #ccc9c1;
  --color-gray-400: #b9b6ad;
  --color-gray-500: #9c9890;
  --color-gray-600: #716f67;
  --color-gray-700: #403d37;
  --color-gray-800: #221f1b;
  --color-gray-900: #1c1917;

  /* ── orange ── */
  --color-orange-50: #ffe0d1;
  --color-orange-200: #ffb18c;
  --color-orange-500: #ff6319;
  --color-orange-700: #b33900;
  --color-orange-900: #5f1e00;

  /* ── gold ── */
  --color-gold-50: #fffad8;
  --color-gold-200: #fcea70;
  --color-gold-500: #f0bc00;
  --color-gold-700: #8c6400;
  --color-gold-900: #3c2a00;

  /* ── sky ── */
  --color-sky-50: #d9f3fa;
  --color-sky-200: #a1e1f2;
  --color-sky-500: #42c2e5;
  --color-sky-700: #138dae;
  --color-sky-900: #094d60;

  /* ── emerald ── */
  --color-emerald-50: #ccf0e0;
  --color-emerald-200: #80dbb2;
  --color-emerald-500: #01b665;
  --color-emerald-700: #01703e;
  --color-emerald-900: #013d21;

  /* ── lime ── */
  --color-lime-50: #ebfada;
  --color-lime-200: #cef4a3;
  --color-lime-500: #9de847;
  --color-lime-700: #69b512;
  --color-lime-900: #2a4d07;

  /* ── teal ── */
  --color-teal: #1dcad3;
  --color-teal-lighter: #5fd7de;

  /* ── red ── */
  --color-red: #df2036;
  --color-red-lighter: #ff1e60;
  --color-red-50: #fcd5d7;
  --color-red-200: #f7959a;
  --color-red-500: #ee2b35;
  --color-red-700: #a80b13;
  --color-red-900: #5c0208;

  /* ── misc ── */
  --color-green: #0dab41;
}

/* Removal of Same Base Grid Styles */
body {
  background: none;
}

.home__content {
  padding: 0;
}

.container {
  box-shadow: none;
  max-width: 100%;
}

.learn.dashboard .widget {
  padding: 0;
}

.layout__content .widget.widget--navbar.widget--navbar_standard,
.layout__content .widget.widget--dashboard-access {
  padding: 0;
}

.dashboard .row .row {
  margin: 0;
}

.row .row {
  margin: 0 auto;
}

.header__inner .row {
  margin: 0 -1rem;
}

.widget--navbar_standard .row .columns {
  padding: 0;
}

.widget--dashboard-access .columns {
  padding-left: 0;
  padding-right: 0;
}

.widget--dashboard-access.widget--dashboard-access_standard .columns {
  padding: 0;
}

@media (max-width: 767px) {
  .widget--dashboard-access.widget--dashboard-access_standard .columns {
    width: 100%;
  }
}

.widget--course-purchase .btn.btn--alt.btn--expand.btn--secondary {
  display: none;
}

/* Footer — Figma 4003:1251
     gray-700 bar, 50px vertical / 40px side pad, 1360 content:
     white logo left, Terms of Service right. Copyright + Support hidden. */
.learn.dashboard .widget.widget--html.widget--html_standard {
  padding: 0;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 50px 40px;
  background: var(--color-gray-700);
  box-sizing: border-box;
}

.footer__inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important; /* logo left; Terms uses margin-left: auto */
  gap: 24px;
  width: 100% !important;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 !important;
  border-top: none !important;
  box-sizing: border-box;
}

/* Partner Academy (and similar) — plain © text, not the logo lockup.
   Class is footer__company-info (hyphen), not footer__company__info. */
.footer__company-info,
.footer .footer__company-info,
.footer__company-info span {
  color: var(--color-white) !important;
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
}

/* Main Academy — swap © / company name for the white Samsara lockup */
.footer__company__info {
  position: relative;
  flex-shrink: 0;
  width: 275px;
  height: 40px;
  margin: 0;
  padding: 0;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  opacity: 1 !important;
  overflow: hidden;
}

.footer__company__info::before {
  content: '';
  display: block;
  width: 275px;
  height: 40px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAEYCAYAAAC9R+vSAAAio0lEQVR4nO3d6W7dOJAG0Njw+79yGkLjIo7j5UriUss5vwaYmUQSi0VKX/Pm5ddEv3///v34n19eXl5m/l3AXOYzAAAAAABAfG+rwyPBEeQNfgEAAAAAAIjtZVd4JAiG2MxdAAAAAACAfJadAP7IiWCIyYlfAAAAAACAvF6iBEqCYNjLPAUAAAAAAMhv2wngj5wIhj2c+AUAAAAAAKgjTAD8IAiGNQS/AAAAAAAA9bxED5sEwTCWuQgAAAAAAFBXuBPAHzkRDGM48QsAAAAAAFBf+AD4QRAM1wh+AQAAAAAA+njJGkQJguF75hsAAAAAAEA/aU4Af+REMHzOiV8AAAAAAIC+XqqEU4JgujO3AAAAAAAASHsC+CMngunKiV8AAAAAAADKBcAPgmC6EPwCAAAAAADw0Uv14EoQTDXmDwAAAAAAAG1OAH8XlgmzyMppXwAAAAAAAJ7x0jHQEgSThXkCAAAAAADAGeVPAH/GvxNMdE78AgAAAAAAcEXLAPhBEEw0gl8AAAAAAADu2Bp8Rgu7BMHsYi4AAAAAAAAwQusTwB85EUz34BcAAAAAAIDctgedkQMwQTCzqHsAAAAAAABmcAL4G04E0yn4BQAAAAAAID8B8BMEwdwl+AUAAAAAAGCFEIFmtnBMEMyz1DYAAAAAAAArOQF8gRPBVAt+AQAAAAAAqCFMgJk5MBME86COAQAAAAAA2MkJ4AGcCCZz8AsAAAAAAEAdAuCBBMH9CH4BAAAAAACIJFRQWS1MEwTXpVYBAAAAAACIyAngiZwIrqda8AsAAAAAAEAt4YLJ6gGbMDgfNQkAAAAAAEAWTgAv5lRwHtWDXwAAAAAAAOoRAG8iCI5L8AsAAAAAAEBWIcPHjgGcIHg/dQcAAAAAAEB2TgAH4UTwPh2DXwAAAAAAAGoSAAcjCF5H8AsAAAAAAEA1YUNG4dz/BMHjqa3/qS0AAAAAAIB6nAAOzongcQS/AAAAAAAAVBc6VBTY/UsQfJ46+pc6AgAAAAAAqMkJ4GScCH6e4BcAAAAAAIBuBMBJCYK/JvgFAAAAAACgq/DhoTDvOYJgtfIstQIAAAAAAFCXE8BFdD4RLPgFAAAAAACA/6UICwV853UIgtXFeR3qAgAAAAAAoDMngIuqfCJY8AsAAAAAAACfEwAXVykIFvwCAAAAAADA99KEgsK/cTKFwca957gDAAAAAABwjRPADWU4FSz4BQAAAAAAgPPCBoCfEQrOESkINsb1xxgAAAAAAIB5nAAmxIlgwS8AAAAAAADcJwBmaxAs+AUAAAAAAIBx0v0srMBwnZlBsHFcx88/AwAAAAAA9OEEMEtPBAt+AQAAAAAAYJ6UJwOFiHvcCYKN2R5O/wIAAAAAAPTiBDBTTwQLfgEAAAAAAGAdATBTgmDBLwAAAAAAAKyX9udhBYxxvA+CjUscfv6ZXfSBc8xVAIDx7EnPsy8FAIA6/JQvsISPCTno9XmZY/WYj99T8+epqfPU2Xrq9LyqdaoWcqpaj92Zj99T9+epqd7MGb6iN/SYOxHH+eWLZ3v2WmeP0dnr8RPQAI1EXGBZN7ZVNorwqHk1zWzqbC37lD6MdV3Pjq3emof5CkTvK9YUuvB+ylmnisWmD7jCwrSHns2zzNF4zN/nqd/nqatr1Ng6arRmjRpXqtRyR+bv89TvOWqLlczPHPSFPjVd+QTwzPG5ci1vZy884uAAcWVfkDLRnxlRO+bsfuYy0JHeV4exZFTt2JeSiVNZkG9vYs7GYf8Ic5z+CWghMPAsG6n59GNGEwaTjY9tzKbG4Dn2pYxmX7qXOQ1U5z88IivvqP38vrgve73y/6S4gJ/oE/ObvhdyVtWZWlvHs77GcwPYw16BVdQZGahRyM2+Zg/P+xrPLa7fgcbmUgB8EO4AX9Ef5rERZRd1B3SmB87l+eZk3NjB+9AanvF1nh3UYL1ZwzOGoAHwQcgDfKQvzGNTxG5egObybO/x/ADWsB8gAjU4j2cL8Id9D5GpzR5j8/vGn3UrAD4Ie4AH/WAOm02iUY/jeaZjeI7MpL7m8FxzMV5E4j2JqNQl1GNej+eZjuE5MjUAPgh9AH1gDos4UalNAOjF2k9UanMcz3IczxLq8R8ejeM50sHvAXV+988YGtiYuNCT8HcOPZUMzP/7zPXx1OXn1NoY6mscNZmnJo0VGejP95jn46nJr6k3sjO/79EDxqtek2dqZuSz+H03gL15LXf//iEngLsUGfAv834OGyGyUKv3eH5zeK4A4+ipZKFWiUZNQl3m93We3Ryeaz2/B4zp0AD4IAyCPsx34GCTCcBZ1o4cjBP0YK7P49lCXeY3EL1PDA+AD0IhqM88r7swwBXq9jzPbC7Pl1nUFl2odTJSt+d5ZgDX6aHneF5zeb4sCYAPwiGoy/wGuMemfA3PGQD6sf4TjZoE0Avp6/eF2h81X6YFwAchEdRjXs9lM0Rm6hfoQr+7x/OLzxhBD+b6Op411GV+E4l6ZFkAfBAWQR3mM8B9NuNred4AAP+yRwIYR0/9nuezluede0x+Dxy/6QHwQWgE+ZnH81mcqUAdf8/z2cNzZwZ1dY3nBqyg1xCRugQ60vtgnyUB8EF4BHmZvwAA0IOPdFCfeb6PZw/ACtabnEaP27IA+CBEgnzMW4AxbL738vyZQV2d43kBK+k5n/NcAObQX//lmezl+cfKT3aMx9IA+CBMgjzM13UsyFCbOQ4AABy8GwAd6HWwP7NZHgAfhEoQn3kKXGWTT1RqE/Yx/3IwTlCbOQ4wlz5LNGoyzyngGWO1JQA+CJcgLvMTYByb7ViMB6OpKQAysF7FYjyAyvS4WIxHX9sC4IOQCeIxLwHGsckG0AuBffQfIlOfQEV6G1293MhVnp03Z/+OrQHwQdgEcZiPe9gYAayl7zKamgIgMusUAPRmL9BzLLYHwAehE+xnHgIj2Vh6BtEZHwAAdrMnhXo6z+vO956B8Ylp1unfMAHwQfgE+5h/AAD3eJn+nOeSh7GCmszt+IwRUIFeBr+ezllWzZcwAfBBCAXrmXcA43nxycE4AQCV2esAAO/ZG/TKcEIFwAdhFKxjvgGMZzOdi/GCecwvAHiONRPITA/LxXjFOQU8eyzCBcAHoRTMZ54BAIzlRRqAKKxJ+RgzICO9C+IKGQAfhFMwj/kFMIcXn5yMG4xnXgFRdOxHHe8ZAHievUKPLCdsAHwQUsF45lUsFluow3zOzfgxiloCAK6yj4AauszlLvdZlfGrn8GEDoAjPSiowHwCAGA2HxIA9tGD8zOGAMCIPCd8AHwQWsF95hGwWqcPF53utTLjyChqCYAdrD8ArGLNqcE41s5jUgTAUR4WZGX+AMxjs1yL8QQAYDd7UiAyPQpyZDppAuCDEAvOM28AANbr+lGk631nZ9wgP/O4HmMKwArWm7rZTKoAOMIDg0zMF4C5bJJrMq4AQCb2LgCsYs2pybjWlC4APgi14GfmCcBcNse1GV84z7wBgLGsrUAkehLkynbefiV+ABoOfE74SwYV69S6BMDHdaHiegeVVJyj9qS9GO/67CcAWMF6Uy/LTBsAH4TA8C9Nmgi61uGV+7aO5WTcevDyA8/TF4moaw+3J+3DuAGwijWnB99B9hv5/FMHwAchMPyhObOT+rv/3KxnORgn4Awv0LCeOXeePSnEZj8B7GRvADlzzPQB8EEIDD5ysJf6G8N6RrZ53aFefWyDn3XoBeShZ99nT5pDlzGyJwVgFWtO3O8gu67nZeDfu+PPKhEAH7yg0Fm0hgxcZz2LrcvYPLuudKnXiC8/5KKGYA3zbJwua3xWxqZnvdpPxGIsruswXyvpMl6+g/zNmlPD669CFCQdqXuANTps8AEAHrxrkqkGu9SrdxIqePlg9/XwtS49Rx1S1euuxjGreZisdDKj3h/zs8sCz3367nieKZnqr0u9Whe5q2oNVb0vgKi69N0ue0zgTyC8+zrgWV3qtcueo7KtJ4CFwBAv/B39ZwJU0KU/Xl1buuy9utQBAEBG9qSQW5c5nEWXXuM7yPe61EFVr7sLRggMcetbgwcA4Cv2ilCfbyuxdOm7d+quS812qQX66TKHo9NjoIYQ/wawEBj217WFHaB3f7y7vnTZd3WpB+ZQPwBc1WUN6bKnBGA/30Ge02UPUlGIAPggBIafCX8B1urSH0etL132XV3qAr5jHgAQlT0pwHVdekuXtWKULnVRzWukIhECQ7zwV3MHABjH3gqAs7qsHSO/e3T5FtilNuily/yNSE85T70SWZgTwA9CYPiXk7/Qj3Vrvy49cnStdandLvUBn1H/AOt06bld9pAA7Oc7yDVd9iSVvEYsDiEwxAp/NXegmy59z97oni51wnhqBwDm67LXta8ARujSS7qsDbN0qZMqwp0AfhACQ4zwFwDOst8CALivy7u7veN9XWoFICprGRG9/Qq+eZkxcY4/08aI6IS/gM3jHl365Oz66rLfmrVfpb6stdNhXgN/y9irKujSb+1JAfbr0ietOb3fZTtacgL4TtE7CUxHEcPfDosX16gNKulSz/ZBY3WpmyjULyOoI4A+uvR8e1Lgii69o8taACl+Avo9ITCdRAx/AeAKey2oxX4SYI0u/dZecbwutQMQVZe1zXqTw2uWQhAC00H08FdjByrr0uNW73267LW61E8UVepK3exRpX74lzlFBep4Dr0foO+a4zvIHF3qJ7MUJ4BnT5ouE5LY1DiZWfDJTg0zgjqiMvUNQPbvFF2+jVizgWd06RVdej+kDoBn0wjYSf1RQZeNI2S2a72xzjFDlbqyfq5VpW74mjlFZl3qVy+er0stAUTVZa2z3jQOgEcN/qrJ0mVSEku2+tbU+ak+1AjZdKnZ3fuc3X//Kl3qiV7UNVn3pGqXTNTrGl32pADf6bLm7O75u//+VbrUU0Zvuy8gmmNSKlhW6bII0M+ZPmoesJM1H4jSi6yH83nGPT271qsPWCPCXOvy7c/+AvhMh/530P9gYgCc7fTvx7+zSyNkn8y17SWCkfTbz5ljVKynLnss6+Q6XWoKmE8v+Zz1bI0u9aeeAOimyzur7yAxOQHcfGKyh2YI/GTEGqTXfK/LOh+tDrrssbz8UKVmOsxXoOZ/3J+FPruHPSnQUYe+d4jW96w57BI6AN5dLF0mJmupa2CVZ+b67p60iz4Iddjb8Iyu6x1EYV9KxPHtsofwQR44dOh3wIIAuFIz6bIZZI1KG24vEFDDV2uc+V1D1HHssr+yVpJdh3kKxNFxX9qlz1YeQwBiibrm+A7CDq9b/tZkFCwjqCMg24btvV+FVLufrOtO9OsbpUu97ValntTLHFXqA7qquiclhi5rhPlDJup1vC7PtEtPj65LvbUMgKv++zDRrodcotXPqOvRzKGPKh/esl8/wCr6ZS/R3leg+p70UOEeqvSXDNc4QpeaA/5m7sfRZb0hDieATzBBuULdANVU+ehWWZa1J8t13mW+rFGlntTLWFXqAqi1J8163WfpwQCskmXNyXKdd3XZ60QnAD6pywRlDPUCVJZtM5fteq+y9sTUpf6oQb0CmWQOgomjyx7aXIFePaXLnI/yvPlbl/prEwBX/fnnbNdHDNHrxM9AAyP44Eb19RJ20FfH0F+glyy9M8t13qUHx9WlBslJfY7jWcZljWQVJ4AvMkn5jvrgWWqFKqK/WES/vu49Jet1n9WlDnfqUkszqVMgs+g9LPr1dV+Ps143VNGlRzJW1t6d9brPMq+LBMAdB7LLJOWcjnXRcf4DeXpB1OsareP6k1GXeuQ+tQJwjf7JHV321OYJ0ajJsbo8zy49O7su9RhRuBPA2SZttutlLvUAdGdTx1XWUEZRSxzUAfQWcU8a8Zpm0H/z6FKTxP8npdTiWJ5nHtZMZnub/jdAExkb9nHNNgXAaEdfidITu/S4KM/7ri7rUqQ5Au91mH9AH5HWW/01ly57Uu5RI7BXlDX+ri5rTqR9WSdDTgB3KNDvKFzUgD4AxKMvEZn6nKvK3kyd9B5/4D59dK1K/bfSvXzHHIFa/aPLnO7So6HcT0Bnpen0ZewB+r50RFBtHap2P5CFvo3+C3N06a96SF5dahQgqi5rqPUmYQBs0PpNVPiKfgBE0aUfVd17VL2vrnW6S5U6Uic9xx2o0Uf18NysKUAmXdacqr256n11rdMonAAerMtE5X/GmxHUEVXt2tTZTJKJeiUCdQjAHZXfaSvf23v2ApC7Z3SZw116MoQIgEc3lioTuMp90GOcq9wHQDfV+3f1+4MzunzQuUvfACL10S69W++to0vNAkTVZU213qzT/gTwUWwzCq7LZO1qxvjOqsXVKtwDkLcndOlBXfYZXe6zS93u0KWG7lB/AOPprbXYTwCRdVlz9OJautTtbu0D4AchMLvD39F/JkA3eilQmR73Pe9eY3iOwBmdekaXe7XfgFx9wpytp8t6Q/AAuEJz+XgPQmAihL8V5xY/0yuAZ3XrF13u19o5T5caAiDGWttlTbe+ArBKtzWny/122TPt1PYE8FfFJQQmwslfzQ/gnC59s+ueost9d6lj4lBzAGPpq7XZkwJfcfp3ni69t6sudZwqAK4+KEJgPvKzz+dVvz8gTj/Qb4Aue3H9rvb4RuF5Aj/p3Ce63Ls9BzxP+MsMXdYb5mp5AviZBikEZnf4ayHvR48AvtO9R3S5f+s/q6g1gLG69NUuezKAZ+iJc3V/vl3uv8seaoeWAfCzhMA4+QsQW5eeav/QS5e6Xq3KPFIfNccVyE1v7qXL2qOuIWYv6DI3u/RaetV1+AC420AIgfsS/t7X7X5H0B/geXpMP3okjKF/8hP9lqr0v3v0hn7MGfic8JdVrL3c0e4E8JUmKQTuJ0r4a1EHwJ6h5/OwB5ijSv2oj1rjGZXnC8/p0pP1hL95HtB37pv/83nGPZ9Hlz1V2AC48wAIgfuIEv5W0fner9Ib4Gddeot+0FuXOmctdQUAY3TZq9s7QIw532Uu7n7O7NWlzldpdwL4DiFwfcJfotAbqEYvZCQ9EtAH1vCc4Xtd9rh6AV1qHaKe+jUH2V2D5NQqAB7RKIXAdQl/iUZvgN69VQ/4Xpfn06XeV6pSO2qDVarMGRhNH+agR0JdEYLfbjzv73V5PvZYGwJgD/0PIXA9kcPfCnOvwj3sojfA3/QTOlL3jKKWuMqeFPoy/3/W5RnZR9DN73d2X8evBrr0Up7Tpe5na3UCeCQhcB2Rw1846A3Qj3n/HM+J7rXTdc9ZZfyy8dyhX/817+la+/DRriDYnOMjazNnvD3zf6TRfP1cRk+448/zvNcR/uaeL53oDdCrv3a6V55jHeUufYURHn1IPdFZp/rvdK8Az/BeNo81h4/Mt/ucAL7JSeC8hL95r7kr//YInelVYB6MVmVN7VYXVcYtO/tSgL667T1g12lgcw0oFQBnbWpC4HyEv1T44KZPAADPsE9lFntSuvVE/RT+Zy6AeQArmGeTA2AP+DlC4DyEv/t4TuMJg+lA74A/zIexqqyfXeqiynhV35MaJ6rq0msB2L82WHPgD/Nh8r8BzHP8m8DxCX/pVt/qk+zUMPzLv4PDGfooO9iXAtRnTwpz2DMBSwJgzeY8IXBcwt8YvCCs9dOzVsMAQAb2j/nZl5KZ+oTP+cYD5gGsYJ5d4wTwBELgeIS/MG9umAsAZFZln+2FmOzu1m+FeQwA5GQvDkQULgCu0iyFwHEIf+vfB3tV6NnvmRcAVGFNoxN7UgAAgCcC4IovG6sDVCHwfhXC32ofMir9hx7UtKs2O/R2cx+Iqsoeu2qfrXhP8BN7UgAAoNQJ4GqEwPtUCH+Bvj1LvwHgDusIMOo9Wj8BgL7/MSaQ1+tX/4udzaray8WM+7GYfE/4G/t+1C88N0/MFYB1qvTcanvWKuMCmZmHAABQKAA+2OSPIwReR/gbm7qFc8wZAM6ydwVGsycFAIBCAXDFTX61k83VxueuauFvtfGtdj8AQC32KrEYD4jFnASA7/kPMYFUAfCuTX7VZikEnqda+DvTjvtSp3Cd+QMAAAAAwNAAuNrH5933IgQer2L4W2lMK90LAADz2T8CAADAdW9nX8J3h2JVHM9x9EeNruNTMfytxMe72jVmfAGopuuemr4q1Ls9KQAAwMUTwDterGa+iEZ4QXQS+L6q4e/McVx5f93qEQCA++whAQAAYHEAfPBCPo4Q+Drhb2xV7gMA6Mc+BgAAyPp9GeByALzyo0j1U8AHIfB5VcPf2VbdY/X6AwAAAAAAKBcAVwl5otyDEPh5lcPfCmNW4R4AAOxp9vDcITZzFAAAGgTAqzb/s8O5KC8wQuCfCX9j32e1egMAAAAAAGgXAFcJfaLcgxD4a8Lf2CrcAwDAe/Y3a3neEF+Ud2gAAOB7b78GvqzPfBE4/uzZHwRm38NO2e+t8scgp+gBAAAAIA/fwubJ/A0boNwJ4EoL3+57mPn37763qyo/k91//wgV7gEA4Cv2Omt4ztzhQzEAAMDEAHj2i/uql7rjHnZ8gFjxd2b7sFL1mayssZnzJls9MZ6PbQAAAAAAUDwArhICrwy3VgfOWUK71c9k5Xj/WkT4CwBAdPaVAAAAkCAArvQS/wgGZ9zPrpPGj7/7V2A7n8vMsY7+3J9V5T4Ywyng+ao8Y70DyEr/gviq7JcAAABCB8AVX+xGBHiRgsAI1xD1ukaN086x9gGEldQbAAC72ZPO5fkCAEAeb1lfDI4/3+nZMfcS6SUu4rONeE2d5x9xqYvxIvVngO6i7ZursHdgtMc8VVtj6X8AAJDLlADYi0EuUT5meUHPRdjHZz72EjVyTYSeDABQZT9lT3qNPSkAAOT1lvkFQQBVJwQ2juOYg0TioxEAlezeM1djH8kq5i0AANDNa/aXKi9y4/hJ7fzMwTzUPQAAAAAAEDoA3hkCCaDyhlJCsHHMQQCA+exfx/AcAQAAIHgAHCH8iXANVaz6GOOjT636j3ANAAAA8B3fIgAA6OC1UugT6Vqym/1C5IWrZt1HuhYAAGLyLgAAAACBA+CIYU/Ea8pq1ocZH3xq13vEawIAGMl+FgAAACgZAEcOeSJfW/ePWz6W9ajzyNcGAAAAAABQ2WvVcCfDNWYxKrQV/vaq7wzXCABwlb3tNZ4bAAAABAyAM4U6ma61+ocaH3p61nWmawUAAAAAAGgXAGcMczJec1RXQ1zhb+96znjNwHjWAqAive0czysm4wIAAFDPW4cQ57h2L7VjHM/xTC147uOYgwA56X/xZF5TAQCusi+NxZ4UqMp6E481p6fXLsVx3EOF+8jUwDX6MarUboV7AAD4yJ73OZ4TEIFeBABAF6/dQptq9xP1pclL1RjV6rXa/dxlngAAAAAAAEsD4KphTZUTlVHDK6HWfZVrtOp9AQDwOe8HAAAAECQA7hDSdLjH1R9zfNy5r0NddrhHAKAPe2AAAAAgkrfu4czjXqt/tHk/pqPvdeazm3nd0XSad4/7rT6mwP/MdYC+rAEAAAAQ4ARwtxCq+k/ufnZfWe4z63WfVbX2ntH1vgGAegSdZKZ+6UCdAwDQNgAWxtQJ4366j+j3+NX1Pe4r+vU/o8p93NX9GfgIAQAAAAAATAmAu4cwVcK5M9cd9f7OXH/Ue6h43TN5HgBABf7Drr95HgAAALDx3wAWvuT+N2jvjF+0f4f1yr1UH6MuotUiMIZ5DQAAAACw1ptgKmfQOHLcogRvI+6p6hh1EaUWAQCuOvYy9oH79+Kcp3apTE8CAKDlCWDO+/hiPPtlYvaL+O7gbcb9VRsj6vKxDQAAAAAAGEUAPMhX4c3Z0HFnCLQrBF51zxXGCCATJy2Arrr/x136f17da5ea9CQAADp6e2yEveTNke25rg6BIzyfCNeAl3If2wAAAAAAgBFeH/9D9/CFOCdy6Uf/gXrMa4Ce9H8AAAAIFAAfvKyz8t8cnvnnk4e+84dnAQB1WNfJSu1SiXoGAKCrvwLgx+bYBpmZIa3wl4NeA3WZ2wCQm7WcCtQxAACd/RMAP9goMyOsFf5y0F++5tmQnRoG6NsTu90vEJd+BABAd18GwAcn9BgZ2gp/0VOe4xmRldoFgDqs62SldgEA4IcA+MHmmbvhrfAXfeQcz4ts1CxA7/7Y5T67Ma5ko2YBAOBEAHywieZqiCv8Rf+4xnMjC7UKAHVZ58lCrQIAwIUA+ODnWzkb5gp/e9Mz7vP8iMwcB3hO9V5Z/f6w5hOf+gQAgBsB8IONdW/PhrrC3970iXF8cCMiNQkA/Vj/ica7EgAADAyADzbYvf0U7gp/e9Mf5vBxgwjUIQDvWRP6sRcgAnUIAADfe/t1w2OzLezr6Rj3z1641ENfXsDX0HvZwfwGuN9Hrd1U3RuobVaxJwUAgAUB8IOPGX19DIHVQV9exNcz95jNvAYAnmFfykz2pAAAsCkAPgiB+3qEwMa/Ly/k8cbAfOQKcxlgrmp7ZusGn7Ev5S69BQAAAgXABz9L2pcx78mLeb6xMVc5mLsAwCr2pXzFnhQAAOaZttn2Mge1eVmvTQ/Py9wEAKqwJ83LnhQAAPaauiH3sgY1eZnnDGvBz8wpAID57Eu/Z08KAAB1LNnce8mCGnwQAAAAAAAAiO11xV8iNIL8zGMAAAAAAID4lgTAB+ER5GX+AgAAAAAA5LAl1PGT0JCD4BcAAAAAACCXZSeA3xMqQXzmKQAAAAAAQD5bAuCDcAniMj8BAAAAAAByChHy+EloiEHwCwAAAAAAkNu2E8DvCZ1gP/MQAAAAAAAgvxAB8EH4BPuYfwAAAAAAADWEDH38JDSsIfgFAAAAAACoJcwJ4PeEUjCfeQYAAAAAAFBP+ADIaWAYS/ALAAAAAABQV8gTwO8Jq2Ac8wkAAAAAAKC28AHwQWgF95lHAAAAAAAA9aULhPwkNJwj+AUAAAAAAOgjxQng94RZ8DzzBQAAAAAAoJd0AfBBqAU/M08AAAAAAAD6SR8Q+Ulo+JvgFwAAAAAAoK+UJ4DfE3bBH+YDAAAAAABAb+kD4IPQC8wDAAAAAAAACvwE9Ed+EppuBL8AAAAAAACUOgH8njCMTtQ7AAAAAAAApQPgg1CMDtQ5AAAAAAAAH5UPkPwkNNUIfgEAAAAAAGh1Avg9YRmVqGcAAAAAAABaB8AHoRkVqGMAAAAAAAB+0i5Q8pPQZCP4BQAAAAAA4FktTgC/J0wjE/UKAAAAAADAGe0C4INQjQzUKQAAAAAAAGe1D5j8JDTRCH4BAAAAAAC4quUJ4PeEbUSiHgEAAAAAALijfQB8ELoRgToEAAAAAADgLoHTB34SmtUEvwAAAAAAAIziBPAHwjhWUm8AAAAAAACMJHz6htPAzCL4BQAAAAAAYAYngL8hpGMGdQUAAAAAAMAsAuAfCOsYST0BAAAAAAAwkzDqBD8JzVWCXwAAAAAAAFZwAvgEIR5XqBsAAAAAAABWEQCfJMzjDPUCAAAAAADASsKpG/wkNF8R/AIAAAAAALCDE8A3CPn4jLoAAAAAAABgFwHwTcI+3lMPAAAAAAAA7CSsGshPQvcl+AUAAAAAACACJ4AHEgL2ZNwBAAAAAACIQgA8mDCwF+MNAAAAAABAJMKrifwkdF2CXwAAAAAAACJyAngiIWFNxhUAAAAAAICoBMCTCQtrMZ4AAAAAAABEJsxayE9C5yX4BQAAAAAAIAMngBcSIuZk3AAAAAAAAMhCALyYMDEX4wUAAAAAAEAmwq2N/CR0XIJfAAAAAAAAMnICeCMhY0zGBQAAAAAAgKwEwJsJG2MxHgAAAAAAAGQm7ArET0LvI/gFAAAAAACgAieAAxFC7uG5AwAAAAAAUIXgKyingecT/AIAAAAAAPCrmP8A0dzqfafwOPgAAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

.footer__company__name {
  display: none !important;
}

.footer__links {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  justify-content: flex-end;
  width: auto !important;
  max-width: none !important;
  margin: 0 0 0 auto !important; /* pin Terms to the right edge of the 1360 row */
  padding: 0 !important;
  text-align: right;
}

/* Keep Terms; hide Support (and any subsequent TI links) */
.footer__links .link + .link {
  display: none !important;
}

.footer__links .link {
  display: block;
  margin: 0;
  padding: 0;
  width: auto;
}

.footer__links a {
  color: var(--color-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  white-space: nowrap;
}

.footer__links a:hover,
.footer__links a:focus {
  color: var(--color-white) !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
  background: none !important;
}

@media (max-width: 767px) {
  .footer {
    padding: 40px 24px;
    overflow-x: hidden; /* contain skip-link / flex overflow */
    box-sizing: border-box;
  }

  /* Desktop uses flex-direction: row !important — must override */
  .footer__inner {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 24px;
    width: 100% !important;
    max-width: 100% !important;
  }

  .footer__company__info,
  .footer__company__info::before {
    flex: 0 1 auto;
    flex-shrink: 1;
    width: 220px;
    max-width: 100%;
    min-width: 0;
    height: 32px;
  }

  .footer__links {
    flex: 1 1 auto !important;
    flex-shrink: 1 !important;
    justify-content: flex-start;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left;
  }
}

/* Navigation */
.header--dashboard {
  padding: 1rem 0 0;
}

.dashboard-header__name {
  display: none;
}

.learn.dashboard .widget.widget--navbar {
  padding: 0;
}

.header .company__beta-logo .company-logo__container img {
  max-width: 600px;
  padding-left: 16px;
}

.navigation-bar.top-bar,
.top-bar-section ul li,
.top-bar-section li:not(.has-form) a:not(.button) {
  background: #f0f6fe;
}

.top-bar-section li:not(.has-form) a:not(.button) {
  line-height: 26px;
  padding: 0 12px;
}

.top-bar {
  border-top: 0;
}

.top-bar.expanded {
  padding: 0 0 50px 0;
}

.navigation-bar .top-bar-section ul li > a {
  color: var(--color-black);
  font-size: 13px;
  line-height: 26px;
  text-transform: uppercase;
  font-weight: 400;
}

.navigation-bar .top-bar-section li:not(.has-form) a:not(.button):hover,
.navigation-bar .top-bar-section ul li:hover:not(.has-form) > a,
.navigation-bar .top-bar-section li:not(.has-form) a:not(.button):focus {
  background: #f0f6fe;
  color: var(--color-black);
  text-decoration: underline;
}

/*.top-bar-section ul li:nth-of-type(4) a:after {
    content: '\2197';
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #00263E;
  }
  
  .top-bar-section ul li:nth-of-type(4) a:hover:after {
    color: #0369EA;
  }*/

@media (min-width: 767px) {
  .navigation-bar .top-bar-section ul.left {
    border-bottom: none;
  }

  .top-bar {
    padding: 13px 0 10px 0;
  }
}

@media (max-width: 767px) {
  .header .company__beta-logo .company-logo__container img {
    padding: 10px 10px;
  }

  .top-bar-section li:not(.has-form) a:not(.button) {
    padding: 11px 12px;
  }
  .top-bar .title-area,
  .top-bar.expanded .title-area {
    background: var(--color-black);
  }

  .top-bar .toggle-topbar {
    text-align: left;
  }

  /* Foundation/TI use <a>, not always <button> — cover both */
  .top-bar .toggle-topbar.menu-icon > a,
  .top-bar .toggle-topbar.menu-icon > button,
  .top-bar.expanded .toggle-topbar.menu-icon > a,
  .top-bar.expanded .toggle-topbar.menu-icon > button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #fff !important;
    text-transform: capitalize;
    font-size: 13px;
    font-weight: 400;
    margin-left: 0;
    line-height: 1.2;
    position: relative;
  }

  .top-bar .toggle-topbar.menu-icon > a span,
  .top-bar .toggle-topbar.menu-icon > button span,
  .top-bar.expanded .toggle-topbar.menu-icon > a span,
  .top-bar.expanded .toggle-topbar.menu-icon > button span {
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Kill ALL built-in icons/pseudos (TI + Foundation often both paint one) */
  .top-bar .toggle-topbar.menu-icon > a:before,
  .top-bar .toggle-topbar.menu-icon > a:after,
  .top-bar .toggle-topbar.menu-icon > a span:before,
  .top-bar .toggle-topbar.menu-icon > a span:after,
  .top-bar .toggle-topbar.menu-icon > button:before,
  .top-bar .toggle-topbar.menu-icon > button:after,
  .top-bar .toggle-topbar.menu-icon > button span:before,
  .top-bar .toggle-topbar.menu-icon > button span:after,
  .top-bar.expanded .toggle-topbar.menu-icon > a:before,
  .top-bar.expanded .toggle-topbar.menu-icon > a:after,
  .top-bar.expanded .toggle-topbar.menu-icon > a span:before,
  .top-bar.expanded .toggle-topbar.menu-icon > a span:after,
  .top-bar.expanded .toggle-topbar.menu-icon > button:before,
  .top-bar.expanded .toggle-topbar.menu-icon > button:after,
  .top-bar.expanded .toggle-topbar.menu-icon > button span:before,
  .top-bar.expanded .toggle-topbar.menu-icon > button span:after,
  .top-bar .toggle-topbar.menu-icon i,
  .top-bar .toggle-topbar.menu-icon svg,
  .top-bar .toggle-topbar.menu-icon [class*='icon'],
  .top-bar .toggle-topbar.menu-icon [class*='Icon'] {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background: none !important;
    font-size: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
  }

  /* Single chevron — only on the toggle control itself */
  .top-bar .toggle-topbar.menu-icon > a:after,
  .top-bar .toggle-topbar.menu-icon > button:after,
  .top-bar.expanded .toggle-topbar.menu-icon > a:after,
  .top-bar.expanded .toggle-topbar.menu-icon > button:after {
    content: '\e679' !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    font-size: 13px !important;
    font-family: ti-icons-rev2 !important;
    line-height: 1 !important;
    color: #fff !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    margin: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background: none !important;
    overflow: visible !important;
    transform: none;
  }

  .top-bar.expanded .toggle-topbar.menu-icon > a:after,
  .top-bar.expanded .toggle-topbar.menu-icon > button:after {
    transform: rotate(180deg);
  }
}

/** Utilities **/
.light-blue-bg {
  background-color: #f0f6fe;
}

/** Typography **/
.widget--title {
  max-width: 355px;
}

.widget--title.widget--title_standard.light-blue-bg {
  max-width: 100%;
}

.h2,
.widget__subtitle,
.catalog-grid-item__description,
p {
  color: var(--color-black);
}

.widget__title,
.widget__alt-title__container h3 {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  margin: 0 auto 10px;
  width: 100%;
  text-align: center;
}

.widget__title,
.widget__alt-title__container h3 {
  padding-top: 60px;
}

widget__alt-title__container p {
  padding: 0 20px;
}

.widget__subtitle {
  font-size: 16px;
  line-height: 26px;
}

@media (max-width: 767px) {
  .widget--title.widget--title_standard.light-blue-bg .widget__title {
    max-width: 355px;
  }
}

@media (min-width: 767px) {
  .widget__title,
  .widget__alt-title__container h3 {
    font-size: 36px;
    line-height: 48px;
    margin: 0 auto 30px;
  }

  .widget--title {
    max-width: 708px;
  }

  .widget__alt-title__container h3 {
    text-align: left;
  }

  .widget__subtitle {
    font-size: 18px;
    line-height: 30px;
  }
}

@media (min-width: 991px) {
  .widget--title,
  .widget__alt-title__container h3 {
    padding-top: 120px;
  }
}

@media (min-width: 1440px) {
  .widget--title {
    max-width: 795px;
  }

  .widget__title {
    font-size: 48px;
    line-height: 60px;
  }
}

/** Hero Styles **/
.layout__content .hero {
  margin-bottom: 0;
}

.hero .hero__caption {
  background: none;
  position: absolute;
  bottom: 50%;
  transform: translate(0, 50%);
  left: 0;
  max-width: 500px;
}

.hero .hero__caption .hero__title,
.hero .hero__caption .h4 {
  color: #fff;
}

.hero .hero__caption .hero__title {
  font-weight: 700;
  font-size: 30px;
}

.hero .hero__caption {
  padding: 30px 30px;
}

.hero .hero__caption .h4 {
  display: block;
  font-size: 16px;
  margin-bottom: 30px;
}

.btn.btn--primary {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  border-radius: 4px;
  color: var(--color-black);
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0;
  padding: 15px 20px;
  text-transform: uppercase;
}

.hero .btn.btn--primary::after {
  content: '';
  background-image: url('https://corpweb-static.s3.us-west-2.amazonaws.com/icon-play%402x.png');
  background-size: 100% 100%;
  display: inline-block;
  height: 13px;
  width: 13px;
  position: relative;
  top: 2px;
}

.hero img {
  min-height: 300px;
}

.customers--img picture {
  display: flex;
  background: #036aeb;
  justify-content: flex-end;
}

/** Hero Tablet Media Queries **/
@media (min-width: 767px) {
  .hero .hero__caption {
    max-width: 600px;
  }

  .hero .hero__caption .hero__title {
    font-size: 48px;
    line-height: 52px;
  }

  .hero .hero__caption .h4 {
    font-size: 16px;
  }
}

/** Hero Desktop Media Queries **/
@media (min-width: 991px) {
  .hero .hero__caption .hero__title {
    font-size: 58px;
    line-height: 64px;
  }

  .hero .hero__caption .h4 {
    margin-bottom: 45px;
    font-size: 24px;
  }
}

@media (min-width: 1200px) {
  .hero .hero__caption {
    transform: translate(17%, 50%);
  }

  .customers--img .hero .hero__caption {
    transform: translate(0, 50%);
  }
}

@media (min-width: 1440px) {
  .customers--img .hero .hero__caption {
    transform: translate(15%, 50%);
  }
}

/** Featured Content Tiles **/
.catalog-grid-item,
.catalog-grid-item__hr,
.featured-content-article-item,
.featured-content-article-item__hr {
  border: none;
}

.catalog-grid-item__body hr,
.featured-content-article-item__body hr {
  display: none;
}

.catalog-grid-item__body,
.featured-content-article-item__body {
  display: flex;
  flex-direction: column;
}

.catalog-grid-item__title,
.featured-content-article-item__title {
  font-size: 22px;
  margin-bottom: 10px;
  font-weight: 400;
}

.catalog-grid-item__description,
.featured-content-article-item__description {
  font-size: 16px;
}

.catalog-grid-item__asset,
.featured-content-article-item__asset {
  border-radius: 3px;
}

.catalog-grid-item__source,
.featured-content-multi-carousel-item__source strong {
  text-transform: uppercase;
  font-size: 11px;
  line-height: 20px;
  letter-spacing: 1px;
  order: -1;
  padding-bottom: 5px;
}

.btn--right {
  float: none;
}

span.btn.btn--primary {
  display: none;
}

.featured-content-article-item__description:before {
  border: none;
}

/** Site Visbility Section **/
.site-visibility {
  position: relative;
}

.site-visibility .widget__title,
.site-visibility .widget__subtitle,
.site-visibility .btn.btn--primary.btn--centered.btn--large {
  position: absolute;
  color: #fff;
  z-index: 2;
  left: 43%;
}

.site-visibility .widget__title {
  top: 22%;
  text-align: left;
  font-weight: 700;
  font-size: 16px;
  padding: 0;
  width: auto;
}

.site-visibility .widget__subtitle {
  top: 38%;
  text-align: left;
  font-size: 13px;
  line-height: 17px;
  padding: 0;
}

.site-visibility .btn.btn--primary.btn--centered.btn--large {
  background-color: transparent;
  border-color: transparent;
  padding: 30px 0 0 0;
  top: 46%;
  text-transform: capitalize;
}

@media (max-width: 766px) {
  .site-visibility .widget__subtitle,
  .site-visibility .widget__title {
    max-width: 185px;
  }
}

@media (min-width: 767px) {
  .site-visibility .widget__title {
    top: 30%;
    font-size: 30px;
    line-height: 42px;
  }

  .site-visibility .widget__subtitle {
    font-size: 16px;
    line-height: 24px;
    top: 41%;
  }

  .site-visibility .widget__title,
  .site-visibility .widget__subtitle,
  .site-visibility .btn.btn--primary.btn--centered.btn--large {
    left: 50%;
  }
}

/** Video Modal **/
/* The following is for Responsive Video - DO NOT DELETE */
div.container-vimeo {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

/* The following is for Responsive Video - DO NOT DELETE */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.modal-video {
  display: none;
}

.video__container {
  max-width: 315px;
  margin: 0 auto;
}

.widget.widget--video.widget--video_standard.modal-video {
  padding-top: 100px;
}

.widget.widget--video.widget--video_standard.modal-video.open {
  display: block;
  background: rgba(0, 0, 0, 0.9);
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(5px);
}

.widget.widget--video.widget--video_standard.modal-video.open:before {
  content: '';
  background-image: url('https://corpweb-static.s3.us-west-2.amazonaws.com/modal-close.png');
  background-size: 100% 100%;
  display: inline-block;
  height: 28px;
  width: 28px;
  position: absolute;
  top: 13%;
  right: 4%;
  z-index: 3;
}

.container-open {
  width: 100%;
  height: 100%;
  max-width: 100%;
  position: fixed;
}

@media (min-width: 767px) {
  .video__container {
    max-width: 708px;
  }

  .widget.widget--video.widget--video_standard.modal-video.open:before {
    top: 9%;
    right: 2%;
  }
}

@media (min-width: 992px) {
  .video__container {
    max-width: 992px;
  }

  .widget.widget--video.widget--video_standard.modal-video.open:before {
    top: 17%;
    right: 7%;
  }
}

@media (min-width: 1200px) {
  .widget.widget--video.widget--video_standard.modal-video.open:before {
    top: 10%;
    right: 17%;
  }
}

/** Explore Courses Page **/
hr {
  display: none;
}

.catalog-aggregation--expanded {
  background-color: #fff;
}

.catalog-aggregation--expanded,
.catalog-aggregation {
  border: none;
}

.btn.catalog-aggregation__value {
  color: #333;
  font-size: 16px;
  line-height: 26px;
}

.catalog-aggregation__expander {
  line-height: 30px;
}

.catalog-aggregation__header--label {
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--color-black);
  padding-left: 0 !important;
}

.widget--catalog_standard .catalog-grid-item__description:after {
  content: 'View Course \0276F';
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-black);
  margin-top: 20px;
}

[class*='block-grid-'] > li {
  padding: 0 10px 50px 10px;
}

.catalog-search-bar {
  margin: 0 auto 60px;
}

.catalog-filters__search,
.catalog-filters__sort {
  background: none;
  padding: 0;
}

.catalog-filters {
  border-radius: 46px;
  border: 1px solid #c3c8ce;
  background: #f0f6fe;
}

input[type='search'] {
  padding-left: 20px;
  border-radius: 46px;
  background: transparent;
}

.catalog-search input:focus,
.catalog-search button {
  background-color: #f0f6fe;
}

@media (max-width: 768px) {
  /* Mobile Styles */
  .catalog-filters {
    border: none;
  }

  .catalog-search__button i {
    padding: 0 0.75rem 15px 0;
  }

  .catalog-search button {
    background-color: transparent;
  }

  .catalog-filters__search input,
  .catalog-filters__select {
    background-color: #f0f6fe;
  }

  select.catalog-filters__select {
    border-radius: 48px;
  }
}

/** Driver Training Page **/
.driver-training .hero {
  margin-bottom: 0;
}

.driver-cards .catalog-grid-item .row,
.partner-cards .catalog-item .row {
  display: flex;
  flex-direction: column;
}

.driver-cards .catalog-grid-item .row .medium-6,
.partner-cards .catalog-item .row .medium-6 {
  width: 100%;
}

.driver-links .catalog-grid-item__title:after {
  content: 'View Full Playlist \0276F';
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-black);
  margin-top: 20px;
}

@media (min-width: 1200px) {
  .widget.widget--featured-content.widget--featured-content_standard.driver-cards {
    padding: 120px 130px 80px 130px;
  }
  .widget.widget--featured-content.widget--featured-content_standard.partner-cards {
    padding: 0 200px 0 200px;
  }
}

/** Course Player (learner__container) — Academy V3 branding **/
/* Page chrome — off-white #F5F4F1 (gray-50) */
body.learn.course:not(.manager),
body.learn.course:not(.manager) .wrapper,
body.learn.course:not(.manager) .main,
.learner__container,
.learner__container.learner__container--toggled,
.learner__sidebar,
.learner__sidebar .layout-panel,
.learner__content,
.sidebar__toggle,
.expandable-sidebar__buttons,
.expandable-sidebar,
.expandable-sidebar__content {
  background-color: #f5f4f1 !important;
  background: #f5f4f1 !important;
}

/* Learner top header — white bar, brand divider */
.header--learner,
.header--student {
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

/* Constrain the header logo (source img is ~300px tall → overflow).
   Nudge logo toward the right edge without rewriting TI's float layout. */
.header--learner .header__right,
.header--student .header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
  margin-right: 0 !important;
  padding-right: 16px !important;
  overflow: hidden;
}

.header--learner .company__beta-logo,
.header--student .company__beta-logo,
.header--learner .company-logo__container,
.header--student .company-logo__container {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
}

.course__container .company-logo__container,
.course__container .ember-view.company-logo__container,
.header--learner .company-logo__container,
.header--student .company-logo__container,
.header--learner .ember-view.company-logo__container,
.header--student .ember-view.company-logo__container {
  margin-top: 0 !important;
}

.header--learner .company__beta-logo .company-logo__container img,
.header--student .company__beta-logo .company-logo__container img {
  display: block;
  max-height: 32px !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Print-only lockup shouldn't render on screen */
.company__beta-logo.print-logo {
  display: none !important;
}

.header--learner .course-title,
.header--learner .course-title-link,
.header--student .course-title,
.header--student .course-title-link {
  color: var(--color-black) !important;
  font-family: var(--font-sans) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.33 !important;
}

/* Home icon → black bar filling full nav height, white glyph */
.header--learner .header__left__icon,
.header--student .header__left__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 66px;
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: var(--color-black);
  border-radius: 0;
}

.header--learner .header__left__icon i,
.header--learner .header__left__icon i::before,
.header--student .header__left__icon i,
.header--student .header__left__icon i::before {
  color: var(--color-white) !important;
}

.header--learner .header__left,
.header--student .header__left {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.header--learner .header__left__copy,
.header--student .header__left__copy,
.header--learner .header__left .course-title,
.header--learner .header__left .course-title-link,
.header--student .header__left .course-title,
.header--student .header__left .course-title-link {
  display: flex;
  align-items: center;
}

.progress {
  border: none;
  margin-top: 0.625rem;
}

/* Progress + directional nav accents → brand */
.progress.colorized .meter,
.section-progress-bar span,
.section-progress-bar > div > span,
.learner__content .section-progress-bar span,
.course__container .section-progress-bar span {
  background: var(--color-yellow) !important;
  background-color: var(--color-yellow) !important;
  max-height: 10px;
  border-radius: 50rem;
}

/* —— Learning-path → course: kill TI theme blue (bg-accent / accent text) —— */
.course__container .bg-accent,
.course__container [class*='bg-accent']:not(.bg-accent-100):not(
    .hover_bg-accent-200
  ) {
  background: var(--color-black) !important;
  background-color: var(--color-black) !important;
}

.course__container .bg-accent .text-accent-contrast,
.course__container .bg-accent button,
.course__container .bg-accent i,
.course__container .bg-accent i::before,
.course__container .text-accent-contrast {
  color: var(--color-white) !important;
}

.course__container .bg-accent button:hover,
.course__container .bg-accent button:focus {
  color: var(--color-white) !important;
  background: transparent !important;
  border-color: transparent !important;
  outline: none !important;
}

/* Sidebar Notes / Sign Out — never theme blue */
.learner__sidebar .expandable-sidebar__link,
.learner__sidebar .expandable-sidebar__toggle,
.learner__sidebar .expandable-sidebar__buttons a,
.course__container .learner__sidebar a {
  color: var(--color-black) !important;
}

.learner__sidebar .expandable-sidebar__link:hover,
.learner__sidebar .expandable-sidebar__buttons a:hover {
  color: var(--color-black) !important;
  text-decoration: underline !important;
}

/* Bookmark icon — never blue (idle + bookmarked) */
.bookmark-dropdown__button,
.bookmark-dropdown__button i,
.bookmark-dropdown__button i::before,
.bookmark-dropdown__button .icon-bookmark-plus,
.bookmark-dropdown__button .icon-bookmark,
.icon-bookmark-plus,
.icon-bookmark-plus::before,
.icon-bookmark,
.icon-bookmark::before,
.course__container .icon-bookmark-plus,
.course__container .icon-bookmark-plus::before,
.course__container .icon-bookmark,
.course__container .icon-bookmark::before,
.learner__content .bookmark-dropdown__button,
.learner__content .bookmark-dropdown__button i,
.learner__content .bookmark-dropdown__button i::before {
  color: var(--color-black) !important;
}

/* Bookmark popover — Remove/links = tertiary; Save = Primary (after links) */
.bookmark-dropdown {
  font-family: var(--font-sans);
}

.bookmark-dropdown a:not(.btn--primary),
.bookmark-dropdown a.btn--link,
.bookmark-dropdown .btn--link,
.bookmark-dropdown button.btn--link,
.bookmark-content a:not(.btn--primary),
.bookmark-content .btn--link,
.bookmark-content .btn--primary {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--link-text, var(--color-black)) !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.bookmark-dropdown a:not(.btn--primary):hover,
.bookmark-dropdown a.btn--link:hover,
.bookmark-dropdown .btn--link:hover,
.bookmark-content a:not(.btn--primary):hover,
.bookmark-content .btn--link:hover,
.bookmark-content .btn--primary:hover {
  color: var(--link-hover, var(--color-black)) !important;
  text-decoration: underline !important;
  background: none !important;
}

.bookmark-dropdown .btn.btn--primary,
.bookmark-dropdown a.btn.btn--primary,
.bookmark-dropdown button.btn--primary,
.bookmark-dropdown input[type='submit'] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--btn-primary-bg, var(--color-yellow)) !important;
  border: 1px solid var(--btn-primary-bg, var(--color-yellow)) !important;
  color: var(--btn-primary-text, var(--color-black)) !important;
  border-radius: var(--btn-radius, 4px) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  padding: var(--btn-pad-y, 12px) var(--btn-pad-x, 16px) !important;
  min-height: var(--btn-height, 48px) !important;
}

.bookmark-dropdown .btn.btn--primary:hover,
.bookmark-dropdown a.btn.btn--primary:hover,
.bookmark-dropdown button.btn--primary:hover {
  background: var(--btn-hover-bg, var(--color-gray-300)) !important;
  border-color: var(--btn-hover-bg, var(--color-gray-300)) !important;
  color: var(--btn-hover-text, var(--color-black)) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* —— TI muted silver #bdbfc6 → brand ——
   Base theme uses #bdbfc6 for secondary icons, bare buttons, and quiet links.
   Links/text → tertiary text-link; icons/buttons → black. */
.course__container a:not(.btn):not(.btn--primary):not(.course-title):not(
    .course-title-link
  ):not(.company__beta-logo),
.learner__container a:not(.btn):not(.btn--primary),
.header--learner a:not(.btn):not(.course-title):not(.course-title-link):not(
    .company__beta-logo
  ):not(.header__left__icon),
.header--student a:not(.btn):not(.course-title):not(.course-title-link):not(
    .company__beta-logo
  ):not(.header__left__icon),
.learner__sidebar a,
.expandable-sidebar__buttons a,
.bookmark-dropdown a:not(.btn--primary),
.bookmark-content a:not(.btn--primary),
.course__container .btn--bare,
.course__container .btn--link:not(.btn--primary),
.learner__container .btn--bare,
.learner__container .btn--link:not(.btn--primary),
.header--learner .btn--bare,
.header--student .btn--bare {
  color: var(--link-text, var(--color-black)) !important;
}

.course__container a:not(.btn):not(.btn--primary):not(.course-title):not(
    .course-title-link
  ):not(.company__beta-logo):hover,
.learner__container a:not(.btn):not(.btn--primary):hover,
.learner__sidebar a:hover,
.expandable-sidebar__buttons a:hover,
.bookmark-dropdown a:not(.btn--primary):hover,
.bookmark-content a:not(.btn--primary):hover,
.course__container .btn--link:not(.btn--primary):hover,
.learner__container .btn--link:not(.btn--primary):hover {
  color: var(--link-hover, var(--color-black)) !important;
  text-decoration: underline !important;
}

/* Icons / icon-font buttons that inherit #bdbfc6 → black */
.course__container i[class*='icon-'],
.course__container i[class*='icon-']::before,
.learner__container i[class*='icon-'],
.learner__container i[class*='icon-']::before,
.header--learner i[class*='icon-'],
.header--learner i[class*='icon-']::before,
.header--student i[class*='icon-'],
.header--student i[class*='icon-']::before,
.bookmark-dropdown i[class*='icon-'],
.bookmark-dropdown i[class*='icon-']::before,
.learning-path-timeline i[class*='icon-'],
.learning-path-timeline i[class*='icon-']::before,
.learning-path-body i[class*='icon-'],
.learning-path-body i[class*='icon-']::before,
.course__container .btn--bare,
.course__container .btn--bare i,
.course__container .btn--bare i::before,
.learner__container .btn--bare,
.learner__container .btn--bare i,
.learner__container .btn--bare i::before,
.directional-nav__arrow,
.directional-nav__arrow i,
.directional-nav__arrow i::before {
  color: var(--color-black) !important;
}

/* Exceptions: white glyphs on black chrome / primary CTAs */
.course__container .btn.btn--primary i,
.course__container .btn.btn--primary i::before,
.learner__container .btn.btn--primary i,
.learner__container .btn.btn--primary i::before,
.learner__container__toggle .btn i,
.learner__container__toggle .btn i::before,
.header--learner .header__left__icon i,
.header--learner .header__left__icon i::before,
.header--student .header__left__icon i,
.header--student .header__left__icon i::before,
.directional__nav__button--right i,
.directional__nav__button--right i::before,
.course__container .bg-accent i,
.course__container .bg-accent i::before,
.course__container .bg-accent .text-accent-contrast,
.course__container .bg-accent button {
  color: var(--color-white) !important;
}

/* Exceptions: completion check stays green */
.course__container .text-green,
.course__container .text-green i,
.course__container .text-green i::before,
.learner__sidebar__expandables .text-green,
.learner__sidebar__expandables .text-green i,
.learner__sidebar__expandables .text-green i::before,
.learner__sidebar__expandables .text-green .icon-check:before {
  color: var(--color-green) !important;
}

/* Directional nav — Next = black square/white arrow, Prev = gray square/dark arrow.
   TI theme blue often wins without !important / scoped selectors on some course types. */
.directional__nav__button,
.course__container .directional__nav__button,
.learner__content .directional__nav__button {
  border-radius: 4px !important;
  border-color: transparent !important;
}

.directional__nav__button--right,
.course__container .directional__nav__button--right,
.learner__content .directional__nav__button--right,
.directional__nav .directional__nav__button--right {
  background: var(--color-black) !important;
  background-color: var(--color-black) !important;
  border-color: var(--color-black) !important;
  color: var(--color-white) !important;
}

.directional__nav__button--right i,
.directional__nav__button--right i::before,
.course__container .directional__nav__button--right i,
.course__container .directional__nav__button--right i::before,
.learner__content .directional__nav__button--right i,
.learner__content .directional__nav__button--right i::before {
  color: var(--color-white) !important;
}

.directional__nav__button--left,
.course__container .directional__nav__button--left,
.learner__content .directional__nav__button--left,
.directional__nav .directional__nav__button--left {
  background: var(--color-gray-200) !important;
  background-color: var(--color-gray-200) !important;
  border-color: var(--color-gray-200) !important;
  color: var(--color-black) !important;
}

.directional__nav__button--left i,
.directional__nav__button--left i::before,
.course__container .directional__nav__button--left i,
.course__container .directional__nav__button--left i::before,
.learner__content .directional__nav__button--left i,
.learner__content .directional__nav__button--left i::before {
  color: var(--color-black) !important;
}

/* Video course chrome — hide redundant dashboard / secondary actions */
.video-course__actions {
  display: none !important;
}

/* —— Course Notes (tools) — kill TI navy/blue accents —— */
.tools__container .heading--primary,
.tools__container h1.heading,
.tools__container h1.h3 {
  color: var(--color-black) !important;
}

.tools__container .tools__back-button a,
.tools__container .header--tools a.btn--link,
.tools__container .header--tools a {
  color: var(--color-black) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.tools__container .tools__back-button a:hover,
.tools__container .header--tools a.btn--link:hover,
.tools__container .header--tools a:hover {
  color: var(--color-black) !important;
  text-decoration: underline !important;
}

.tools__container .tools__back-button i,
.tools__container .tools__back-button i::before,
.tools__container .header--tools i,
.tools__container .header--tools i::before {
  color: var(--color-black) !important;
}

.tools__content__sections__list a,
.tools__content__sections__list a span {
  color: var(--color-black) !important;
}

.tools__content__sections__list a:hover {
  color: var(--color-black) !important;
  background: var(--color-gray-100) !important;
}

/* Active section — black bar, white type (was TI navy) */
.tools__content__sections__list a.active,
.tools__content__sections__list li a.active {
  background: var(--color-black) !important;
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
}

.tools__content__sections__list a.active span,
.tools__content__sections__list a.active .label,
.tools__content__sections__list a.active .label--small {
  color: var(--color-white) !important;
  background: transparent !important;
  border-color: transparent !important;
}

.tools__content__sections__list .label,
.tools__content__sections__list .label--small {
  background: var(--color-gray-200) !important;
  color: var(--color-black) !important;
}

.tools__container .note__editor strong,
.tools__container .tools__content strong {
  color: var(--color-black) !important;
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.tools__container .btn.btn--primary:not(:disabled):not(.disabled) {
  background: var(--btn-primary-bg, var(--color-yellow)) !important;
  border-color: var(--btn-primary-bg, var(--color-yellow)) !important;
  color: var(--btn-primary-text, var(--color-black)) !important;
}

.tools__container .btn.btn--primary:disabled,
.tools__container .btn.btn--primary.disabled {
  background: var(--btn-disabled-bg, var(--color-gray-300)) !important;
  border-color: var(--btn-disabled-bg, var(--color-gray-300)) !important;
  color: var(--btn-disabled-text, var(--color-white)) !important;
}

/* Main lesson content card stays white on the off-white page */
.learner__content .layout-panel {
  border-radius: 4px;
  background: var(--color-white) !important;
}

/* Sidebar section headers */
.expandable-sidebar__toggle,
.sidebar__toggle {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  background-color: transparent !important;
  color: var(--color-black);
  border-bottom: 1px solid var(--color-gray-200);
  padding: 30px 0 15px 0;
  text-transform: none;
}

/* Lesson list items — idle = transparent (page #F5F4F1 shows through);
   hover = gray-100 (visible on page); active = gray-200.
   Previously idle was white and hover was gray-50, so hover looked like
   the white “disappearing”. */
.learner__sidebar__expandables .container,
.learner__sidebar__expandables .container.hover_bg-accent-200 {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.learner__sidebar__expandables .container:hover,
.learner__sidebar__expandables .container.hover_bg-accent-200:hover {
  background-color: var(--color-gray-100) !important;
  background: var(--color-gray-100) !important;
}

.learner__sidebar__expandables .container span,
.learner__sidebar__expandables .container .text-base {
  color: var(--color-black);
  font-family: var(--font-sans);
}

/* Active lesson — gray-200 fill + top/bottom dividers (Figma) */
.learner__sidebar__expandables .bg-accent-100,
.learner__sidebar__expandables .container.bg-accent-100,
.learner__sidebar__expandables .container[aria-current='Page'] {
  background-color: var(--color-gray-200) !important;
  background: var(--color-gray-200) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.25) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}

.learner__sidebar__expandables .bg-accent-100:hover,
.learner__sidebar__expandables .container.bg-accent-100:hover,
.learner__sidebar__expandables .container[aria-current='Page']:hover {
  background-color: var(--color-gray-200) !important;
  background: var(--color-gray-200) !important;
}

/* Completion check keeps green */
.learner__sidebar__expandables .text-green,
.learner__sidebar__expandables .text-green .icon-check:before {
  color: var(--color-green) !important;
}

.learner__sidebar__search {
  box-shadow: none;
  padding-bottom: 30px;
}

.learner__sidebar__search input {
  color: var(--color-black);
  background: var(--color-white);
  box-shadow: none;
  border-radius: 4px;
  border: 1px solid var(--color-gray-200);
  height: 46px !important;
  padding-left: 35px;
}

.learner__sidebar__search .btn--bare {
  color: var(--color-black);
  font-size: 16px;
  height: 42px;
  padding: 0 0 0 15px !important;
}

.icon-bookmark-plus:before,
.icon-bookmark-plus::before {
  color: var(--color-black) !important;
}

.icon-compose {
  display: none;
}

.icon-flag {
  font-size: 20px;
}

/* Page-nav labels — mono eyebrow; Prev muted gray, Next black */
.directional__nav__button__container .directional__nav__label {
  visibility: visible;
  font-family: 'FK Grotesk Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-black);
}

.directional__nav__button__container--prev .directional__nav__label {
  color: var(--color-gray-600);
}

.directional__nav__button__container--next .directional__nav__label {
  color: var(--color-black);
}

/* Section title → H4 32px black (override headline-scale) */
.learner-section__title {
  font-size: 32px !important;
  line-height: 1.2 !important;
  color: var(--color-black) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  padding-right: 30px;
}

/* Course-player CTAs (Open Content, Menu / Hide) → Contextual Primary */
.learner__container .btn.btn--primary,
.learner__container__toggle .btn.btn--primary,
.quiz-start__content .btn.btn--primary {
  background: var(--btn-contextual-bg) !important;
  border: 1px solid var(--btn-contextual-bg) !important;
  color: var(--btn-contextual-text) !important;
  border-radius: 4px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.learner__container .btn.btn--primary:hover,
.learner__container .btn.btn--primary:focus,
.learner__container__toggle .btn.btn--primary:hover,
.quiz-start__content .btn.btn--primary:hover {
  background: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text, var(--color-black)) !important;
}

.quiz-start__main-title {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-black);
}

/* Menu / Hide sidebar toggle → Contextual Primary */
.learner__container__toggle .btn,
.learner__container__toggle .btn.btn--primary,
.learner__container__toggle .btn.hide-sidebar,
.learner__container__toggle .btn.show-sidebar,
.expandable-sidebar__buttons .btn,
.expandable-sidebar__buttons .btn.btn--primary,
.expandable-sidebar__buttons a.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--btn-gap, 8px) !important;
  min-height: var(--btn-height, 40px) !important;
  margin: 0 !important;
  padding: var(--btn-pad-y, 8px) var(--btn-pad-x, 16px) !important;
  border: 1px solid var(--btn-contextual-bg) !important;
  border-radius: var(--btn-radius, 4px) !important;
  background: var(--btn-contextual-bg) !important;
  color: var(--btn-contextual-text) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--btn-font-size, 16px) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.learner__container__toggle .btn:hover,
.learner__container__toggle .btn.btn--primary:hover,
.learner__container__toggle .btn.hide-sidebar:hover,
.learner__container__toggle .btn.show-sidebar:hover,
.learner__container__toggle .btn:focus,
.expandable-sidebar__buttons .btn:hover,
.expandable-sidebar__buttons a.btn:hover {
  background: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text, var(--color-black)) !important;
  text-decoration: none !important;
}

.learner__container__toggle .btn i,
.learner__container__toggle .btn i::before,
.expandable-sidebar__buttons .btn i,
.expandable-sidebar__buttons .btn i::before {
  color: inherit !important;
  font-size: 16px !important;
}

/* Progress panel Show / Hide Details (inside sidebar) → Tertiary */
.course-progress .btn,
.course-progress .btn.btn--primary,
.course-progress button.btn,
.learner__sidebar .course-progress .btn,
.learner__sidebar .course-progress .btn.btn--primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--btn-gap, 8px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--link-text, var(--color-black)) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--btn-font-size, 16px) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.course-progress .btn:hover,
.course-progress .btn.btn--primary:hover,
.course-progress .btn:focus,
.learner__sidebar .course-progress .btn:hover {
  background: none !important;
  border: none !important;
  color: var(--link-hover, var(--color-black)) !important;
  text-decoration: underline !important;
}

.course-progress .btn i,
.course-progress .btn i::before {
  color: inherit !important;
}

.course-progress .stat,
.course-progress__overall,
.course-progress__overall .highlight {
  font-size: 16px;
  line-height: 26px;
  color: #333;
}

.course-progress__overall {
  padding-top: 20px;
}

.avatar.avatar--completion-criteria {
  margin: 0 0 5px 0;
}

.course-progress .stat {
  min-width: 42px;
}

/** My Activity **/
.dashboard-access__header,
.dashboard-access-tabs,
.dashboard-access-tab--active,
.dashboard-access section,
.my-activity-bg {
  background: #f0f6fe;
}

.dashboard-access__header--expanded,
.dashboard-access {
  border: none;
}

.dashboard-access-tab__count {
  background: transparent;
}

.dashboard-access-tab {
  border-width: 0 0 5px;
}

.dashboard-access-tab--active {
  border-color: #0369ea;
}

.dashboard-access-list-item {
  border: none;
  margin: 10px 0;
  padding: 30px 30px;
}

.dashboard-access-list-item:nth-of-type(2n) {
  background: #fff;
}

.dashboard-access-list-item:last-of-type {
  margin-bottom: 0 !important;
}

.dashboard-access__header .button-expander {
  border: 1px solid var(--color-black);
  height: 30px;
  width: 30px;
}

.dashboard-access__header {
  color: var(--color-black);
  font-size: 24px;
  line-height: 36px;
}

.dashboard-access__header span {
  display: inline-block;
  padding-top: 2px;
  vertical-align: middle;
}

.dashboard-access-list-item-expander__title {
  font-size: 20px;
  color: var(--color-black);
}

.dashboard-access-list-item strong {
  color: var(--color-black);
  text-transform: uppercase;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 1px;
  /*display:none;*/
}

.dashboard-access-list-item .btn.btn--primary {
  font-size: 10px;
  border-color: #0384fb;
  border-radius: 40px;
  padding: 5px;
}

/* target specific cols first, second, and last */
.dashboard-access-list-item > .grid > .col-span-4 {
  /* make first col full width */
  width: 100%;
}
.dashboard-access-list-item > .grid > .col-span-2 {
  /* hide the empty col */
  display: none;
}
.dashboard-access-list-item > .grid > .col-span-2.col-start-11 {
  /* unhind the last col since it has the same span-2 class */
  display: block;
}

.dashboard-access-list-item > .grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 767px) {
  .dashboard-access-list-item .btn.btn--primary {
    padding: 10px 20px;
    font-size: 14px;
  }

  /* undo all of the special column sizing from above */
  .dashboard-access-list-item > .grid {
    display: grid;
  }
  .dashboard-access-list-item > .grid > .col-span-2,
  .dashboard-access-list-item > .grid > .col-span-2.col-start-11 {
    display: block;
  }
  .dashboard-access-list-item > .grid > .col-span-4 {
    width: auto;
  }
}

.dashboard-access-list-item__description {
  font-size: 16px;
  margin: 20px 0;
}

li.user-engagement-stat {
  display: flex;
  flex-direction: column-reverse;
}

.user-engagement-stat__value,
.user-engagement-stat__value--muted,
.user-engagement-stat__value--percent {
  color: #0384fb;
  font-size: 48px;
}

.user-engagement-stat__value--percent {
  vertical-align: baseline;
}

.user-engagement-stat__label {
  color: var(--color-black);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}

.user-engagement-stat__value-container i,
.user-engagement-stat:before {
  display: none;
}

.user-engagement-stat__value-container {
  text-align: left;
}

.catalog-list-item__info {
  margin-bottom: 1em;
}

@media (max-width: 768px) {
  .user-engagement-stats ul {
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
  }
  .user-engagement-stats .user-engagement-stat--assessments {
    width: 100%;
  }
}

@media (max-width: 991px) {
  .user-engagement-stat__value,
  .user-engagement-stat__value--muted,
  .user-engagement-stat__value--percent {
    font-size: 36px;
  }

  .user-engagement-stat__label {
    font-size: 14px;
  }
}

@media (min-width: 769px) {
  .user-engagement-stat__label {
    height: 55px;
  }

  .widget--dashboard-access .columns {
    padding: 0 1rem;
  }

  .dashboard-access-list-item {
    padding: 30px 90px 30px 30px;
  }

  .user-engagement-stats,
  .dashboard-access-list-item__description {
    padding: 0 15px;
  }
}

/** Partner Academy / Partner Portal (TI microsite)
      Learning-path, course-player, catalog, and button brand rules above are
      unscoped — they already apply on Partner Academy when this CSS is loaded.
      Rules in this block are Partner-only chrome (microsite header + partner cards). **/
.partner-cards .catalog-grid-item__title,
.partner-cards .catalog-grid-item__description {
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif);
  color: var(--color-black);
}

.partner-cards .catalog-grid-item__description:after {
  content: 'Learn More';
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--link-text, var(--color-black));
  text-decoration: none;
}

.partner-cards .catalog-item:hover .catalog-grid-item__description:after,
.partner-cards .catalog-grid-item:hover .catalog-grid-item__description:after {
  text-decoration: underline;
}

/* Hide last one */
.partner-cards
  .featured-content-block-grid
  li:nth-of-type(2)
  .catalog-grid-item__description:after {
  content: none;
  display: none;
}

/* Learning Path hero — same brand wing as Learning Activity headers.
   TI's uploaded HeroTemplate asset is cropped/mirrored, so hide it and
   paint the CSS wing instead. */
.widget--learning-path-content-hero_small-banner .learning-content-hero,
.learning-content-hero {
  position: relative;
  max-height: 400px;
  min-height: 280px;
  height: 400px;
  overflow: hidden;
  background-color: var(--color-gray-900);
  background-image: var(--wing-image);
  background-repeat: no-repeat;
  background-position: var(--wing-position, left center);
  background-size: var(--wing-size, cover);
}

/* Keep layout height from the asset, but don't show the mirrored wing JPG */
.widget--learning-path-content-hero_small-banner .learning-content-hero img,
.learning-content-hero img,
.learning-content-hero picture {
  width: 100%;
  height: 400px;
  max-height: 400px;
  object-fit: cover;
  opacity: 0 !important;
  pointer-events: none;
}

.learning-content-hero__overlay {
  mix-blend-mode: normal;
  background-image: linear-gradient(
    0deg,
    rgba(28, 25, 23, 0.7),
    rgba(28, 25, 23, 0.7)
  ) !important;
}

.learning-content-hero h1 {
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-weight: 700 !important;
  color: var(--color-white) !important;
  text-align: center;
  max-width: 809px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.learning-content-hero .text-white:not(h1) {
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-weight: 400 !important;
  color: var(--color-white) !important;
  text-align: center;
  max-width: 809px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Center the hero copy block at 809px (matches Learning Activity) */
.learning-content-hero > div.absolute,
.learning-content-hero div.absolute.w-full {
  top: 50% !important; /* override TI top-[40%] — was sitting too low */
  left: 50% !important;
  right: auto !important;
  width: 100%;
  max-width: 809px;
  transform: translate(-50%, -50%);
  text-align: center;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

/* Pin top-left — mobile hero flex centering was pulling this into the middle */
.learning-content__back-button,
.learning-content__back-button.btn--bare {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3;
  margin: 0 !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--color-white) !important;
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-align: left !important;
}

.learning-content__back-button:hover,
.learning-content__back-button:focus {
  color: var(--color-white) !important;
  text-decoration: underline !important;
}

.learning-content__back-button i,
.learning-content__back-button i::before {
  color: inherit !important;
}

/* Search bar */
.search-bar-widget {
  border-radius: 50px;
  background: #f0f6fe;
  width: 100%;
  max-width: 450px;
}

.search-bar-widget input {
  padding: 0 30px;
  height: 48px;
}

.search-bar-widget .btn.btn--primary {
  height: 48px;
}

.search-bar-widget input:focus {
  box-shadow: 2px 2px 2px #f0f6fe;
}

.search-bar-widget input,
.search-bar-widget input:focus,
.search-bar-widget input:active,
.search-bar-widget .btn.btn--primary {
  border: none;
  box-shadow: none;
  background: transparent;
  color: #0e235c;
}

.search-bar-widget .btn.btn--primary {
  padding: 5px 20px;
}

.learn.dashboard .widget.search-title {
  padding: 0;
}

::-webkit-input-placeholder {
  font-style: normal;
}

:-moz-placeholder {
  font-style: normal;
}

::-moz-placeholder {
  font-style: normal;
}

:-ms-input-placeholder {
  font-style: normal;
}

.learn.dashboard .widget.widget--searchbar {
  padding: 0 2rem;
}

@media (min-width: 767px) {
  .search-bar-widget input,
  .search-bar-widget .btn.btn--primary {
    height: 70px;
  }
}

.learner__language__selector__btn {
  padding: 3px 0;
}

.learner__language__selector,
.learner__language__selector__btn ul {
  background-color: #f0f6fe;
  text-align: center;
  font-size: 12px;
}

.learner__language__selector__btn ul {
  text-align: left;
}

/* CTA & Translations */
.product-onboarding .catalog-grid-item__description:after,
.featured-content-article-item__description:after,
.mx-link .catalog-grid-item__description:after,
.topics .featured-content-article-item__title:after,
.topics .catalog-grid-item__body:after,
.mx-topics .catalog-grid-item__body:after,
.fr-topics .catalog-grid-item__body:after,
.de-topics .catalog-grid-item__body:after,
.learn-more .catalog-grid-item__description:after,
.mx-learn-more .catalog-grid-item__description:after,
.de-links .catalog-grid-item__description:after,
.de-learn-more .catalog-grid-item__description:after,
.fr-learn-more .catalog-grid-item__description:after,
.fr-links .catalog-grid-item__description:after,
.driver-cards .catalog-grid-item__description:after,
.fr-courses .catalog-grid-item__body:after {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-black);
  margin-top: 20px;
}

/* .product-onboarding .catalog-grid-item__description:after,
  .featured-content-article-item__description:after {
    content:'View Course \0276F';
  }
  
  .mx-link .catalog-grid-item__description:after {
    content:'Ver Curso \0276F';
  }
  
  .de-links .catalog-grid-item__description:after,
  .de-courses .catalog-grid-item__description:after {
    content:'Kurs anzeigen \0276F';
  }
  
  .fr-links .catalog-grid-item__description:after {
    content:'Voir le cours \0276F';
  }
  
  .topics .featured-content-article-item__title:after,
  .topics .catalog-grid-item__body:after {
    content:'View Courses \0276F';
  }
  
  .mx-topics .catalog-grid-item__body:after {
    content:'Ver Cursos \0276F';
  }
  
  .fr-topics .catalog-grid-item__body:after {
    content:'Voir les cours \0276F';
  }
  
  .de-topics .catalog-grid-item__body:after {
    content:'Kurse anzeigen \0276F';
  }
  
  .learn-more .catalog-grid-item__description:after {
    content:'Learn More \0276F';
  }
  
  .driver-cards .catalog-grid-item__description:after {
    content:'Access Now \0276F';
  }
  
  .mx-learn-more .catalog-grid-item__description:after {
    content:'Aprender Más \0276F';
  }
  
  .de-learn-more .catalog-grid-item__description:after {
    content:'Mehr Lernen \0276F';
  }
  
  .fr-learn-more .catalog-grid-item__description:after {
    content:'Apprendre Plus \0276F';
  }
  
  .fr-courses .catalog-grid-item__body:after {
    content:'Voir tous les cours \0276F';
  } */

/*Remove Cart Button From Top Right*/
#cart-button {
  display: none;
}

/*Remove Hours/Minutes on Learner Access Widget*/
.user-engagement-stat--hours {
  display: none !important;
}

/*Remove Social Share Widget*/
.share__container {
  display: none;
}

/* Added by KS Team */
/* For Featured Content Tiles (Descriptive Layout) - fctNoDesc class for no description */
.fctNoDesc .featured-content-article-item__description::after {
  display: none;
}
.fctNoDesc .featured-content-article-item__body::after {
  content: 'View More \0276F';
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-black);
  margin-top: 20px;
}
.fctNoDesc .featured-content-article-item__body {
  padding: 0 1rem 1rem;
  min-height: 220px;
}
.fctNoDesc .featured-content-article-item {
  box-shadow: 0 0 4px #cfcfcf;
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
}
.fctNoDesc .featured-content-article-item .row .column {
  padding: 0;
}
.fctNoDesc.frLnks .featured-content-article-item__body::after {
  content: 'Voir Plus \0276F';
} /* French (FR) */
.fctNoDesc.mxLnks .featured-content-article-item__body::after {
  content: 'Ver Más \0276F';
} /* Spanish (MX) */
.fctNoDesc.deLnks .featured-content-article-item__body::after {
  content: 'Mehr Anzeigen \0276F';
} /* German (DE) */
@media only screen and (max-width: 769px) {
  .fctNoDesc .featured-content-article-item__body {
    min-height: 0;
  }
}

/* For Featured Content Tiles (Standard Layout) - fctNoDesc class for no description */
.fctNoDesc .catalog-grid-item__title {
  margin-top: 1em;
}
.fctNoDesc .catalog-grid-item__description::after {
  display: none;
}
.fctNoDesc .catalog-grid-item__body::after {
  content: 'View More \0276F';
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-black);
  margin-top: 20px;
}
.fctNoDesc .catalog-grid-item__body {
  padding: 0 1rem 1rem;
  min-height: 220px;
}
.fctNoDesc .catalog-grid-item {
  box-shadow: 0 0 4px #cfcfcf;
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
}
.fctNoDesc .catalog-grid-item .row .column {
  padding: 0;
}
.fctNoDesc.frLnks .catalog-grid-item__body::after {
  content: 'Voir Plus \0276F';
} /* French (FR) */
.fctNoDesc.mxLnks .catalog-grid-item__body::after {
  content: 'Ver Más \0276F';
} /* Spanish (MX) */
.fctNoDesc.deLnks .catalog-grid-item__body::after {
  content: 'Mehr Anzeigen \0276F';
} /* German (DE) */
@media only screen and (max-width: 769px) {
  .fctNoDesc .catalog-grid-item__body {
    min-height: 0;
  }
}

/* For Catalog - catlogNoDesc class for no description */
.catlogNoDesc .catalog-grid-item__description::after {
  display: none;
}
.catlogNoDesc .catalog-grid-item__description {
  display: none;
}
.catlogNoDesc .catalog-grid-item__body::after {
  content: 'View More \0276F';
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-black);
  margin-top: 20px;
}
.catlogNoDesc .catalog-grid-item__body {
  padding: 1rem 1rem;
}
.catlogNoDesc .catalog-grid-item {
  box-shadow: 0 0 4px #cfcfcf;
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
}
.catlogNoDesc .catalog-grid-item .row .column {
  padding: 0;
}
.catlogNoDesc.frLnks .catalog-grid-item__body::after {
  content: 'Voir Plus \0276F';
} /* French (FR) */
.catlogNoDesc.mxLnks .catalog-grid-item__body::after {
  content: 'Ver Más \0276F';
} /* Spanish (MX) */
.catlogNoDesc.deLnks .catalog-grid-item__body::after {
  content: 'Mehr Anzeigen \0276F';
} /* German (DE) */

/* FAQs (Credentials page .faqs) — match Figma FAQ list treatment */
.faqs h4 {
  margin: 0;
  padding: 16px 16px 0;
  border-top: 0.5px solid var(--color-gray-700);
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  color: var(--color-black);
}
.faqs h4 + p,
.faqs p {
  margin: 16px 0 0;
  padding: 0 16px 16px;

  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-black);
}

.faqs h4 + p:last-of-type,
.faqs p:last-of-type {
  border-bottom: 0.5px solid var(--color-gray-700);
}

/* For Testimonials Section on Credential page - respoinsive & color issue - testimonials class */
.testimonials .testimonial-quote__author-name {
  font-size: 16px;
  color: #fff;
  font-style: normal;
}
.testimonials .testimonial .testimonial-quote__author-name::before {
  border: 0;
}
.testimonials .testimonial .testimonial-quote__author-description {
  font-size: 16px;
  color: #77beff;
  font-style: normal;
}
@media only screen and (max-width: 1439px) {
  .testimonials .testimonial.learner {
    position: relative;
    padding: 40px 0;
    min-height: 340px;
  }
  .testimonials .testimonial > .testimonial-quote {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
    max-width: 1125px;
    min-height: 0;
    box-sizing: border-box;
  }
  .testimonials .testimonial .testimonial-quote__text {
    font-size: 24px;
  }
}

/* For Learner Access widget on My Activity page - class myActivity */
.myActivity.widget--dashboard-access .columns {
  padding: 0 1rem;
}
.myActivity .dashboard-access-list-item {
  padding: 12px 20px;
}
.myActivity .dashboard-access-list-item-expander {
  position: relative;
  padding-left: 26px !important;
}
.myActivity .dashboard-access-list-item-expander i {
  position: absolute;
  top: 2px;
  left: 0;
}
.myActivity .dashboard-access-list-item-expansion .medium-8 {
  padding: 0 1rem;
}
.myActivity .user-engagement-stats,
.myActivity .dashboard-access-list-item__description {
  padding: 0;
}
.myActivity .user-engagement-stats ul li {
  padding-bottom: 0; /*width: 100%;*/
}
.myActivity .progress.round {
  border-radius: 0;
  height: 10px;
  padding: 0;
}
.myActivity .dashboard-access-list-item-expansion .btn--small::after {
  content: ' \0276F';
}
.myActivity .dashboard-access-list-item-expansion .btn--small {
  font-size: 16px;
  color: var(--color-black);
  font-weight: 700;
  margin-top: 20px;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: none;
}
.myActivity .dashboard-access-list-item-expansion .btn--small:hover {
  color: var(--color-black);
  text-decoration: underline;
}
.myActivity
  .dashboard-access-list-item
  .medium-4
  .btn--small.hover_text-white:focus {
  color: #fff;
}
.myActivity .dashboard-access-list-item .medium-4 br {
  display: none;
}

/*.myActivity .user-engagement-stats {display: inline-block; width: calc(140px - 4px); vertical-align: middle;}
  .myActivity .user-engagement-progress-bar {display: inline-block; width: calc(100% - 140px - 4px); vertical-align: middle;}*/

/* For Sign In page */
.session .session__container .session__form .text-centered h1 {
  display: none;
}
.session .session__container .session__form .text-centered .text-xs {
  display: none;
}
.session .session__container .session__form .text-centered {
  padding: 20px 0;
}
.session .session__container .session__form .text-centered::before {
  content: 'Welcome to the Samsara Academy!';
  display: block;
  font-size: 22px;
}
.session .session__container .session__form .text-centered::after {
  content: 'Sign in to your Academy below:';
  display: block;
  font-size: 16px;
}

.session__form .loginLnks {
  margin-bottom: 20px;
}
.session__form .loginLnks .lnk,
.session__form .loginLnks .emplnk {
  display: block;
  margin: 0 auto 20px;
  width: 72%;
}
.session__form .loginLnks .lnk a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  text-align: center;
  background-color: var(--btn-contextual-bg);
  border: 1px solid var(--btn-contextual-bg);
  border-radius: var(--btn-radius);
  color: var(--btn-contextual-text);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--btn-font-size);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}
.session__form .loginLnks .lnk a:hover {
  background-color: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
}
.session__form .loginLnks .lnk a:active {
  background-color: var(--btn-active-bg);
  border-color: var(--btn-active-bg);
  color: var(--btn-active-text);
}
.session__form .loginLnks .emplnk a {
  color: var(--color-black);
  text-decoration: none;
}
.session__form .loginLnks .emplnk a:hover {
  color: var(--color-black);
  text-decoration: underline;
}
.session__form {
  text-align: center;
}
.session__form .btn--primary {
  float: none;
}
.session__form .session__forgot {
  display: block;
  text-align: center;
}
.session__form .session__forgot,
.session__form .session__forgot a {
  color: var(--color-black);
  text-decoration: none;
}
.session__form .session__forgot:hover,
.session__form .session__forgot a:hover {
  color: var(--color-black);
  text-decoration: underline;
}
.session__form {
  padding-bottom: 32px;
}

.session__form .field {
  margin: 0 auto 20px;
  width: 80%;
  text-align: left;
}
.session__form .field,
.session__form .btn--primary,
.session__form .session__forgot {
  display: block;
}
.session__form.empform .field,
.session__form.empform .session__forgot {
  display: block;
}
.session__form.empform .btn--primary {
  display: inline-block;
}

/* For Home page three column widgets with links - class dash3ColLnk */
.learn.dashboard .dash3ColLnk {
  padding: 80px 0 40px;
}
.dash3ColLnk {
  padding: 80px 0 40px;
}
.dash3ColLnk .medium-4 .editor-content {
  padding: 20px;
  border: 1px solid #cfcfcf;
  min-height: 200px;
  border-radius: 5px;
  overflow: hidden;
}
.dash3ColLnk .medium-4 .editor-content a {
  color: var(--color-black);
}
.dash3ColLnk .medium-4 .editor-content h4 {
  color: var(--color-black);
  font-size: 22px;
  font-weight: 400;
}
.dash3ColLnk .medium-4 .editor-content h4::after {
  content: ' →';
}
.dash3ColLnk .medium-4 .editor-content p {
  color: var(--color-black);
  font-size: 16px;
}
.dash3ColLnk .medium-4 .editor-content img {
  height: 80px;
}
@media only screen and (max-width: 1439px) {
  .dash3ColLnk .medium-4 .editor-content p {
    font-size: 13px;
  }
}

/* For Hero widget on Customer Profession Credentials page - class cpcHero */
@media only screen and (max-width: 1439px) {
  .cpcHero .hero .hero__caption .hero__title {
    font-size: 40px;
    line-height: 48px;
  }
  .cpcHero .hero .hero__caption .h4 {
    font-size: 18px;
    margin-bottom: 32px;
  }
}
@media only screen and (max-width: 620px) {
  .cpcHero img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    max-width: 100%;
    width: auto;
  }
  .cpcHero .hero .hero__caption {
    position: relative;
    transform: none;
  }
}

/* For three-column button widget on Customer Profession Credentials page - class cpc3ColFct */
.layout__content .cpc3ColFct {
  padding: 80px 0 0;
}
.cpc3ColFct .catalog-grid-item__body {
  padding-left: 0;
  padding-right: 0;
}
.cpc3ColFct .catalog-grid-item__title {
  font-size: 22px;
  color: var(--color-black);
}
.cpc3ColFct .catalog-grid-item__description {
  font-size: 16px;
  color: var(--color-black);
  font-weight: 700;
}
.cpc3ColFct .catalog-grid-item:hover .catalog-grid-item__description {
  text-decoration: underline;
}
.cpc3ColFct .catalog-grid-item__description::after {
  content: ' \0276F';
}
@media only screen and (max-width: 1439px) {
  .cpc3ColFct .catalog-grid-item__title {
    font-size: 20px;
    color: var(--color-black);
  }
}

/* For Learning Path pages - global layout (brand tokens) */
.learning-path-body .catalog-header,
.learning-path-body h2.catalog-header {
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--color-black) !important;
}

/* Hide availability / retirement date range (bare text nodes; no wrapper class).
   Keep Certificate Pending visible. */
.learning-path-body .row.collapse > .small-4.columns.text-right {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

.learning-path-body
  .row.collapse
  > .small-4.columns.text-right
  .learning-path-certificate-status,
.learning-path-body
  .row.collapse
  > .small-4.columns.text-right
  .learning-path-certificate-status
  span {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--color-gray-600);
}

.learning-path-certificate-status,
.learning-path-certificate-status__progress {
  font-family: 'FK Grotesk Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gray-600);
}

.learning-path-certificate-status__circle {
  background: var(--color-gray-400);
}

.learning-path-progress-bar-item__index {
  background: var(--color-gray-500);
  color: var(--color-white);
  line-height: 34px;
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif);
  font-weight: 700;
}
.learning-path-progress-bar-item--current
  .learning-path-progress-bar-item__index,
.learning-path-progress-bar-item--completed
  .learning-path-progress-bar-item__index {
  background: var(--color-black);
  color: var(--color-white);
}

.learning-path-progress-bar-item__border,
.learning-path-progress-bar-item__border--left,
.learning-path-progress-bar-item__border--right {
  border-color: var(--color-gray-300) !important;
}

/* Trophy icon — SVG on the base circle (TI markup often has no --earned yet).
   Incomplete = gray; --earned overrides to Signal Yellow below. */
.learning-path-certificate-circle,
.learning-path-certificate-circle__progress-item {
  background-color: transparent !important;
  border-color: transparent !important;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMzYuNTIxNSAzLjc1MDk4SDQxLjE3MTlDNDIuMjc2NCAzLjc1MDk4IDQzLjE3MTkgNC42NDY0MSA0My4xNzE5IDUuNzUwOThWOS42OTYyOUM0My4xNzE2IDEzLjc2MzQgMzkuNzQwOSAxNi43MjQzIDM1LjgyMzIgMTcuMTk1M0MzNC43NDgxIDIwLjMzMzUgMzIuNTAzNCAyMi45MjgxIDI5LjYwODQgMjQuNDU5VjI2LjYyNUwzNC4wNTc2IDMxLjA3NDJWMzQuODI4MUgzNS42MTcyTDM3LjYxNzIgMzYuODI4MVY0NEwzNS42MTcyIDQ2SDExLjMzMDFMOS4zMzAwOCA0NFYzNi44MjgxTDExLjMzMDEgMzQuODI4MUgxMy4wNTk2VjMxLjA3NDJMMTcuNTA4OCAyNi42MjVWMjQuNDU5QzE0LjYxMzcgMjIuOTI4MSAxMi4zNjgxIDIwLjMzMzcgMTEuMjkzIDE3LjE5NTNDNy4zNzU2OSAxNi43MjM5IDMuOTQ1NTggMTMuNzYzMSAzLjk0NTMxIDkuNjk2MjlWNS43NTA5OEMzLjk0NTMyIDQuNjQ2NDEgNC44NDA3NSAzLjc1MDk4IDUuOTQ1MzEgMy43NTA5OEgxMC41OTU3VjJIMzYuNTIxNVYzLjc1MDk4Wk0xMy4zMzAxIDQySDMzLjYxNzJWMzguODI4MUgxMy4zMzAxVjQyWk0yNS42MDg0IDI1Ljc5MzlDMjQuOTQwNyAyNS45MDAxIDI0LjI1NjEgMjUuOTU2MSAyMy41NTg2IDI1Ljk1NjFDMjIuODYxIDI1Ljk1NjEgMjIuMTc2NSAyNS45MDAxIDIxLjUwODggMjUuNzkzOVYyOC4yODIyTDE3LjA1OTYgMzIuNzMwNVYzNC44MjgxSDMwLjA1NzZWMzIuNzMwNUwyNS42MDg0IDI4LjI4MjJWMjUuNzkzOVpNMTQuNTk1NyAxMi45OTMyQzE0LjU5NTggMTcuOTQyNiAxOC42MDkxIDIxLjk1NjEgMjMuNTU4NiAyMS45NTYxQzI4LjUwOCAyMS45NTYgMzIuNTIxNCAxNy45NDI2IDMyLjUyMTUgMTIuOTkzMlY2SDE0LjU5NTdWMTIuOTkzMlpNNy45NDUzMSA5LjY5NjI5QzcuOTQ1NTUgMTAuOTgzNSA4LjkxNTQ4IDEyLjM1NzcgMTAuNTk1NyAxMi45NTYxVjcuNzUwOThINy45NDUzMVY5LjY5NjI5Wk0zNi41MjE1IDEyLjk1NjFDMzguMjAxNyAxMi4zNTc3IDM5LjE3MTYgMTAuOTgzNSAzOS4xNzE5IDkuNjk2MjlWNy43NTA5OEgzNi41MjE1VjEyLjk1NjFaIiBmaWxsPSIjOWM5ODkwIi8+PC9zdmc+') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.learning-path-timeline-milestone__header,
.learning-path-timeline-milestone__header--alt {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 40px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  background: var(--color-gray-100) !important;
  border: 0;
  padding: 24px 32px !important;
}

.learning-path-timeline-milestone__header-content {
  flex: 1 1 auto;
  min-width: 0;
  /* Fill toward the criterion — avoid a dead middle gap */
  max-width: calc(100% - 11rem);
}

.learning-path-timeline-milestone__header-criterion {
  flex: 0 0 auto;
  max-width: none;
  min-width: max-content;
  margin-left: auto;
  padding-top: 2px; /* optical align with title */
  text-align: right;
  overflow: visible;
}

@media (max-width: 767px) {
  .learning-path-timeline-milestone__header,
  .learning-path-timeline-milestone__header--alt {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }

  .learning-path-timeline-milestone__header-content {
    max-width: 100%;
    width: 100%;
  }

  .learning-path-timeline-milestone__header-criterion {
    margin-left: 0;
    padding-top: 0;
    width: 100%;
    text-align: left;
  }

  .learning-path-timeline-milestone__header .learning-path-criterion-container,
  .learning-path-timeline-milestone__header .learning-path-criterion {
    align-items: flex-start;
    width: 100%;
  }

  .learning-path-timeline-milestone__header .learning-path-criterion__label,
  .learning-path-timeline-milestone__header
    .learning-path-criterion__value-container {
    text-align: left;
    justify-content: flex-start;
  }

  .learning-path-timeline-milestone__title {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .learning-path-timeline-milestone__description,
  .learning-path-timeline-milestone__description p {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }
}

.learning-path-timeline-milestone__header .learning-path-criterion-container,
.learning-path-timeline-milestone__header .learning-path-criterion {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: none;
  min-width: max-content;
  overflow: visible;
}

.learning-path-timeline-milestone__title {
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.33 !important;
  letter-spacing: 0 !important;
  color: var(--color-black) !important;
  margin: 0 0 8px !important;
}

.learning-path-timeline-milestone__description {
  max-width: 100%;
}

.learning-path-timeline-milestone__description,
.learning-path-timeline-milestone__description p {
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-black);
}

.learning-path-timeline-milestone-item-circle.learning-path-timeline-milestone-item-circle--current {
  background: var(--color-yellow) !important;
  box-shadow:
    0 0 0 11px #fff,
    0 0 0 12px var(--color-gray-200),
    0 0 0 17px #fff,
    0 0 0 18px var(--color-black) !important;
}
.learning-path-timeline-milestone-item-circle.learning-path-timeline-milestone-item-circle--completed {
  background: var(--color-black) !important;
}

.learning-path-milestone__badge--required {
  background: var(--color-yellow) !important;
  color: var(--color-black) !important;
  font-family:
    'FK Grotesk Mono', ui-monospace, 'SFMono-Regular', monospace !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

.learning-path-timeline-milestone-items,
.learning-path-timeline-milestone-items--alt {
  background: #fff;
  padding: 4em 0 4em;
}

/* 56px between each course/milestone item */
.learning-path-timeline-milestone-item {
  margin-bottom: 56px !important;
}

.learning-path-timeline-milestone-item:last-child {
  margin-bottom: 0 !important;
}

.learning-path-timeline-milestone-item .learning-path-milestone__badge,
.learning-path-timeline-milestone-item .learning-path-milestone__badge--required {
  margin: 0 0 12px !important;
}

.learning-path-timeline-milestone-item .learning-path-milestone-item__title {
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.33 !important;
  color: var(--color-black) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

/* Course type + duration on one line — body-scale, not global H5 24/Bold.
   Cover both: __info as the h5 itself, and h5 nested inside __info. */
.learning-path-timeline-milestone-item .learning-path-milestone-item__info {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  gap: 0.35em !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  white-space: nowrap !important;
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--color-black) !important;
}

/* Children only — do not zero margin/padding on __info itself */
.learning-path-timeline-milestone-item
  h5.learning-path-milestone-item__info,
.learning-path-timeline-milestone-item
  .learning-path-milestone-item__info.h5,
.learning-path-timeline-milestone-item .learning-path-milestone-item__info h5,
.learning-path-timeline-milestone-item .learning-path-milestone-item__info .h5,
.learning-path-timeline-milestone-item .learning-path-milestone-item__info * {
  display: inline !important;
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--color-black) !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

.learning-path-timeline-milestone-item
  .learning-path-milestone-item__description {
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-black);
  margin: 0 0 16px !important;
  padding: 0 !important;
}

/* Milestone CTAs → Secondary (black outline) — see retrofit block for hover */
.learning-path-timeline-milestone-item .btn.btn--primary {
  background: transparent !important;
  color: var(--color-black) !important;
  border: 1px solid var(--color-black) !important;
  border-radius: var(--btn-radius, 4px) !important;
  padding: 12px 20px !important;
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.learning-path-timeline-milestone-item__asset img,
.learning-path-timeline-milestone-item__asset .ember-view {
  border-radius: 4px;
}

.learning-path-timeline-milestone-item__vertical-line,
.learning-path-timeline-milestone-item__horizontal-line {
  background-color: var(--color-gray-300) !important;
  border-color: var(--color-gray-300) !important;
}

.learning-path-timeline-milestone__header
  .learning-path-criterion__value--pending {
  color: var(--color-black);
}
.learning-path-timeline-milestone__header .learning-path-criterion__slash {
  color: var(--color-black);
}
.learning-path-timeline-milestone__header .learning-path-criterion__threshold {
  color: var(--color-black);
}
.learning-path-timeline-milestone__header
  .learning-path-criterion__value-container {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: nowrap;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-size: 32px;
  line-height: 1.1;
  color: var(--color-black);
  font-family: 'FK Grotesk Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-weight: 700;
  white-space: nowrap;
}

.learning-path-timeline-milestone__header
  .learning-path-criterion__value-container
  .learning-path-criterion__value--complete {
  color: var(--color-black);
}

.learning-path-timeline-milestone__header .learning-path-criterion__label {
  font-family: 'FK Grotesk Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gray-600);
  height: auto;
  width: auto;
  max-width: none;
  text-align: right;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.learning-path-timeline-milestone__header .learning-path-criterion__icon,
.learning-path-timeline-milestone__header .learning-path-criterion__icon svg,
.learning-path-timeline-milestone__header .ti-award-icon__svg {
  color: var(--color-black);
  fill: currentColor;
}

.learning-path-timeline-milestone-item-circle {
  background: var(--color-gray-400);
}

.myActivity
  .dashboard-access
  section[aria-hidden='false']
  .col-start-11.text-right
  a {
  opacity: 0;
}
.myActivity
  .dashboard-access
  section[aria-hidden='false']
  .col-start-11.text-right
  a.sh {
  opacity: 1;
}

.myActivity
  .dashboard-access
  section[aria-hidden='false']
  .dashboard-access-list-item
  .medium-4
  a.btn--primary {
  opacity: 0;
}
.myActivity
  .dashboard-access
  section[aria-hidden='false']
  .dashboard-access-list-item
  .medium-4
  a.btn--primary.sh {
  opacity: 1;
}
.myActivity .user-engagement-stat__label {
  height: auto;
}

.learning-path-certificate-status__circle.learning-path-certificate-status__circle--earned {
  background: var(--color-yellow);
}
.learning-path-certificate-status.learning-path-certificate-status--earned {
  color: var(--color-black);
}

.learning-path-certificate-circle--earned,
.learning-path-certificate-circle.learning-path-certificate-circle--earned,
.learning-path-certificate-circle__progress-item.learning-path-certificate-circle--earned {
  background-color: transparent !important;
  border-color: transparent !important;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMzYuNTIxNSAzLjc1MDk4SDQxLjE3MTlDNDIuMjc2NCAzLjc1MDk4IDQzLjE3MTkgNC42NDY0MSA0My4xNzE5IDUuNzUwOThWOS42OTYyOUM0My4xNzE2IDEzLjc2MzQgMzkuNzQwOSAxNi43MjQzIDM1LjgyMzIgMTcuMTk1M0MzNC43NDgxIDIwLjMzMzUgMzIuNTAzNCAyMi45MjgxIDI5LjYwODQgMjQuNDU5VjI2LjYyNUwzNC4wNTc2IDMxLjA3NDJWMzQuODI4MUgzNS42MTcyTDM3LjYxNzIgMzYuODI4MVY0NEwzNS42MTcyIDQ2SDExLjMzMDFMOS4zMzAwOCA0NFYzNi44MjgxTDExLjMzMDEgMzQuODI4MUgxMy4wNTk2VjMxLjA3NDJMMTcuNTA4OCAyNi42MjVWMjQuNDU5QzE0LjYxMzcgMjIuOTI4MSAxMi4zNjgxIDIwLjMzMzcgMTEuMjkzIDE3LjE5NTNDNy4zNzU2OSAxNi43MjM5IDMuOTQ1NTggMTMuNzYzMSAzLjk0NTMxIDkuNjk2MjlWNS43NTA5OEMzLjk0NTMyIDQuNjQ2NDEgNC44NDA3NSAzLjc1MDk4IDUuOTQ1MzEgMy43NTA5OEgxMC41OTU3VjJIMzYuNTIxNVYzLjc1MDk4Wk0xMy4zMzAxIDQySDMzLjYxNzJWMzguODI4MUgxMy4zMzAxVjQyWk0yNS42MDg0IDI1Ljc5MzlDMjQuOTQwNyAyNS45MDAxIDI0LjI1NjEgMjUuOTU2MSAyMy41NTg2IDI1Ljk1NjFDMjIuODYxIDI1Ljk1NjEgMjIuMTc2NSAyNS45MDAxIDIxLjUwODggMjUuNzkzOVYyOC4yODIyTDE3LjA1OTYgMzIuNzMwNVYzNC44MjgxSDMwLjA1NzZWMzIuNzMwNUwyNS42MDg0IDI4LjI4MjJWMjUuNzkzOVpNMTQuNTk1NyAxMi45OTMyQzE0LjU5NTggMTcuOTQyNiAxOC42MDkxIDIxLjk1NjEgMjMuNTU4NiAyMS45NTYxQzI4LjUwOCAyMS45NTYgMzIuNTIxNCAxNy45NDI2IDMyLjUyMTUgMTIuOTkzMlY2SDE0LjU5NTdWMTIuOTkzMlpNNy45NDUzMSA5LjY5NjI5QzcuOTQ1NTUgMTAuOTgzNSA4LjkxNTQ4IDEyLjM1NzcgMTAuNTk1NyAxMi45NTYxVjcuNzUwOThINy45NDUzMVY5LjY5NjI5Wk0zNi41MjE1IDEyLjk1NjFDMzguMjAxNyAxMi4zNTc3IDM5LjE3MTYgMTAuOTgzNSAzOS4xNzE5IDkuNjk2MjlWNy43NTA5OEgzNi41MjE1VjEyLjk1NjFaIiBmaWxsPSIjZmVhZTBmIi8+PC9zdmc+') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* For Home link hide on other pages except dashboard */
.header--microsite.show .nav--top {
  opacity: 1;
}

/* For three-column widget using FCT - class tcColFct */
.learn.dashboard .tcColFct,
.layout__content .tcColFct {
  padding: 40px 0;
}
.tcColFct .catalog-grid-item__description::after {
  display: none;
}
.tcColFct .catalog-grid-item__title {
  margin-top: 1em;
  min-height: 64px;
}
.tcColFct .catalog-grid-item__description {
  font-size: 16px;
  min-height: 41px;
}
.tcColFct .catalog-grid-item__body {
  padding: 0 1rem 1rem;
}
.tcColFct .catalog-grid-item {
  box-shadow: 0 0 4px #cfcfcf;
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
}
.tcColFct .catalog-grid-item .row .column {
  padding: 0;
}
@media only screen and (max-width: 1439px) {
  /*.tcColFct .catalog-grid-item__body {min-height: 148px;}*/
  .tcColFct .catalog-grid-item__description {
    font-size: 13px;
  }
}
@media only screen and (max-width: 1439px) {
  .tcColFct .catalog-grid-item__title {
    min-height: 0;
  }
  .tcColFct .catalog-grid-item__description {
    min-height: 0;
  }
}

/* For Hiding "Gift this Learning Path!" from Learning Path detail page */
.enroll--learning-path .enroll__secondary-actions {
  display: none;
}

/* For Explore by Topics section - View More - class ebtViewMore */
.ebtViewMore .featured-content-article-item__title::after,
.ebtViewMore .catalog-grid-item__title::after {
  display: none;
}
.ebtViewMore .featured-content-article-item__body::after,
.ebtViewMore .catalog-grid-item__body::after {
  content: 'View More \0276F';
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-black);
  margin-top: 4px;
}
.ebtViewMore.frLnks .featured-content-article-item__body::after,
.ebtViewMore.frLnks .catalog-grid-item__body::after {
  content: 'Voir Plus \0276F';
} /* French (FR) */
.ebtViewMore.mxLnks .featured-content-article-item__body::after,
.ebtViewMore.mxLnks .catalog-grid-item__body::after {
  content: 'Ver Más \0276F';
} /* Spanish (MX) */
.ebtViewMore.deLnks .featured-content-article-item__body::after,
.ebtViewMore.deLnks .catalog-grid-item__body::after {
  content: 'Mehr Anzeigen \0276F';
} /* German (DE) */

/**** Academy V2 Global Styles ****/
a {
  font-family: 'FK Grotesk', system-ui, sans-serif;
}
.btn {
  font-family: 'FK Grotesk', system-ui, sans-serif;
}

/**** Academy V2 Generic Color styles ****/
.bg-blue {
  background-color: var(--color-blue);
}

.bg-variant-blue {
  background-color: var(--color-variant-blue);
}

.bg-snow {
  background-color: var(--color-snow);
}

.bg-charcoal {
  background-color: var(--color-charcoal);
}

.bg-ash {
  background-color: var(--color-ash);
}

.bg-navy {
  background-color: var(--color-navy);
}

.bg-black {
  background-color: var(--color-black);
}

.bg-white {
  background-color: var(--color-white);
}

.text-blue {
  color: var(--color-blue);
}

.text-variant-blue {
  color: var(--color-variant-blue);
}

.text-snow {
  color: var(--color-snow);
}

.text-charcoal {
  color: var(--color-charcoal);
}

.text-ash {
  color: var(--color-ash);
}

.text-navy {
  color: var(--color-navy);
}

.text-black {
  color: var(--color-black);
}

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

.text-white h1,
.text-white h2,
.text-white h3,
.text-white p {
  color: var(--color-white) !important;
}

/**** Academy V3 Color utilities (new brand palette) ****/

/* Brand accent */
.bg-yellow {
  background-color: var(--color-yellow);
}
.bg-texture-noise {
  --bg-texture-noise-image: url('https://www.samsara.com/textures/noise-dark.svg');
}
.bg-texture-noise-light,
.bg-texture-noise,
.bg-illustration-wing {
  position: relative;
  isolation: isolate;
}

.bg-illustration-wing::before,
.bg-texture-noise-light::after,
.bg-texture-noise::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  pointer-events: none;
  content: '';
  transform: translateX(-50%);
  height: 100%;
}

.bg-illustration-wing::before {
  z-index: 0;
  background-image: var(--bg-illustration-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-texture-noise-light::after,
.bg-texture-noise::after {
  z-index: 1;
  background-image: var(--bg-texture-noise-image);
  background-position: center;
  background-repeat: repeat;
  background-size: auto;
  image-rendering: pixelated;
}

.bg-texture-noise-light > *,
.bg-texture-noise > *,
.bg-illustration-wing > * {
  position: relative;
  z-index: 2;
}

.text-yellow {
  color: var(--color-yellow);
}

.bg-academy-red {
  background-color: var(--color-academy-red);
}
.text-academy-red {
  color: var(--color-academy-red);
}

/* Gray scale */
.bg-gray-50 {
  background-color: var(--color-gray-50);
}
.bg-gray-100 {
  background-color: var(--color-gray-100);
}
.bg-gray-200 {
  background-color: var(--color-gray-200);
}
.bg-gray-300 {
  background-color: var(--color-gray-300);
}
.bg-gray-400 {
  background-color: var(--color-gray-400);
}
.bg-gray-500 {
  background-color: var(--color-gray-500);
}
.bg-gray-600 {
  background-color: var(--color-gray-600);
}
.bg-gray-700 {
  background-color: var(--color-gray-700);
}
.bg-gray-800 {
  background-color: var(--color-gray-800);
}
.bg-gray-900 {
  background-color: var(--color-gray-900);
}

.text-gray-50 {
  color: var(--color-gray-50);
}
.text-gray-100 {
  color: var(--color-gray-100);
}
.text-gray-200 {
  color: var(--color-gray-200);
}
.text-gray-300 {
  color: var(--color-gray-300);
}
.text-gray-400 {
  color: var(--color-gray-400);
}
.text-gray-500 {
  color: var(--color-gray-500);
}
.text-gray-600 {
  color: var(--color-gray-600);
}
.text-gray-700 {
  color: var(--color-gray-700);
}
.text-gray-800 {
  color: var(--color-gray-800);
}
.text-gray-900 {
  color: var(--color-gray-900);
}

/* Orange */
.bg-orange-50 {
  background-color: var(--color-orange-50);
}
.bg-orange-200 {
  background-color: var(--color-orange-200);
}
.bg-orange-500 {
  background-color: var(--color-orange-500);
}
.bg-orange-700 {
  background-color: var(--color-orange-700);
}
.bg-orange-900 {
  background-color: var(--color-orange-900);
}

.text-orange-50 {
  color: var(--color-orange-50);
}
.text-orange-200 {
  color: var(--color-orange-200);
}
.text-orange-500 {
  color: var(--color-orange-500);
}
.text-orange-700 {
  color: var(--color-orange-700);
}
.text-orange-900 {
  color: var(--color-orange-900);
}

/* Gold */
.bg-gold-50 {
  background-color: var(--color-gold-50);
}
.bg-gold-200 {
  background-color: var(--color-gold-200);
}
.bg-gold-500 {
  background-color: var(--color-gold-500);
}
.bg-gold-700 {
  background-color: var(--color-gold-700);
}
.bg-gold-900 {
  background-color: var(--color-gold-900);
}

.text-gold-50 {
  color: var(--color-gold-50);
}
.text-gold-200 {
  color: var(--color-gold-200);
}
.text-gold-500 {
  color: var(--color-gold-500);
}
.text-gold-700 {
  color: var(--color-gold-700);
}
.text-gold-900 {
  color: var(--color-gold-900);
}

/* Sky */
.bg-sky-50 {
  background-color: var(--color-sky-50);
}
.bg-sky-200 {
  background-color: var(--color-sky-200);
}
.bg-sky-500 {
  background-color: var(--color-sky-500);
}
.bg-sky-700 {
  background-color: var(--color-sky-700);
}
.bg-sky-900 {
  background-color: var(--color-sky-900);
}

.text-sky-50 {
  color: var(--color-sky-50);
}
.text-sky-200 {
  color: var(--color-sky-200);
}
.text-sky-500 {
  color: var(--color-sky-500);
}
.text-sky-700 {
  color: var(--color-sky-700);
}
.text-sky-900 {
  color: var(--color-sky-900);
}

/* Emerald */
.bg-emerald-50 {
  background-color: var(--color-emerald-50);
}
.bg-emerald-200 {
  background-color: var(--color-emerald-200);
}
.bg-emerald-500 {
  background-color: var(--color-emerald-500);
}
.bg-emerald-700 {
  background-color: var(--color-emerald-700);
}
.bg-emerald-900 {
  background-color: var(--color-emerald-900);
}

.text-emerald-50 {
  color: var(--color-emerald-50);
}
.text-emerald-200 {
  color: var(--color-emerald-200);
}
.text-emerald-500 {
  color: var(--color-emerald-500);
}
.text-emerald-700 {
  color: var(--color-emerald-700);
}
.text-emerald-900 {
  color: var(--color-emerald-900);
}

/* Lime */
.bg-lime-50 {
  background-color: var(--color-lime-50);
}
.bg-lime-200 {
  background-color: var(--color-lime-200);
}
.bg-lime-500 {
  background-color: var(--color-lime-500);
}
.bg-lime-700 {
  background-color: var(--color-lime-700);
}
.bg-lime-900 {
  background-color: var(--color-lime-900);
}

.text-lime-50 {
  color: var(--color-lime-50);
}
.text-lime-200 {
  color: var(--color-lime-200);
}
.text-lime-500 {
  color: var(--color-lime-500);
}
.text-lime-700 {
  color: var(--color-lime-700);
}
.text-lime-900 {
  color: var(--color-lime-900);
}

/* Teal */
.bg-teal {
  background-color: var(--color-teal);
}
.bg-teal-lighter {
  background-color: var(--color-teal-lighter);
}
.text-teal {
  color: var(--color-teal);
}
.text-teal-lighter {
  color: var(--color-teal-lighter);
}

/* Red */
.bg-red {
  background-color: var(--color-red);
}
.bg-red-lighter {
  background-color: var(--color-red-lighter);
}
.bg-red-50 {
  background-color: var(--color-red-50);
}
.bg-red-200 {
  background-color: var(--color-red-200);
}
.bg-red-500 {
  background-color: var(--color-red-500);
}
.bg-red-700 {
  background-color: var(--color-red-700);
}
.bg-red-900 {
  background-color: var(--color-red-900);
}

.text-red {
  color: var(--color-red);
}
.text-red-lighter {
  color: var(--color-red-lighter);
}
.text-red-50 {
  color: var(--color-red-50);
}
.text-red-200 {
  color: var(--color-red-200);
}
.text-red-500 {
  color: var(--color-red-500);
}
.text-red-700 {
  color: var(--color-red-700);
}
.text-red-900 {
  color: var(--color-red-900);
}

/* Green */
.bg-green {
  background-color: var(--color-green);
}
.text-green {
  color: var(--color-green);
}

/**** Academy V3 "Wing" background modifier ****
     Suffix any bg-* utility with `-wing` (e.g. `bg-gray-700-wing`) to layer the
     brand wing over the fill, or add the standalone `wing` class alongside an
     existing bg-* class. The wing bleeds off the left edge at an angle — the
     angle/skew is baked into the exported path, so it needs no transform.
     Figma's grain filter is omitted; it is imperceptible at section scale.
     `cover` keeps the wing bleeding past the top and bottom edges at any
     section height. Tune per section with --wing-size / --wing-position. */

:root {
  --wing-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='334' viewBox='0 0 1440 334' fill='none'><path opacity='0.5' fill='%23716F67' d='M196.272 -223.218L227.919 -223.447L269.53 -223.721L997.113 -228.678L965.91 -127.54L1636.1 -82.3818C1636.1 -82.3818 1385.78 235.058 1186.93 194.516C1077.53 172.26 408.711 -4.43373 393.047 -8.59923L1178.58 296.717C1178.58 296.717 928.4 444.313 815.482 400.585C703.9 357.361 327.966 167.913 327.966 167.913L774.016 467.763C774.016 467.763 508.382 535.113 394.104 449.064C312.192 387.922 172.458 257.459 166.699 251.835L348.623 505.072C348.623 505.072 150.863 496.902 55.2055 394.873C3.33007 339.53 -12.0552 272.237 -65.711 130.815L-95.7558 113.408L-62.5727 335.214C-83.2769 333.946 -118.148 323.362 -142.929 316.941L-154.288 140.87L-172.987 309.414C-208.258 298.295 -248.609 280.231 -282.828 261.684L-227.485 120.087L-143.539 -35.743L-124.138 -71.8522L-86.3672 -141.911L-47.8703 -213.5L196.286 -223.244L196.272 -223.218Z'/></svg>");
  --wing-size: cover;
  --wing-position: left center;
}

:is(
  .wing,
  .bg-blue-wing,
  .bg-variant-blue-wing,
  .bg-snow-wing,
  .bg-charcoal-wing,
  .bg-ash-wing,
  .bg-navy-wing,
  .bg-black-wing,
  .bg-white-wing,
  .bg-yellow-wing,
  .bg-academy-red-wing,
  .bg-gray-50-wing,
  .bg-gray-100-wing,
  .bg-gray-200-wing,
  .bg-gray-300-wing,
  .bg-gray-400-wing,
  .bg-gray-500-wing,
  .bg-gray-600-wing,
  .bg-gray-700-wing,
  .bg-gray-800-wing,
  .bg-gray-900-wing,
  .bg-orange-50-wing,
  .bg-orange-200-wing,
  .bg-orange-500-wing,
  .bg-orange-700-wing,
  .bg-orange-900-wing,
  .bg-gold-50-wing,
  .bg-gold-200-wing,
  .bg-gold-500-wing,
  .bg-gold-700-wing,
  .bg-gold-900-wing,
  .bg-sky-50-wing,
  .bg-sky-200-wing,
  .bg-sky-500-wing,
  .bg-sky-700-wing,
  .bg-sky-900-wing,
  .bg-emerald-50-wing,
  .bg-emerald-200-wing,
  .bg-emerald-500-wing,
  .bg-emerald-700-wing,
  .bg-emerald-900-wing,
  .bg-lime-50-wing,
  .bg-lime-200-wing,
  .bg-lime-500-wing,
  .bg-lime-700-wing,
  .bg-lime-900-wing,
  .bg-teal-wing,
  .bg-teal-lighter-wing,
  .bg-red-wing,
  .bg-red-lighter-wing,
  .bg-red-50-wing,
  .bg-red-200-wing,
  .bg-red-500-wing,
  .bg-red-700-wing,
  .bg-red-900-wing,
  .bg-green-wing
) {
  background-image: var(--wing-image);
  background-repeat: no-repeat;
  background-position: var(--wing-position);
  background-size: var(--wing-size);
}

/* Fills — same values as the plain bg-* utilities above */
.bg-blue-wing {
  background-color: var(--color-blue);
}
.bg-variant-blue-wing {
  background-color: var(--color-variant-blue);
}
.bg-snow-wing {
  background-color: var(--color-snow);
}
.bg-charcoal-wing {
  background-color: var(--color-charcoal);
}
.bg-ash-wing {
  background-color: var(--color-ash);
}
.bg-navy-wing {
  background-color: var(--color-navy);
}
.bg-black-wing {
  background-color: var(--color-black);
}
.bg-white-wing {
  background-color: var(--color-white);
}

.bg-yellow-wing {
  background-color: var(--color-yellow);
}
.bg-academy-red-wing {
  background-color: var(--color-academy-red);
}

.bg-gray-50-wing {
  background-color: var(--color-gray-50);
}
.bg-gray-100-wing {
  background-color: var(--color-gray-100);
}
.bg-gray-200-wing {
  background-color: var(--color-gray-200);
}
.bg-gray-300-wing {
  background-color: var(--color-gray-300);
}
.bg-gray-400-wing {
  background-color: var(--color-gray-400);
}
.bg-gray-500-wing {
  background-color: var(--color-gray-500);
}
.bg-gray-600-wing {
  background-color: var(--color-gray-600);
}
.bg-gray-700-wing {
  background-color: var(--color-gray-700);
}
.bg-gray-800-wing {
  background-color: var(--color-gray-800);
}
.bg-gray-900-wing {
  background-color: var(--color-gray-900);
}

.bg-orange-50-wing {
  background-color: var(--color-orange-50);
}
.bg-orange-200-wing {
  background-color: var(--color-orange-200);
}
.bg-orange-500-wing {
  background-color: var(--color-orange-500);
}
.bg-orange-700-wing {
  background-color: var(--color-orange-700);
}
.bg-orange-900-wing {
  background-color: var(--color-orange-900);
}

.bg-gold-50-wing {
  background-color: var(--color-gold-50);
}
.bg-gold-200-wing {
  background-color: var(--color-gold-200);
}
.bg-gold-500-wing {
  background-color: var(--color-gold-500);
}
.bg-gold-700-wing {
  background-color: var(--color-gold-700);
}
.bg-gold-900-wing {
  background-color: var(--color-gold-900);
}

.bg-sky-50-wing {
  background-color: var(--color-sky-50);
}
.bg-sky-200-wing {
  background-color: var(--color-sky-200);
}
.bg-sky-500-wing {
  background-color: var(--color-sky-500);
}
.bg-sky-700-wing {
  background-color: var(--color-sky-700);
}
.bg-sky-900-wing {
  background-color: var(--color-sky-900);
}

.bg-emerald-50-wing {
  background-color: var(--color-emerald-50);
}
.bg-emerald-200-wing {
  background-color: var(--color-emerald-200);
}
.bg-emerald-500-wing {
  background-color: var(--color-emerald-500);
}
.bg-emerald-700-wing {
  background-color: var(--color-emerald-700);
}
.bg-emerald-900-wing {
  background-color: var(--color-emerald-900);
}

.bg-lime-50-wing {
  background-color: var(--color-lime-50);
}
.bg-lime-200-wing {
  background-color: var(--color-lime-200);
}
.bg-lime-500-wing {
  background-color: var(--color-lime-500);
}
.bg-lime-700-wing {
  background-color: var(--color-lime-700);
}
.bg-lime-900-wing {
  background-color: var(--color-lime-900);
}

.bg-teal-wing {
  background-color: var(--color-teal);
}
.bg-teal-lighter-wing {
  background-color: var(--color-teal-lighter);
}

.bg-red-wing {
  background-color: var(--color-red);
}
.bg-red-lighter-wing {
  background-color: var(--color-red-lighter);
}
.bg-red-50-wing {
  background-color: var(--color-red-50);
}
.bg-red-200-wing {
  background-color: var(--color-red-200);
}
.bg-red-500-wing {
  background-color: var(--color-red-500);
}
.bg-red-700-wing {
  background-color: var(--color-red-700);
}
.bg-red-900-wing {
  background-color: var(--color-red-900);
}

.bg-green-wing {
  background-color: var(--color-green);
}

/* Nested heading inheritance for common text wrappers (matches .text-white pattern) */
.text-black h1,
.text-black h2,
.text-black h3,
.text-black h4,
.text-black h5,
.text-black p,
.text-charcoal h1,
.text-charcoal h2,
.text-charcoal h3,
.text-charcoal h4,
.text-charcoal h5,
.text-charcoal p,
.text-gray-900 h1,
.text-gray-900 h2,
.text-gray-900 h3,
.text-gray-900 h4,
.text-gray-900 h5,
.text-gray-900 p {
  color: inherit !important;
}
.text-gray-100 h1,
.text-gray-100 h2,
.text-gray-100 h3,
.text-gray-100 h4,
.text-gray-100 h5,
.text-gray-100 p,
.text-gray-50 h1,
.text-gray-50 h2,
.text-gray-50 h3,
.text-gray-50 h4,
.text-gray-50 h5,
.text-gray-50 p,
.text-ash h1,
.text-ash h2,
.text-ash h3,
.text-ash h4,
.text-ash h5,
.text-ash p,
.text-snow h1,
.text-snow h2,
.text-snow h3,
.text-snow h4,
.text-snow h5,
.text-snow p {
  color: inherit !important;
}

/**** Academy V2 Margin/Padding Classes ****/
/* =================================
     PADDING TOP
     ================================= */
.academy-pt-0 {
  --widget-pad-top: 0;

  padding-top: var(--widget-pad-top) !important;
}
.academy-pt-1 {
  --widget-pad-top: 1rem;

  padding-top: var(--widget-pad-top) !important;
}
.academy-pt-2 {
  --widget-pad-top: 2rem;

  padding-top: var(--widget-pad-top) !important;
}
.academy-pt-3 {
  --widget-pad-top: 3rem;

  padding-top: var(--widget-pad-top) !important;
}
.academy-pt-4 {
  --widget-pad-top: 4rem;

  padding-top: var(--widget-pad-top) !important;
}
.academy-pt-5 {
  --widget-pad-top: 5rem;

  padding-top: var(--widget-pad-top) !important;
}
.academy-pt-6 {
  --widget-pad-top: 6rem;

  padding-top: var(--widget-pad-top) !important;
}
.academy-pt-8 {
  --widget-pad-top: 8rem;

  padding-top: var(--widget-pad-top) !important;
}
.academy-pt-10 {
  --widget-pad-top: 10rem;

  padding-top: var(--widget-pad-top) !important;
}

/* =================================
     PADDING BOTTOM
     ================================= */
.academy-pb-0 {
  --widget-pad-bottom: 0;

  padding-bottom: var(--widget-pad-bottom) !important;
}
.academy-pb-1 {
  --widget-pad-bottom: 1rem;

  padding-bottom: var(--widget-pad-bottom) !important;
}
.academy-pb-2 {
  --widget-pad-bottom: 2rem;

  padding-bottom: var(--widget-pad-bottom) !important;
}
.academy-pb-3 {
  --widget-pad-bottom: 3rem;

  padding-bottom: var(--widget-pad-bottom) !important;
}
.academy-pb-4 {
  --widget-pad-bottom: 4rem;

  padding-bottom: var(--widget-pad-bottom) !important;
}
.academy-pb-5 {
  --widget-pad-bottom: 5rem;

  padding-bottom: var(--widget-pad-bottom) !important;
}
.academy-pb-6 {
  --widget-pad-bottom: 6rem;

  padding-bottom: var(--widget-pad-bottom) !important;
}
.academy-pb-8 {
  --widget-pad-bottom: 8rem;

  padding-bottom: var(--widget-pad-bottom) !important;
}
.academy-pb-10 {
  --widget-pad-bottom: 10rem;

  padding-bottom: var(--widget-pad-bottom) !important;
}

/* =================================
     MARGIN TOP
     ================================= */
.academy-mt-0 {
  margin-top: 0rem !important;
}
.academy-mt-1 {
  margin-top: 1rem !important;
}
.academy-mt-2 {
  margin-top: 2rem !important;
}
.academy-mt-3 {
  margin-top: 3rem !important;
}
.academy-mt-4 {
  margin-top: 4rem !important;
}
.academy-mt-5 {
  margin-top: 5rem !important;
}
.academy-mt-6 {
  margin-top: 6rem !important;
}
.academy-mt-8 {
  margin-top: 8rem !important;
}
.academy-mt-10 {
  margin-top: 10rem !important;
}

/* =================================
     MARGIN BOTTOM
     ================================= */
.academy-mb-0 {
  margin-bottom: 0rem !important;
}
.academy-mb-1 {
  margin-bottom: 1rem !important;
}
.academy-mb-2 {
  margin-bottom: 2rem !important;
}
.academy-mb-3 {
  margin-bottom: 3rem !important;
}
.academy-mb-4 {
  margin-bottom: 4rem !important;
}
.academy-mb-5 {
  margin-bottom: 5rem !important;
}
.academy-mb-6 {
  margin-bottom: 6rem !important;
}
.academy-mb-8 {
  margin-bottom: 8rem !important;
}
.academy-mb-10 {
  margin-bottom: 10rem !important;
}

/**** Academy V2 Styles ****/

/* Navigation/Header Styles — includes Partner Academy microsite header */
.header--microsite {
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-white);
}

.header--microsite .header__inner {
  justify-content: space-between;
}

.header--microsite .header__inner::after {
  display: none;
}

.header--microsite .header__inner .top-bar-section ul li a {
  color: var(--color-black) !important;
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-weight: 500 !important;
}

.header--microsite .header__inner .top-bar-section ul li a:hover {
  color: var(--color-black) !important;
  text-decoration: underline !important;
  background: none !important;
}

/* Shared primary-nav rhythm: logged-out (.header__inner .top-bar) and
   logged-in overlay (.academy-dashboard-navigation) must match.
   Target ~40px between labels (logged-out screenshot). Logged-in was
   stretching to ~98px via width:100% + space-between on a wide row. */
.header--microsite .header__inner .top-bar-section ul.left:not(.dropdown),
.header--microsite .header__inner .top-bar-section ul:not(.dropdown),
.academy-dashboard-navigation .top-bar-section ul.left {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  gap: 40px !important; /* match logged-out ink-to-ink spacing */
  row-gap: 8px !important;
}

.header--microsite .header__inner .top-bar-section ul li,
.academy-dashboard-navigation .top-bar-section ul li {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.header--microsite .header__inner .top-bar-section ul li a,
.academy-dashboard-navigation .top-bar-section ul li a {
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 150% !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.header--microsite .company__school-name,
.header--microsite .company__school-name__divider {
  color: var(--color-black);
}

/* Logged-in Partner NON-dashboard (Catalog / My Activity / tracks):
   .header--microsite + overlay nav, no account avatar.
   Match DevTools box of .header--dashboard: 81× (16 + 56 + 8 + border).
   Logged-out microsite (no .academy-dashboard-navigation) unchanged. */
.container:has(.academy-dashboard-navigation) > .header--microsite,
.header--microsite:has(+ #main-content .academy-dashboard-navigation) {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  min-height: 81px !important; /* dashboard computed height */
  height: 81px !important;
  padding: 16px 32px 8px !important; /* dashboard: 1rem / 2rem / 0.5rem */
  border-bottom: 1px solid var(--color-gray-200);
}

.container:has(.academy-dashboard-navigation) > .header--microsite .header__inner,
.header--microsite:has(+ #main-content .academy-dashboard-navigation)
  .header__inner {
  width: 100%;
  min-height: 56px !important; /* dashboard content box height */
  align-items: center;
}

/* No dashboard logo margin-top — without the avatar that offset
   drops the mark below the overlay nav. Center with the 56px row. */
.container:has(.academy-dashboard-navigation)
  > .header--microsite
  .company-logo__container,
.header--microsite:has(+ #main-content .academy-dashboard-navigation)
  .company-logo__container {
  margin-top: 0 !important;
  display: flex;
  align-items: center;
}

.container:has(.academy-dashboard-navigation)
  > .header--microsite
  .company__beta-logo,
.header--microsite:has(+ #main-content .academy-dashboard-navigation)
  .company__beta-logo {
  display: flex;
  align-items: center;
  align-self: center;
}

.header--dashboard {
  padding: 1rem 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.company__school-name {
  font-family: 'FK Grotesk', system-ui, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 26px */
  letter-spacing: -0.6px;
  text-transform: none;
  color: var(--color-black);
  margin-bottom: 0;
}

/* Transcript header — more top air; title as H3, one line, black
   (H2 was too wide and collided with Print/Export) */
.widget--transcript-header,
.widget--transcript-header_standard {
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.widget--transcript-header .header--dashboard,
.widget--transcript-header_standard .header--dashboard {
  padding: 4rem 2rem 2rem !important;
}

.widget--transcript-header .company__school-name,
.widget--transcript-header h1.company__school-name,
.widget--transcript-header_standard .company__school-name,
.widget--transcript-header_standard h1.company__school-name {
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-size: var(--type-h3-size, 40px) !important;
  font-weight: var(--type-heading-weight, 700) !important;
  line-height: var(--type-h3-lh, 1.2) !important;
  letter-spacing: var(--type-heading-tracking, 0) !important;
  color: var(--color-black) !important;
  white-space: nowrap;
  margin: 1.75rem 0 0 !important; /* gap under logo */
  padding: 0 !important;
}

.widget--transcript-header .company__school-name__divider,
.widget--transcript-header_standard .company__school-name__divider {
  display: none;
}

/* Gap between user menu and Print / Export actions */
.widget--transcript-header .text-right.hide-for-print,
.widget--transcript-header_standard .text-right.hide-for-print {
  margin-top: 1.75rem !important;
}

@media (max-width: 767px) {
  .widget--transcript-header,
  .widget--transcript-header_standard {
    margin-top: 1rem;
    padding-top: 0.5rem;
  }

  .widget--transcript-header .header--dashboard,
  .widget--transcript-header_standard .header--dashboard {
    padding: 2.5rem 1rem 1.5rem !important;
  }

  .widget--transcript-header .company__school-name,
  .widget--transcript-header h1.company__school-name,
  .widget--transcript-header_standard .company__school-name,
  .widget--transcript-header_standard h1.company__school-name {
    white-space: normal;
    font-size: var(--type-h3-size, 32px) !important;
    line-height: var(--type-h3-lh, 1.2) !important;
  }
}

.header--dashboard .company-logo__container {
  margin-top: 0.5rem;
}

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__inner .company__beta-logo {
  order: 1;
  position: relative;
  z-index: 3;
}

.header__inner .company__school-name__divider {
  order: 2;
}

.header__inner .company__school-name {
  order: 3;
}

.header__inner .company__beta-logo .company-logo__container img {
  max-height: 32px;
}

.header__inner .top-bar {
  margin: auto;
  order: 4;
}

.header__inner .top-bar-section {
  display: flex;
  min-width: 0; /* was 450px — forced space-between stretch */
  width: auto;
}

/* :not(.dropdown) so submenu panels aren't stretched into a flex row */
.header__inner .top-bar-section ul:not(.dropdown) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  gap: 40px;
}

/* Mid desktop (905–1220): keep nav in normal flow so wrapped FR labels
   grow the header instead of colliding with logo / account menu. */
@media (min-width: 905px) and (max-width: 1220px) {
  .header__inner {
    flex-wrap: wrap;
    align-items: center;
  }

  .header__inner .top-bar {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    order: 6;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    z-index: 2;
  }

  .header__inner .top-bar .title-area {
    display: none !important;
  }

  .header__inner .top-bar-section {
    display: flex !important;
    justify-content: center;
    min-width: 0 !important;
    width: 100% !important;
  }

  .header__inner .top-bar-section ul.left:not(.dropdown),
  .header__inner .top-bar-section ul:not(.dropdown) {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px; /* match shared primary-nav rhythm */
    width: 100% !important;
    margin: 0 auto !important;
    float: none !important;
  }

  .header__inner .top-bar-section ul li > a {
    white-space: nowrap !important; /* wrap between items, not mid-label */
  }

  .header__inner .nav--top {
    position: relative;
    z-index: 3;
    margin-left: auto !important;
  }
}

/* Wide desktop (≥1221): absolute-center nav on one line */
@media (min-width: 1221px) {
  .header__inner .top-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    width: auto !important;
    max-width: calc(100% - 520px);
    z-index: 2;
  }

  .header__inner .top-bar-section ul li > a {
    white-space: nowrap !important;
  }

  .header__inner .top-bar .title-area {
    display: none !important;
  }

  .header__inner .top-bar-section {
    display: flex !important;
    justify-content: center;
    min-width: 0 !important;
    width: auto !important;
  }

  .header__inner .top-bar-section ul.left:not(.dropdown),
  .header__inner .top-bar-section ul:not(.dropdown) {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px; /* match shared primary-nav rhythm */
    width: auto !important;
    margin: 0 auto !important;
    float: none !important;
  }

  .header__inner .nav--top {
    position: relative;
    z-index: 3;
    margin-left: auto !important;
  }
}

.header__inner .top-bar-section ul li {
  background: none !important;
}

.header__inner .top-bar-section ul li a {
  background: none !important;
  color: var(--color-black);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500; /* align with microsite / overlay Medium */
  line-height: 150%;
}

.header__inner .top-bar-section ul li a:hover {
  color: var(--color-black);
  text-decoration: underline;
  background: none !important;
}

.header__inner .nav--top {
  margin: 0 !important;
  order: 5;
}

.header__inner .nav--top li a {
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  background-color: var(--color-blue);
  color: var(--color-white);
  border-radius: 3.25rem;
  text-transform: none;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 1.3125rem */
}

.avatar {
  background: var(--color-blue);
  color: var(--color-white);
}

/* Partner / dashboard account menu — long FR labels (site name + full
   name dumped into the 42px avatar) were overlapping the centered nav. */
.header--dashboard .header__inner .column.small-6:last-child,
.header--dashboard .header__inner .ml-auto {
  min-width: 0;
  max-width: 100%;
}

.header--dashboard .header__inner .ml-auto .relative,
.header--dashboard .header__inner .ml-auto .ember-view {
  max-width: 100%;
}

.header--dashboard .header__inner button[id^='headlessui-menu-button'],
.header--dashboard .header__inner button[aria-haspopup='true'] {
  max-width: 100%;
}

.header--dashboard .header__inner button[id^='headlessui-menu-button'] > .flex,
.header--dashboard .header__inner button[aria-haspopup='true'] > .flex {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  max-width: min(280px, 36vw) !important;
  gap: 8px !important;
}

.header--dashboard .header__inner span.truncate,
.header--dashboard .header__inner .truncate {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 160px !important;
  margin-left: 8px !important;
  margin-right: 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.header--dashboard .header__inner button .whitespace-nowrap {
  flex: 0 0 auto !important;
  max-width: none !important;
}

/* Avatar circle — TI sometimes puts the full display name here in FR */
.header--dashboard .header__inner [class*='rounded-full'],
.header--dashboard .header__inner span.rounded-full {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  box-sizing: border-box !important;
  padding: 0 4px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Default / mid widths: in-flow so wrapped links grow the header */
.academy-dashboard-navigation {
  position: relative;
  z-index: 10;
  top: auto;
  left: auto;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 4px 24px 12px;
  box-sizing: border-box;
  -webkit-transform: none;
  transform: none;
}

/* Wide desktop only: overlay-center on one line.
   Shrink-wrap (max-content) so items use gap — not space-between
   across a 720px-wide row (that was ~98px between labels). */
@media (min-width: 1221px) {
  .academy-dashboard-navigation {
    position: absolute;
    top: 12px;
    left: 50%;
    width: max-content;
    max-width: min(720px, calc(100% - 520px));
    margin: 0;
    padding: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .academy-dashboard-navigation .top-bar,
  .academy-dashboard-navigation .top-bar-section,
  .academy-dashboard-navigation .navigation-bar {
    width: max-content !important;
    max-width: 100% !important;
    float: none !important;
  }
}

@media (max-width: 767px) {
  .header__inner {
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Negative row margins widen the page past the viewport */
  .header__inner .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    max-width: 100%;
  }
  .academy-dashboard-navigation {
    position: relative;
    top: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    left: 0;
  }
  .top-bar.expanded {
    padding: 0;
  }
  /* Logo + Manager access on one row; Menu bar full-width below */
  .header__inner .company__beta-logo,
  .header .company__beta-logo {
    order: 1;
    display: flex;
    align-items: center;
    align-self: center;
    padding: 12px 16px;
    box-sizing: border-box;
  }
  .header__inner .company__beta-logo .company-logo__container,
  .header .company__beta-logo .company-logo__container,
  .header--dashboard .company-logo__container {
    display: flex;
    align-items: center;
    margin: 0 !important;
    margin-top: 0 !important;
  }
  .header__inner .company__beta-logo .company-logo__container img,
  .header .company__beta-logo .company-logo__container img {
    display: block;
    max-height: 28px;
    width: auto;
    padding: 0 !important;
  }
  .header__inner .nav--top {
    order: 2;
    display: flex;
    align-items: center;
    align-self: center;
    margin: 0 0 0 auto !important;
    padding: 12px 16px;
  }
  .header__inner .nav--top li {
    display: flex;
    align-items: center;
  }
  .header__inner .top-bar {
    order: 3;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .header--microsite {
    padding: 0;
  }
  /* Desktop nav min-width: 450px was forcing ~page width on phones */
  .header__inner .top-bar-section {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .top-bar .toggle-topbar,
  .top-bar .toggle-topbar.menu-icon > a,
  .top-bar .toggle-topbar.menu-icon > button,
  .top-bar.expanded .toggle-topbar.menu-icon > a,
  .top-bar.expanded .toggle-topbar.menu-icon > button {
    margin-left: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

.academy-dashboard-navigation .top-bar {
  background: none !important;
}

.academy-dashboard-navigation .top-bar-section ul.left {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center !important;
  gap: 40px !important; /* shared with logged-out header nav */
  width: auto !important; /* never 100% — that stretched gaps to ~98px */
  max-width: 100% !important;
  row-gap: 8px !important;
}

@media (min-width: 1221px) {
  .academy-dashboard-navigation .top-bar-section ul.left {
    flex-wrap: nowrap;
    width: max-content !important;
  }
}

.academy-dashboard-navigation .top-bar-section ul li {
  background: none !important;
  flex: 0 0 auto !important;
  float: none !important;
}

.academy-dashboard-navigation .top-bar-section ul li a {
  background: none !important;
  color: var(--color-black);
  font-size: 1rem;
  font-style: normal;
  font-weight: 500; /* shared Medium with logged-out microsite nav */
  line-height: 150%;
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif);
  text-transform: none;
  white-space: nowrap !important; /* keep each label intact; wrap between items */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.academy-dashboard-navigation .top-bar-section ul li a:hover {
  color: var(--color-black);
  text-decoration: underline;
  background: none !important;
}

.global-nav__container {
  max-width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
  background-color: var(--color-snow);
}

.global-nav__container .nav--global-links {
  background-color: var(--color-snow);
  color: var(--color-black) !important;
  text-align: right;
}

.global-nav__container .nav--global-links a {
  color: var(--color-black) !important;
}

.global-nav__container .nav--global-links a:hover {
  color: var(--color-black) !important;
  text-decoration: underline;
  font-weight: 500;
}

/* Hero Header styles
     TI injects <script> metamorph tags between widgets, so use ~ (not +)
     to detect a following .academy-header-search. */
.academy-header-content,
.learn.dashboard .widget.academy-header-content,
.layout__content .widget.academy-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  /* Standalone: 96 top + 96 bottom */
  padding-top: var(--section-pad-y) !important;
  padding-bottom: var(--section-pad-y) !important;
  box-sizing: border-box;
}

/* Search follows (scripts may sit between) → keep 40px gap to search;
     search widget carries the 96 bottom pad so the yellow block matches Figma. */
.academy-header-content:has(~ .academy-header-search),
.learn.dashboard
  .widget.academy-header-content:has(~ .widget.academy-header-search),
.layout__content
  .widget.academy-header-content:has(~ .widget.academy-header-search) {
  padding-bottom: 40px !important;
}

.academy-header-content .widget__title {
  font-size: 4.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 77px */
  letter-spacing: -2.1px;
  max-width: 1125px;
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.academy-header-content .widget__subtitle {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 36px */
  letter-spacing: -0.48px;
  max-width: 1125px;
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 767px) {
  .academy-header-content .widget__title {
    font-size: 2.5rem;
    letter-spacing: -0.04em;
    line-height: 1.1;
    padding-left: 16px;
    padding-right: 16px;
  }
  .academy-header-content .widget__subtitle {
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Hero search — POwl Academy Figma (white 4px field + absolute black Search btn)
     TI markup: .row > .columns > .search-bar-widget > input + .btn (btn is absolute)
     Use padding (not margin) for bottom space so bg-yellow doesn’t collapse. */
.academy-header-search,
.learn.dashboard .widget.academy-header-search,
.layout__content .widget.academy-header-search {
  display: flex;
  justify-content: center;
  padding-top: 0 !important;
  padding-bottom: var(--section-pad-y) !important; /* 96 desktop / 56 mobile */
  box-sizing: border-box;
}

.academy-header-search .row {
  max-width: 660px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  display: block;
}

.academy-header-search .row .columns,
.academy-header-search .row .small-12 {
  width: 100%;
  padding: 0;
  float: none;
}

/* Kill legacy blue pill; this is the white search field shell */
.academy-header-search .search-bar-widget {
  position: relative !important;
  width: 100% !important;
  max-width: 660px !important;
  height: auto !important;
  min-height: 48px !important;
  margin: 0 auto !important;
  padding: 4px 4px 4px 16px !important;
  background: var(--color-white) !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.academy-header-search input,
.academy-header-search input[type='search'],
.academy-header-search input[type='text'],
.academy-header-search .search-bar-widget input {
  position: relative !important;
  height: 40px !important;
  min-height: 40px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 120px 0 0 !important; /* room for absolute Search btn */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  font-family: 'FK Grotesk', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--color-black) !important;
}

.academy-header-search input::placeholder,
.academy-header-search .search-bar-widget input::placeholder {
  color: var(--color-gray-500) !important;
  font-weight: 500 !important;
  opacity: 1;
}

.academy-header-search input:focus,
.academy-header-search input:active,
.academy-header-search .search-bar-widget input:focus,
.academy-header-search .search-bar-widget input:active {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Keep TI absolute overlay layout — do NOT switch to relative/flex */
.academy-header-search .btn,
.academy-header-search .btn.btn--primary,
.academy-header-search .search-bar-widget .btn {
  position: absolute !important;
  top: 50% !important;
  right: 4px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 40px !important;
  min-height: 40px !important;
  width: auto !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  background-color: var(--color-black) !important;
  border: 1px solid var(--color-black) !important;
  border-radius: 4px !important;
  font-family: 'FK Grotesk', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
  color: var(--color-white) !important;
  float: none !important;
}

.academy-header-search .btn:hover,
.academy-header-search .btn.btn--primary:hover,
.academy-header-search .search-bar-widget .btn:hover {
  background-color: var(--color-gray-300) !important;
  border-color: var(--color-gray-300) !important;
  color: var(--color-black) !important;
}

/* Label first, search icon after (Figma: "Search" + magnifier) */
.academy-header-search .btn,
.academy-header-search .btn.btn--primary,
.academy-header-search .search-bar-widget .btn {
  flex-direction: row !important;
}

.academy-header-search .btn > span,
.academy-header-search .search-bar-widget .btn > span {
  color: inherit !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: none !important;
  order: 1 !important;
}

.academy-header-search .btn > .icon-search,
.academy-header-search .btn > i.icon-search,
.academy-header-search .btn > [class*='icon-search'],
.academy-header-search .search-bar-widget .btn > .icon-search,
.academy-header-search .search-bar-widget .btn > i.icon-search,
.academy-header-search .search-bar-widget .btn > [class*='icon-search'] {
  color: inherit !important;
  font-size: 16px !important;
  order: 2 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 767px) {
  .academy-header-search .row {
    max-width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* Two Image Card Styles — Figma Cards (4114:5729)
     Section: 1125 content / 96 vertical pad / 64 gap to cards
     Cards: image → 24 → (title 8 body) → 32 → Contextual Primary + arrow */

.academy-two-image-cards h3,
.academy-two-image-cards .widget__title {
  text-align: center;
  color: var(--color-black);
  margin-top: 0 !important;
  padding-top: 0 !important; /* kill legacy .widget__title { padding-top: 60px } */
}

.academy-two-image-cards p.muted,
.academy-two-image-cards .widget__subtitle {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  padding: 0 1rem;
  color: var(--color-black);
  /* margin-bottom from --section-stack-gap (shared rhythm) */
}

.academy-two-image-cards .row .columns:first-child {
  padding-left: 0;
}

.academy-two-image-cards .row .columns:last-child {
  padding-right: 0;
}

.academy-two-image-cards .row .columns img {
  width: 100%;
  height: 276px;
  object-fit: cover;
  margin-bottom: 24px;
  border-radius: 4px;
}

@media (max-width: 767px) {
  .academy-two-image-cards .row .columns img {
    margin-top: 1.75rem;
    margin-bottom: 24px;
    height: auto;
  }

  .academy-two-image-cards .row .columns:first-child {
    padding-left: 1rem;
  }

  .academy-two-image-cards .row .columns:last-child {
    padding-right: 1rem;
  }
}

.academy-two-image-cards .row .columns h4 {
  margin: 0 0 8px;
  padding: 0;
  color: var(--color-black);
}

.academy-two-image-cards .row .columns p:not(:first-of-type) {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  color: var(--color-black);
}

/* Contextual Primary CTA (black + white arrow; hover → gray + black) */
.academy-two-image-cards .row .columns a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  width: fit-content;
  min-height: var(--btn-height);
  margin-top: 32px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background-color: var(--btn-contextual-bg) !important;
  border: 1px solid var(--btn-contextual-bg) !important;
  border-radius: var(--btn-radius) !important;
  color: var(--btn-contextual-text) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
}

.academy-two-image-cards .row .columns a:hover,
.academy-two-image-cards .row .columns a:focus {
  background-color: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text) !important;
  text-decoration: none !important;
}

.academy-two-image-cards .row .columns a:active {
  background-color: var(--btn-active-bg) !important;
  border-color: var(--btn-active-bg) !important;
  color: var(--btn-active-text) !important;
}

.academy-two-image-cards .row .columns a::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M9.93992 2.66699L8.99325 3.60699L12.5866 7.20033H1.33325V8.53366H12.5533L8.99325 12.0937L9.93992 13.0403L14.6533 8.32699V7.38033L9.93992 2.66699Z' fill='%23FFFFFF'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.academy-two-image-cards .row .columns a:hover::after,
.academy-two-image-cards .row .columns a:focus::after,
.academy-two-image-cards .row .columns a:active::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M9.93992 2.66699L8.99325 3.60699L12.5866 7.20033H1.33325V8.53366H12.5533L8.99325 12.0937L9.93992 13.0403L14.6533 8.32699V7.38033L9.93992 2.66699Z' fill='%231C1917'/></svg>");
}

/* Icon Cards — Figma Icon-Cards (4114:5760)
     TI splits one Figma section into two widgets:
     .academy-icon-cards-top  (headline + first 3 cards)
     .academy-icon-cards-bottom (second 3 cards)
     Treat as ONE section: 96 pad only on the outer edges; 24px between rows. */

.academy-icon-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.academy-icon-cards h3,
.academy-icon-cards .widget__title {
  text-align: center;
  color: var(--color-black);
}

.academy-icon-cards p.muted,
.academy-icon-cards .widget__subtitle {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-black);
  padding: 0 1rem;
}

.academy-icon-cards .row {
  max-width: 1125px;
  width: 100%;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 24px;
  margin: 0 auto;
  padding: 0 !important;
}

/* Foundation clearfix pseudos become flex items and break the 3-up grid */
.academy-icon-cards .row:before,
.academy-icon-cards .row:after {
  content: none !important;
  display: none !important;
}

/* Kill Foundation .medium-4 / float column math so we get a true 3-up grid */
.academy-icon-cards .row .columns,
.academy-icon-cards .row .column,
.academy-icon-cards .row .medium-4,
.academy-icon-cards .row .small-12,
.academy-icon-cards .row [class*='medium-'] {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: relative !important;
  float: none !important;
  clear: none !important;
  left: auto !important;
  right: auto !important;
  flex: 0 0 calc((100% - 48px) / 3) !important; /* 3 cards + 2×24px gaps */
  width: calc((100% - 48px) / 3) !important;
  max-width: calc((100% - 48px) / 3) !important;
  height: auto !important;
  min-height: 0;
  margin: 0 !important;
  /* Extra bottom pad so absolute link (32 inset + ~24 line) doesn't overlap copy */
  padding: 32px 32px 72px 32px !important;
  background-color: var(--color-gray-100);
  box-shadow: none;
  border-radius: 0;
  box-sizing: border-box !important;
  text-align: left !important;
}

@media (max-width: 767px) {
  .academy-icon-cards .row {
    flex-direction: column;
    gap: 16px;
  }

  .academy-icon-cards .row .columns,
  .academy-icon-cards .row .column,
  .academy-icon-cards .row .medium-4,
  .academy-icon-cards .row .small-12,
  .academy-icon-cards .row [class*='medium-'] {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .academy-icon-cards.academy-icon-cards-bottom,
  .learn.dashboard .widget.academy-icon-cards.academy-icon-cards-bottom,
  .layout__content .widget.academy-icon-cards.academy-icon-cards-bottom {
    padding-top: 16px !important; /* match mobile card gap */
  }
}

.academy-icon-cards .row .columns img {
  position: static;
  display: block;
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  margin: 0 0 24px;
  object-fit: contain;
}

.academy-icon-cards .row .columns h4 {
  margin: 0 0 16px;
  padding: 0;
  color: var(--color-black);
}

.academy-icon-cards .row .columns p:not(:first-of-type) {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  color: var(--color-black);
}

/* Collapse wrappers that TI sometimes puts around the CTA so they don't steal layout */
.academy-icon-cards .row .columns > p:has(> a),
.academy-icon-cards .row .columns > div:has(> a),
.academy-icon-cards .row .column > p:has(> a),
.academy-icon-cards .row .column > div:has(> a) {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  text-align: left !important;
  float: none !important;
}

/* Tertiary text link — hard-pinned bottom-left (Figma: 32px from card edges) */
.academy-icon-cards .row .columns a,
.academy-icon-cards .row .column a,
.academy-icon-cards .row .columns p a,
.academy-icon-cards .row .column p a {
  position: absolute !important;
  left: 32px !important;
  right: auto !important;
  bottom: 32px !important;
  top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  max-width: calc(100% - 64px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--color-black) !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: pointer;
  z-index: 1;
}

.academy-icon-cards .row .columns a:hover,
.academy-icon-cards .row .columns a:focus,
.academy-icon-cards .row .column a:hover,
.academy-icon-cards .row .column a:focus,
.academy-icon-cards .row .columns p a:hover,
.academy-icon-cards .row .columns p a:focus {
  background: none !important;
  color: var(--color-black) !important;
  text-decoration: underline !important;
  width: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  left: 32px !important;
  right: auto !important;
  bottom: 32px !important;
}

.academy-icon-cards .row .columns a::after,
.academy-icon-cards .row .column a::after,
.academy-icon-cards .row .columns p a::after {
  content: '' !important;
  display: inline-block !important;
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M9.93992 2.66699L8.99325 3.60699L12.5866 7.20033H1.33325V8.53366H12.5533L8.99325 12.0937L9.93992 13.0403L14.6533 8.32699V7.38033L9.93992 2.66699Z' fill='%231C1917'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.academy-icon-cards .row .columns a:hover::after,
.academy-icon-cards .row .column a:hover::after {
  margin-left: 0 !important;
}

/* Split-widget section rhythm (overrides shared 96/96 on .academy-icon-cards) */
.academy-icon-cards.academy-icon-cards-top,
.learn.dashboard .widget.academy-icon-cards.academy-icon-cards-top,
.learn.dashboard .widget.widget--html.academy-icon-cards.academy-icon-cards-top,
.layout__content .widget.academy-icon-cards.academy-icon-cards-top {
  padding-top: var(--section-pad-y);
  padding-bottom: 0 !important;
}

.academy-icon-cards.academy-icon-cards-bottom,
.learn.dashboard .widget.academy-icon-cards.academy-icon-cards-bottom,
.learn.dashboard
  .widget.widget--html.academy-icon-cards.academy-icon-cards-bottom,
.layout__content .widget.academy-icon-cards.academy-icon-cards-bottom {
  padding-top: 24px !important; /* Figma card-grid gap between rows */
  padding-bottom: var(--section-pad-y) !important;
}

/* Bottom half is cards-only — hide any accidental headline */
.academy-icon-cards-bottom > h3,
.academy-icon-cards-bottom > .widget__title,
.academy-icon-cards-bottom > p.muted,
.academy-icon-cards-bottom > .widget__subtitle {
  display: none;
}

/* Two Column */
/* Two Column / Text + Media — Figma 4003:1071
     1125 content, text 426 + image 660, gap 40
     CTA → Contextual Primary (black + white arrow)
     Background: leave unset — apply via utility classes */

.academy-two-column {
  width: 100%;
  max-width: none;
  margin: 0;
  /* bg via utility classes (e.g. bg-gray-100) — no default fill */
}

.academy-two-column .row {
  max-width: 1125px;
  width: 100%;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin: 0 auto;
  padding: 0 !important;
}

.academy-two-column .row:before,
.academy-two-column .row:after {
  content: none !important;
  display: none !important;
}

.academy-two-column .row .columns,
.academy-two-column .row .column,
.academy-two-column .row [class*='medium-'],
.academy-two-column .row .small-12 {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  float: none !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Text column ~426; media column ~660 (Figma) */
.academy-two-column .row .columns:not(:has(img)),
.academy-two-column .row .column:not(:has(img)),
.academy-two-column .row [class*='medium-']:not(:has(img)) {
  flex: 1 1 426px !important;
  width: auto !important;
  max-width: 426px !important;
}

.academy-two-column .row .columns:has(img),
.academy-two-column .row .column:has(img),
.academy-two-column .row [class*='medium-']:has(img) {
  flex: 1 1 660px !important;
  width: auto !important;
  max-width: 660px !important;
}

.academy-two-column .row .columns img {
  width: 100%;
  height: 336px;
  border-radius: 4px;
  object-fit: cover;
  margin: 0;
  display: block;
}

.academy-two-column .row .columns h2 {
  margin: 0 0 16px;
  padding: 0;
  text-align: left;
  color: var(--color-black);
}

.academy-two-column .row .columns p {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  text-align: left;
  color: #333;
}

/* Contextual Primary CTA */
.academy-two-column .row .columns a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--btn-gap);
  width: fit-content;
  min-height: var(--btn-height);
  margin-top: 40px;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  background-color: var(--btn-contextual-bg) !important;
  border: 1px solid var(--btn-contextual-bg) !important;
  border-radius: var(--btn-radius) !important;
  color: var(--btn-contextual-text) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
}

.academy-two-column .row .columns a:hover,
.academy-two-column .row .columns a:focus {
  background-color: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text) !important;
  text-decoration: none !important;
}

.academy-two-column .row .columns a:active {
  background-color: var(--btn-active-bg) !important;
  border-color: var(--btn-active-bg) !important;
  color: var(--btn-active-text) !important;
}

.academy-two-column .row .columns a::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M9.93992 2.66699L8.99325 3.60699L12.5866 7.20033H1.33325V8.53366H12.5533L8.99325 12.0937L9.93992 13.0403L14.6533 8.32699V7.38033L9.93992 2.66699Z' fill='%23FFFFFF'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.academy-two-column .row .columns a:hover::after,
.academy-two-column .row .columns a:focus::after,
.academy-two-column .row .columns a:active::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M9.93992 2.66699L8.99325 3.60699L12.5866 7.20033H1.33325V8.53366H12.5533L8.99325 12.0937L9.93992 13.0403L14.6533 8.32699V7.38033L9.93992 2.66699Z' fill='%231C1917'/></svg>");
}

@media (max-width: 767px) {
  .academy-two-column .row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px; /* tighter text ↔ media spacing on mobile */
  }

  /* Ember/Foundation nodes between columns must not create empty flex gaps */
  .academy-two-column
    .row
    > :not(.columns):not(.column):not([class*='medium-']):not(.small-12) {
    display: none !important;
  }

  /* Match academy-two-image-cards mobile side inset (1rem) around image + text */
  .academy-two-column .row .columns,
  .academy-two-column .row .column,
  .academy-two-column .row [class*='medium-'],
  .academy-two-column .row .small-12 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .academy-two-column
    .row
    .columns:not(:has(img)):not(:has(picture)):not(:has(video)),
  .academy-two-column
    .row
    .column:not(:has(img)):not(:has(picture)):not(:has(video)),
  .academy-two-column
    .row
    [class*='medium-']:not(:has(img)):not(:has(picture)):not(:has(video)) {
    order: 2; /* text second */
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  /* :has(img) — always stack media above text, even if media is 2nd in DOM */
  .academy-two-column .row .columns:has(img),
  .academy-two-column .row .columns:has(picture),
  .academy-two-column .row .columns:has(video),
  .academy-two-column .row .column:has(img),
  .academy-two-column .row .column:has(picture),
  .academy-two-column .row .column:has(video),
  .academy-two-column .row [class*='medium-']:has(img),
  .academy-two-column .row [class*='medium-']:has(picture),
  .academy-two-column .row [class*='medium-']:has(video) {
    order: 1; /* media first */
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  .academy-two-column .row .columns img,
  .academy-two-column .row .column img {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 1.75rem !important;
    margin-bottom: 24px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.academy-two-column--border {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

/* -------------------------------------------------------------------------
     Four Image Cards — Figma Prefooter-Cards (4114:5856)
     Container: 1360 max content width, 40px side gutters (full-bleed bg).
     DEFAULT = icon layout (48px icons, top border, tertiary link).
     IMAGE MODE = add class `image-layout` for the legacy 16:9 photo cards
     (typically on dark/media backgrounds with text-* utilities).
     ------------------------------------------------------------------------- */

.academy-four-image-cards,
.learn.dashboard .widget.academy-four-image-cards,
.learn.dashboard .widget.widget--html.academy-four-image-cards,
.layout__content .widget.academy-four-image-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box;
}

.academy-four-image-cards .ember-view {
  max-width: 1360px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* —— DEFAULT: icon layout —— */
.academy-four-image-cards h3,
.academy-four-image-cards .widget__title {
  text-align: center;
  color: var(--color-black) !important;
  margin-bottom: var(--section-title-gap) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.academy-four-image-cards .widget__subtitle,
.academy-four-image-cards p.muted {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: var(--color-black) !important;
  margin-bottom: var(--section-stack-gap) !important;
}

.academy-four-image-cards:not(:has(.widget__subtitle, p.muted)) h3,
.academy-four-image-cards:not(:has(.widget__subtitle, p.muted)) .widget__title {
  margin-bottom: var(--section-stack-gap) !important;
}

.academy-four-image-cards .row {
  max-width: 1360px;
  width: 100%;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 40px; /* Figma: 4×310 cards in 1360 → 40 between */
  margin: 0 auto;
  padding: 0 !important;
}

.academy-four-image-cards .row:before,
.academy-four-image-cards .row:after {
  content: none !important;
  display: none !important;
}

.academy-four-image-cards .row .columns,
.academy-four-image-cards .row .column,
.academy-four-image-cards .row [class*='medium-'],
.academy-four-image-cards .row .small-12 {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: relative !important;
  float: none !important;
  clear: none !important;
  flex: 0 0 calc((100% - 120px) / 4) !important; /* 4 cards + 3×40 gaps = 310 @ 1360 */
  width: calc((100% - 120px) / 4) !important;
  max-width: calc((100% - 120px) / 4) !important;
  min-height: 0;
  margin: 0 !important;
  padding: 32px 0 0 0 !important;
  border-top: 1px solid var(--color-black);
  background: none;
  box-shadow: none;
  border-radius: 0;
  box-sizing: border-box !important;
  text-align: left !important;
}

.academy-four-image-cards .row .columns img {
  position: static !important;
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

.academy-four-image-cards .row .columns h4,
.academy-four-image-cards .row .columns h5,
.academy-four-image-cards .row .columns h6 {
  margin: 0 0 8px !important;
  padding: 0;
  color: var(--color-black) !important;
  text-align: left !important;
}

.academy-four-image-cards .row .columns p {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin: 0 0 32px !important;
  padding: 0;
  color: var(--color-black) !important;
  text-align: left !important;
}

.academy-four-image-cards .row .columns a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--color-black) !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
}

.academy-four-image-cards .row .columns a:hover,
.academy-four-image-cards .row .columns a:focus {
  color: var(--color-black) !important;
  text-decoration: underline !important;
}

.academy-four-image-cards .row .columns a::after {
  content: '' !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  display: inline-block !important;
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M9.93992 2.66699L8.99325 3.60699L12.5866 7.20033H1.33325V8.53366H12.5533L8.99325 12.0937L9.93992 13.0403L14.6533 8.32699V7.38033L9.93992 2.66699Z' fill='%231C1917'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

@media (max-width: 767px) {
  .academy-four-image-cards .row {
    flex-direction: column;
    gap: 16px;
  }

  .academy-four-image-cards .row .columns,
  .academy-four-image-cards .row .column,
  .academy-four-image-cards .row [class*='medium-'],
  .academy-four-image-cards .row .small-12 {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* —— IMAGE MODE: add class `image-layout` for legacy 16:9 photo cards —— */
.academy-four-image-cards.image-layout h3,
.academy-four-image-cards.image-layout .widget__title {
  color: var(--color-white) !important;
  margin-bottom: var(--section-stack-gap) !important;
}

.academy-four-image-cards.image-layout .widget__subtitle,
.academy-four-image-cards.image-layout p.muted {
  color: var(--color-white) !important;
}

.academy-four-image-cards.image-layout .row {
  gap: 0;
}

.academy-four-image-cards.image-layout .row .columns,
.academy-four-image-cards.image-layout .row .column,
.academy-four-image-cards.image-layout .row [class*='medium-'],
.academy-four-image-cards.image-layout .row .small-12 {
  flex: 0 0 25% !important;
  width: 25% !important;
  max-width: 25% !important;
  padding: 0 0.75rem !important;
  border-top: none !important;
}

.academy-four-image-cards.image-layout .row .columns:first-child {
  padding-left: 0 !important;
}

.academy-four-image-cards.image-layout .row .columns:last-child {
  padding-right: 0 !important;
}

.academy-four-image-cards.image-layout .row .columns img {
  width: 100% !important;
  height: 136px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 0 1.75rem !important;
  border-radius: 4px !important;
  object-fit: cover !important;
}

.academy-four-image-cards.image-layout .row .columns h4,
.academy-four-image-cards.image-layout .row .columns h5,
.academy-four-image-cards.image-layout .row .columns h6,
.academy-four-image-cards.image-layout .row .columns p,
.academy-four-image-cards.image-layout .row .columns a {
  color: var(--color-white) !important;
}

.academy-four-image-cards.image-layout .row .columns a {
  position: relative !important;
  display: inline-flex !important;
  font-weight: 600 !important;
}

.academy-four-image-cards.image-layout .row .columns a::after {
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M9.93992 2.66699L8.99325 3.60699L12.5866 7.20033H1.33325V8.53366H12.5533L8.99325 12.0937L9.93992 13.0403L14.6533 8.32699V7.38033L9.93992 2.66699Z' fill='%23FFFFFF'/></svg>") !important;
}

@media (max-width: 767px) {
  .academy-four-image-cards.image-layout .row .columns:first-child {
    padding-left: 1rem !important;
  }

  .academy-four-image-cards.image-layout .row .columns img {
    margin-top: 1.75rem !important;
    margin-bottom: 0 !important;
  }
}

/* text-* / blue-link utilities (work in either mode) */
.academy-four-image-cards.text-ash .row .columns p,
.academy-four-image-cards.text-ash .row .columns a,
.academy-four-image-cards.text-ash .row .columns h1,
.academy-four-image-cards.text-ash .row .columns h2,
.academy-four-image-cards.text-ash .row .columns h3,
.academy-four-image-cards.text-ash .row .columns h4,
.academy-four-image-cards.text-ash .row .columns h5,
.academy-four-image-cards.text-ash .row .columns h6,
.academy-four-image-cards.text-ash h3 {
  color: var(--color-ash) !important;
}

.academy-four-image-cards.text-blue .row .columns p,
.academy-four-image-cards.text-blue .row .columns a,
.academy-four-image-cards.text-blue .row .columns h1,
.academy-four-image-cards.text-blue .row .columns h2,
.academy-four-image-cards.text-blue .row .columns h3,
.academy-four-image-cards.text-blue .row .columns h4,
.academy-four-image-cards.text-blue .row .columns h5,
.academy-four-image-cards.text-blue .row .columns h6,
.academy-four-image-cards.text-blue h3 {
  color: var(--color-blue) !important;
}

.academy-four-image-cards.text-variant-blue .row .columns p,
.academy-four-image-cards.text-variant-blue .row .columns a,
.academy-four-image-cards.text-variant-blue .row .columns h1,
.academy-four-image-cards.text-variant-blue .row .columns h2,
.academy-four-image-cards.text-variant-blue .row .columns h3,
.academy-four-image-cards.text-variant-blue .row .columns h4,
.academy-four-image-cards.text-variant-blue .row .columns h5,
.academy-four-image-cards.text-variant-blue .row .columns h6,
.academy-four-image-cards.text-variant-blue h3 {
  color: var(--color-variant-blue) !important;
}

.academy-four-image-cards.text-snow .row .columns p,
.academy-four-image-cards.text-snow .row .columns a,
.academy-four-image-cards.text-snow .row .columns h1,
.academy-four-image-cards.text-snow .row .columns h2,
.academy-four-image-cards.text-snow .row .columns h3,
.academy-four-image-cards.text-snow .row .columns h4,
.academy-four-image-cards.text-snow .row .columns h5,
.academy-four-image-cards.text-snow .row .columns h6,
.academy-four-image-cards.text-snow h3 {
  color: var(--color-snow) !important;
}

.academy-four-image-cards.text-charcoal .row .columns p,
.academy-four-image-cards.text-charcoal .row .columns a,
.academy-four-image-cards.text-charcoal .row .columns h1,
.academy-four-image-cards.text-charcoal .row .columns h2,
.academy-four-image-cards.text-charcoal .row .columns h3,
.academy-four-image-cards.text-charcoal .row .columns h4,
.academy-four-image-cards.text-charcoal .row .columns h5,
.academy-four-image-cards.text-charcoal .row .columns h6,
.academy-four-image-cards.text-charcoal h3 {
  color: var(--color-charcoal) !important;
}

.academy-four-image-cards.text-navy .row .columns p,
.academy-four-image-cards.text-navy .row .columns a,
.academy-four-image-cards.text-navy .row .columns h1,
.academy-four-image-cards.text-navy .row .columns h2,
.academy-four-image-cards.text-navy .row .columns h3,
.academy-four-image-cards.text-navy .row .columns h4,
.academy-four-image-cards.text-navy .row .columns h5,
.academy-four-image-cards.text-navy .row .columns h6,
.academy-four-image-cards.text-navy h3 {
  color: var(--color-navy) !important;
}

.academy-four-image-cards.text-black .row .columns p,
.academy-four-image-cards.text-black .row .columns a,
.academy-four-image-cards.text-black .row .columns h1,
.academy-four-image-cards.text-black .row .columns h2,
.academy-four-image-cards.text-black .row .columns h3,
.academy-four-image-cards.text-black .row .columns h4,
.academy-four-image-cards.text-black .row .columns h5,
.academy-four-image-cards.text-black .row .columns h6,
.academy-four-image-cards.text-black h3 {
  color: var(--color-black) !important;
}

.academy-four-image-cards.text-white .row .columns p,
.academy-four-image-cards.text-white .row .columns a,
.academy-four-image-cards.text-white .row .columns h1,
.academy-four-image-cards.text-white .row .columns h2,
.academy-four-image-cards.text-white .row .columns h3,
.academy-four-image-cards.text-white .row .columns h4,
.academy-four-image-cards.text-white .row .columns h5,
.academy-four-image-cards.text-white .row .columns h6,
.academy-four-image-cards.text-white h3 {
  color: var(--color-white) !important;
}

.academy-four-image-cards.blue-link .row .columns a {
  color: var(--color-blue) !important;
}

/**** Academy V2 Catalog Page ****/

.academy-catalog {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-black);
}

.academy-catalog .catalog-header {
  display: none;
}

/* Search — Figma 4114:6265 */
.academy-catalog .catalog-search-bar {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-pad-y) 0;
}

.academy-catalog .catalog-search-bar::before {
  content: none;
  display: none;
}

.academy-catalog .catalog-search-bar .catalog-filters {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 56px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 4px !important;
  background: var(--color-gray-50) !important;
  box-shadow: none !important;
}

.academy-catalog .catalog-search-bar .catalog-filters:hover {
  border: 0 !important;
}

.academy-catalog .catalog-filters__search {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent !important;
  padding: 0 !important;
}

/* Active filter chips — left-align + vertically center in the bar.
   Do not restyle the chip itself; only undo the search-button absolute
   positioning that was leaking onto these <button>s. */
.academy-catalog .catalog-filters__selections {
  display: flex !important;
  align-items: center;
  align-self: stretch;
  flex: 1 1 240px;
  min-width: 0;
  width: auto !important;
  float: none !important;
  padding: 0 12px !important;
  border-left: 1px solid rgba(14, 37, 60, 0.25);
  background: transparent !important;
}

.academy-catalog .catalog-filters__selections .row,
.academy-catalog .catalog-filters__selections .columns,
.academy-catalog .catalog-active-filters {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  align-self: stretch;
  gap: 8px;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Foundation clearfix pseudos become flex items and throw off centering */
.academy-catalog .catalog-filters__selections .row:before,
.academy-catalog .catalog-filters__selections .row:after {
  content: none !important;
  display: none !important;
}

.academy-catalog .catalog-active-filter {
  display: inline-flex;
  align-items: center;
}

.academy-catalog .catalog-active-filter__remove,
.academy-catalog .catalog-active-filter .btn,
.academy-catalog .catalog-active-filter button {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  white-space: nowrap;
  line-height: 1.2 !important;
}

/* When chips are present, keep search from eating the whole bar */
.academy-catalog
  .catalog-filters:has(.catalog-filters__selections)
  .catalog-filters__search {
  flex: 0 1 280px;
  border-right: 0;
}

.academy-catalog .catalog-filters__sort {
  position: relative;
  flex: 0 0 159px;
  width: 159px;
  border-left: 1px solid rgba(14, 37, 60, 0.25);
  background: transparent !important;
  padding: 0 !important;
}

.academy-catalog .catalog-search,
.academy-catalog .catalog-filters__search form {
  position: relative;
  width: 100%;
  height: 56px;
}

.academy-catalog .catalog-filters input[type='search'],
.academy-catalog .catalog-filters input[type='text'],
.academy-catalog .catalog-filters__select {
  width: 100%;
  min-height: 56px;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-gray-600) !important;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.academy-catalog .catalog-filters input[type='search'],
.academy-catalog .catalog-filters input[type='text'] {
  padding: 16px 56px 16px 24px !important;
}

.academy-catalog .catalog-filters__select {
  appearance: none;
  padding: 16px 48px 16px 16px !important;
  cursor: pointer;
}

/* Scope to the search icon button only — active-filter chips are also <button>s */
.academy-catalog .catalog-search__button {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--color-black) !important;
}

.academy-catalog .catalog-filters__sort::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--color-black);
  border-bottom: 1.5px solid var(--color-black);
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

/* Listing + filters — Figma 4116:6695 */
.academy-catalog .catalog-search-bar ~ .row,
.academy-catalog .catalog-content,
.academy-catalog .catalog-results-container {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 24px 0 var(--section-pad-y);
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.academy-catalog .catalog-search-bar ~ .row > .medium-3,
.academy-catalog .catalog-content > .medium-3,
.academy-catalog .catalog-sidebar,
.academy-catalog .catalog-aggregations {
  flex: 0 0 240px;
  width: 240px;
  margin-left: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
}

.academy-catalog .catalog-search-bar ~ .row > .medium-9,
.academy-catalog .catalog-content > .medium-9,
.academy-catalog .catalog-results {
  flex: 1 1 893px;
  width: auto;
  min-width: 0;
  padding: 0;
}

.academy-catalog .catalog-aggregation {
  width: 100%;
  margin: 0 0 24px;
  padding: 0 !important;
  border: 0;
}

.academy-catalog .catalog-aggregation__header,
.academy-catalog .btn.catalog-aggregation__header,
.academy-catalog .btn.btn--link.catalog-aggregation__header {
  display: flex;
  align-items: center;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  background: transparent !important;
  text-align: left;
}

.academy-catalog .catalog-aggregation__header > .row {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: start;
  gap: 16px;
  width: 100%;
  margin: 0;
}

.academy-catalog .catalog-aggregation__header > .row > .small-1 {
  float: none !important;
  flex: 0 0 12px;
  width: 12px !important;
  max-width: 12px;
  padding: 0 !important;
}

.academy-catalog .catalog-aggregation__header > .row > .small-11 {
  float: none !important;
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
  padding-left: 0 !important;
}

.academy-catalog .catalog-aggregation__header--label {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.academy-catalog .catalog-aggregation__expander {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 24px;
}

/* Dropdown values — indent under category label */
.academy-catalog .catalog-aggregation > .unlist,
.academy-catalog ul[class*='catalog-aggregation-dropdown'],
.academy-catalog ul[id*='catalog-aggregation-dropdown'] {
  width: auto;
  max-width: 100%;
  margin: 0 0 0 45px !important;
  padding: 0 !important;
  list-style: none !important;
  box-sizing: border-box;
}

.academy-catalog .catalog-aggregation > .unlist > li,
.academy-catalog ul[class*='catalog-aggregation-dropdown'] > li,
.academy-catalog ul[id*='catalog-aggregation-dropdown'] > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.academy-catalog .catalog-aggregation__value,
.academy-catalog .catalog-aggregation__item,
.academy-catalog .catalog-aggregation label {
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.academy-catalog .catalog-aggregation__value,
.academy-catalog .catalog-aggregation__item {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  border: 0 !important;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.academy-catalog [class*='block-grid-'] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  column-gap: 40px;
  row-gap: 40px;
  align-items: stretch;
  width: 100%;
  margin: 0 !important;
}

/* Foundation clearfix pseudos become grid items and steal the first cell */
.academy-catalog [class*='block-grid-']::before,
.academy-catalog [class*='block-grid-']::after {
  content: none !important;
  display: none !important;
}

/* Ember metamorph scripts / non-li nodes must not occupy grid tracks */
.academy-catalog [class*='block-grid-'] > :not(li) {
  display: none !important;
}

.academy-catalog [class*='block-grid-'] > li {
  float: none !important;
  width: auto !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0 !important;
  padding: 0 !important;
}

.academy-catalog .catalog-item {
  width: 100%;
  max-width: none;
  height: 100% !important;
  min-height: 0 !important;
  overflow: visible;
  border: 0;
  border-radius: 0 !important;
  background: var(--color-white);
  box-shadow: none !important;
}

.academy-catalog .column.medium-12 {
  padding: 0 !important;
}

.academy-catalog .catalog-item {
  position: relative;
  display: flex;
}

.academy-catalog .catalog-grid-item,
.academy-catalog .catalog-grid-item > .row {
  flex-direction: column;
  align-items: start;
  gap: 24px;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Card is a 1-cell grid so the Ember-wrapped ribbon can share the
     media cell. Real DOM: .catalog-grid-item > .ember-view > .catalog__ribbon */
.academy-catalog .catalog-grid-item {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--color-gray-300);
  border-radius: 4px;
  background: var(--color-white);
  box-shadow: none;
}

.academy-catalog .catalog-grid-item > .row {
  display: flex;
  grid-area: 1 / 1;
  min-width: 0;
}

.academy-catalog .catalog-item .row::before,
.academy-catalog .catalog-item .row::after {
  display: none;
}

.academy-catalog .catalog-grid-item > .row > .column {
  float: none;
  width: 100%;
  padding: 0 !important;
}

.academy-catalog .catalog-grid-item > .row > .column:last-child {
  display: flex;
  flex: 1;
}

.academy-catalog .catalog-grid-item__asset-container {
  position: relative !important;
  width: 100%;
  height: auto;
  aspect-ratio: 280 / 142;
  overflow: hidden;
  border-radius: 0 !important;
  background: var(--color-gray-100);
}

.academy-catalog .catalog-grid-item > script {
  display: none !important;
}

/* Ember wrapper around .catalog__ribbon — stack on top-right of media */
.academy-catalog .catalog-grid-item > .ember-view:has(.catalog__ribbon),
.academy-catalog .catalog-grid-item > *:has(> .catalog__ribbon) {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: start;
  z-index: 3;
  width: max-content;
  max-width: calc(100% - 16px);
  margin: -10px -12px 0 0;
}

/* Kill TI absolute + top:-3px / right:-8px that park the label above the card */
.academy-catalog .catalog__ribbon,
.academy-catalog .catalog__ribbon--attached,
.academy-catalog .catalog-grid-item .catalog__ribbon,
.academy-catalog .catalog-grid-item .catalog__ribbon--attached {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  float: none !important;
  margin: 0 !important;
  max-width: 100%;
}

.academy-catalog .catalog-grid-item__asset {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
  object-fit: cover;
}

.academy-catalog .catalog-grid-item__asset-container > .ember-view,
.academy-catalog .catalog-grid-item__asset-container > .ember-view > img,
.academy-catalog .catalog-grid-item__asset-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.academy-catalog .catalog-grid-item__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start !important;
  flex: 1;
  width: 100%;
  height: auto !important;
  min-height: 0;
  padding: 10px !important;
}

.academy-catalog .catalog-grid-item__title {
  order: 1;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 8px;
  padding: 0;
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: var(--type-h5-size);
  font-style: normal;
  font-weight: 700;
  line-height: var(--type-h5-lh);
  letter-spacing: 0;
}

.academy-catalog .catalog-grid-item__description {
  order: 2;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
}

.academy-catalog .catalog-grid-item__stars,
.academy-catalog .catalog-grid-item__hr {
  display: none !important;
}

.academy-catalog .catalog-grid-item__description::after {
  content: '' !important;
  display: none !important;
}

.academy-catalog .catalog-grid-item__cta-container {
  position: static !important;
  inset: auto !important;
  order: 3;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin-top: auto;
  padding-top: 32px;
}

.academy-catalog .catalog-grid-item__cta-container .btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--color-black) !important;
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}

.academy-catalog .catalog-grid-item__cta-container .btn--primary::after {
  content: '';
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-left: 0;
}

.academy-catalog .pagination {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  width: 100%;
  margin-top: 72px;
  color: var(--color-black);
}

.academy-catalog .pagination__left {
  position: static;
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.academy-catalog .pagination a,
.academy-catalog .pagination button,
.academy-catalog .pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  margin: 0 2px;
  padding: 0;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: 4px !important;
  background: var(--color-white);
  color: var(--color-black);
  font-family: 'FK Grotesk Mono', ui-monospace, monospace !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}

.academy-catalog .pagination .current,
.academy-catalog .pagination .active a,
.academy-catalog .pagination [aria-current='page'] {
  border-color: var(--color-yellow) !important;
  background: var(--color-yellow);
}

@media (min-width: 768px) and (max-width: 1199px) {
  .academy-catalog {
    width: calc(100% - 80px);
  }

  .academy-catalog [class*='block-grid-'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .academy-catalog {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 16px;
    padding-left: 16px;
    box-sizing: border-box;
  }

  .academy-catalog .catalog-search-bar {
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--section-pad-y) 0;
  }

  .academy-catalog .catalog-search-bar .catalog-filters {
    flex-direction: column;
    align-items: stretch;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible;
    background: transparent !important;
  }

  .academy-catalog .catalog-filters__search,
  .academy-catalog .catalog-filters__selections,
  .academy-catalog .catalog-filters__sort {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    border: 0;
    border-left: 0 !important;
    border-radius: 4px;
    background: var(--color-gray-50) !important;
  }

  .academy-catalog .catalog-filters__selections {
    min-height: 56px;
    margin-top: 8px;
    padding: 8px 12px !important;
  }

  .academy-catalog .catalog-filters__sort {
    margin-top: 8px;
  }

  .academy-catalog
    .catalog-filters:has(.catalog-filters__selections)
    .catalog-filters__search {
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  .academy-catalog .catalog-search-bar ~ .row,
  .academy-catalog .catalog-content,
  .academy-catalog .catalog-results-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0;
  }

  /* Kill desktop 240px sidebar width — was leaving a huge right gap on mobile */
  .academy-catalog .catalog-search-bar ~ .row > .medium-3,
  .academy-catalog .catalog-content > .medium-3,
  .academy-catalog .catalog-sidebar,
  .academy-catalog .catalog-aggregations,
  .academy-catalog .catalog-search-bar ~ .row > .medium-9,
  .academy-catalog .catalog-content > .medium-9,
  .academy-catalog .catalog-results,
  .academy-catalog .catalog-aggregation {
    flex: 1 1 auto !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .academy-catalog .catalog-sidebar,
  .academy-catalog .catalog-aggregations {
    margin-bottom: 0;
  }

  .academy-catalog [class*='block-grid-'] {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .academy-catalog .catalog-item {
    max-width: none;
  }

  .academy-catalog .catalog-grid-item__asset-container {
    height: auto;
    aspect-ratio: 280 / 142;
  }

  .academy-catalog .pagination {
    align-items: center;
    justify-content: center !important;
    flex-direction: column;
    gap: 24px;
    margin-top: 56px;
    text-align: center;
  }

  .academy-catalog .pagination__left {
    position: static;
    width: 100%;
    text-align: center;
  }

  .academy-catalog .pagination ul,
  .academy-catalog .pagination__right,
  .academy-catalog .pagination > *:not(.pagination__left) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center;
  }
}

/**** Academy V2 Catalog Details — Figma Course Detail 4525:2759 ****/
.course__detail__container {
  max-width: 1180px;
}

.course__detail__header {
  margin: 0 !important;
  padding: 0 0 20px !important;
}

.course__detail__header .h2 {
  margin: 0 0 10px;
  padding: 0;
  color: var(--color-black);
}

.course__detail__header p {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-black);
}

/* Image lives in Foundation .row (negative margins) — pull header/tabs to same edge */
.course__detail__container .course__detail__content > .row,
.course__detail__container .course__detail__content .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.course__detail__container .course__detail__content .columns,
.course__detail__container .course__detail__content .column,
.course__detail__container .course__detail__content .column.small-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.course__detail__container .course__detail__asset,
.course__detail__container .course__detail__asset .picturefill,
.course__detail__container .course__detail__asset picture,
.course__detail__container .course__detail__asset img {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.course__detail__container .tabs {
  border: none;
  margin: 0;
}

.course__detail__container .tab-title {
  float: none;
  display: block;
  width: 100%;
  margin: 0;
}

.course__detail__container .tab-title a,
.course__detail__container .tab-title.active a {
  display: block;
  background-color: transparent;
  border: none;
  padding: 40px 0 10px;
  max-width: none;
  color: var(--color-black);
}

.course__detail__container .tabs-content,
.course__detail__container .tabs-content--free-text,
.course__detail__container .tabs-content .content,
.course__detail__container .tabs-content .content.active {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Kill TI indent-list / nested editor padding so body lines up with title */
.course__detail__container .course__detail__content .editor-content,
.course__detail__container .course__detail__content .editor-content.indent-list,
.course__detail__container .course__detail__content .editor-content .editor-content,
.course__detail__container .course__detail__content .editor-content .indent-list {
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-indent: 0 !important;
}

.course__detail__container .editor-content,
.course__detail__container .editor-content p,
.course__detail__container .editor-content li {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-black);
}

/* In-body section headings (Figma H5) when authored in course free text */
.course__detail__container .editor-content h2,
.course__detail__container .editor-content h3,
.course__detail__container .editor-content h4,
.course__detail__container .editor-content .h2,
.course__detail__container .editor-content .h3,
.course__detail__container .editor-content .h4 {
  margin: 30px 0 10px;
  font-family: var(--font-sans);
  font-size: var(--type-h5-size, 24px) !important;
  font-weight: 700 !important;
  line-height: var(--type-h5-lh, 1.33) !important;
  letter-spacing: 0 !important;
  color: var(--color-black);
}

.course__detail__container .editor-content h2:first-child,
.course__detail__container .editor-content h3:first-child,
.course__detail__container .editor-content h4:first-child {
  margin-top: 0;
}

.course__detail__container .editor-content p {
  margin: 0 0 16px;
  padding-bottom: 0;
}

.course__detail__container .editor-content p:last-child {
  margin-bottom: 0;
}

.course__detail__container .editor-content strong {
  font-weight: 700;
}

.course__detail__container .course__detail__content .editor-content ul {
  margin: 0 0 30px !important;
  padding: 0 0 0 1.25em !important;
  list-style: disc outside !important;
}

.course__detail__container .course__detail__content .editor-content ul li {
  margin: 0 0 4px !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

.course__detail__container .course__detail__content .editor-content ul li:last-child {
  margin-bottom: 0 !important;
}

.course__detail__container .btn.btn--primary {
  min-height: 48px;
  padding: 12px 16px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: var(--btn-radius, 4px);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-black);
  background-color: var(--color-yellow);
}

.course__detail__container .course__includes {
  display: none;
}

.course__detail__sidebar {
  width: 34% !important;
  max-width: 380px;
  float: right !important;
}

@media (max-width: 767px) {
  .course__detail__sidebar {
    width: 100% !important;
    max-width: none;
    float: none !important;
    margin-top: 32px;
  }
}

/* Enroll + access copy → one gray-200 card (square join between halves)
   Covers course purchase AND learning-path purchase widgets */
.course__detail__sidebar .widget--course-purchase.widget--course-purchase_standard,
.course__detail__sidebar .widget--course-purchase.widget--course-purchase_standard.row,
.course__detail__sidebar .widget--learning-path-purchase,
.course__detail__sidebar .widget--learning-path-purchase.widget--learning-path-purchase_standard,
.course__detail__sidebar .widget--learning-path-purchase.row {
  display: block !important;
  background: var(--color-gray-200) !important;
  padding: 20px 20px 0 !important;
  border-radius: 8px 8px 0 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  align-items: stretch !important;
}

.course__detail__sidebar .widget--course-purchase .panel,
.course__detail__sidebar .widget--course-purchase .enroll,
.course__detail__sidebar .widget--learning-path-purchase .panel,
.course__detail__sidebar .widget--learning-path-purchase .enroll,
.course__detail__sidebar .enroll--learning-path {
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

.course__detail__sidebar .widget--course-purchase .btn.btn--primary,
.course__detail__sidebar .widget--course-purchase .btn--primary,
.course__detail__sidebar .widget--learning-path-purchase .btn.btn--primary,
.course__detail__sidebar .widget--learning-path-purchase .btn--primary,
.course__detail__sidebar .widget--learning-path-purchase .btn.btn--expand,
.course__detail__sidebar .enroll--learning-path .btn.btn--primary {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 20px !important;
  float: none !important;
  align-self: flex-start !important;
  justify-content: center !important;
  text-align: center !important;
}

.course__detail__sidebar .academy-sidebar,
.course__detail__sidebar .academy-sidebar.row,
.course__detail__sidebar .widget--one-column.academy-sidebar {
  background: var(--color-gray-200) !important;
  padding: 0 20px 20px !important;
  border-radius: 0 0 8px 8px !important;
  margin: 0 !important;
}

/* Foundation columns indent the access copy past the button — reset */
.course__detail__sidebar .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.course__detail__sidebar .columns,
.course__detail__sidebar .column,
.course__detail__sidebar .medium-12,
.course__detail__sidebar .small-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  width: 100% !important;
}

.course__detail__sidebar .academy-sidebar .editor-content,
.course__detail__sidebar .academy-sidebar .editor-content.indent-list,
.course__detail__sidebar .academy-sidebar .editor-content p {
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-black);
}

/* Languages / related: space above (course + learning-path detail) */
.course__detail__sidebar .course__related {
  margin-top: 0;
  padding-top: 56px;
}

.course__detail__sidebar .course__related .panel.panel--alt {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.course__detail__sidebar .course__related__title {
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: transparent !important;
  text-transform: none !important;
  color: var(--color-black) !important;
}

.course__detail__sidebar .course__related__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 20px;
  list-style: none;
  background: var(--color-gray-200);
  border-radius: 8px;
}

.course__detail__sidebar .course__related__list li {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.course__detail__sidebar .course__related__list li a {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: var(--color-black);
}

.course__detail__sidebar .course__related__list li a:hover {
  text-decoration: none;
  opacity: 0.85;
}

.course__detail__sidebar .course__related__list img {
  width: 61px;
  height: 61px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--color-white);
  border-radius: 0;
}

.course__detail__sidebar .course__related__list p {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-black);
}

.enroll__title {
  display: none;
}

.panel {
  background: var(--color-snow) !important;
}

.course__detail__enrolled {
  display: none;
}

/**** Academy V2 Learning Path Detail ****/
.course__detail__container {
  padding-top: 4rem;
  padding-bottom: 20rem;
}

.course__detail__container .course__detail__content .h2 {
  margin-bottom: 10px;
  color: var(--color-black);
}

.course__detail__container .course__detail__content p {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-black);
  padding-bottom: 0;
}

.course__detail__container .course__detail__description {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-black);
}

.course__detail__container .collection__courses {
  padding-top: 1rem;
}

.course__detail__container .collection__courses .center-ruled-title {
  display: none;
}

.course__detail__container .learning-path-detail-milestone-list li {
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 2.4375rem */
  letter-spacing: -0.05625rem;
  color: var(--color-navy);
  padding-bottom: 1.25rem;
}

.course__detail__container .learning-path-detail-milestone-list h3 {
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 2.4375rem */
  letter-spacing: -0.05625rem;
  color: var(--color-navy);
}

.course__detail__container .column.small-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.course__detail__container .column.small-12 .video__container {
  padding-left: 0;
  padding-right: 0;
}

.course__detail__container .course__detail__asset img {
  width: 100%;
  max-height: 360px;
  height: 100%;
  object-fit: cover;
  border-radius: 4px !important;
}

/* Leaving this here until more custom learning paths are released */
.learning-path-detail-milestone-list {
  display: none;
}

.learning-path-detail-milestone-item .row:first-child {
  margin-top: 1rem;
}

.learning-path-detail-milestone-item__asset {
  object-fit: cover;
  object-position: center;
  width: 9rem;
  height: 9rem;
  padding: 0;
  border-radius: 0.3125rem;
}

.learning-path-detail-milestone-item .medium-4 {
  width: 10rem;
}

.learning-path-detail-milestone-item__content-type h5 {
  display: none;
}

.learning-path-detail-milestone-item__title {
  padding-left: 10rem;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 1.625rem */
  letter-spacing: -0.0375rem;
  color: var(--color-navy);
  position: absolute;
  top: 3rem;
}

.learning-path-detail-milestone-item {
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 2rem;
}

.learning-path-detail-milestone-item .medium-8 {
  margin-top: 2rem;
}

.learning-path-detail-milestone-item__cta {
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 1.5rem */
  color: var(--color-blue);
  display: flex;
  align-items: center;
}

.learning-path-detail-milestone-item__cta .icon-upright::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url('data:image/svg+xml;utf8,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="22" height="22" rx="11" fill="%230369EA"/><path d="M6 11L15 11" stroke="white" stroke-width="1.4" stroke-linecap="round"/><path d="M11.75 7.01953L15.75 11.018L11.75 14.981" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-left: 10px;
}

.learning-path-milestone__badge:not(.learning-path-milestone__badge--required) {
  background-color: var(--color-gray-100);
  color: var(--color-black);
  border: none;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-family:
    'FK Grotesk Mono', ui-monospace, 'SFMono-Regular', monospace !important;
  line-height: 1.5 !important;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.learning-path-milestone__badge:not(.learning-path-milestone__badge--required)
  span {
  position: relative;
  padding-left: 0;
}

.learning-path-milestone__badge:not(.learning-path-milestone__badge--required)
  span::before,
.learning-path-milestone__badge--required span::before {
  content: none !important;
  display: none !important;
}

.widget--learning-path-purchase {
  display: block;
  padding: 20px 20px 0 !important;
  background-color: var(--color-gray-200);
  border-radius: 8px 8px 0 0;
}

.enroll__price {
  display: none;
}

.enroll__buy {
  display: flex;
}

.enroll__title,
.course__detail__runs {
  color: var(--color-navy);
}

.learning-content-hero h1 {
  padding-bottom: 0.75rem;
}

@media (max-width: 800px) {
  .widget--learning-path-content-hero_small-banner .learning-content-hero,
  .learning-content-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto !important;
    min-height: 220px;
    max-height: none !important; /* was 400px — clipped wrapping title/subtitle */
    overflow: visible;
    padding: 72px 16px 40px; /* clear back link, keep copy from sitting low */
    box-sizing: border-box;
  }

  .learning-content-hero img,
  .learning-content-hero picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover;
  }

  .learning-content-hero__overlay {
    inset: 0;
  }

  .learning-content-hero > div.absolute,
  .learning-content-hero div.absolute.w-full,
  .learning-content-hero div.absolute {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100%;
    max-width: 809px;
  }

  .learning-content-hero .learning-content__back-button,
  .learning-content-hero .learning-content__back-button.btn--bare {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    right: auto !important;
    transform: none !important;
    align-self: flex-start;
  }

  .learning-content-hero h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    padding-bottom: 0.5rem;
    overflow-wrap: break-word;
  }

  .learning-content-hero .text-white:not(h1),
  .learning-content-hero .text-lg {
    font-size: 16px !important;
    line-height: 1.5 !important;
    overflow-wrap: break-word;
  }
}

/**** Academy V2 Dashboard ****/
.academy-header-content--secondary {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  align-items: center;
}

.academy-header-content--secondary .widget__title {
  font-size: 3.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 3.4375rem */
  letter-spacing: -0.09375rem;
  max-width: 1125px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.academy-header-content--secondary .widget__subtitle {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 2.25rem */
  max-width: 1125px;
  padding-left: 1.25rem;
}

.academy-activity {
  display: flex;
  justify-content: center;
}

/* My Activity widget — Figma 4116:9126
     gray-100 rounded shell, yellow active-tab underline, white rounded rows
     with a blue accent bar, mono eyebrow tag, black "continue" button. */
.academy-activity > .ember-view {
  width: 100%;
  max-width: 1190px;
  padding: 50px 30px;
  border-radius: 4px;
  background: var(--color-gray-100);
}

.academy-activity .small-12.columns {
  max-width: 1190px;
}

/* Title "Activity" — H5 24px (override headline-scale H3 40px) */
.academy-activity .dashboard-access__header {
  color: var(--color-black);
  font-family: var(--font-sans) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.33 !important;
}

.academy-activity .dashboard-access__header .button-expander {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-black);
  border-radius: 4px;
}

/* Tabs — 1px divider under the row, active tab gets 5px yellow underline */
.academy-activity .dashboard-access-tabs,
.academy-activity .dashboard-access section {
  background: transparent !important;
}

.academy-activity .dashboard-access-tabs {
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.academy-activity .dashboard-access-tab {
  padding: 10px 20px;
  border-width: 0 0 5px;
  border-color: transparent;
  background: transparent !important;
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: none;
}

.academy-activity .dashboard-access-tab--active {
  border-color: var(--color-yellow);
  background: transparent !important;
}

.academy-activity .dashboard-access-tab__count {
  background: transparent;
}

.academy-activity section[role='tabpanel'] {
  max-height: 600px;
  overflow-y: scroll;
}

@media (max-width: 767px) {
  .academy-activity section[role='tabpanel'] {
    max-height: none;
  }
}

@media only screen and (min-width: 1300px) {
  .academy-activity .dashboard-access-tabs {
    min-width: 1061px;
  }
}

/* Rows — all white, rounded, 30px pad, 10px gap */
.academy-activity .dashboard-access-list-item,
.academy-activity .dashboard-access-list-item:nth-of-type(2n) {
  margin: 0 0 10px;
  padding: 30px;
  background: #fff !important;
  border: none;
  border-radius: 4px;
}

.academy-activity .dashboard-access-list-item img {
  border-radius: 0.1875rem;
}

.academy-activity .dashboard-access-list-item-expansion {
  border-radius: 0.1875rem;
}

/* First grid cell — align chevron + title */
.academy-activity .dashboard-access-list-item .grid > .col-span-4 {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Expander (microcourse rows) — plain button with a chevron toggle */
.academy-activity .dashboard-access-list-item-expander {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-align: left;
  color: var(--color-black);
}

.academy-activity .dashboard-access-list-item-expander i,
.academy-activity .dashboard-access-list-item-expander i::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  color: var(--color-black);
  transition: transform 0.2s ease;
  transform: rotate(0deg) !important;
}

/* Rotate right-chevron down when expanded. Bookmarks swap in
   icon-navigatedown already — don't rotate those. */
.academy-activity
  .dashboard-access-list-item-expander[aria-expanded='true']
  .icon-navigateright,
.academy-activity
  .dashboard-access-list-item-expander[aria-expanded='true']
  .icon-navigateright::before {
  transform: rotate(90deg) !important;
}

.academy-activity
  .dashboard-access-list-item-expander[aria-expanded='true']
  .icon-navigatedown,
.academy-activity
  .dashboard-access-list-item-expander[aria-expanded='true']
  .icon-navigatedown::before {
  transform: none !important;
}

/* Row title — 16px Medium (override headline-scale H5 24px/700) */
.academy-activity .dashboard-access-list-item-expander__title,
.academy-activity
  .dashboard-access-list-item
  .dashboard-access-list-item-expander__title {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--color-black);
}

/* Category tag → FK Grotesk Mono eyebrow (override global strong→FK Grotesk) */
.academy-activity strong,
.academy-activity .dashboard-access-list-item strong {
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-family:
    'FK Grotesk Mono', ui-monospace, 'SFMono-Regular', monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--color-black);
}

@media (max-width: 767px) {
  .academy-activity strong {
    display: inline-block;
    margin: 0.5rem 0;
  }
}

.academy-activity strong::before {
  content: none;
  display: none;
}

/* Row grid: reclaim the unused middle slot + forced col-11 gap so
   CTAs like "Start MicroCourse" can stay on one line. */
@media (min-width: 768px) {
  .academy-activity .dashboard-access-list-item > .grid > .col-span-4 {
    grid-column: span 4 / span 4 !important;
    min-width: 0;
  }

  /* Empty / progress slot — keep a narrow track, don't eat the CTA */
  .academy-activity
    .dashboard-access-list-item
    > .grid
    > .col-span-2:not(.col-start-11):not(.text-right) {
    grid-column: span 1 / span 1 !important;
    min-width: 0;
  }

  .academy-activity .dashboard-access-list-item > .grid > .col-span-3 {
    grid-column: span 3 / span 3 !important;
    min-width: 0;
  }

  /* CTA: drop col-start-11 (left a dead column) and take the rest */
  .academy-activity .dashboard-access-list-item > .grid > .col-start-11,
  .academy-activity
    .dashboard-access-list-item
    > .grid
    > .col-span-2.col-start-11,
  .academy-activity .dashboard-access-list-item > .grid > .text-right {
    grid-column: span 4 / span 4 !important;
    justify-self: end;
    text-align: right;
  }

  .academy-activity .dashboard-access-list-item .btn--primary,
  .academy-activity .dashboard-access-list-item a.btn--primary {
    white-space: nowrap;
  }
}

/* Tab controls are .btn.btn--link — keep them as plain tab labels
     (the underline/active styling lives on the parent .dashboard-access-tab). */
.academy-activity .dashboard-access-tab .btn,
.academy-activity .dashboard-access-tab .btn--link,
.academy-activity .dashboard-access-tab button[role='tab'] {
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--color-black) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
}

/* CTA buttons (Launch / Continue / Start MicroCourse) → Contextual Primary.
     Scoped to .btn--primary so the tab buttons (.btn--link) are untouched. */
.academy-activity .dashboard-access-list-item .btn--primary,
.academy-activity .dashboard-access-list-item a.btn--primary,
.academy-activity .dashboard-access-list-item button.btn--primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  min-height: 0;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  background: var(--btn-contextual-bg) !important;
  border: 1px solid var(--btn-contextual-bg) !important;
  color: var(--btn-contextual-text) !important;
  letter-spacing: 0 !important;
}

.academy-activity .dashboard-access-list-item .btn--primary:hover,
.academy-activity .dashboard-access-list-item .btn--primary:focus {
  background: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text, var(--color-black)) !important;
}

.academy-activity .dashboard-access-list-item__description {
  margin-top: 0;
}

/* Expanded stats dropdown (progress %, meter, View Details) */
.academy-activity .dashboard-access-list-item-expansion {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.academy-activity .user-engagement-stat {
  padding-bottom: 0;
}

.academy-activity .user-engagement-stat__value,
.academy-activity .user-engagement-stat__value--muted,
.academy-activity .user-engagement-stat__value--percent {
  color: var(--color-black);
  font-family: 'FK Grotesk Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-size: 32px;
  font-weight: 700;
}

.academy-activity .user-engagement-stat__label {
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
}

.academy-activity .progress,
.academy-activity .progress.round {
  height: 10px;
  border-radius: 50rem;
  background: var(--color-gray-100);
}

.academy-activity .progress .meter {
  border-radius: 50rem;
  background: var(--color-black);
}

/* Course-row expansion only (bookmarks re-layout .medium-8 below) */
.academy-activity
  .dashboard-access-list-item:not(:has(.bookmark-folder))
  .dashboard-access-list-item-expansion
  > .row
  > .medium-8 {
  width: 50%;
  padding-left: 2rem !important;
}

.academy-activity .dashboard-access-list-view-detail-page {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-black);
  background: none;
  border: none;
}

.academy-activity .dashboard-access-list-view-detail-page::after {
  content: '';
  margin-left: 0;
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  /* black arrow supplied by the shared text-link arrow rule */
}

.academy-activity .dashboard-access-list-item-expander__title:hover {
  color: var(--color-navy);
}

/* —— Bookmarks tab ——
   Outer shell is one card (folder list + panel). Nested bookmark rows
   must not inherit the course-row card chrome, and Foundation columns
   need a flex row so meta/CTA don't wrap awkwardly. */
.academy-activity .dashboard-access-list-item:has(.bookmark-folder) {
  padding: 24px 30px;
}

.academy-activity
  .dashboard-access-list-item:has(.bookmark-folder)
  > .row {
  display: flex;
  align-items: stretch;
  margin-left: 0;
  margin-right: 0;
}

.academy-activity
  .dashboard-access-list-item:has(.bookmark-folder)
  > .row
  > .columns {
  float: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.academy-activity
  .dashboard-access-list-item:has(.bookmark-folder)
  > .row
  > .medium-3 {
  flex: 0 0 220px;
  width: 220px;
  max-width: 220px;
  padding-right: 24px !important;
  border-right: 1px solid var(--color-gray-200, #e7e5e4);
}

.academy-activity
  .dashboard-access-list-item:has(.bookmark-folder)
  > .row
  > .medium-9 {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  padding-left: 28px !important;
}

/* Folder list (left rail) */
.academy-activity .bookmark-categories__list,
.academy-activity .topic-items__list.bookmark-categories__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.academy-activity .category__list__item.sortable-category__list__item,
.academy-activity .sortable-category__list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--color-gray-200, #e7e5e4);
}

.academy-activity .list-item__handle {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.academy-activity .list-item__handle .handle,
.academy-activity .list-item__handle .icon-move {
  color: var(--color-gray-500, #78716c) !important;
}

.academy-activity .list-item__title,
.academy-activity button.list-item__title {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--color-black) !important;
  text-align: left;
  text-transform: none !important;
}

.academy-activity .list-item__title span {
  min-width: 0;
}

.academy-activity .list-item__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-black);
  color: var(--color-white) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* Panel header */
.academy-activity .bookmark-folder {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  min-height: 0;
}

.academy-activity .bookmark-folder-name {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-black);
}

.academy-activity .bookmark-folder .btn--link {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--color-black) !important;
}

/* Nested bookmark rows — flat, not nested cards */
.academy-activity .bookmark-folder .dashboard-access-list-item,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item {
  margin: 0 !important;
  padding: 16px 0 !important;
  background: transparent !important;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-gray-200, #e7e5e4);
}

.academy-activity .bookmark-folder .dashboard-access-list-item:last-child,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0 !important;
}

/* Bookmark item top row: title | meta | View */
.academy-activity
  .bookmark-folder
  .dashboard-access-list-item
  > .ember-view
  > .row,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item
  > .ember-view
  > .row {
  display: flex;
  align-items: center;
  gap: 16px 20px;
  margin-left: 0;
  margin-right: 0;
}

.academy-activity
  .bookmark-folder
  .dashboard-access-list-item
  > .ember-view
  > .row
  > .columns,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item
  > .ember-view
  > .row
  > .columns {
  float: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.academy-activity
  .bookmark-folder
  .dashboard-access-list-item
  > .ember-view
  > .row
  > .medium-7,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item
  > .ember-view
  > .row
  > .medium-7 {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  min-width: 0;
}

.academy-activity
  .bookmark-folder
  .dashboard-access-list-item
  > .ember-view
  > .row
  > .medium-3,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item
  > .ember-view
  > .row
  > .medium-3 {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  white-space: nowrap;
}

.academy-activity
  .bookmark-folder
  .dashboard-access-list-item
  > .ember-view
  > .row
  > .medium-2,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item
  > .ember-view
  > .row
  > .medium-2 {
  flex: 0 0 auto;
  width: auto;
  text-align: right;
}

.academy-activity .bookmark-folder .catalog-list-item__info,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .catalog-list-item__info {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.35em;
  margin: 0;
  white-space: nowrap;
  font-family:
    'FK Grotesk Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-black);
}

.academy-activity .bookmark-folder .catalog-list-item__info strong {
  letter-spacing: 2px;
}

/* Expansion: image + location/actions in a clean horizontal stack */
.academy-activity .bookmark-folder .dashboard-access-list-item-expansion,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item-expansion {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-gray-200, #e7e5e4);
}

.academy-activity
  .bookmark-folder
  .dashboard-access-list-item-expansion
  > .row,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item-expansion
  > .row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-left: 0;
  margin-right: 0;
}

.academy-activity
  .bookmark-folder
  .dashboard-access-list-item-expansion
  .medium-4,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item-expansion
  .medium-4 {
  float: none;
  flex: 0 0 160px;
  width: 160px;
  max-width: 160px;
  padding: 0 !important;
}

.academy-activity
  .bookmark-folder
  .dashboard-access-list-item-expansion
  .medium-4
  img,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item-expansion
  .medium-4
  img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.academy-activity
  .bookmark-folder
  .dashboard-access-list-item-expansion
  .medium-8,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item-expansion
  .medium-8 {
  float: none;
  flex: 1 1 auto;
  width: auto !important;
  max-width: none;
  padding: 0 !important;
}

.academy-activity
  .bookmark-folder
  .dashboard-access-list-item__description,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item__description {
  margin: 0;
  padding: 0;
}

.academy-activity
  .bookmark-folder
  .dashboard-access-list-item__description
  p,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item__description
  p {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-black);
}

.academy-activity
  .bookmark-folder
  .dashboard-access-list-item__description
  .btn--link,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item__description
  .btn--link {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--link-text, var(--color-black)) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

.academy-activity
  .bookmark-folder
  .dashboard-access-list-item__description
  .btn--link:hover,
.academy-activity
  #dashboard-access-bookmark-folder-panel
  .dashboard-access-list-item__description
  .btn--link:hover {
  text-decoration: underline !important;
}

@media (max-width: 767px) {
  .academy-activity
    .dashboard-access-list-item:has(.bookmark-folder)
    > .row {
    flex-direction: column;
  }

  .academy-activity
    .dashboard-access-list-item:has(.bookmark-folder)
    > .row
    > .medium-3 {
    flex: none;
    width: 100%;
    max-width: none;
    padding-right: 0 !important;
    padding-bottom: 16px !important;
    border-right: none;
    border-bottom: 1px solid var(--color-gray-200, #e7e5e4);
  }

  .academy-activity
    .dashboard-access-list-item:has(.bookmark-folder)
    > .row
    > .medium-9 {
    padding-left: 0 !important;
    padding-top: 16px !important;
  }

  .academy-activity
    .bookmark-folder
    .dashboard-access-list-item
    > .ember-view
    > .row,
  .academy-activity
    #dashboard-access-bookmark-folder-panel
    .dashboard-access-list-item
    > .ember-view
    > .row {
    flex-wrap: wrap;
  }

  .academy-activity
    .bookmark-folder
    .dashboard-access-list-item
    > .ember-view
    > .row
    > .medium-7 {
    flex: 1 1 100%;
  }

  .academy-activity
    .bookmark-folder
    .catalog-list-item__info {
    white-space: normal;
  }
}

/**** Academy V2 Get Started ****/
.academy-featured-content > .row {
  max-width: 1125px;
}

.academy-featured-content .featured-content-article-item img {
  border-radius: 0.3125rem;
}

.academy-featured-content .featured-content-article-item__description {
  margin-top: 0;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 1.3125rem */
}

.academy-featured-content .featured-content-article-item__title {
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 1.625rem */
  letter-spacing: -0.0375rem;
}

/**** Academy V2 Credentials Page ****/
.academy-featured-content-standard > .row {
  max-width: 1125px;
}

.academy-featured-content-standard .column.medium-12 {
  padding: 0;
}

.academy-featured-content-standard .catalog-grid-item__asset-container {
  border-radius: 0.3125rem;
}

.academy-featured-content-standard .catalog-grid-item__title {
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 1.625rem */
  letter-spacing: -0.0375rem;
  order: 1;
}

.academy-featured-content-standard .catalog-grid-item__description {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 1.3125rem */
  order: 2;
}

.academy-featured-content-standard .catalog-grid-item__source {
  order: 3;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 1.125rem */
  text-transform: none;
  color: var(--color-navy);
  letter-spacing: 0;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

.academy-featured-content-standard .catalog-grid-item__source strong {
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 1.125rem */
  text-transform: none;
  color: var(--color-navy);
  letter-spacing: 0;
}

.academy-featured-content-standard .catalog-grid-item__cta-container {
  padding-top: 0.75rem;
  order: 4;
}

.academy-featured-content-standard
  .catalog-grid-item__cta-container
  .btn--primary {
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 1.5rem */
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  color: var(--color-blue);
}

.academy-featured-content-standard
  .catalog-grid-item__cta-container
  .btn--primary::after {
  content: '';
  margin-left: 10px;
  display: inline-flex;
  width: 22px; /* 22px converted to rem */
  height: 23px; /* 23px converted to rem */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='23' viewBox='0 0 22 23' fill='none'><rect y='0.290283' width='22' height='22' rx='11' fill='%230369EA'/><path d='M6 11.2903L15 11.2903' stroke='white' stroke-width='1.4' stroke-linecap='round'/><path d='M11.75 7.30981L15.75 11.3083L11.75 15.2712' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  color: var(--color-blue);
}

/* FAQs — Figma 4153:11373
     Title 64/Bold centered → 64 gap → 894px list; items 16px pad,
     gray-700 hairline borders; Q 16/Bold, A 16/Medium 1.5 */
.academy-faq {
  background: var(--color-white);
}

.academy-faq .widget__title {
  max-width: 660px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: var(--section-stack-gap, 64px) !important;
  padding-bottom: 0 !important;
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-size: 64px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center;
  color: var(--color-black) !important;
}

.academy-faq .row {
  max-width: 894px;
  margin-left: auto;
  margin-right: auto;
}

.academy-faq h4 {
  margin: 0 !important;
  padding: 16px 16px 0 !important;
  border-top: 0.5px solid var(--color-gray-700);
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  color: var(--color-black) !important;
}

.academy-faq h4 + p,
.academy-faq p {
  margin: 16px 0 0 !important;
  padding: 0 16px 16px !important;
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--color-black) !important;
}

.academy-faq h4 + p:last-of-type,
.academy-faq p:last-of-type {
  border-bottom: 0.5px solid var(--color-gray-700);
}

@media (max-width: 767px) {
  .academy-faq .widget__title {
    font-size: 48px !important;
    max-width: 100%;
  }
  .academy-faq .row {
    max-width: 100%;
  }
}

.academy-quote-block > .row {
  max-width: 1125px;
}

.academy-quote-block .testimonial-quote {
  background: var(--color-snow);
  max-width: 1125px;
  padding: 3.75rem 4.24rem;
  text-align: left;
}

.academy-quote-block .testimonial-quote__text {
  font-family: 'FK Grotesk', system-ui, sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.05625rem;
  color: var(--color-black);
}
@media (max-width: 800px) {
  .academy-quote-block .testimonial-quote__text {
    font-size: 1.5rem;
  }
}

.academy-quote-block .testimonials__nav--left .icon-navigateleft::before {
  content: '';
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'><path d='M18 28.5L7.5 18M7.5 18L18 7.5M7.5 18H28.5' stroke='%2300263E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  vertical-align: middle;
}

.academy-quote-block .testimonials__nav--right .icon-navigateright::before {
  content: '';
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'><path d='M18 28.5L28.5 18M28.5 18L18 7.5M28.5 18H7.5' stroke='%2300263E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  vertical-align: middle;
}

.academy-quote-block .testimonials__nav {
  top: 60%;
}

.academy-quote-block .testimonials__nav--right {
  right: 20px;
}

.academy-quote-block .testimonials__nav--left {
  right: 55px;
  left: initial;
}

@media (max-width: 450px) {
  .academy-quote-block .testimonials__nav {
    top: 70%;
  }
}
@media (min-width: 1440px) {
  .academy-quote-block .testimonials__nav--right {
    right: 60px;
  }

  .academy-quote-block .testimonials__nav--left {
    right: 95px;
    left: initial;
  }
}

.academy-quote-block .testimonial-quote__text,
.academy-quote-block .testimonial-quote__author-name,
.academy-quote-block .testimonial-quote__author-description {
  text-align: left !important;
}

.academy-quote-block .testimonial-quote__author-name {
  font-family: 'FK Grotesk Mono', ui-monospace, monospace !important;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 1.5rem */
  color: var(--color-black);
  text-transform: uppercase;
  display: inline-block;
}

.academy-quote-block .testimonial-quote__author-description {
  font-family: 'FK Grotesk', system-ui, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 1.5rem */
  color: var(--color-gray-600);
  text-transform: uppercase;
  display: inline-block;
}

.academy-quote-block .testimonial-quote__author-description::before {
  content: '';
  margin-left: 1em;
}

.academy-quote-block .testimonial-quote__author-name::before {
  border: none !important;
}

.academy-quote-block .testimonial.learner {
  position: relative;
  padding-top: 25%;
  margin-top: 32px;
}

/* Center quote over the learner stage (padding-top is the aspect shell) */
.academy-quote-block .testimonial.learner > .testimonial-quote,
.academy-quote-block .testimonial.learner .testimonial-quote {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(100% - 2rem);
  max-width: 1125px;
  margin: 0 !important;
  box-sizing: border-box;
}

@media (max-width: 1000px) {
  .academy-quote-block .testimonial.learner {
    padding-top: 33%;
  }
}
@media (max-width: 800px) {
  .academy-quote-block .testimonial.learner {
    padding-top: 50%;
  }
}
@media (max-width: 450px) {
  .academy-quote-block .testimonial.learner {
    padding-top: 104%;
  }
}

.academy-quote-block .testimonial-container {
  padding: 0;
}

.academy-learn-more {
  margin-top: -1rem;
}

.academy-learn-more .widget__cta {
  text-align: center;
  padding-top: 0;
}

.academy-learn-more .btn.btn--primary {
  font-family: 'FK Grotesk', system-ui, sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 1.5rem */
  color: var(--color-white);
  background-color: var(--color-blue);
  border: none;
  border-radius: 3.13rem;
  text-transform: none;
  letter-spacing: 0;
}

.academy-learn-more .btn.btn--primary::after {
  content: none !important;
}

/* Academy Video — Figma Cards / video (4003:1201)
     DOM order is title → video row → CTA; flex-order to title → CTA → video.
     Widget root is also Foundation .row — override to a vertical stack. */

.academy-video,
.academy-video.row,
.learn.dashboard .widget.academy-video,
.layout__content .widget.academy-video {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  text-align: center;
}

/* TI wraps everything (title + video .row + CTA) in one .ember-view.
     Dissolve it so those blocks share ONE flex context and can be reordered. */
.academy-video > .ember-view {
  display: contents !important;
}

/* Title wrapper (holds the h3) */
.academy-video > .ember-view > .ember-view {
  order: 1;
  width: 100%;
  max-width: 893px;
}

/* CTA moves ABOVE the video (it's last in the DOM) */
.academy-video .widget__cta {
  order: 2;
  display: flex !important;
  justify-content: center;
  width: 100%;
  max-width: 1125px;
  margin: 0 auto var(--section-stack-gap) !important;
  padding: 0;
  text-align: center;
}

/* Video row */
.academy-video > .ember-view > .row {
  order: 3;
  width: 100% !important;
  max-width: 1125px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
}

.academy-video > .ember-view > .row:before,
.academy-video > .ember-view > .row:after {
  content: none !important;
  display: none !important;
}

.academy-video .row .columns,
.academy-video .row .medium-12 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide the empty next-button placeholder TI injects after the video */
.academy-video .hide.next-button {
  display: none !important;
}

.academy-video .widget__title {
  max-width: 893px;
  margin-top: 0 !important;
  margin-bottom: 32px !important;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0 !important; /* kill legacy .widget__title { padding-top: 60px } */
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  color: var(--color-black);
}

.academy-video .widget__subtitle {
  display: none; /* not in Figma composition */
}

/* Contextual Primary — "Take a tour" (scoped to .widget__cta only —
     never touch Wistia’s own <button> / play controls) */
.academy-video .widget__cta .btn,
.academy-video .widget__cta .btn.btn--primary,
.academy-video .widget__cta a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--btn-gap);
  width: fit-content;
  min-height: var(--btn-height);
  margin: 0 auto;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  background-color: var(--btn-contextual-bg) !important;
  border: 1px solid var(--btn-contextual-bg) !important;
  border-radius: var(--btn-radius) !important;
  color: var(--btn-contextual-text) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
}

.academy-video .widget__cta .btn:hover,
.academy-video .widget__cta .btn.btn--primary:hover,
.academy-video .widget__cta a.btn:hover {
  background-color: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text) !important;
  text-decoration: none !important;
}

.academy-video .widget__cta .btn:active,
.academy-video .widget__cta .btn.btn--primary:active,
.academy-video .widget__cta a.btn:active {
  background-color: var(--btn-active-bg) !important;
  border-color: var(--btn-active-bg) !important;
  color: var(--btn-active-text) !important;
}

.academy-video .widget__cta .btn::after,
.academy-video .widget__cta .btn.btn--primary::after,
.academy-video .widget__cta a.btn::after {
  content: '' !important;
  display: inline-block !important;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M9.93992 2.66699L8.99325 3.60699L12.5866 7.20033H1.33325V8.53366H12.5533L8.99325 12.0937L9.93992 13.0403L14.6533 8.32699V7.38033L9.93992 2.66699Z' fill='%23FFFFFF'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.academy-video .widget__cta .btn:hover::after,
.academy-video .widget__cta a.btn:hover::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M9.93992 2.66699L8.99325 3.60699L12.5866 7.20033H1.33325V8.53366H12.5533L8.99325 12.0937L9.93992 13.0403L14.6533 8.32699V7.38033L9.93992 2.66699Z' fill='%231C1917'/></svg>") !important;
}

/* Video sizing — OUTER containers only.
     Wistia foam owns .w-chrome / thumbnail / bigPlayButton sizing.
     Forcing absolute/aspect-ratio on chrome was painting a black video
     surface and hiding the poster + play button (volume chip still showed). */
.academy-video .video__container {
  max-width: 1125px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.academy-video .video__frame,
.academy-video .video__frame.wistia_embed_initialized {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border-radius: 4px !important;
  overflow: hidden;
}

/**** Academy V2 Enroll ****/
.widget--learning-path-purchase.widget--learning-path-purchase_standard {
  padding: 20px 20px 0 !important;
  background: var(--color-gray-200) !important;
  border-radius: 8px 8px 0 0 !important;
}

.enroll--learning-path .enroll__title {
  display: none;
}

.enroll--learning-path .course__detail__runs {
  display: none;
}

.academy-sidebar {
  background: var(--color-gray-200);
  padding: 0 20px 20px !important;
  border-radius: 0 0 8px 8px !important;
}

.widget--course-purchase.widget--course-purchase_standard,
.widget--learning-path-purchase.widget--learning-path-purchase_standard {
  background: var(--color-gray-200);
  padding: 20px 20px 0 !important;
  border-radius: 8px 8px 0 0 !important;
}

.widget--course-purchase.widget--course-purchase_standard .btn--primary,
.widget--learning-path-purchase.widget--learning-path-purchase_standard .btn--primary,
.widget--learning-path-purchase .btn.btn--expand.btn--primary {
  font-family: var(--font-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-black);
  width: fit-content !important;
  min-height: 48px;
  text-transform: none;
}

/**** Academy V2 Learning Path (main Academy + Partner Academy microsite) ****/
.widget--milestones.widget--milestones_standard,
.header--microsite ~ * .widget--milestones.widget--milestones_standard,
.learning-path_custom-layout .widget--milestones.widget--milestones_standard {
  max-width: 1125px;
}

.widget--learning-path-content.widget--learning-path-content_standard,
.learning-path_custom-layout
  .widget--learning-path-content.widget--learning-path-content_standard {
  max-width: 1125px;
}

/* Partner Academy learning-path custom layout — same brand surfaces */
.learning-path_custom-layout .learning-path-body,
.learning-path_custom-layout .learning-path-timeline {
  background: var(--color-white);
}

.learning-path_custom-layout .learning-content-hero,
.header--microsite ~ .layout__content .learning-content-hero {
  background-color: var(--color-gray-900);
}

.academy-no-activity {
  display: none;
}

.bookmark-content .btn--primary,
.bookmark-content .btn--primary:hover {
  color: var(--link-text, var(--color-black)) !important;
}

/* Single Image Card Styles */

.academy-single-image-cards h3 {
  font-size: 3.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 66px */
  letter-spacing: -1.8px;
  text-align: center;
  /* margin-bottom from --section-title-gap */
}

.academy-single-image-cards p.muted {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 36px */
  text-align: center;
  /* margin-bottom from --section-stack-gap */
}

.academy-single-image-cards .row {
}

.academy-single-image-cards .row .columns:first-child {
  padding-left: 0;
}

.academy-single-image-cards .row .columns:last-child {
  padding-right: 0;
}

.academy-single-image-cards .row .columns img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  margin-bottom: 1.875rem;
  border-radius: 0.1875rem;
}

.academy-single-image-cards .row .columns h4 {
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 1.625rem */
  letter-spacing: -0.0375rem;
  padding-left: 1.875rem;
  padding-right: 1.875rem;
}

.academy-single-image-cards .row .columns p:not(:first-of-type) {
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 1.3125rem */
  padding-left: 1.875rem;
  padding-right: 1.875rem;
}

.academy-single-image-cards .row .columns a {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 1.5rem */
  color: var(--color-blue);
}

.academy-single-image-cards .row .columns a::after {
  content: '';
  margin-left: 5px;
  display: flex;
  width: 22px; /* 22px converted to rem */
  height: 23px; /* 23px converted to rem */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='23' viewBox='0 0 22 23' fill='none'><rect y='0.290283' width='22' height='22' rx='11' fill='%230369EA'/><path d='M6 11.2903L15 11.2903' stroke='white' stroke-width='1.4' stroke-linecap='round'/><path d='M11.75 7.30981L15.75 11.3083L11.75 15.2712' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  color: var(--color-blue);
}

.academy-single-image-cards.line-break {
  /* keep section pad from --section-pad-y; only add divider */
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 48em) {
  .course-purchase__mobile-button {
    display: none;
  }
}
@media only screen and (max-width: 48em) {
  .home.course-group .container {
    padding-top: 2em;
    padding-top: 0;
  }
}

.learning-path .company__beta-logo {
  pointer-events: none;
  cursor: default;
}

/* Hide Course Feedback */
div.panel.panel--secondary > textarea {
  display: none !important;
}
.sidebar__testimonial__rating {
  display: none;
}
.stars > span {
  display: none;
}

#lessonRightSidebar .btn.btn--primary {
  padding: 0.5rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 3.125rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  text-transform: uppercase;
  background: var(--color-blue) !important;
  color: var(--color-white) !important;
  letter-spacing: 1px;
}
/* Error / alert banner — Secondary/Red/700.
   Often tagged as widget--title too, which otherwise piles on 120px pad /
   max-width and makes the strip look top-heavy (esp. Partner Academy). */
.academy-error-banner,
.academy-error-banner.widget,
.academy-error-banner.widget--title,
.row.widget.academy-error-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 24px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  background: var(--color-red-700, #a80b13) !important;
  background-color: var(--color-red-700, #a80b13) !important;
}

@media (min-width: 991px) {
  .academy-error-banner.widget--title,
  .row.widget.academy-error-banner {
    padding: 12px 24px !important; /* kill widget--title 120px pad-top */
  }
}

.academy-error-banner .widget__subtitle,
.academy-error-banner .widget__title,
.academy-error-banner p,
.academy-error-banner a,
.academy-error-banner span {
  color: #ffffff !important;
  font-family: var(--font-sans, 'FK Grotesk', system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: auto !important;
  text-align: center !important;
}

/* =========================================================================
     ACADEMY V3 — FK Grotesk Typography + Button System + Media Radius
     Mapped from POwl Foundations Library (Figma)
     ========================================================================= */

:root {
  /* ── Font families ── */
  --font-sans: 'FK Grotesk', system-ui, sans-serif;
  --font-mono: 'FK Grotesk Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ── Button box model (Figma: 48h / 12·16 pad / 8 gap / 4 radius) ── */
  --btn-height: 48px;
  --btn-pad-y: 12px;
  --btn-pad-x: 16px;
  --btn-gap: 8px;
  --btn-radius: 4px;
  --btn-font-size: 16px;

  /* ── Button colors ── */
  --btn-primary-bg: var(--color-yellow); /* Signal Yellow #feae0f */
  --btn-primary-text: var(--color-black); /* #1c1917 */
  --btn-contextual-bg: var(--color-black); /* #1c1917 */
  --btn-contextual-text: var(--color-white);
  --btn-inverse-bg: var(--color-white);
  --btn-inverse-text: var(--color-black);

  /* shared interaction states (Primary / Contextual / Secondary) */
  --btn-hover-bg: var(--color-gray-300); /* #ccc9c1 */
  --btn-hover-text: var(--color-black);
  --btn-focus-bg: var(--color-gray-300); /* #ccc9c1 (Secondary uses gray-400) */
  --btn-focus-border: var(--color-gray-500); /* #9c9890 */
  --btn-active-bg: var(--color-gray-400); /* #b9b6ad */
  --btn-active-text: var(--color-black);
  --btn-disabled-bg: var(--color-gray-200); /* #e0ddd5 */
  --btn-disabled-text: var(--color-gray-600); /* #716f67 */

  /* ── Tertiary / Text link ── */
  --link-text: var(--color-black); /* #1c1917 */
  --link-hover: var(--color-black);
  --link-focus: var(--color-gray-500); /* #9c9890 */
  --link-active: var(--color-gray-500);
  --link-disabled: var(--color-gray-300); /* #ccc9c1 */

  /* ── Section rhythm (Figma page sections) ── */
  --section-pad-y: 96px; /* space above + below a section component */
  --section-stack-gap: 64px; /* heading/body → cards/content in a vertical stack */
  --section-title-gap: 16px; /* title → subtitle within the headline */
}

@media (max-width: 767px) {
  :root {
    --section-pad-y: 56px;
    --section-stack-gap: 32px;
  }
}

/* -------------------------------------------------------------------------
     Section rhythm — 96 above/below; 64 between headline stack and content
     NOTE: .learn.dashboard .widget { padding: 0 } zeros TI widgets, so these
     need equal/higher specificity + !important to win.
     ------------------------------------------------------------------------- */
.academy-two-image-cards,
.academy-icon-cards,
.academy-single-image-cards,
.academy-four-image-cards,
.academy-two-column,
.academy-faq,
.academy-quote-block,
.academy-featured-content,
.academy-featured-content-standard,
.academy-video,
.learn.dashboard .widget.academy-two-image-cards,
.learn.dashboard .widget.academy-icon-cards,
.learn.dashboard .widget.academy-single-image-cards,
.learn.dashboard .widget.academy-four-image-cards,
.learn.dashboard .widget.academy-two-column,
.learn.dashboard .widget.academy-faq,
.learn.dashboard .widget.academy-quote-block,
.learn.dashboard .widget.academy-featured-content,
.learn.dashboard .widget.academy-featured-content-standard,
.learn.dashboard .widget.academy-video,
.learn.dashboard .widget.widget--html.academy-two-image-cards,
.learn.dashboard .widget.widget--html.academy-icon-cards,
.learn.dashboard .widget.widget--html.academy-single-image-cards,
.learn.dashboard .widget.widget--html.academy-four-image-cards,
.learn.dashboard .widget.widget--html.academy-two-column,
.learn.dashboard .widget.widget--html.academy-faq,
.learn.dashboard .widget.widget--html.academy-quote-block,
.learn.dashboard .widget.widget--html.academy-video,
.layout__content .widget.academy-two-image-cards,
.layout__content .widget.academy-icon-cards,
.layout__content .widget.academy-single-image-cards,
.layout__content .widget.academy-four-image-cards,
.layout__content .widget.academy-two-column,
.layout__content .widget.academy-faq,
.layout__content .widget.academy-quote-block,
.layout__content .widget.academy-featured-content,
.layout__content .widget.academy-featured-content-standard,
.layout__content .widget.academy-video {
  padding-top: var(--widget-pad-top, var(--section-pad-y)) !important;
  padding-bottom: var(--widget-pad-bottom, var(--section-pad-y)) !important;
  box-sizing: border-box;
}

/* widget backgrounds span the section; TI's inner wrapper owns content width.
   Exclude .learner__content — that id is reused as the course-player pane
   beside .learner__sidebar; width:100% forces it under the menu. */
#main-content:not(.learner__content) {
  width: 100%;
  max-width: none !important;
}

#main-content:not(.learner__content)
  > .ember-view:not(.widget--navbar):not(.academy-dashboard-navigation) {
  width: 100%;
  max-width: none !important;
}

#main-content:not(.learner__content)
  .widget:not(.widget--navbar):not(.academy-dashboard-navigation) {
  width: 100%;
  max-width: none !important;
  box-sizing: border-box;
}

#main-content:not(.learner__content)
  .widget:not(.widget--navbar):not(.academy-dashboard-navigation)
  > .ember-view {
  width: 100%;
  max-width: 1125px;
  margin-right: auto;
  margin-left: auto;
}

#main-content:not(.learner__content) .widget--catalog > .ember-view {
  max-width: 1440px !important;
}

#main-content:not(.learner__content) .widget--learning-path-content-hero,
#main-content:not(.learner__content)
  .widget--learning-path-content-hero
  > .ember-view {
  max-width: none !important;
}

/* Title → subtitle */
.academy-two-image-cards h3,
.academy-two-image-cards .widget__title,
.academy-icon-cards h3,
.academy-icon-cards .widget__title,
.academy-single-image-cards h3,
.academy-single-image-cards .widget__title {
  margin-bottom: var(--section-title-gap);
}

/* Headline stack → cards / media / list content */
.academy-two-image-cards p.muted,
.academy-two-image-cards .widget__subtitle,
.academy-icon-cards p.muted,
.academy-icon-cards .widget__subtitle,
.academy-single-image-cards p.muted,
.academy-single-image-cards .widget__subtitle {
  margin-bottom: var(--section-stack-gap) !important;
}

/* Title-only stacks (no subtitle) → content */
.academy-faq .widget__title,
.academy-four-image-cards:not(:has(.widget__subtitle, p.muted)) h3,
.academy-four-image-cards:not(:has(.widget__subtitle, p.muted)) .widget__title {
  margin-bottom: var(--section-stack-gap) !important;
  padding-bottom: 0 !important;
}

/* -------------------------------------------------------------------------
     Typography — map families to FK Grotesk (weights left intact so the
     intentional light display headings keep their look)
     ------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.widget__title,
.widget__subtitle,
.hero__title,
.learner-section__title,
.course__detail__header .h2 {
  font-family: var(--font-sans);
}

p,
li,
a,
span,
div,
input,
select,
textarea,
button,
.btn,
.editor-content,
.catalog-grid-item__description,
.featured-content-article-item__description {
  font-family: var(--font-sans);
}

/* Figma type scale utilities (Desktop) — apply directly on elements/widgets */
.type-h1 {
  font: 700 60px/1 var(--font-sans);
  letter-spacing: 0;
}
.type-h2 {
  font: 700 52px/1 var(--font-sans);
  letter-spacing: 0;
}
.type-h3 {
  font: 700 40px/1.2 var(--font-sans);
  letter-spacing: 0;
}
.type-h4 {
  font: 700 32px/1.2 var(--font-sans);
  letter-spacing: 0;
}
.type-h5 {
  font: 700 24px/1.33 var(--font-sans);
  letter-spacing: 0;
}
.type-body {
  font: 500 24px/1.2 var(--font-sans);
  letter-spacing: 0;
}
.type-text-link {
  font: 700 16px/1.5 var(--font-sans);
  letter-spacing: 0;
}
.type-eyebrow {
  font: 700 12px/1.5 var(--font-mono);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.type-tag {
  font: 500 14px/1.5 var(--font-mono);
  letter-spacing: 0;
}
.type-data-vis {
  font: 500 80px/1.1 var(--font-sans);
  letter-spacing: -1px;
}

/* Figma type scale utilities (Mobile) */
@media (max-width: 767px) {
  .type-h1 {
    font-size: 48px;
    line-height: 1;
  }
  .type-h2 {
    font-size: 36px;
    line-height: 1.2;
  }
  .type-h3 {
    font-size: 32px;
    line-height: 1;
  }
  .type-h4 {
    font-size: 24px;
    line-height: 1;
  }
  .type-h5 {
    font-size: 16px;
    line-height: 1.5;
  }
  .type-eyebrow {
    font-size: 12px;
    line-height: 1.33;
    letter-spacing: 1px;
  }
  .type-tag {
    font-size: 12px;
  }
  .type-data-vis {
    font-size: 56px;
    line-height: 1.29;
  }
}

/* -------------------------------------------------------------------------
     Content ribbons (TI catalog / featured labels on tile images)
     Figma Desktop/Misc/Eyebrow: FK Grotesk Mono Bold 12 / 150% / +2, uppercase
     Typography only — leave background/text color to TI admin / inline styles.
     ------------------------------------------------------------------------- */
.ribbon,
.catalog-grid-item__ribbon,
.featured-content-article-item__ribbon,
.featured-content-multi-carousel-item__ribbon,
[class*='__ribbon'],
.catalog-grid-item .ribbon,
.featured-content-article-item .ribbon,
.featured-content-block-grid .ribbon {
  border: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family:
    'FK Grotesk Mono', ui-monospace, 'SFMono-Regular', monospace !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  padding: 4px 8px !important;
}

.ribbon *,
.catalog-grid-item__ribbon *,
.featured-content-article-item__ribbon *,
.featured-content-multi-carousel-item__ribbon *,
[class*='__ribbon'] *,
.catalog-grid-item .ribbon *,
.featured-content-article-item .ribbon *,
.featured-content-block-grid .ribbon * {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

@media (max-width: 767px) {
  .ribbon,
  .catalog-grid-item__ribbon,
  .featured-content-article-item__ribbon,
  .featured-content-multi-carousel-item__ribbon,
  [class*='__ribbon'],
  .catalog-grid-item .ribbon,
  .featured-content-article-item .ribbon,
  .featured-content-block-grid .ribbon {
    line-height: 1.33 !important;
    letter-spacing: 1px !important;
  }
}

/* -------------------------------------------------------------------------
     Modifier: button-primary
     Add on a widget/section (e.g. academy-two-column button-primary) to
     promote Contextual Primary (black) CTAs → Signal Yellow Primary.
     Remaps the contextual tokens so any CTA using --btn-contextual-* flips.
     ------------------------------------------------------------------------- */
.button-primary {
  --btn-contextual-bg: var(--btn-primary-bg);
  --btn-contextual-text: var(--btn-primary-text);
}

/* White arrows on contextual CTAs → black to match yellow + black text */
.button-primary a::after,
.button-primary .btn::after,
.button-primary .widget__cta a::after,
.button-primary .widget__cta .btn::after,
.button-primary.academy-two-image-cards .row .columns a::after,
.button-primary.academy-two-column .row .columns a::after,
.button-primary.academy-video .widget__cta .btn::after,
.button-primary.academy-video .widget__cta a.btn::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M9.93992 2.66699L8.99325 3.60699L12.5866 7.20033H1.33325V8.53366H12.5533L8.99325 12.0937L9.93992 13.0403L14.6533 8.32699V7.38033L9.93992 2.66699Z' fill='%231C1917'/></svg>") !important;
}

/* -------------------------------------------------------------------------
     Button system — canonical reusable classes (Academy V3)
     Use: <a class="academy-btn academy-btn--primary">…</a>
          add academy-btn--inverse for buttons over media / dark backgrounds
     ------------------------------------------------------------------------- */
.academy-btn,
.academy-btn--primary,
.academy-btn--secondary,
.academy-btn--contextual-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-height);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--btn-font-size);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.academy-btn img,
.academy-btn svg,
.academy-btn--primary svg,
.academy-btn--secondary svg,
.academy-btn--contextual-primary svg {
  width: 16px;
  height: 16px;
}

/* Primary — Signal Yellow */
.academy-btn--primary {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.academy-btn--primary:hover {
  background-color: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
}
.academy-btn--primary:focus-visible {
  background-color: var(--btn-focus-bg);
  border: 2px solid var(--btn-focus-border);
  color: var(--btn-hover-text);
  outline: none;
}
.academy-btn--primary:active {
  background-color: var(--btn-active-bg);
  border-color: var(--btn-active-bg);
  color: var(--btn-active-text);
}
.academy-btn--primary[disabled],
.academy-btn--primary.is-disabled {
  background-color: var(--btn-disabled-bg);
  border-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  cursor: not-allowed;
}

/* Contextual Primary — solid black */
.academy-btn--contextual-primary {
  background-color: var(--btn-contextual-bg);
  border-color: var(--btn-contextual-bg);
  color: var(--btn-contextual-text);
}
.academy-btn--contextual-primary:hover {
  background-color: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
}
.academy-btn--contextual-primary:focus-visible {
  background-color: var(--btn-focus-bg);
  border: 2px solid var(--btn-focus-border);
  color: var(--btn-hover-text);
  outline: none;
}
.academy-btn--contextual-primary:active {
  background-color: var(--btn-active-bg);
  border-color: var(--btn-active-bg);
  color: var(--btn-active-text);
}
.academy-btn--contextual-primary[disabled],
.academy-btn--contextual-primary.is-disabled {
  background-color: var(--btn-disabled-bg);
  border-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  cursor: not-allowed;
}

/* Secondary — outlined */
.academy-btn--secondary {
  background-color: transparent;
  border: 1px solid var(--color-black);
  color: var(--color-black);
}
.academy-btn--secondary:hover {
  background-color: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
}
.academy-btn--secondary:focus-visible {
  background-color: var(--btn-active-bg);
  border: 2px solid var(--btn-focus-border);
  color: var(--btn-hover-text);
  outline: none;
}
.academy-btn--secondary:active {
  background-color: var(--btn-active-bg);
  border-color: var(--btn-active-bg);
  color: var(--btn-active-text);
}
.academy-btn--secondary[disabled],
.academy-btn--secondary.is-disabled {
  background-color: var(--btn-disabled-bg);
  border-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  cursor: not-allowed;
}

/* Tertiary / Text link — inline, no chrome */
.academy-btn--tertiary {
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--btn-font-size);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--link-text);
  cursor: pointer;
  transition: color 0.2s ease;
}
.academy-btn--tertiary svg,
.academy-btn--tertiary img {
  width: 16px;
  height: 16px;
}
.academy-btn--tertiary:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
.academy-btn--tertiary:focus-visible {
  color: var(--link-focus);
  text-decoration: underline;
  outline: none;
}
.academy-btn--tertiary:active {
  color: var(--link-active);
  text-decoration: none;
}
.academy-btn--tertiary[disabled],
.academy-btn--tertiary.is-disabled {
  color: var(--link-disabled);
  cursor: not-allowed;
  text-decoration: none;
}

/* Inverse variants — for buttons over media / dark backgrounds */
.academy-btn--inverse.academy-btn--contextual-primary {
  background-color: var(--btn-inverse-bg);
  border-color: var(--btn-inverse-bg);
  color: var(--btn-inverse-text);
}
.academy-btn--inverse.academy-btn--secondary {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}
.academy-btn--inverse.academy-btn--tertiary {
  color: var(--color-white);
}
.academy-btn--inverse.academy-btn--tertiary:hover {
  color: var(--color-white);
  text-decoration: underline;
}
/* inverse hover/focus/active reuse the shared gray treatment */
.academy-btn--inverse.academy-btn--contextual-primary:hover,
.academy-btn--inverse.academy-btn--secondary:hover {
  background-color: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
  color: var(--btn-hover-text);
}
.academy-btn--inverse.academy-btn--contextual-primary:active,
.academy-btn--inverse.academy-btn--secondary:active {
  background-color: var(--btn-active-bg);
  border-color: var(--btn-active-bg);
  color: var(--btn-active-text);
}

/* -------------------------------------------------------------------------
     Retrofit existing Thought Industries buttons to the new system
     ------------------------------------------------------------------------- */

/* Solid primary CTAs → Figma Primary (Signal Yellow, 4px, states) */
.hero .btn.btn--primary,
.course__detail__container .btn.btn--primary,
.academy-activity .btn.btn--primary,
.academy-learn-more .btn.btn--primary,
.widget--course-purchase.widget--course-purchase_standard .btn--primary,
.widget--learning-path-purchase.widget--learning-path-purchase_standard .btn--primary,
.widget--learning-path-purchase .btn.btn--primary,
.dashboard-access-list-item .btn.btn--primary,
#lessonRightSidebar .btn.btn--primary {
  background-color: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border-radius: var(--btn-radius) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.hero .btn.btn--primary:hover,
.course__detail__container .btn.btn--primary:hover,
.academy-activity .btn.btn--primary:hover,
.academy-learn-more .btn.btn--primary:hover,
.widget--course-purchase.widget--course-purchase_standard .btn--primary:hover,
.widget--learning-path-purchase.widget--learning-path-purchase_standard .btn--primary:hover,
.widget--learning-path-purchase .btn.btn--primary:hover,
.dashboard-access-list-item .btn.btn--primary:hover,
#lessonRightSidebar .btn.btn--primary:hover {
  background-color: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text) !important;
}
.hero .btn.btn--primary:active,
.course__detail__container .btn.btn--primary:active,
.academy-activity .btn.btn--primary:active,
.academy-learn-more .btn.btn--primary:active,
.widget--course-purchase.widget--course-purchase_standard .btn--primary:active,
.widget--learning-path-purchase.widget--learning-path-purchase_standard .btn--primary:active,
.widget--learning-path-purchase .btn.btn--primary:active,
.dashboard-access-list-item .btn.btn--primary:active,
#lessonRightSidebar .btn.btn--primary:active {
  background-color: var(--btn-active-bg) !important;
  border-color: var(--btn-active-bg) !important;
  color: var(--btn-active-text) !important;
}

/* Header nav CTA → Primary (Signal Yellow). Hero search is styled separately above. */
.header__inner .nav--top li a {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
}
.header__inner .nav--top li a:hover {
  background-color: var(--btn-active-bg) !important;
  color: var(--btn-active-text) !important;
}

/* Text-link CTAs → Figma Tertiary (black bold, underline on hover).
     NOTE: two-image-cards + two-column CTAs are Contextual Primary (styled above).
     NOTE: .learning-content__back-button sits on the dark hero → white (styled above). */
.academy-single-image-cards .row .columns a,
.academy-catalog .catalog-grid-item__cta-container .btn--primary,
.academy-featured-content-standard
  .catalog-grid-item__cta-container
  .btn--primary,
.academy-activity .dashboard-access-list-view-detail-page,
.learning-path-detail-milestone-item__cta,
.bookmark-content .btn--primary,
.bookmark-content .btn--primary:hover {
  color: var(--link-text) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.academy-single-image-cards .row .columns a:hover,
.academy-catalog .catalog-grid-item__cta-container .btn--primary:hover,
.academy-featured-content-standard
  .catalog-grid-item__cta-container
  .btn--primary:hover,
.academy-activity .dashboard-access-list-view-detail-page:hover,
.learning-path-detail-milestone-item__cta:hover {
  color: var(--link-hover) !important;
  text-decoration: underline !important;
}

/* Text links (nav / subnav / global): stay black on hover, underline only.
     Excludes .nav--top CTA (Primary button) and footer (white on gray-700). */
.header__inner .top-bar-section ul li a,
.header__inner .top-bar-section ul li .dropdown a,
.academy-dashboard-navigation .top-bar-section ul li a,
.academy-dashboard-navigation .top-bar-section ul li .dropdown a,
.global-nav__container .nav--global-links a,
.navigation-bar .top-bar-section ul li > a,
.top-bar-section .dropdown li a {
  color: var(--color-black) !important;
  background: none !important;
}

.header__inner .top-bar-section ul li a:hover,
.header__inner .top-bar-section ul li a:focus,
.header__inner .top-bar-section ul li:hover > a,
.header__inner .top-bar-section ul li .dropdown a:hover,
.academy-dashboard-navigation .top-bar-section ul li a:hover,
.academy-dashboard-navigation .top-bar-section ul li a:focus,
.academy-dashboard-navigation .top-bar-section ul li:hover > a,
.academy-dashboard-navigation .top-bar-section ul li .dropdown a:hover,
.global-nav__container .nav--global-links a:hover,
.navigation-bar .top-bar-section li:not(.has-form) a:not(.button):hover,
.navigation-bar .top-bar-section ul li:hover:not(.has-form) > a,
.navigation-bar .top-bar-section li:not(.has-form) a:not(.button):focus,
.top-bar-section .dropdown li a:hover {
  color: var(--color-black) !important;
  text-decoration: underline !important;
  background: none !important;
}

.navigation-bar .dropdown li {
  box-shadow: none !important;
}

/* Image-mode / dark card text links stay white (inverse tertiary) */
.academy-four-image-cards.image-layout .row .columns a,
.academy-four-image-cards.image-layout.text-white .row .columns a,
.academy-four-image-cards.image-layout.text-ash .row .columns a,
.academy-four-image-cards.image-layout.text-snow .row .columns a {
  color: var(--color-white) !important;
}

/* -------------------------------------------------------------------------
     Media images (non-icon) → 4px radius
     Text-with-media, image cards, catalog/featured media, course + milestone
     assets. Icons are excluded.
     ------------------------------------------------------------------------- */
.catalog-grid-item__asset,
.featured-content-article-item__asset,
.academy-two-image-cards .row .columns img,
.academy-single-image-cards .row .columns img,
.academy-two-column .row .columns img,
.academy-four-image-cards.image-layout .row .columns img,
.academy-catalog .catalog-item,
.academy-catalog .catalog-grid-item__asset-container,
.academy-featured-content .featured-content-article-item img,
.academy-featured-content-standard .catalog-grid-item__asset-container,
.learning-path-detail-milestone-item__asset,
.academy-activity .dashboard-access-list-item img,
.academy-video .video__frame.wistia_embed_initialized {
  border-radius: 4px !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Course detail hero — full 4px radius (Figma 4525:2759) */
.course__detail__container .course__detail__asset img {
  border-radius: 4px !important;
}

/* -------------------------------------------------------------------------
     Authoritative button SHAPE — force Figma 4px radius on every button,
     overriding all legacy pill radii (3.125rem / 3.25rem / 40px / 24px …).
     Search FIELDS (.search-bar-widget / .catalog-filters / inputs) are NOT
     .btn, so their rounded pill shape is preserved.
     ------------------------------------------------------------------------- */
.btn,
a.btn,
.btn--primary,
.btn--secondary,
.btn--tertiary,
.header__inner .nav--top li a,
.header__inner .nav--top li a:hover {
  border-radius: var(--btn-radius) !important;
}

/* Legacy standalone search widget keeps pill chrome — NOT the hero search */
.search-bar-widget .btn.btn--primary {
  border-radius: 50px !important;
}
.academy-header-search .search-bar-widget .btn.btn--primary,
.academy-header-search .btn.btn--primary,
.academy-header-search .btn {
  border-radius: 4px !important;
}

/* Learning-path outline CTA → Secondary (black outline, no legacy blue) */
.learning-path-timeline-milestone-item .btn.btn--primary {
  background: transparent !important;
  color: var(--color-black) !important;
  border: 1px solid var(--color-black) !important;
  border-radius: var(--btn-radius) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
}
.learning-path-timeline-milestone-item .btn.btn--primary:hover {
  background: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text) !important;
}

/* -------------------------------------------------------------------------
     Text-link arrow icons — replace legacy blue-circle arrows with the new
     Figma arrow (black on light backgrounds, white on dark/media). The old
     ::after/::before SVGs relied on an exact-size image, so we also set
     background-size/repeat.
     ------------------------------------------------------------------------- */

/* Light-background text links → new black arrow
     (two-image-cards + two-column use Contextual Primary arrows above) */
.academy-single-image-cards .row .columns a::after,
.academy-catalog .catalog-grid-item__cta-container .btn--primary::after,
.academy-featured-content-standard
  .catalog-grid-item__cta-container
  .btn--primary::after,
.academy-activity .dashboard-access-list-view-detail-page::after,
.learning-path-detail-milestone-item__cta .icon-upright::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M9.93992 2.66699L8.99325 3.60699L12.5866 7.20033H1.33325V8.53366H12.5533L8.99325 12.0937L9.93992 13.0403L14.6533 8.32699V7.38033L9.93992 2.66699Z' fill='%231C1917'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Four-image cards IMAGE mode (dark/media + light-text) → white arrow */
.academy-four-image-cards.image-layout .row .columns a::after,
.academy-four-image-cards.image-layout.text-white .row .columns a::after,
.academy-four-image-cards.image-layout.text-ash .row .columns a::after,
.academy-four-image-cards.image-layout.text-snow .row .columns a::after,
.academy-four-image-cards.image-layout.text-blue .row .columns a::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M9.93992 2.66699L8.99325 3.60699L12.5866 7.20033H1.33325V8.53366H12.5533L8.99325 12.0937L9.93992 13.0403L14.6533 8.32699V7.38033L9.93992 2.66699Z' fill='%23FFFFFF'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Four-image cards IMAGE mode on light backgrounds (dark text) → black arrow */
.academy-four-image-cards.image-layout.text-charcoal .row .columns a::after,
.academy-four-image-cards.image-layout.text-navy .row .columns a::after,
.academy-four-image-cards.image-layout.text-black .row .columns a::after,
.academy-four-image-cards.image-layout.text-variant-blue
  .row
  .columns
  a::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M9.93992 2.66699L8.99325 3.60699L12.5866 7.20033H1.33325V8.53366H12.5533L8.99325 12.0937L9.93992 13.0403L14.6533 8.32699V7.38033L9.93992 2.66699Z' fill='%231C1917'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* -------------------------------------------------------------------------
     Force FK Grotesk over the Thought Industries base theme (which sets
     "Inter" on titles/body with higher specificity). Scoped to text elements
     only — NOT icons (i / [class*=icon]) or icon pseudo-elements — so glyph
     fonts (ti-icons, etc.) are untouched.
     ------------------------------------------------------------------------- */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
p,
a,
ul,
ol,
li,
blockquote,
label,
strong,
em,
small,
th,
td,
input,
select,
textarea,
button,
.btn,
.btn--primary,
.btn--secondary,
.btn--tertiary,
.widget__title,
.widget__subtitle,
.widget__alt-title__container h3,
.hero__title,
.learner-section__title,
.company__school-name,
.editor-content,
.testimonial-quote__text,
.testimonial-quote__author-name,
.testimonial-quote__author-description,
[class*='__title'],
[class*='__subtitle'],
[class*='__description'],
[class*='__cta'],
[class*='__label'],
[class*='__name'],
[class*='__header'],
[class*='__text'] {
  font-family: 'FK Grotesk', system-ui, sans-serif !important;
}

/* Monospaced utility text (eyebrows/tags/ribbons) keeps FK Grotesk Mono */
.type-eyebrow,
.type-tag,
.ribbon,
.catalog-grid-item__ribbon,
.featured-content-article-item__ribbon,
[class*='__ribbon'] {
  font-family:
    'FK Grotesk Mono', ui-monospace, 'SFMono-Regular', monospace !important;
}

/* =========================================================================
     HEADLINE SCALE — map every heading-like element to Figma H1–H5
     Desktop: H1 60/1 Bold · H2 52/1 Bold · H3 40/1.2 Bold · H4 32/1.2 Bold · H5 24/1.33 Bold
     Mobile:  H1 48/1 · H2 36/1.2 · H3 32/1 · H4 24/1 · H5 16/1.5  (all Bold)
     ========================================================================= */

:root {
  --type-h1-size: 60px;
  --type-h1-lh: 1;
  --type-h2-size: 52px;
  --type-h2-lh: 1;
  --type-h3-size: 40px;
  --type-h3-lh: 1.2;
  --type-h4-size: 32px;
  --type-h4-lh: 1.2;
  --type-h5-size: 24px;
  --type-h5-lh: 1.33;
  --type-heading-weight: 700;
  --type-heading-tracking: 0;
}

@media (max-width: 767px) {
  :root {
    --type-h1-size: 48px;
    --type-h1-lh: 1;
    --type-h2-size: 36px;
    --type-h2-lh: 1.2;
    --type-h3-size: 32px;
    --type-h3-lh: 1;
    --type-h4-size: 24px;
    --type-h4-lh: 1;
    --type-h5-size: 16px;
    --type-h5-lh: 1.5;
  }
}

/* Shared heading properties (Bold, no tracking) */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.widget__title,
.widget__alt-title__container h3,
.hero__title,
.learner-section__title,
.catalog-grid-item__title,
.featured-content-article-item__title,
.learning-path-milestone-item__title,
.learning-path-detail-milestone-item__title,
.dashboard-access__header,
.dashboard-access-list-item-expander__title,
.course__detail__header .h2,
.course__detail__container .course__detail__content .h2,
.course__detail__sidebar .course__related__title,
.course__detail__container .tab-title a,
.course__detail__container .tab-title.active a,
.course__detail__container .learning-path-detail-milestone-list h3,
.course__detail__container .learning-path-detail-milestone-list li,
.dash3ColLnk .medium-4 .editor-content h4,
.cpc3ColFct .catalog-grid-item__title,
.session .session__container .session__form .text-centered::before {
  font-weight: var(--type-heading-weight) !important;
  letter-spacing: var(--type-heading-tracking) !important;
  font-style: normal !important;
}

/* —— H1: page / primary hero titles —— */
h1,
.h1,
.academy-header-content .widget__title,
.hero .hero__caption .hero__title,
.academy-single-image-cards h3 {
  font-size: var(--type-h1-size) !important;
  line-height: var(--type-h1-lh) !important;
  font-weight: var(--type-heading-weight) !important;
  letter-spacing: var(--type-heading-tracking) !important;
}

/* —— H2: section titles —— */
h2,
.h2:not(.widget__title),
.widget__title,
.widget__alt-title__container h3,
.academy-header-content--secondary .widget__title,
.academy-two-image-cards h3,
.academy-two-image-cards .widget__title,
.academy-icon-cards h3,
.academy-icon-cards .widget__title,
.academy-four-image-cards h3,
.academy-video .widget__title,
.learner-section__title {
  font-size: var(--type-h2-size) !important;
  line-height: var(--type-h2-lh) !important;
  font-weight: var(--type-heading-weight) !important;
  letter-spacing: var(--type-heading-tracking) !important;
}

/* FAQ section title is Figma-specific 64px (not H2) — see .academy-faq block */

/* Page hero title wins over generic .widget__title / .h2 combo
     (e.g. <h1 class="h2 widget__title">) */
.academy-header-content .widget__title,
.academy-header-content h1.widget__title,
.academy-header-content h1.h2.widget__title {
  font-size: var(--type-h1-size) !important;
  line-height: var(--type-h1-lh) !important;
}

.academy-header-content .widget__title {
  padding-top: 0px;
}

.widget__title:not(:has(~ .widget__subtitle)) {
  margin-bottom: var(--section-stack-gap);
}

/* —— H3: mid-level headings —— */
h3,
.h3,
.academy-two-column .row .columns h2,
.course__detail__container .learning-path-detail-milestone-list h3,
.course__detail__container .learning-path-detail-milestone-list li,
.dashboard-access__header {
  font-size: var(--type-h3-size) !important;
  line-height: var(--type-h3-lh) !important;
  font-weight: var(--type-heading-weight) !important;
  letter-spacing: var(--type-heading-tracking) !important;
}

/* —— H4 —— */
h4,
.h4,
.hero .hero__caption .h4,
.course__detail__header .h2,
.course__detail__container .course__detail__content .h2 {
  font-size: var(--type-h4-size) !important;
  line-height: var(--type-h4-lh) !important;
  font-weight: var(--type-heading-weight) !important;
  letter-spacing: var(--type-heading-tracking) !important;
}

/* —— H5: card / list / FAQ titles —— */
h5,
h6,
.h5,
.h6,
.catalog-grid-item__title,
.featured-content-article-item__title,
.academy-two-image-cards .row .columns h4,
.academy-icon-cards .row .columns h4,
.academy-single-image-cards .row .columns h4,
.academy-four-image-cards h4,
.academy-catalog .catalog-grid-item__title,
.academy-featured-content .featured-content-article-item__title,
.academy-featured-content-standard .catalog-grid-item__title,
.dash3ColLnk .medium-4 .editor-content h4,
.cpc3ColFct .catalog-grid-item__title,
.course__detail__sidebar .course__related__title,
.course__detail__container .tab-title a,
.course__detail__container .tab-title.active a,
.learning-path-timeline-milestone-item .learning-path-milestone-item__title,
.learning-path-detail-milestone-item__title,
.dashboard-access-list-item-expander__title,
.session .session__container .session__form .text-centered::before {
  font-size: var(--type-h5-size) !important;
  line-height: var(--type-h5-lh) !important;
  font-weight: var(--type-heading-weight) !important;
  letter-spacing: var(--type-heading-tracking) !important;
}

/* Learning path course type — demote after headline scale so it wins */
.learning-path-timeline-milestone-item .learning-path-milestone-item__info,
.learning-path-timeline-milestone-item
  h5.learning-path-milestone-item__info,
.learning-path-timeline-milestone-item
  .learning-path-milestone-item__info.h5,
.learning-path-timeline-milestone-item .learning-path-milestone-item__info h5,
.learning-path-timeline-milestone-item .learning-path-milestone-item__info .h5,
.learning-path-timeline-milestone-item
  .learning-path-milestone-item__info
  * {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--color-black) !important;
}

.learning-path-timeline-milestone-item .learning-path-milestone-item__info {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  white-space: nowrap !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}

.learning-path-timeline-milestone-item .learning-path-milestone-item__info h5,
.learning-path-timeline-milestone-item .learning-path-milestone-item__info .h5,
.learning-path-timeline-milestone-item .learning-path-milestone-item__info * {
  display: inline !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Kill legacy hero / CPC size overrides so the scale above wins */
@media (min-width: 767px) {
  .hero .hero__caption .hero__title,
  .cpcHero .hero .hero__caption .hero__title {
    font-size: var(--type-h1-size) !important;
    line-height: var(--type-h1-lh) !important;
  }
}
@media (min-width: 991px) {
  .hero .hero__caption .hero__title {
    font-size: var(--type-h1-size) !important;
    line-height: var(--type-h1-lh) !important;
  }
}
@media (max-width: 1439px) {
  .cpcHero .hero .hero__caption .hero__title {
    font-size: var(--type-h1-size) !important;
    line-height: var(--type-h1-lh) !important;
  }
  .cpc3ColFct .catalog-grid-item__title {
    font-size: var(--type-h5-size) !important;
  }
}

/* =========================================================================
     NAVIGATION DROPDOWN MENUS — ul.dropdown submenus in the microsite header,
     the dashboard nav and the legacy navigation bar.
     The base theme renders these as a dark panel with white uppercase links.
     The nav text pass above already forces those links black, so the panel
     itself has to become light or the labels disappear against it.
     ========================================================================= */

/* —— Panel —— */
.header__inner .top-bar-section ul li .dropdown,
.academy-dashboard-navigation .top-bar-section ul li .dropdown,
.navigation-bar .top-bar-section ul li .dropdown,
.top-bar-section ul li .dropdown {
  background: var(--color-white) !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: var(--btn-radius) !important;
  box-shadow: 0 8px 24px rgba(28, 25, 23, 0.12) !important;
  padding: 0.5rem 0 !important;
  min-width: 220px;
  width: auto;
  z-index: 100;
}

.header__inner .top-bar-section ul li .dropdown li,
.academy-dashboard-navigation .top-bar-section ul li .dropdown li,
.navigation-bar .top-bar-section ul li .dropdown li,
.top-bar-section ul li .dropdown li {
  background: transparent !important;
  border: 0 !important;
  width: 100%;
}

/* —— Items —— */
.header__inner .top-bar-section ul li .dropdown li a,
.academy-dashboard-navigation .top-bar-section ul li .dropdown li a,
.navigation-bar .top-bar-section ul li .dropdown li a,
.top-bar-section ul li .dropdown li a {
  display: block;
  padding: 0.625rem 1rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 150% !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-black) !important;
  background: none !important;
  border: 0 !important;
  white-space: nowrap;
}

.header__inner .top-bar-section ul li .dropdown li a:hover,
.header__inner .top-bar-section ul li .dropdown li a:focus,
.academy-dashboard-navigation .top-bar-section ul li .dropdown li:hover,
.academy-dashboard-navigation .top-bar-section ul li .dropdown li:focus-within,
.academy-dashboard-navigation .top-bar-section ul li .dropdown li:hover > a,
.academy-dashboard-navigation .top-bar-section ul li .dropdown li a:hover,
.academy-dashboard-navigation .top-bar-section ul li .dropdown li a:focus,
.navigation-bar .top-bar-section ul li .dropdown li a:hover,
.navigation-bar .top-bar-section ul li .dropdown li a:focus,
.top-bar-section ul li .dropdown li a:hover,
.top-bar-section ul li .dropdown li a:focus {
  color: var(--color-black) !important;
  background: var(--color-gray-50) !important;
  text-decoration: underline !important;
}

.header__inner .top-bar-section ul li .dropdown li.active > a,
.academy-dashboard-navigation .top-bar-section ul li .dropdown li.active > a,
.navigation-bar .top-bar-section ul li .dropdown li.active > a,
.top-bar-section ul li .dropdown li.active > a {
  font-weight: 700 !important;
  color: var(--color-black) !important;
  background: var(--color-gray-50) !important;
}

/* —— Group labels and dividers —— */
.header__inner .top-bar-section ul li .dropdown label,
.academy-dashboard-navigation .top-bar-section ul li .dropdown label,
.navigation-bar .top-bar-section ul li .dropdown label,
.top-bar-section ul li .dropdown label {
  padding: 0.5rem 1rem !important;
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 150% !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--color-gray-600) !important;
  background: none !important;
}

.header__inner .top-bar-section ul li .dropdown li.divider,
.academy-dashboard-navigation .top-bar-section ul li .dropdown li.divider,
.navigation-bar .top-bar-section ul li .dropdown li.divider,
.top-bar-section ul li .dropdown li.divider {
  height: 1px;
  margin: 0.5rem 0;
  border-bottom: 1px solid var(--color-gray-100) !important;
}

/* —— Parent caret: flex + in-flow chevron (absolute + padding:0 was overlapping) —— */
.header__inner .top-bar-section ul li.has-dropdown > a,
.header--microsite .header__inner .top-bar-section ul li.has-dropdown > a,
.academy-dashboard-navigation .top-bar-section ul li.navigation-item.has-dropdown > a,
.academy-dashboard-navigation .top-bar-section ul li.has-dropdown > a,
.navigation-bar .top-bar-section ul li.has-dropdown > a,
.top-bar-section ul li.navigation-item.has-dropdown > a,
.top-bar-section ul li.has-dropdown > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-right: 0 !important;
}

/* —— Parent caret: Figma chevron in normal flow after the label —— */
.header__inner .top-bar-section ul li.has-dropdown > a::after,
.header--microsite .header__inner .top-bar-section ul li.has-dropdown > a::after,
.academy-dashboard-navigation .top-bar-section ul li.navigation-item.has-dropdown > a::after,
.academy-dashboard-navigation .top-bar-section ul li.has-dropdown > a::after,
.navigation-bar .top-bar-section ul li.has-dropdown > a::after,
.top-bar-section ul li.navigation-item.has-dropdown > a::after,
.top-bar-section ul li.has-dropdown > a::after {
  border: 0 !important;
  content: '' !important;
  display: inline-block !important;
  position: static !important; /* not absolute — sits after text via flex gap */
  top: auto !important;
  right: auto !important;
  left: auto !important;
  float: none !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 12px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M2.5 4.5L6 8L9.5 4.5' stroke='%231C1917' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

@media (max-width: 767px) {
  /* Full-width accordion panel — drop the floating-card chrome */
  .header__inner .top-bar-section ul li .dropdown,
  .academy-dashboard-navigation .top-bar-section ul li .dropdown,
  .navigation-bar .top-bar-section ul li .dropdown,
  .top-bar-section ul li .dropdown {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    background: var(--color-gray-50) !important;
  }

  .header__inner .top-bar-section ul li .dropdown li a,
  .academy-dashboard-navigation .top-bar-section ul li .dropdown li a,
  .navigation-bar .top-bar-section ul li .dropdown li a,
  .top-bar-section ul li .dropdown li a {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    white-space: normal;
  }

  .header__inner .top-bar-section ul li .dropdown li a:hover,
  .header__inner .top-bar-section ul li .dropdown li a:focus,
  .academy-dashboard-navigation .top-bar-section ul li .dropdown li a:hover,
  .academy-dashboard-navigation .top-bar-section ul li .dropdown li a:focus,
  .navigation-bar .top-bar-section ul li .dropdown li a:hover,
  .navigation-bar .top-bar-section ul li .dropdown li a:focus,
  .top-bar-section ul li .dropdown li a:hover,
  .top-bar-section ul li .dropdown li a:focus {
    background: var(--color-gray-100) !important;
  }

  /* Drill-in "back" row the theme injects at the top of each mobile panel */
  .top-bar-section ul li .dropdown li.title.back h5 a,
  .top-bar-section ul li .dropdown li.title h5 a {
    padding: 0.75rem 1.5rem !important;
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    color: var(--color-black) !important;
    background: none !important;
  }

  /* Drill-in affordance points right, not down */
  .header__inner .top-bar-section ul li.has-dropdown > a::after,
  .academy-dashboard-navigation .top-bar-section ul li.has-dropdown > a::after,
  .navigation-bar .top-bar-section ul li.has-dropdown > a::after,
  .top-bar-section ul li.has-dropdown > a::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M4.5 2.5L8 6L4.5 9.5' stroke='%231C1917' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  }
}

/* =========================================================================
     SIGN-IN PAGE — /learn/sign_in
     Supersedes the earlier "For Sign In page" block; that one predates the
     button + type systems and the theme's legacy blue still wins on parts of
     it, so everything visual is re-declared here at full strength.
     ========================================================================= */

.session {
  background-color: var(--color-gray-50);
}

.session .session__container {
  background: var(--color-white) !important;
  border: 1px solid var(--color-gray-200) !important;
  border-radius: var(--btn-radius) !important;
  box-shadow: none !important;
  padding: 48px 32px !important;
  margin-top: 64px;
  margin-bottom: 64px;
  box-sizing: border-box;
}

/* Logo is marked up as .btn.btn--link — strip the button chrome */
.session .session__container .company__beta-logo,
.session .session__container a.btn.btn--link.company__beta-logo {
  display: inline-block;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  min-height: 0 !important;
  line-height: 1 !important;
}

.session .session__container .company__beta-logo img {
  max-height: 40px;
  width: auto;
}

/* —— Headline stack (theme h1/subtitle are hidden; copy lives in ::before /
     ::after on .text-centered — see the earlier sign-in block) —— */
.session .session__container .session__form .text-centered {
  padding: 0 0 32px !important;
}

.session .session__container .session__form .text-centered::before {
  color: var(--color-black) !important;
  font-family: var(--font-sans) !important;
  text-transform: none !important;
}

.session .session__container .session__form .text-centered::after {
  margin-top: 8px;
  color: var(--color-gray-600) !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-transform: none !important;
}

/* —— Login route buttons —— */
.session .session__form .loginLnks {
  width: 80%;
  margin: 0 auto 32px !important;
}

.session .session__form .loginLnks .lnk,
.session .session__form .loginLnks .emplnk {
  width: 100% !important;
  margin: 0 0 12px !important;
}

/* Top route (Customer Academy Login) → Contextual Primary (black) */
.session .session__form .loginLnks .lnk a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  background-color: var(--btn-contextual-bg) !important;
  border: 1px solid var(--btn-contextual-bg) !important;
  border-radius: var(--btn-radius) !important;
  color: var(--btn-contextual-text) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-transform: none !important;
  text-decoration: none !important;
}

.session .session__form .loginLnks .lnk a:hover {
  background-color: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text) !important;
  text-decoration: none !important;
}

.session .session__form .loginLnks .lnk a:focus {
  background-color: var(--btn-focus-bg) !important;
  border-color: var(--btn-focus-border) !important;
  color: var(--btn-hover-text) !important;
}

.session .session__form .loginLnks .lnk a:active {
  background-color: var(--btn-active-bg) !important;
  border-color: var(--btn-active-bg) !important;
  color: var(--btn-active-text) !important;
}

/* Second route (Installation Technician) → Secondary, so the two stacked
     CTAs read as a hierarchy rather than two equal-weight yellow blocks */
.session .session__form .loginLnks .lnk:nth-of-type(2) a {
  background-color: transparent !important;
  border: 1px solid var(--color-black) !important;
  color: var(--color-black) !important;
}

.session .session__form .loginLnks .lnk:nth-of-type(2) a:hover {
  background-color: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text) !important;
}

.session .session__form .loginLnks .lnk:nth-of-type(2) a:active {
  background-color: var(--btn-active-bg) !important;
  border-color: var(--btn-active-bg) !important;
  color: var(--btn-active-text) !important;
}

/* Plain-text employee link variant */
.session .session__form .loginLnks .emplnk a {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--link-text) !important;
  text-transform: none !important;
  text-decoration: none !important;
}

.session .session__form .loginLnks .emplnk a:hover {
  color: var(--link-hover) !important;
  text-decoration: underline !important;
}

/* —— Fields ——
     Padding and label positioning are left to the theme: .field__label is a
     float-on-focus label living inside the input box, so changing the box
     model here would collide with it. */
.session .session__form .field {
  width: 80%;
  margin: 0 auto 16px !important;
  text-align: left;
}

.session .session__form .field__input-wrapper {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.session .session__form .field__label {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-gray-600) !important;
}

.session .session__form .field__label .red-asterisk,
.session .session__form .red-asterisk {
  color: var(--color-red-500) !important;
}

.session .session__form .field__input,
.session .session__form input[type='email'],
.session .session__form input[type='password'],
.session .session__form input[type='text'] {
  width: 100%;
  background: var(--color-white) !important;
  border: 1px solid var(--color-gray-300) !important;
  border-radius: var(--btn-radius) !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--color-black) !important;
}

.session .session__form .field__input::placeholder,
.session .session__form input::placeholder {
  color: var(--color-gray-500) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  opacity: 1;
}

.session .session__form .field__input:focus,
.session .session__form input[type='email']:focus,
.session .session__form input[type='password']:focus,
.session .session__form input[type='text']:focus {
  border-color: var(--color-black) !important;
  box-shadow: 0 0 0 3px rgba(254, 174, 15, 0.35) !important;
  outline: none !important;
}

/* Chrome paints its own pale-blue fill over autofilled inputs */
.session .session__form input:-webkit-autofill,
.session .session__form input:-webkit-autofill:hover,
.session .session__form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-white) inset !important;
  -webkit-text-fill-color: var(--color-black) !important;
  font-family: var(--font-sans) !important;
}

/* —— Submit —— */
.session .session__form input[type='submit'],
.session .session__form input[type='submit'].btn,
.session .session__form .btn.btn--primary,
.session .session__form .btn.btn--large.btn--primary {
  display: block !important;
  float: none !important;
  width: 80%;
  margin: 24px auto 0 !important;
  min-height: var(--btn-height);
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  background-color: var(--btn-primary-bg) !important;
  border: 1px solid var(--btn-primary-bg) !important;
  border-radius: var(--btn-radius) !important;
  color: var(--btn-primary-text) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: pointer;
}

.session .session__form input[type='submit']:hover,
.session .session__form .btn.btn--primary:hover {
  background-color: var(--btn-hover-bg) !important;
  border-color: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text) !important;
}

.session .session__form input[type='submit']:focus,
.session .session__form .btn.btn--primary:focus {
  background-color: var(--btn-focus-bg) !important;
  border-color: var(--btn-focus-border) !important;
  color: var(--btn-hover-text) !important;
}

.session .session__form input[type='submit']:active,
.session .session__form .btn.btn--primary:active {
  background-color: var(--btn-active-bg) !important;
  border-color: var(--btn-active-bg) !important;
  color: var(--btn-active-text) !important;
}

/* The page script disables the button on submit */
.session .session__form input[type='submit']:disabled,
.session .session__form input[type='submit'].click--disable:disabled {
  background-color: var(--btn-disabled-bg) !important;
  border-color: var(--btn-disabled-bg) !important;
  color: var(--btn-disabled-text) !important;
  cursor: not-allowed;
}

/* —— Forgot password (Tertiary text link) —— */
.session .session__form .session__forgot {
  margin-top: 24px;
}

.session .session__form .session__forgot a,
.session .session__form .session__forgot a.btn.btn--link {
  display: inline-block;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--link-text) !important;
  text-decoration: none !important;
}

.session .session__form .session__forgot a:hover,
.session .session__form .session__forgot a.btn.btn--link:hover {
  color: var(--link-hover) !important;
  text-decoration: underline !important;
}

@media (max-width: 767px) {
  .session .session__container {
    padding: 32px 20px !important;
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .session .session__form .loginLnks,
  .session .session__form .field {
    width: 100%;
  }

  .session .session__form input[type='submit'],
  .session .session__form .btn.btn--primary,
  .session .session__form .btn.btn--large.btn--primary {
    width: 100%;
  }
}