@charset "UTF-8";
/* Order matters: settings → tools → base → layout → components → utilities */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/Manrope-Bold.woff") format("woff");
  font-weight: 700;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/Manrope-Light.woff") format("woff");
  font-weight: 300;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Regular.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-SemiBold.woff") format("woff");
  font-weight: 600;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/SpaceMono-Regular.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/SpaceMono-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}
/* Order matters: settings → tools → base → layout → components → utilities */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

html {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
}

body {
  position: relative;
  height: 100%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #f2f0e7;
}

body.modal-open {
  overflow: hidden;
  height: 100%;
}

/* -------------------------------------------------------------------------- */
/* Root wrapper                                                               */
/* -------------------------------------------------------------------------- */
main#root {
  position: relative;
  flex: 1;
  width: 100%;
  padding: 0;
  display: flex; /* ✅ required */
  flex-direction: column; /* ✅ required */
  min-height: 0; /* ✅ prevents flex children overflow issues */
}

/* Hardening: guarantee hidden always wins (prevents flicker / layout bleed) */
#auth[hidden],
#verify[hidden],
#app[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Auth / Verify sections                                                     */
/* -------------------------------------------------------------------------- */
#auth,
#verify {
  position: relative;
  width: 100%;
}

/* -------------------------------------------------------------------------- */
/* App shell                                                                  */
/* -------------------------------------------------------------------------- */
#app {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 0;
}

#app .mainContent {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  padding: 60px 0 0 0;
  margin: 0 auto;
  min-height: 0;
}

[hidden] {
  display: none !important;
}

/* Order matters: settings → tools → base → layout → components → utilities */
body nav.globalNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  padding: 0 20px;
  margin: 0;
  font-size: initial;
  color: #fefefe;
  background-color: #172fe0;
  background-image: url("/assets/images/globalNav-bg.jpg");
  background-size: cover;
  z-index: 10000;
}
body nav.globalNav ul {
  position: relative;
  width: 100%;
  max-width: 1200px;
  padding: 0;
  margin: 0 auto;
}
body nav.globalNav ul > li {
  display: inline-block;
  vertical-align: middle;
}
body nav.globalNav ul > li.nomineeLogo {
  position: relative;
  height: 60px;
  padding: 15px 10px 15px 0;
}
body nav.globalNav ul > li.nomineeLogo a {
  display: inline-block;
  height: 100%;
  width: auto;
}
body nav.globalNav ul > li.nomineeLogo a > img {
  height: 100%;
  width: auto;
}
body nav.globalNav ul > li.button {
  position: relative;
}
body nav.globalNav ul > li.button a {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  display: block;
  margin: 0;
  padding: 0 10px;
  height: 60px;
  line-height: 60px;
  color: #fefefe;
  text-decoration: none;
}
body nav.globalNav ul > li.button.selected a {
  color: #d0f921;
  border-bottom: 2px solid #d0f921;
}
@media (max-width: 675px) {
  body nav.globalNav ul > li.button {
    display: none;
  }
}
body nav.globalNav ul > li.button[hidden] {
  display: none !important;
}
body nav.globalNav ul > li.mobileMenuButton {
  display: none;
  position: relative;
  width: 30px;
  height: 60px;
}
body nav.globalNav ul > li.mobileMenuButton > div.gridButton {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  background-image: url("/assets/images/icons/icon_grid-w.svg");
  background-size: cover;
}
@media (max-width: 675px) {
  body nav.globalNav ul > li.mobileMenuButton {
    display: inline-block;
  }
}
body nav.globalNav ul > li.mobileMenuButton > nav.mobileMenu {
  display: none;
  position: absolute;
  top: 65px;
  left: 0;
  width: 200px;
  padding: 10px;
  background-color: #1c1c1c;
  border-radius: 10px;
  list-style: none;
}
body nav.globalNav ul > li.mobileMenuButton > nav.mobileMenu > li {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
}
body nav.globalNav ul > li.mobileMenuButton > nav.mobileMenu > li > a {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px;
  color: #fefefe;
  text-decoration: none;
  border-radius: 5px;
}
body nav.globalNav ul > li.mobileMenuButton > nav.mobileMenu > li.selected > a {
  background-color: #d0f921;
  color: #1c1c1c;
}
body nav.globalNav ul > li.mobileMenuButton.open > div.gridButton {
  background-image: url("/assets/images/icons/icon_grid-fill-n.svg");
}
body nav.globalNav ul > li.mobileMenuButton.open > nav.mobileMenu {
  display: block;
}
body nav.globalNav ul > nav.userBar {
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
  padding: 0;
}
body nav.globalNav ul > nav.userBar > div.userIcon {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  position: relative;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 10px 0;
  text-align: center;
  color: #fefefe;
  background-color: #1674e9;
  border: 1px solid #fefefe;
  border-radius: 20px;
  overflow: hidden;
}
body nav.globalNav ul > nav.userBar > div.userIcon > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body nav.globalNav ul > nav.userBar > div.userPanel {
  display: none;
  position: absolute;
  top: 65px;
  right: 10px;
  width: 250px;
  padding: 10px;
  background-color: #1c1c1c;
  border-radius: 10px;
}
body nav.globalNav ul > nav.userBar > div.userPanel div.userInfo {
  position: relative;
  display: block;
  width: 100%;
  color: #fefefe;
  padding: 10px;
  text-align: center;
}
body nav.globalNav ul > nav.userBar > div.userPanel div.userInfo > div#whoami {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  display: block;
  width: 100%;
}
body nav.globalNav ul > nav.userBar > div.userPanel div.userInfo > div#userEmail {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  display: block;
  width: 100%;
}
body nav.globalNav ul > nav.userBar > div.userPanel > button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  display: block;
  width: 100%;
  color: #fefefe;
  padding: 5px 0;
  margin-top: 5px;
  border: 0;
  outline: none;
  background-color: #777777;
  border-radius: 5px;
}
body nav.globalNav ul > nav.userBar.open > div.userIcon {
  border: 1px solid #d0f921;
}
body nav.globalNav ul > nav.userBar.open > div.userPanel {
  display: block;
}

/* Order matters: settings → tools → base → layout → components → utilities */
div.floatingBar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  max-width: 100%;
  transform: translateX(-50%);
  z-index: 1000;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  gap: 5px;
}
div.floatingBar div.mentorshipsTrigger {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  vertical-align: middle;
  background-color: #172fe0;
  border: 2px solid #1c1c1c;
  flex: 0 0 50px;
}
div.floatingBar div.mentorshipsTrigger .triggerBadge {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  background: #E02020; /* red bubble */
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
div.floatingBar div.mentorshipsTrigger .triggerBadge[hidden],
div.floatingBar div.mentorshipsTrigger #mentorshipsTriggerBadge[hidden] {
  display: none !important;
}
div.floatingBar div.mentorshipsTrigger:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background-image: url("/assets/images/icons/icon_mentorships-w.svg");
  background-size: cover;
}
div.floatingBar div.mentorshipsTrigger.selected {
  background-color: #d0f921;
}
div.floatingBar div.mentorshipsTrigger.selected:before {
  background-image: url("/assets/images/icons/icon_mentorships-b.svg");
}

menu.mainMenu {
  position: relative;
  height: 50px;
  border-radius: 25px;
  background-color: #1c1c1c;
  margin: 0;
  padding: 5px;
  list-style: none;
  white-space: nowrap;
  vertical-align: middle;
  display: flex;
  gap: 5px;
  flex-direction: row;
  flex-shrink: 0;
}
menu.mainMenu > li {
  flex-shrink: 0;
  height: 40px;
}
menu.mainMenu > li a {
  position: relative;
  display: flex;
  flex-shrink: 0;
  gap: 0;
  color: #fefefe;
  padding: 0 10px;
  margin: 0;
  height: 100%;
  border-radius: 20px;
  text-decoration: none;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}
menu.mainMenu > li a:before {
  content: "";
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background-size: cover;
}
menu.mainMenu > li a:after {
  content: "";
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  display: block;
}
menu.mainMenu > li.matchmaking a:before {
  background-image: url("/assets/images/icons/icon_matchmaking-w.svg");
}
menu.mainMenu > li.matchmaking a:after {
  content: "Matchmaking";
}
menu.mainMenu > li.mentors a:before {
  background-image: url("/assets/images/icons/icon_mentors-w.svg");
}
menu.mainMenu > li.mentors a:after {
  content: "Mentors";
}
menu.mainMenu > li.chat a:before {
  background-image: url("/assets/images/icons/icon_chat-w.svg");
}
menu.mainMenu > li.chat a:after {
  content: "Ask Anything";
}
menu.mainMenu > li.profile a:before {
  background-image: url("/assets/images/icons/icon_profile-w.svg");
}
menu.mainMenu > li.profile a:after {
  content: "My Profile";
}
menu.mainMenu > li.selected a {
  color: #1c1c1c;
  background-color: #d0f921;
}
menu.mainMenu > li.selected.matchmaking a:before {
  background-image: url("/assets/images/icons/icon_matchmaking-b.svg");
}
menu.mainMenu > li.selected.mentors a:before {
  background-image: url("/assets/images/icons/icon_mentors-b.svg");
}
menu.mainMenu > li.selected.chat a:before {
  background-image: url("/assets/images/icons/icon_chat-b.svg");
}
menu.mainMenu > li.selected.profile a:before {
  background-image: url("/assets/images/icons/icon_profile-b.svg");
}

@media (max-width: 675px) {
  menu.mainMenu {
    padding: 5px 0;
    gap: 0;
  }
  menu.mainMenu > li a {
    width: 60px;
    padding: 0;
    margin: 0 5px;
    line-height: initial;
    flex-direction: column;
    gap: 0;
  }
  menu.mainMenu > li a:before {
    position: relative;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    margin: 0 auto;
  }
  menu.mainMenu > li a:after {
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 9px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    line-height: 1.5em;
    margin-top: -2px;
  }
  menu.mainMenu > li.matchmaking a:after {
    content: "Match";
  }
  menu.mainMenu > li.mentors a:after {
    content: "Mentors";
  }
  menu.mainMenu > li.chat a:after {
    content: "Ask";
  }
  menu.mainMenu > li.profile a:after {
    content: "Profile";
  }
}
/* Order matters: settings → tools → base → layout → components → utilities */
main div.pageHeader {
  position: relative;
  width: 100%;
  max-width: 1200px;
  padding: 10px 20px;
  margin: 0 auto;
}
main div.pageHeader:after {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  max-width: 1200px;
  background-color: #1c1c1c;
}
main div.pageHeader div.pageTitle {
  padding: 10px 0;
}
main div.pageHeader div.pageTitle > h1 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 40px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  font-size: clamp(22px, 13.5294117647px + 0.0264705882 * 100vw, 40px);
  margin: 0;
}
main div.pageHeader div.pageTitle div.breadcrumbs {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
}
main div.pageHeader div.pageTitle div.breadcrumbs a {
  color: #1c1c1c;
  text-decoration: underline;
}
main div.pageHeader div.pageActions {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
main div.pageHeader div.pageActions button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  position: relative;
  padding: 0 10px;
  margin-left: 5px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  color: #fefefe;
  background-color: #172fe0;
  outline: none;
  border: 0;
}
main div.pageHeader div.pageActions button.primary {
  color: #fefefe;
  background-color: #172fe0;
}
main div.pageHeader div.pageActions button.secondary {
  background-color: transparent;
  border: 1px solid #172fe0;
  line-height: 28px;
  color: #172fe0;
}
main div.pageHeader div.pageActions button:disabled {
  opacity: 0.3;
}

@media (min-width: 675px) {
  main div.pageHeader div.pageActions button {
    font-family: "Manrope", Arial, sans-serif;
    font-size: 16px;
    text-transform: none;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: normal;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
  }
  main div.pageHeader div.pageActions button.secondary {
    line-height: 38px;
  }
}
/* Order matters: settings → tools → base → layout → components → utilities */
body div.pageBody {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 10px;
}

/* Order matters: settings → tools → base → layout → components → utilities */
body dialog {
  width: 100%;
  max-width: 600px;
  padding: 30px;
  border: 0;
  border-radius: 10px;
}
body dialog form {
  padding: 0;
  margin: 0;
}
body dialog h2 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 30px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  margin: 0;
}
body dialog label {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  display: block;
  width: 100%;
  color: #1c1c1c;
  vertical-align: middle;
  padding: 5px 0;
}
body dialog input[type=text],
body dialog input[type=email],
body dialog input[readonly] {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  width: 100%;
  border-radius: 5px;
  border: 0;
  outline: none;
}
body dialog input[type=text],
body dialog input[type=email] {
  background-color: #EEEEEE;
  padding: 5px 10px;
  margin: 3px 0;
}
body dialog input[readonly] {
  background-color: transparent;
  padding: 5px 0;
}
body dialog input[type=radio] {
  margin: 3px;
}

/* Order matters: settings → tools → base → layout → components → utilities */
body section.loginFormWrapper {
  position: relative;
  width: 100%;
  padding: 20px;
  text-align: center;
}
body section.loginFormWrapper section.loginForm {
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 320px;
  text-align: left;
  padding: 20px;
  margin: 0;
  font-size: initial;
  color: #fefefe;
  background-color: #172fe0;
  background-image: url("/assets/images/login-bg.jpg");
  background-size: cover;
  border-radius: 10px;
}
body section.loginFormWrapper section.loginForm h1 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 18px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
}
body section.loginFormWrapper section.loginForm label {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
}
body section.loginFormWrapper section.loginForm input {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  width: 100%;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 5px;
  outline: none;
  border: 0;
}
body section.loginFormWrapper section.loginForm button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  position: relative;
  width: 100%;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  outline: none;
  border: 0;
  background-color: #d0f921;
  color: #1c1c1c;
}
body section.loginFormWrapper section.loginForm p {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
}
body section.loginFormWrapper section.loginForm a {
  color: #d0f921;
}

/* Order matters: settings → tools → base → layout → components → utilities */
body section#verify,
body section#billingBlock {
  position: relative;
  width: 100%;
  padding: 20px;
  text-align: center;
}
body section#verify div.verifyConfirm,
body section#billingBlock div.verifyConfirm {
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 400px;
  text-align: left;
  padding: 20px;
  margin: 0;
  font-size: initial;
  color: #fefefe;
  background-color: #172fe0;
  background-image: url("/assets/images/login-bg.jpg");
  background-size: cover;
  border-radius: 10px;
}
body section#verify div.verifyConfirm h1,
body section#billingBlock div.verifyConfirm h1 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 18px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
}
body section#verify div.verifyConfirm label,
body section#billingBlock div.verifyConfirm label {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
}
body section#verify div.verifyConfirm input,
body section#billingBlock div.verifyConfirm input {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  width: 100%;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 5px;
  outline: none;
  border: 0;
}
body section#verify div.verifyConfirm button,
body section#billingBlock div.verifyConfirm button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  position: relative;
  width: 100%;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  outline: none;
  border: 0;
  background-color: #d0f921;
  color: #1c1c1c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  cursor: pointer;
}
body section#verify div.verifyConfirm button.isLoading,
body section#billingBlock div.verifyConfirm button.isLoading {
  pointer-events: none;
  opacity: 0.9;
}
body section#verify div.verifyConfirm button.isLoading::before,
body section#billingBlock div.verifyConfirm button.isLoading::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: #1c1c1c;
  animation: nomineeButtonSpin 0.7s linear infinite;
  flex: 0 0 16px;
}
body section#verify div.verifyConfirm p,
body section#billingBlock div.verifyConfirm p {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
}
body section#verify div.verifyConfirm a,
body section#billingBlock div.verifyConfirm a {
  color: #d0f921;
}

@keyframes nomineeButtonSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Order matters: settings → tools → base → layout → components → utilities */
body div.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  z-index: 50000000000;
  background-color: rgba(28, 28, 28, 0.6);
  text-align: center;
  display: none;
}
body div.overlay:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
body div.overlay.open {
  display: block;
}

/* Order matters: settings → tools → base → layout → components → utilities */
body div.overlay div.modal {
  display: inline-block;
  position: relative;
  width: 100%;
  max-width: 600px;
  padding: 0;
  color: #1c1c1c;
  background-color: #fefefe;
  border-radius: 10px;
  text-align: left;
  font-size: initial;
  vertical-align: middle;
  overflow: hidden;
}
body div.overlay div.modal div.modalTitleBar {
  position: relative;
  display: block;
  width: 100%;
  height: 50px;
  background-color: #fefefe;
  border-bottom: 1px solid rgba(28, 28, 28, 0.1);
}
body div.overlay div.modal div.modalTitleBar h2 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 18px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin: 0;
  padding: 0 10px;
}
body div.overlay div.modal div.modalTitleBar div.closeModal {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  padding: 15px;
}
body div.overlay div.modal div.modalTitleBar div.closeModal:after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url("/assets/images/icons/icon_close.svg");
  background-size: contain;
  background-position: center center;
  vertical-align: middle;
}
body div.overlay div.modal div.modalBody {
  position: relative;
  width: 100%;
  max-height: 60vh;
  padding: 0;
  overflow-y: scroll;
}
body div.overlay div.modal div.modalBody h2 {
  margin: 0 0 10px 0;
}
body div.overlay div.modal div.modalBody h3, body div.overlay div.modal div.modalBody h4, body div.overlay div.modal div.modalBody h5 {
  margin: 20px 0 0 0;
}
body div.overlay div.modal div.modalBody h2 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 24px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
}
body div.overlay div.modal div.modalBody h3 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 18px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
}
body div.overlay div.modal div.modalBody ul {
  margin: 10px 0 30px 0;
}
body div.overlay div.modal div.modalBody p, body div.overlay div.modal div.modalBody li {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
}
body div.overlay div.modal div.modalActions {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #fefefe;
  text-align: right;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
}
body div.overlay div.modal div.modalActions button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  position: relative;
  display: inline-block;
  width: auto;
  padding: 0 20px;
  margin: 0 2px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  outline: none;
  border: 0;
}
body div.overlay div.modal div.modalActions button.primary {
  color: #fefefe;
  background-color: #172fe0;
}
body div.overlay div.modal div.modalActions button.secondary {
  background-color: transparent;
  border: 1px solid #172fe0;
  line-height: 38px;
  color: #172fe0;
}
body div.overlay div.modal div.modalActions button:disabled {
  opacity: 0.3;
}
body div.overlay div.modal div.modalActions .modalStatus,
body div.overlay div.modal div.modalActions #availabilityModalStatus {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
}
body div.overlay div.modal.visibilityModal div.modalBody {
  padding: 20px;
}
body div.overlay div.modal.visibilityModal div.modalBody p {
  padding: 0;
  margin: 0;
}
body div.overlay div.modal.visibilityModal div.modalBody fieldset {
  position: relative;
  display: block;
  border: 0;
  outline: none;
  padding: 20px 0;
  margin: 0;
}
body div.overlay div.modal.visibilityModal div.modalBody fieldset legend {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  position: relative;
  float: left;
  display: block;
  width: 100%;
  opacity: 0.7;
  padding: 10px 0;
  margin: 0;
}
body div.overlay div.modal.visibilityModal div.modalBody fieldset label {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  display: block;
  position: relative;
  width: 100%;
  padding: 5px 0;
}
body div.overlay div.modal.betaAcknowledgement .modalBody, body div.overlay div.modal.releaseNotes .modalBody {
  padding: 20px;
}
body div.overlay div.modal.releaseNotes .modalBody .releaseVersion {
  border-bottom: 1px solid #EFEFEF;
  margin-bottom: 30px;
}
body div.overlay div.modal.releaseNotes .modalBody .releaseVersion .releaseLabel {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  display: inline-block;
  padding: 3px 5px;
  color: #1c1c1c;
  background-color: #d0f921;
  margin: 0 5px;
  vertical-align: middle;
  border-radius: 2px;
}
body div.overlay div.modal.releaseNotes .modalBody .releaseVersion:last-of-type {
  border: 0;
}
body div.overlay div.modal.editProfile {
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
body div.overlay div.modal.editProfile div.modalBody {
  padding: 20px;
}
body div.overlay div.modal.editProfile div.modalBody h3 {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
}
body div.overlay div.modal.editProfile div.modalBody label {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  display: block;
  width: 100%;
  margin-top: 20px;
}
body div.overlay div.modal.editProfile div.modalBody fieldset {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 0;
  border: 0;
}
body div.overlay div.modal.editProfile div.modalBody fieldset legend {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
body div.overlay div.modal.editProfile div.modalBody fieldset label {
  margin-top: 5px;
}
body div.overlay div.modal.editProfile div.modalBody div.profilePhotoPrev {
  position: relative;
  width: 360px;
  height: 360px;
  margin: 5px auto;
  overflow: hidden;
  position: relative;
}
body div.overlay div.modal.editProfile div.modalBody div.profilePhotoPrev img#profilePhotoPreview {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
body div.overlay div.modal.editProfile div.modalBody input[type=text],
body div.overlay div.modal.editProfile div.modalBody input[type=url] {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  width: 100%;
  padding: 5px 10px;
  margin: 5px 0;
  border-radius: 5px;
  outline: 0;
  border: 1px solid rgba(28, 28, 28, 0.2);
}
body div.overlay div.modal.editProfile div.modalBody select {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  width: 100%;
  padding: 5px 10px;
  margin: 5px 0;
  border-radius: 5px;
  outline: 0;
  border: 1px solid rgba(28, 28, 28, 0.2);
}
body div.overlay div.modal.editProfile div.modalBody textarea {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  width: 100%;
  padding: 5px 10px;
  margin: 5px 0;
  border-radius: 5px;
  outline: 0;
  border: 1px solid rgba(28, 28, 28, 0.2);
}
body div.overlay div.modal.editProfile div.modalBody button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  position: relative;
  width: 100%;
  padding: 0 20px;
  margin: 5px 0;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  outline: none;
  border: 0;
}
body div.overlay div.modal.editProfile div.modalBody button.primary {
  color: #fefefe;
  background-color: #172fe0;
}
body div.overlay div.modal.editProfile div.modalBody button.secondary {
  background-color: transparent;
  border: 1px solid #172fe0;
  line-height: 38px;
  color: #172fe0;
}
body div.overlay div.modal.editProfile div.modalBody button:disabled {
  opacity: 0.3;
}
body div.overlay div.modal.editProfile.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Order matters: settings → tools → base → layout → components → utilities */
/* Overlay that dims the page */
.mentorshipsOverlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* When open */
.mentorshipsOverlay.isOpen {
  opacity: 1;
  pointer-events: auto;
}

/* Right panel */
div.mentorshipsPanel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: 400px;
  max-width: calc(100vw - 15px);
  background-color: #fefefe;
  padding-top: 60px;
  transform: translateX(100%);
  transition: transform 200ms ease;
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
div.mentorshipsPanel div.panelHeader {
  position: relative;
  width: 100%;
  padding: 20px 0 0 0;
  color: #1c1c1c;
  background-color: #fefefe;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
  flex: 0 0 auto;
}
div.mentorshipsPanel div.panelHeader div.panelTitle {
  position: relative;
  width: 100%;
  padding: 0;
}
div.mentorshipsPanel div.panelHeader div.panelTitle h2 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 20px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  margin: 0;
  padding: 5px 20px;
}
div.mentorshipsPanel div.panelHeader div.panelTitle .closePanel {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  transform: translateY(-50%);
  border-radius: 999px;
}
div.mentorshipsPanel div.panelHeader div.panelTitle .closePanel::before,
div.mentorshipsPanel div.panelHeader div.panelTitle .closePanel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: rgba(0, 0, 0, 0.7);
  transform-origin: center;
}
div.mentorshipsPanel div.panelHeader div.panelTitle .closePanel::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
div.mentorshipsPanel div.panelHeader div.panelTitle .closePanel::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
div.mentorshipsPanel div.panelHeader div.panelMenu {
  position: relative;
  width: 100%;
  padding: 0;
  height: 50px;
}
div.mentorshipsPanel div.panelHeader div.panelMenu > ul {
  position: relative;
  width: 100%;
  height: 50px;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex; /* ✅ auto-fill width */
  align-items: stretch;
}
div.mentorshipsPanel div.panelHeader div.panelMenu > ul li {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  flex: 1; /* ✅ each tab fills equally */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
div.mentorshipsPanel div.panelHeader div.panelMenu > ul li .tabLabel {
  display: inline-block;
}
div.mentorshipsPanel div.panelHeader div.panelMenu > ul li .tabBadge {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 10px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 999px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
  background: #e11d48;
  color: #fff;
}
div.mentorshipsPanel div.panelHeader div.panelMenu > ul li.selected {
  color: #172fe0;
  border-bottom: 2px solid #172fe0;
}
div.mentorshipsPanel div.panelBody {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0; /* IMPORTANT: allows flex children to actually shrink and scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: auto; /* overrides your height: 100% behavior */
}
div.mentorshipsPanel div.panelBody .panelStatus {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  padding: 12px 20px 0;
  color: rgba(0, 0, 0, 0.6);
  min-height: 18px;
}
div.mentorshipsPanel div.panelBody ul.panelList {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow {
  position: relative;
  width: 100%;
  padding: 20px;
  margin: 0;
  min-height: 34px;
  border-bottom: 1px solid #EFEFEF;
  /* Panel row: name line + badge */
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow .rowLink,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow .rowLink {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
  padding-left: 48px;
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow .rowLink,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow .rowLink {
  position: relative;
  padding: 0 0 0 48px;
  min-height: 34px;
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow div.userPhoto,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow div.userPhoto {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border-radius: 17px;
  background-color: #EFEFEF;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow div.userPhoto .userInitials,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow div.userPhoto .userInitials {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  color: rgba(0, 0, 0, 0.7);
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow .userDetails .nameLine,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow .userDetails .nameLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow .rowBadge,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow .rowBadge {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: #e11d48;
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow div.userDetails,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow div.userDetails {
  position: relative;
  width: 100%;
  padding: 7px 0 0;
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow div.userDetails div.name,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow div.userDetails div.name {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 18px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow div.userDetails div.meta,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow div.userDetails div.meta {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  margin-top: 4px;
  color: rgba(0, 0, 0, 0.55);
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow div.userDetails .introMessage,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow div.userDetails .introMessage {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.35;
  white-space: pre-wrap;
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow div.userDetails .rowActions,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow div.userDetails .rowActions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow div.userDetails .btnAction,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow div.userDetails .btnAction {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  border: 0;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 10px;
  background: #172fe0;
  color: #fefefe;
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow div.userDetails .btnAction:disabled,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow div.userDetails .btnAction:disabled {
  opacity: 0.6;
  cursor: default;
}
div.mentorshipsPanel div.panelBody ul.panelList li.userRow div.userDetails .btnAction.secondary,
div.mentorshipsPanel div.panelBody ul.panelList li.requestRow div.userDetails .btnAction.secondary {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
}
div.mentorshipsPanel div.panelBody ul.panelList li.emptyState {
  padding: 40px;
  text-align: center;
}
div.mentorshipsPanel div.panelBody ul.panelList li.emptyState .emptyTitle {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 18px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  margin-bottom: 8px;
}
div.mentorshipsPanel div.panelBody ul.panelList li.emptyState .emptyHint {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  color: rgba(0, 0, 0, 0.65);
}

/* Slide in when open */
.mentorshipsOverlay.isOpen .mentorshipsPanel {
  transform: translateX(0);
}

/* Prevent scroll of page while open */
body.mentorshipsOpen {
  overflow: hidden;
}

/* Order matters: settings → tools → base → layout → components → utilities */
/* Expose SCSS breakpoint to JS via CSS custom property */
:root {
  --breakpoint-a: 675px;
}

/* -------------------------------------------------------------------------- */
/* Header                                                                      */
/* -------------------------------------------------------------------------- */
div.mentorshipHeader {
  position: relative;
  width: 100%;
  background-color: #fefefe;
  border-bottom: 1px solid #DDDDDD;
  flex: 0 0 auto;
}
div.mentorshipHeader div.mentorshipPeople {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 26px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  font-size: clamp(14px, 8.3529411765px + 0.0176470588 * 100vw, 26px);
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}
div.mentorshipHeader div.mentorshipPeople div.userPhotos {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
div.mentorshipHeader div.mentorshipPeople div.userPhotos div.photo {
  position: relative;
  display: inline-block;
  background-color: #DDDDDD;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  border: 2px solid #fefefe;
  vertical-align: middle;
  transform: translateX(-15px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
div.mentorshipHeader div.mentorshipPeople div.userPhotos div.photo:first-of-type {
  transform: none;
}
div.mentorshipHeader div.mentorshipPeople div.userPhotos div.photo:last-of-type {
  margin-right: -10px;
}
div.mentorshipHeader div.mentorshipPeople div.userPhotos div.photo.hasInitials {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  color: #1c1c1c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------------------- */
/* Body + Container (these establish the height constraints)                   */
/* -------------------------------------------------------------------------- */
div.mentorshipBody {
  position: relative;
  width: 100%;
  display: flex;
  flex: 1 1 auto;
  min-height: 0; /* REQUIRED: allows children to be scroll containers */
  flex-direction: row;
  color: #1c1c1c;
  background-color: #fefefe;
}
div.mentorshipBody div.mentorshipBodyContainer {
  position: relative;
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex: 1 1 auto;
  min-height: 0; /* REQUIRED */
  margin: 0 auto;
  /* ---------------------------------------------------------------------- */
  /* Menu (fixed)                                                           */
  /* ---------------------------------------------------------------------- */
  /* ---------------------------------------------------------------------- */
  /* View (scrolls internally)                                              */
  /* ---------------------------------------------------------------------- */
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipMenu {
  position: relative;
  width: 100%;
  flex: 0 0 300px;
  max-width: 300px;
  border-right: 1px solid #DDDDDD;
  overflow: hidden; /* don't scroll the menu */
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipMenu > ul {
  position: relative;
  width: 100%;
  padding: 20px;
  margin: 0;
  list-style: none;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipMenu > ul li {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
  width: 100%;
  padding: 10px 20px;
  margin: 5px 0;
  border-radius: 5px;
  cursor: pointer;
  /* Menu red bubble */
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipMenu > ul li .menuLabel {
  display: inline-flex;
  align-items: center;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipMenu > ul li .menuBadge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: #e11d48; /* red */
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipMenu > ul li.hasMenuBadge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipMenu > ul li.selected {
  background-color: #EFEFEF;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0; /* REQUIRED */
  padding: 0;
  /* Make the view the scroll container */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Layout within the view so the mobile bar can be sticky */
  display: flex;
  flex-direction: column;
  /* Mobile view header (Back + title). Hidden on desktop by default. */
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMobileBar {
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid #DDDDDD;
  background-color: #fefefe;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMobileBar .mobileTitle {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipStatus {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  color: rgba(0, 0, 0, 0.65);
  margin-bottom: 14px;
  padding: 0 20px;
  flex: 0 0 auto;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSection {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  padding: 16px 20px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSection > h2 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 26px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  margin: 0 0 14px 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSection[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Responsive layout (< $breakpoint_A)                                         */
/* -------------------------------------------------------------------------- */
@media (max-width: 675px) {
  div.mentorshipHeader div.mentorshipPeople {
    text-align: center;
  }
  div.mentorshipHeader div.mentorshipPeople div.userPhotos {
    display: block;
    text-align: center;
    margin-bottom: 5px;
  }
  div.mentorshipHeader div.mentorshipPeople div.userPhotos div.photo {
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }
  div.mentorshipBody {
    flex: 1 1 auto;
    min-height: 0;
  }
  div.mentorshipBody div.mentorshipBodyContainer {
    flex-direction: column;
    max-width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    /* MENU becomes full width */
    /* VIEW overlays / replaces menu when opened */
    /* When JS adds this class, show the view and hide the menu */
  }
  div.mentorshipBody div.mentorshipBodyContainer div.mentorshipMenu {
    max-width: none;
    border-right: none;
    flex: 0 0 auto;
  }
  div.mentorshipBody div.mentorshipBodyContainer div.mentorshipMenu > ul {
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  div.mentorshipBody div.mentorshipBodyContainer div.mentorshipMenu > ul li {
    margin: 0;
    padding: 16px 14px;
    border-radius: 10px;
    border: 1px solid #DDDDDD;
    background-color: #fefefe;
    text-align: left;
  }
  div.mentorshipBody div.mentorshipBodyContainer div.mentorshipMenu > ul li.selected {
    background-color: #EFEFEF;
    border-color: #DDDDDD;
  }
  div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView {
    display: none; /* hidden until a menu tile is selected */
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    /* KEEP the same layout model as desktop so inner flex/scroll works */
    overflow-y: auto;
    display: none; /* still hidden by default */
    flex-direction: column; /* ready for when it's shown */
  }
  div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMobileBar {
    display: flex;
  }
  div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipStatus {
    padding: 12px 12px 0 12px;
    margin-bottom: 0;
  }
  div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSection {
    padding: 16px 12px;
  }
  div.mentorshipBody div.mentorshipBodyContainer.isMobileViewOpen div.mentorshipMenu {
    display: none;
  }
  div.mentorshipBody div.mentorshipBodyContainer.isMobileViewOpen div.mentorshipView {
    display: flex; /* ✅ was block — must be flex */
  }
}
/* Order matters: settings → tools → base → layout → components → utilities */
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipOverview {
  padding: 20px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipOverview .overviewSection {
  position: relative;
  width: 100%;
  padding: 20px 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipOverview .overviewSection h3 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 20px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  margin: 0;
  padding: 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipOverview .overviewSection .overviewUserCard {
  display: block;
  max-width: 300px;
  width: 100%;
  background-color: #EFEFEF;
  padding: 20px;
  margin: 10px 0;
  border-radius: 10px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipOverview .overviewSection .overviewUserCard .userPhoto {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background-size: cover;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipOverview .overviewSection .overviewUserCard .userInfo {
  position: relative;
  width: 100%;
  text-align: center;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipOverview .overviewSection .overviewUserCard .userInfo .userName {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 20px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
  width: 100%;
  text-align: center;
  padding: 10px 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipOverview .overviewSection .overviewUserCard .userInfo > button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  width: auto;
  outline: none;
  border: 0;
  border-radius: 5px;
  margin: 3px auto;
  padding: 10px 20px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipOverview .overviewSection .overviewUserCard .userInfo > button.secondary {
  background-color: #172fe0;
  color: #fefefe;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipOverview p {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
}

/* Order matters: settings → tools → base → layout → components → utilities */
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages {
  /* IMPORTANT: let Messages fill the available height inside mentorshipView */
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* ------------------------------------------------------------------ */
  /* Conversation (scrollable)                                           */
  /* ------------------------------------------------------------------ */
  /* ------------------------------------------------------------------ */
  /* Message rows                                                        */
  /* ------------------------------------------------------------------ */
  /* ------------------------------------------------------------------ */
  /* Composer (fixed)                                                    */
  /* ------------------------------------------------------------------ */
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .conversation {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 0 16px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .conversationStatus {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  color: rgba(0, 0, 0, 0.65);
  padding: 10px 12px;
  border: 1px solid #DDDDDD;
  border-radius: 10px;
  background-color: #fefefe;
  margin-bottom: 12px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .conversationEmpty {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
  padding: 18px 12px;
  border: 1px dashed #DDDDDD;
  border-radius: 12px;
  margin: 12px 0 14px 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .messageList {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 10px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .conversationBottomPad {
  height: 16px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .msgRow {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* NEW: horizontal line wrapper (avatar + content) */
  /* NEW: avatar circle */
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .msgRow .msgLine {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .msgRow .msgContent {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: min(640px, 92%);
  min-width: 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .msgRow .msgAvatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex: 0 0 40px;
  background-color: #DDDDDD;
  border: 2px solid #fefefe;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  color: #1c1c1c;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .msgRow .msgAvatar.hasPhoto {
  color: transparent;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .msgRow.me {
  align-items: flex-end;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .msgRow.me .msgLine {
  justify-content: flex-end;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .msgRow.me .msgBubble {
  background-color: #EFEFEF;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .msgRow.them {
  align-items: flex-start;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .msgRow.them .msgBubble {
  background-color: #fefefe;
  border: 1px solid #DDDDDD;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .msgBubble {
  max-width: 100%;
  border-radius: 14px;
  padding: 10px 12px;
  line-height: 1.35;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  color: #1c1c1c;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .msgMeta {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  color: rgba(0, 0, 0, 0.55);
  padding: 0 2px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .composer,
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .composerDisabledNotice {
  position: sticky;
  bottom: 0;
  z-index: 2;
  width: 100%;
  padding: 0px 20px 90px 20px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .composer .messageBox {
  position: relative;
  width: 100%;
  border: 1px solid #DDDDDD;
  border-radius: 10px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .composer .messageBox:focus-within {
  border-color: #1c1c1c;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .composer .messageBox .composerInput {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  min-width: 0;
  width: 100%;
  min-height: 80px;
  border-radius: 12px;
  padding: 10px;
  outline: none;
  background-color: #fefefe;
  color: #1c1c1c;
  z-index: 5;
  border: 0;
  outline: none;
  resize: none;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .composer .messageBox .composerInput:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .composer .messageBox div.sendBar {
  position: relative;
  width: 100%;
  text-align: right;
  padding: 5px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .composer .messageBox div.sendBar .composerSend {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  position: relative;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  z-index: 10;
  outline: none;
  border: 0;
  background-color: #172fe0;
  color: #fefefe;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .composer .messageBox div.sendBar .composerSend:disabled {
  background-color: #EFEFEF;
  color: #1c1c1c;
  opacity: 0.6;
  cursor: not-allowed;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .composerDisabledNotice {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
}

@media (max-width: 675px) {
  div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .conversation {
    padding: 12px 12px 0 12px;
  }
  div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipMessages div.messageInterface .composer {
    padding: 10px 10px;
  }
}
/* Order matters: settings → tools → base → layout → components → utilities */
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions {
  padding: 20px 20px 100px 20px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions p {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsStatus {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  opacity: 0.8;
  margin-top: 10px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsEmpty {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  opacity: 0.6;
  padding: 14px 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection {
  position: relative;
  width: 100%;
  padding: 20px 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection h3 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 20px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  margin: 0;
  padding: 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList {
  position: relative;
  width: 100%;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow {
  position: relative;
  width: 100%;
  min-height: 116px;
  margin: 10px auto;
  padding: 15px 180px 15px 15px;
  background-color: #EFEFEF;
  border-radius: 5px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow div.sessionDetails {
  position: relative;
  width: 100%;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow div.sessionDetails div.sessionDay,
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow div.sessionDetails div.sessionTime,
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow div.sessionDetails div.sessionType,
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow div.sessionDetails div.sessionStatus {
  position: relative;
  width: 100%;
  margin: 5px auto;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow div.sessionDetails div.sessionDay {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  opacity: 0.7;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow div.sessionDetails div.sessionTime {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 24px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow div.sessionDetails div.sessionType {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow div.sessionDetails div.sessionStatus {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  color: #172fe0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow div.sessionActions {
  position: absolute;
  top: 0;
  right: 0;
  width: 190px;
  padding: 15px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow div.sessionActions > button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  width: 100%;
  outline: none;
  border: 0;
  border-radius: 5px;
  margin: 3px auto;
  padding: 10px 0;
  text-align: center;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow div.sessionActions > button.primary {
  background-color: #172fe0;
  color: #fefefe;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow div.sessionActions > button.secondary {
  background-color: #1c1c1c;
  color: #fefefe;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.sessionList div.sessionRow div.sessionActions > button.tertiary {
  background-color: #DDDDDD;
  color: #1c1c1c;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.proposeSession {
  position: relative;
  width: 100%;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.proposeSession > button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  width: auto;
  outline: none;
  border: 0;
  border-radius: 5px;
  margin: 3px auto;
  padding: 10px 20px;
  text-align: center;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSessions .sessionsSection div.proposeSession > button.primary {
  background-color: #172fe0;
  color: #fefefe;
}

/* -------------------------------------------------------------------------- */
/* Session scheduler modal                                                    */
/* -------------------------------------------------------------------------- */
div.overlay div.modal.sessionSchedulerModal {
  max-width: 900px;
}
div.overlay div.modal.session {
  max-width: 900px;
}
div.overlay div.modal.session div.modalBody {
  height: 75vh;
}
div.overlay div.modal div.modalBody {
  /* Session Details modal content */
}
div.overlay div.modal div.modalBody .sessionSchedulerContainer,
div.overlay div.modal div.modalBody .sessionDurationStep {
  position: relative;
  width: 100%;
  height: 500px;
}
div.overlay div.modal div.modalBody .sessionDurationStep h3.subhead {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 24px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  text-align: center;
}
div.overlay div.modal div.modalBody .sessionDurationStep .durationList button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  display: block;
  outline: none;
  border: 0;
  padding: 10px 20px;
  background-color: #172fe0;
  color: #fefefe;
  border-radius: 5px;
  margin: 5px auto;
  width: 100%;
  max-width: 300px;
}
div.overlay div.modal div.modalBody .sessionSchedulerContainer {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar {
  position: relative;
  flex: 0 0 300px;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  border-right: 1px solid #EFEFEF;
  overflow: hidden;
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarMonth {
  width: 100%;
  max-width: 520px;
  padding: 16px;
  border-radius: 12px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarTitle {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarNav {
  display: flex;
  gap: 8px;
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarNavBtn {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarNavBtn:hover {
  background: #d0f921;
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarWeekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarWeekday {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  text-align: center;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.04em;
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  /* NEW: available day indicator */
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarGrid .calendarDay {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: none;
  color: #1c1c1c;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarGrid .calendarDay:hover {
  background: #d0f921;
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarGrid .calendarDay.is-today {
  border: 1px solid rgba(23, 47, 224, 0.3);
  color: #172fe0;
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarGrid .calendarDay.is-available {
  background: rgba(23, 47, 224, 0.15);
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarGrid .calendarDay.is-selected {
  background: #172fe0;
  color: #fefefe;
}
div.overlay div.modal div.modalBody .sessionSchedulerCalendar .calendarGrid .calendarDay.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
div.overlay div.modal div.modalBody .sessionSchedulerTimes {
  position: relative;
  flex-grow: 1;
  min-height: 500px;
  padding: 20px;
}
div.overlay div.modal div.modalBody .sessionSchedulerTimes .timePickerHeader {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
  width: 100%;
  padding: 8px 0;
}
div.overlay div.modal div.modalBody .sessionSchedulerTimes .timePickerIntro {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  opacity: 0.5;
  padding: 20px;
  text-align: center;
}
div.overlay div.modal div.modalBody .sessionSchedulerTimes #sessionSchedulerSlotsMount {
  padding: 10px 0;
}
div.overlay div.modal div.modalBody .sessionSchedulerTimes #sessionSchedulerSlotsMount .rangesEmpty {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  opacity: 0.5;
  text-align: center;
  padding: 40px 20px;
  background-color: #EFEFEF;
  border-radius: 5px;
}
div.overlay div.modal div.modalBody .sessionSchedulerTimes #sessionSchedulerSlotsMount .slotList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
div.overlay div.modal div.modalBody .sessionSchedulerTimes #sessionSchedulerSlotsMount .slotBtn {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 0;
  outline: none;
  border-radius: 5px;
  background-color: #EFEFEF;
  cursor: pointer;
}
div.overlay div.modal div.modalBody .sessionSchedulerTimes #sessionSchedulerSlotsMount .slotBtn:hover {
  background-color: #d0f921;
}
div.overlay div.modal div.modalBody .sessionSchedulerTimes #sessionSchedulerSlotsMount .slotBtn.is-selected {
  background-color: #172fe0;
  color: #fefefe;
}
div.overlay div.modal div.modalBody .sessionContainer {
  position: relative;
  width: 100%;
}
div.overlay div.modal div.modalBody .sessionContainer .sessionTabs {
  position: relative;
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #EFEFEF;
}
div.overlay div.modal div.modalBody .sessionContainer .sessionTabs .tab {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  line-height: 1.1em;
  flex-grow: 1;
  text-align: center;
  line-height: 50px;
  text-wrap: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
}
div.overlay div.modal div.modalBody .sessionContainer .sessionTabs .tab.selected {
  color: #172fe0;
  border-bottom: 2px solid #172fe0;
}
div.overlay div.modal div.modalBody .sessionContainer .sessionBody {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 30px;
  overflow-y: scroll;
}
div.overlay div.modal div.modalBody .sessionContainer .sessionBody h3 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 30px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  margin: 0 0 20px 0;
  padding: 0;
}
div.overlay div.modal div.modalBody .sessionContainer .sessionBody .sessionDetailsGrid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
div.overlay div.modal div.modalBody .sessionContainer .sessionBody .sessionDetailsGrid .sessionDetailsRow {
  background: #EFEFEF;
  border-radius: 5px;
  padding: 12px 14px;
}
div.overlay div.modal div.modalBody .sessionContainer .sessionBody .sessionDetailsGrid .sessionDetailsRow .sessionDetailsKey {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  opacity: 0.7;
  margin-bottom: 4px;
}
div.overlay div.modal div.modalBody .sessionContainer .sessionBody .sessionDetailsGrid .sessionDetailsRow .sessionDetailsVal {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
}

@media (max-width: 675px) {
  div.overlay div.modal div.modalBody .sessionSchedulerContainer {
    flex-direction: column;
    height: auto;
  }
  div.overlay div.modal div.modalBody .sessionSchedulerCalendar {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid #EFEFEF;
  }
  div.overlay div.modal div.modalBody .sessionSchedulerTimes {
    width: 100%;
    min-height: 360px;
  }
}
/* Order matters: settings → tools → base → layout → components → utilities */
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSettings {
  padding: 20px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSettings .settingsBlock {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(28, 28, 28, 0.1);
  border-radius: 10px;
  background-color: rgba(254, 254, 254, 0.6);
  max-width: 720px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSettings .settingsHint {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  margin-top: 8px;
  opacity: 0.85;
  line-height: 1.4;
  max-width: 64ch;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSettings button.danger {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  position: relative;
  width: auto;
  padding: 0 20px;
  margin: 5px 0;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  outline: none;
  border: 0;
  color: #fefefe;
  background-color: #e11d48;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSettings button.danger:disabled {
  opacity: 0.3;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSettings #endMentorshipOverlay .modalBody {
  padding: 20px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSettings #endMentorshipOverlay .modalBody p {
  margin: 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipSettings #endMentorshipOverlay .personName {
  font-weight: 600;
}

/* Order matters: settings → tools → base → layout → components → utilities */
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability {
  padding: 20px 20px 100px 20px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability p {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .sessionLengths .checkRow {
  display: block;
  width: 100%;
  padding: 5px 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .sessionLengths .checkRow span {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySectionPreview {
  opacity: 0.5;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection {
  position: relative;
  width: 100%;
  padding: 20px 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection h3 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 20px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  margin: 0;
  padding: 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection h3 > button.addTime {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 20px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  width: 26px;
  height: 26px;
  border-radius: 20px;
  line-height: 20px;
  color: #fefefe;
  background-color: #172fe0;
  outline: none;
  border: 0;
  vertical-align: middle;
  margin: 0 0 5px 5px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection .checkRow {
  display: block;
  width: 100%;
  padding: 5px 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection .checkRow input[type=checkbox] {
  margin-right: 5px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection .checkRow span {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection .helperText {
  font-style: italic;
  opacity: 0.5;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection .availabilityHint {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  padding: 5px 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection .dayBlock {
  position: relative;
  width: 100%;
  padding: 10px 0 20px 0;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection .dayBlock .dayHeader {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection .dayBlock .dayHeader h4 {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  margin: 0;
  padding: 5px 0;
  flex-grow: 1;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection .dayBlock .dayHeader button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  color: #1c1c1c;
  background-color: #d0f921;
  outline: none;
  border: 0;
  border-radius: 5px;
  padding: 0 20px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection .dayBlock .timeBlock {
  position: relative;
  width: 100%;
  background-color: #EFEFEF;
  margin: 5px 0;
  border-radius: 5px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection .dayBlock .timeBlock div.timeRange {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 18px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
  width: 100%;
  padding: 20px;
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection .dayBlock .timeBlock div.deleteTime {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
}
div.mentorshipBody div.mentorshipBodyContainer div.mentorshipView .mentorshipAvailability .availabilitySection .dayBlock .timeBlock div.deleteTime > img {
  width: 26px;
  height: 26px;
}

div.overlay div.modal div.modalBody div.availabilityPickerContainer {
  position: relative;
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar {
  position: relative;
  /* fixed column */
  flex: 0 0 300px;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  border-right: 1px solid #EFEFEF;
  overflow: hidden; /* prevents content from forcing width */
  /* -------------------------------------------------------------------------- */
  /* Calendar wrapper                                                           */
  /* -------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------- */
  /* Header                                                                      */
  /* -------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------- */
  /* Weekday labels                                                             */
  /* -------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------- */
  /* Day grid                                                                   */
  /* -------------------------------------------------------------------------- */
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarMonth {
  width: 100%;
  max-width: 520px;
  padding: 16px;
  border-radius: 12px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarTitle {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarNav {
  display: flex;
  gap: 8px;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarNavBtn {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarNavBtn:hover {
  background: #d0f921;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarWeekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarWeekday {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  text-align: center;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.04em;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  /* Individual day cell */
  /* Optional states you may want later */
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarGrid .calendarDay {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  width: 100%;
  aspect-ratio: 1/1; /* keeps circles */
  border-radius: 50%;
  border: none;
  color: #1c1c1c;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarGrid .calendarDay:hover {
  background: #d0f921;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarGrid .calendarDay.is-today {
  border: 1px solid rgba(23, 47, 224, 0.3);
  color: #172fe0;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarGrid .calendarDay.is-selected {
  background: #172fe0;
  color: #fefefe;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarGrid .calendarDay.is-edited {
  background: rgba(23, 47, 224, 0.2);
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .calendarGrid .calendarDay.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .recurringDaysList {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px;
  /* Individual day cell */
  /* Optional states you may want later */
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .recurringDaysList .calendarDay {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  width: 100%;
  border-radius: 5px;
  border: none;
  background: #f2f5fc;
  color: #2f6bff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .recurringDaysList .calendarDay:hover {
  background: #e6ebf8;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .recurringDaysList .calendarDay.is-today {
  background: #2f6bff;
  color: #fff;
}
div.overlay div.modal div.modalBody div.availabilityPickerContainer div.availabilityPickerCalendar .recurringDaysList .calendarDay.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

div.availabilityPickerTimes,
div.availabilityEditOnly {
  position: relative;
  flex-grow: 1;
  min-height: 500px;
  padding: 20px;
}
div.availabilityPickerTimes div.timePickerHeader,
div.availabilityEditOnly div.timePickerHeader {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
  width: 100%;
  padding: 8px 0;
}
div.availabilityPickerTimes div.timePickerHeader > button,
div.availabilityEditOnly div.timePickerHeader > button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 20px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  position: absolute;
  top: 4px;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 20px;
  line-height: 20px;
  color: #fefefe;
  background-color: #172fe0;
  outline: none;
  border: 0;
  vertical-align: middle;
  margin: 0 0 5px 5px;
}
div.availabilityPickerTimes div.timePickerIntro,
div.availabilityEditOnly div.timePickerIntro {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  opacity: 0.5;
  padding: 20px;
  text-align: center;
}
div.availabilityPickerTimes div#availabilityRangesMount,
div.availabilityPickerTimes div#availabilityEditRangesMount,
div.availabilityEditOnly div#availabilityRangesMount,
div.availabilityEditOnly div#availabilityEditRangesMount {
  padding: 10px 0;
}
div.availabilityPickerTimes div#availabilityRangesMount div.rangesEmpty,
div.availabilityPickerTimes div#availabilityEditRangesMount div.rangesEmpty,
div.availabilityEditOnly div#availabilityRangesMount div.rangesEmpty,
div.availabilityEditOnly div#availabilityEditRangesMount div.rangesEmpty {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  opacity: 0.5;
  text-align: center;
  padding: 40px 20px;
  background-color: #EFEFEF;
  border-radius: 5px;
}
div.availabilityPickerTimes div#availabilityRangesMount div.timePickerRow,
div.availabilityPickerTimes div#availabilityEditRangesMount div.timePickerRow,
div.availabilityEditOnly div#availabilityRangesMount div.timePickerRow,
div.availabilityEditOnly div#availabilityEditRangesMount div.timePickerRow {
  position: relative;
  width: 100%;
  padding: 5px;
  background-color: #EFEFEF;
  border-radius: 5px;
  margin: 5px auto;
}
div.availabilityPickerTimes div#availabilityRangesMount div.timePickerRow .timeStart, div.availabilityPickerTimes div#availabilityRangesMount div.timePickerRow .timeEnd,
div.availabilityPickerTimes div#availabilityEditRangesMount div.timePickerRow .timeStart,
div.availabilityPickerTimes div#availabilityEditRangesMount div.timePickerRow .timeEnd,
div.availabilityEditOnly div#availabilityRangesMount div.timePickerRow .timeStart,
div.availabilityEditOnly div#availabilityRangesMount div.timePickerRow .timeEnd,
div.availabilityEditOnly div#availabilityEditRangesMount div.timePickerRow .timeStart,
div.availabilityEditOnly div#availabilityEditRangesMount div.timePickerRow .timeEnd {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  padding: 5px 15px 5px 5px;
  background: #fefefe;
  outline: none;
  border: 0;
  border-radius: 3px;
  appearance: none;
}
div.availabilityPickerTimes div#availabilityRangesMount div.timePickerRow .timeStart:after, div.availabilityPickerTimes div#availabilityRangesMount div.timePickerRow .timeEnd:after,
div.availabilityPickerTimes div#availabilityEditRangesMount div.timePickerRow .timeStart:after,
div.availabilityPickerTimes div#availabilityEditRangesMount div.timePickerRow .timeEnd:after,
div.availabilityEditOnly div#availabilityRangesMount div.timePickerRow .timeStart:after,
div.availabilityEditOnly div#availabilityRangesMount div.timePickerRow .timeEnd:after,
div.availabilityEditOnly div#availabilityEditRangesMount div.timePickerRow .timeStart:after,
div.availabilityEditOnly div#availabilityEditRangesMount div.timePickerRow .timeEnd:after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 5px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #333;
  font-size: 12px;
}
div.availabilityPickerTimes div#availabilityRangesMount div.timePickerRow .timeDash,
div.availabilityPickerTimes div#availabilityEditRangesMount div.timePickerRow .timeDash,
div.availabilityEditOnly div#availabilityRangesMount div.timePickerRow .timeDash,
div.availabilityEditOnly div#availabilityEditRangesMount div.timePickerRow .timeDash {
  margin: 0 5px;
}
div.availabilityPickerTimes div#availabilityRangesMount div.timePickerRow .timeRangeHint,
div.availabilityPickerTimes div#availabilityEditRangesMount div.timePickerRow .timeRangeHint,
div.availabilityEditOnly div#availabilityRangesMount div.timePickerRow .timeRangeHint,
div.availabilityEditOnly div#availabilityEditRangesMount div.timePickerRow .timeRangeHint {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  color: #e11d48;
}
div.availabilityPickerTimes div#availabilityRangesMount div.timePickerRow .timeDelete,
div.availabilityPickerTimes div#availabilityEditRangesMount div.timePickerRow .timeDelete,
div.availabilityEditOnly div#availabilityRangesMount div.timePickerRow .timeDelete,
div.availabilityEditOnly div#availabilityEditRangesMount div.timePickerRow .timeDelete {
  position: absolute;
  top: 50%;
  right: 0;
  width: 30px;
  height: 30px;
  font-size: 24px;
  border: 0;
  outline: none;
  transform: translateY(-50%);
}

@media (max-width: 675px) {
  div.overlay div.modal div.modalBody div.availabilityPickerContainer {
    flex-direction: column;
    height: auto; /* let it grow naturally on mobile */
  }
  div.overlay div.modal div.modalBody div.availabilityPickerCalendar {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid #EFEFEF;
  }
  div.overlay div.modal div.modalBody div.availabilityPickerTimes {
    width: 100%;
  }
}
/* Order matters: settings → tools → base → layout → components → utilities */
div.pageBody div.profileView {
  position: relative;
  width: 100%;
  padding: 0 0 100px 0;
  margin: 0 auto;
}
div.pageBody div.profileView div.nameplate {
  position: relative;
  width: 100%;
  padding: 20px 0;
}
div.pageBody div.profileView div.nameplate div.label {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  opacity: 0.7;
}
div.pageBody div.profileView div.nameplate div.firstName,
div.pageBody div.profileView div.nameplate div.lastName {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 80px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  font-size: clamp(50px, -12.3076923077px + 0.0923076923 * 100vw, 80px);
  position: relative;
  width: 100%;
  padding: 0;
}
div.pageBody div.profileView div.nameplate div.titleRole {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  text-transform: none;
  font-style: none;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: -0.03em;
  padding-top: 10px;
}
div.pageBody div.profileView div.nameplate div.pronouns {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  opacity: 0.5;
  padding: 5px 0;
}
div.pageBody div.profileView div.nameplate button.requestMentorship {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  outline: none;
  background-color: #172fe0;
  color: #fefefe;
  height: 40px;
  border-radius: 20px;
  width: 100%;
  text-align: center;
  border: 0;
  margin: 10px 0;
}
@media (min-width: 1000px) {
  div.pageBody div.profileView {
    padding-left: 400px;
    min-height: 1100px;
  }
  div.pageBody div.profileView div.nameplate button.requestMentorship {
    font-family: "Manrope", Arial, sans-serif;
    font-size: 16px;
    text-transform: none;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: normal;
    height: 50px;
    border-radius: 25px;
    max-width: 250px;
  }
}

div.mentorFixedHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 20px;
  height: 120px;
  padding-top: 60px;
  background-color: #fefefe;
  z-index: 1000;
  transform: translateY(-110%);
  transition: transform 220ms ease;
  will-change: transform;
}
div.mentorFixedHeader.isVisible {
  transform: translateY(0);
}
div.mentorFixedHeader .mentorContainer {
  position: relative;
  width: 100%;
  height: 60px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 10px;
}
div.mentorFixedHeader .mentorContainer .mentorDetails {
  position: relative;
  display: flex;
  min-width: 0;
  flex-grow: 1;
  flex-direction: row;
  gap: 10px;
}
div.mentorFixedHeader .mentorContainer .mentorDetails .mentorPhoto {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 10px 0;
  border-radius: 20px;
  flex: 0 0 40px;
  background-color: #EFEFEF;
  overflow: hidden;
}
div.mentorFixedHeader .mentorContainer .mentorDetails .mentorPhoto > img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
div.mentorFixedHeader .mentorContainer .mentorDetails .mentorInfo {
  position: relative;
  width: 100%;
  min-width: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
div.mentorFixedHeader .mentorContainer .mentorDetails .mentorInfo .mentorName {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 24px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  font-size: clamp(18px, 5.5384615385px + 0.0184615385 * 100vw, 24px);
  position: relative;
  width: 100%;
}
div.mentorFixedHeader .mentorContainer .mentorDetails .mentorInfo .mentorTitle {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  font-size: clamp(11px, 8.9230769231px + 0.0030769231 * 100vw, 12px);
  position: relative;
  width: 100%;
  min-width: 0;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
div.mentorFixedHeader .mentorContainer button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  outline: none;
  background-color: #172fe0;
  color: #fefefe;
  height: 30px;
  border-radius: 20px;
  text-align: center;
  border: 0;
  margin: 15px 0;
  flex: 0 0 100px;
}
div.mentorFixedHeader .mentorContainer button:before {
  content: "Request";
}
@media (min-width: 1000px) {
  div.mentorFixedHeader {
    height: 140px;
  }
  div.mentorFixedHeader .mentorContainer {
    height: 80px;
  }
  div.mentorFixedHeader .mentorContainer .mentorDetails .mentorPhoto {
    width: 50px;
    height: 50px;
    margin: 15px 0;
    border-radius: 25px;
    flex: 0 0 50px;
  }
  div.mentorFixedHeader .mentorContainer button {
    font-family: "Manrope", Arial, sans-serif;
    font-size: 15px;
    text-transform: none;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: normal;
    height: 40px;
    margin: 20px 0;
    flex: 0 0 200px;
  }
  div.mentorFixedHeader .mentorContainer button:before {
    content: "Request Mentorship";
  }
}

/* Order matters: settings → tools → base → layout → components → utilities */
div.pageBody div.profileView div.quickDetails {
  position: relative;
  width: 100%;
  padding: 0;
}
div.pageBody div.profileView div.quickDetails div.profilePhoto {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-color: #1c1c1c;
}
div.pageBody div.profileView div.quickDetails div.profilePhoto img {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
div.pageBody div.profileView div.quickDetails div.detailList {
  position: relative;
  width: 100%;
  padding: 10px 0;
}
div.pageBody div.profileView div.quickDetails div.detailList > ul {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
div.pageBody div.profileView div.quickDetails div.detailList > ul > li {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #1c1c1c;
}
div.pageBody div.profileView div.quickDetails div.detailList > ul > li > div.label {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
}
div.pageBody div.profileView div.quickDetails div.detailList > ul > li.simple > div.label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  line-height: 20px;
}
div.pageBody div.profileView div.quickDetails div.detailList > ul > li.simple > div.field {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  width: 100%;
  padding: 10px 0;
  text-align: right;
  line-height: 20px;
}
div.pageBody div.profileView div.quickDetails div.detailList > ul > li.pills > div.label {
  position: relative;
  padding: 10px 0 0 0;
  line-height: 20px;
}
div.pageBody div.profileView div.quickDetails div.detailList > ul > li.pills > div.field {
  position: relative;
  width: 100%;
  padding: 10px 0;
}
div.pageBody div.profileView div.quickDetails div.detailList > ul > li.pills > div.field ul {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
div.pageBody div.profileView div.quickDetails div.detailList > ul > li.pills > div.field ul > li {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  display: inline-block;
  width: auto;
  padding: 3px 5px;
  margin: 2px;
  background-color: #d0f921;
  border: 0;
  line-height: 1em;
  border-radius: 5px;
}
div.pageBody div.profileView div.quickDetails button.requestMentorship {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  outline: none;
  background-color: #172fe0;
  color: #fefefe;
  height: 40px;
  border-radius: 20px;
  width: 100%;
  text-align: center;
  border: 0;
}
@media (min-width: 1000px) {
  div.pageBody div.profileView div.quickDetails {
    position: absolute;
    top: 0;
    left: 0;
    width: 360px;
  }
}

/* Order matters: settings → tools → base → layout → components → utilities */
div.pageBody div.profileView div.longformAnswer {
  position: relative;
  width: 100%;
  padding: 10px 0;
}
div.pageBody div.profileView div.longformAnswer h4 {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  opacity: 0.7;
}
div.pageBody div.profileView div.longformAnswer p {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
}
div.pageBody div.profileView div.longformAnswer p.message {
  opacity: 0.3;
  font-style: italic;
}
div.pageBody div.profileView div.longformAnswer div.linkRow {
  position: relative;
  width: 100%;
  padding: 0;
}
div.pageBody div.profileView div.longformAnswer div.linkRow a {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  padding: 0 15px;
  display: inline-block;
  vertical-align: middle;
  background-color: #1c1c1c;
  color: #fefefe;
  text-decoration: none;
  margin: 0 5px 5px 0;
  transition: background-color 0.2s ease-in-out;
}
div.pageBody div.profileView div.longformAnswer div.linkRow a:hover {
  background-color: #172fe0;
}

/* Order matters: settings → tools → base → layout → components → utilities */
section.startConnection {
  position: relative;
  width: 100%;
  color: #fefefe;
  background-image: url("/assets/images/connect-bg.jpg");
  background-size: cover;
  margin: 0;
  padding: 0 20px;
}
section.startConnection div.connectBody {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 100px;
}
section.startConnection div.connectBody div.connectTitle {
  position: relative;
  width: 100%;
  padding: 20px 0 0;
}
section.startConnection div.connectBody div.connectTitle h3 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 26px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  margin: 0;
  padding: 20px 0;
}
@media (min-width: 1000px) {
  section.startConnection div.connectBody div.connectTitle {
    position: absolute;
    top: 0;
    left: 0;
    width: 360px;
  }
}
section.startConnection div.connectBody div.statusMessage {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  text-align: center;
  padding: 50px 30px;
  background-color: rgba(28, 28, 28, 0.4);
  border-radius: 5px;
  font-style: italic;
}
section.startConnection div.connectBody div.connectInfo,
section.startConnection div.connectBody div.statusMessage {
  position: relative;
  width: 100%;
}
section.startConnection div.connectBody div.connectInfo div.requestBlock,
section.startConnection div.connectBody div.statusMessage div.requestBlock {
  position: relative;
  width: 100%;
  padding: 20px 0;
}
section.startConnection div.connectBody div.connectInfo div.requestBlock h4,
section.startConnection div.connectBody div.statusMessage div.requestBlock h4 {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  margin: 0;
  padding: 5px 0;
}
section.startConnection div.connectBody div.connectInfo div.requestBlock div.menteeName,
section.startConnection div.connectBody div.statusMessage div.requestBlock div.menteeName {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 26px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
}
section.startConnection div.connectBody div.connectInfo div.requestBlock div.requestMessage,
section.startConnection div.connectBody div.statusMessage div.requestBlock div.requestMessage {
  position: relative;
  width: 100%;
}
section.startConnection div.connectBody div.connectInfo div.requestBlock div.requestMessage > textarea,
section.startConnection div.connectBody div.statusMessage div.requestBlock div.requestMessage > textarea {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  width: 100%;
  outline: none;
  border: 0;
  border-radius: 10px;
  color: #1c1c1c;
  margin: 10px 0;
  padding: 10px;
}
section.startConnection div.connectBody div.connectInfo div.requestBlock div.ackRow,
section.startConnection div.connectBody div.statusMessage div.requestBlock div.ackRow {
  position: relative;
  width: 100%;
}
section.startConnection div.connectBody div.connectInfo div.requestBlock div.ackRow label,
section.startConnection div.connectBody div.statusMessage div.requestBlock div.ackRow label {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  width: 100%;
}
section.startConnection div.connectBody div.connectInfo div.requestBlock div.ackRow label input[type=checkbox],
section.startConnection div.connectBody div.statusMessage div.requestBlock div.ackRow label input[type=checkbox] {
  width: 25px;
  height: 25px;
  margin: 0;
}
section.startConnection div.connectBody div.connectInfo div.requestBlock div.ackRow label input[type=checkbox]:checked,
section.startConnection div.connectBody div.statusMessage div.requestBlock div.ackRow label input[type=checkbox]:checked {
  accent-color: #d0f921;
}
section.startConnection div.connectBody div.connectInfo div.requestBlock div.ackRow label span.ackText a,
section.startConnection div.connectBody div.statusMessage div.requestBlock div.ackRow label span.ackText a {
  color: #d0f921;
}
section.startConnection div.connectBody div.connectInfo div.requestBlock div.pageActions,
section.startConnection div.connectBody div.statusMessage div.requestBlock div.pageActions {
  position: relative;
  width: 100%;
}
@media (min-width: 1000px) {
  section.startConnection div.connectBody {
    padding-top: 50px;
    padding-left: 400px;
  }
  section.startConnection div.connectBody div.connectTitle {
    padding: 50px 0 0;
  }
}
section.startConnection button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  position: relative;
  padding: 0 20px;
  margin-left: 5px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  outline: none;
  border: 0;
}
section.startConnection button.primary {
  color: #1c1c1c;
  background-color: #d0f921;
}
section.startConnection button.secondary {
  background-color: transparent;
  border: 1px solid #fefefe;
  line-height: 38px;
  color: #fefefe;
}
section.startConnection button:disabled {
  opacity: 0.3;
}

/* Order matters: settings → tools → base → layout → components → utilities */
div.pageBody div.mentorList {
  position: relative;
  width: 100%;
  padding: 0 0 100px 0;
  margin: 0 auto;
}
div.pageBody div.mentorList #mentorListStatus {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  text-align: center;
  padding: 50px 20px;
  background-color: rgba(28, 28, 28, 0.05);
  border-radius: 10px;
  font-style: italic;
}

/* Order matters: settings → tools → base → layout → components → utilities */
div.pageBody div.mentorList ul {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
div.pageBody div.mentorList ul li {
  position: relative;
  display: inline-block;
  width: 48%;
  padding: 10px;
  margin: 1%;
  background-color: #fefefe;
  vertical-align: top;
}
div.pageBody div.mentorList ul li a {
  text-decoration: initial;
  color: initial;
}
div.pageBody div.mentorList ul li div.mentorPhoto {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
div.pageBody div.mentorList ul li div.mentorPhoto > img {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
div.pageBody div.mentorList ul li div.mentorPhoto > div.pronouns {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  position: absolute;
  top: 5px;
  right: 5px;
  color: #fefefe;
  background-color: rgba(28, 28, 28, 0.7);
  padding: 2px 5px;
  border-radius: 3px;
}
div.pageBody div.mentorList ul li div.mentorName {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 20px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  font-size: clamp(18px, 17.0588235294px + 0.0029411765 * 100vw, 20px);
  position: relative;
  width: 100%;
  padding: 10px 0 2px 0;
}
div.pageBody div.mentorList ul li div.mentorTitle {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-style: none;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: -0.03em;
  font-size: clamp(12px, 11.0588235294px + 0.0029411765 * 100vw, 14px);
  position: relative;
  width: 100%;
  padding: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
div.pageBody div.mentorList ul li div.mentorLocation {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  position: relative;
  width: 100%;
  opacity: 0.5;
  padding: 2px 0;
}
@media (min-width: 675px) {
  div.pageBody div.mentorList ul li {
    width: 31.333%;
  }
}
@media (min-width: 1000px) {
  div.pageBody div.mentorList ul li {
    width: 23%;
  }
}

/* Order matters: settings → tools → base → layout → components → utilities */
.aaContainer {
  position: relative;
  width: 100%;
  padding: 0 0 100px 0;
  margin: 0 auto;
}
.aaContainer .aaToggle {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 15px;
  padding: 2px;
  margin: 0 auto;
  background-color: #1c1c1c;
  list-style: none;
}
.aaContainer .aaToggle > li {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  position: relative;
  width: 50%;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  margin: 0;
  color: #fefefe;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
.aaContainer .aaToggle > li.selected {
  background-color: #d0f921;
  color: #1c1c1c;
}
.aaContainer .questionsBody {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.aaContainer .questionsBody #aaEmptyState {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  text-align: center;
  padding: 50px 20px;
  background-color: rgba(28, 28, 28, 0.05);
  border-radius: 10px;
  font-style: italic;
}
.aaContainer .questionsBody .answeredList,
.aaContainer .questionsBody .unansweredList,
.aaContainer .questionsBody .generalList {
  position: relative;
  flex-grow: 1;
  padding: 10px 0;
}
.aaContainer .questionsBody .answeredList h2,
.aaContainer .questionsBody .unansweredList h2,
.aaContainer .questionsBody .generalList h2 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 20px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  margin: 0;
  padding: 10px 0 0 0;
}

@media (min-width: 675px) {
  .aaContainer .aaToggle {
    max-width: 300px;
    border-radius: 20px;
    padding: 3px;
  }
  .aaContainer .aaToggle > li {
    font-family: "Manrope", Arial, sans-serif;
    font-size: 14px;
    text-transform: none;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: normal;
    height: 34px;
    line-height: 34px;
    border-radius: 17px;
  }
}
/* Order matters: settings → tools → base → layout → components → utilities */
.aaContainer .questionsBody .answeredList .questionCard,
.aaContainer .questionsBody .unansweredList .questionCard,
.aaContainer .questionsBody .generalList .questionCard {
  position: relative;
  width: 100%;
  padding: 10px;
  margin: 10px auto;
  background-color: #fefefe;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  gap: 0;
  transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
}
.aaContainer .questionsBody .answeredList .questionCard .questionScore,
.aaContainer .questionsBody .unansweredList .questionCard .questionScore,
.aaContainer .questionsBody .generalList .questionCard .questionScore {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  text-transform: none;
  font-style: none;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: -0.03em;
  position: absolute;
  bottom: 20px;
  right: 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-left: 1px solid #EFEFEF;
  padding: 0 10px 0 20px;
}
.aaContainer .questionsBody .answeredList .questionCard .questionScore:before,
.aaContainer .questionsBody .unansweredList .questionCard .questionScore:before,
.aaContainer .questionsBody .generalList .questionCard .questionScore:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 8px;
  transform: translate(5px, -22px);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
.aaContainer .questionsBody .answeredList .questionCard .questionScore:after,
.aaContainer .questionsBody .unansweredList .questionCard .questionScore:after,
.aaContainer .questionsBody .generalList .questionCard .questionScore:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 8px;
  transform: translate(5px, 12px);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
.aaContainer .questionsBody .answeredList .questionCard .questionScore.positive:before,
.aaContainer .questionsBody .unansweredList .questionCard .questionScore.positive:before,
.aaContainer .questionsBody .generalList .questionCard .questionScore.positive:before {
  background-image: url("/assets/images/score_up.svg");
}
.aaContainer .questionsBody .answeredList .questionCard .questionScore.negative:after,
.aaContainer .questionsBody .unansweredList .questionCard .questionScore.negative:after,
.aaContainer .questionsBody .generalList .questionCard .questionScore.negative:after {
  background-image: url("/assets/images/score_down.svg");
}
.aaContainer .questionsBody .answeredList .questionCard .questionDetails,
.aaContainer .questionsBody .unansweredList .questionCard .questionDetails,
.aaContainer .questionsBody .generalList .questionCard .questionDetails {
  position: relative;
  width: 100%;
  padding: 10px 10px 60px 10px;
}
.aaContainer .questionsBody .answeredList .questionCard .questionDetails .questionTime,
.aaContainer .questionsBody .answeredList .questionCard .questionDetails .questionTitle,
.aaContainer .questionsBody .answeredList .questionCard .questionDetails .questionStats,
.aaContainer .questionsBody .unansweredList .questionCard .questionDetails .questionTime,
.aaContainer .questionsBody .unansweredList .questionCard .questionDetails .questionTitle,
.aaContainer .questionsBody .unansweredList .questionCard .questionDetails .questionStats,
.aaContainer .questionsBody .generalList .questionCard .questionDetails .questionTime,
.aaContainer .questionsBody .generalList .questionCard .questionDetails .questionTitle,
.aaContainer .questionsBody .generalList .questionCard .questionDetails .questionStats {
  position: relative;
  width: 100%;
}
.aaContainer .questionsBody .answeredList .questionCard .questionDetails .questionTime,
.aaContainer .questionsBody .unansweredList .questionCard .questionDetails .questionTime,
.aaContainer .questionsBody .generalList .questionCard .questionDetails .questionTime {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  opacity: 0.7;
  padding: 0;
  margin: 0;
}
.aaContainer .questionsBody .answeredList .questionCard .questionDetails .questionTitle,
.aaContainer .questionsBody .unansweredList .questionCard .questionDetails .questionTitle,
.aaContainer .questionsBody .generalList .questionCard .questionDetails .questionTitle {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 24px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  font-size: clamp(18px, 15.1764705882px + 0.0088235294 * 100vw, 24px);
  padding: 5px 0;
  margin: 0;
}
.aaContainer .questionsBody .answeredList .questionCard .questionDetails .questionStats,
.aaContainer .questionsBody .unansweredList .questionCard .questionDetails .questionStats,
.aaContainer .questionsBody .generalList .questionCard .questionDetails .questionStats {
  padding: 0;
  margin: 0;
}
.aaContainer .questionsBody .answeredList .questionCard .questionDetails .questionStats .statPill,
.aaContainer .questionsBody .unansweredList .questionCard .questionDetails .questionStats .statPill,
.aaContainer .questionsBody .generalList .questionCard .questionDetails .questionStats .statPill {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  display: inline-block;
  vertical-align: top;
  padding: 2px 5px;
  margin: 5px;
  background-color: #EFEFEF;
  border-radius: 5px;
}
.aaContainer .questionsBody .answeredList .questionCard .questionAsker,
.aaContainer .questionsBody .unansweredList .questionCard .questionAsker,
.aaContainer .questionsBody .generalList .questionCard .questionAsker {
  position: absolute;
  bottom: 20px;
  left: 20px;
}
.aaContainer .questionsBody .answeredList .questionCard .questionAsker .userPhoto,
.aaContainer .questionsBody .unansweredList .questionCard .questionAsker .userPhoto,
.aaContainer .questionsBody .generalList .questionCard .questionAsker .userPhoto {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: #EFEFEF;
  background-size: cover;
}
.aaContainer .questionsBody .answeredList .questionCard .questionAsker .userPhoto .sameAskers,
.aaContainer .questionsBody .unansweredList .questionCard .questionAsker .userPhoto .sameAskers,
.aaContainer .questionsBody .generalList .questionCard .questionAsker .userPhoto .sameAskers {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 9px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  position: absolute;
  bottom: -2px;
  right: -2px;
  height: 20px;
  line-height: 20px;
  min-width: 20px;
  border-radius: 10px;
  background-color: #172fe0;
  color: #fefefe;
  text-align: center;
}
.aaContainer .questionsBody .answeredList .questionCard:hover,
.aaContainer .questionsBody .unansweredList .questionCard:hover,
.aaContainer .questionsBody .generalList .questionCard:hover {
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}

@media (min-width: 675px) {
  .aaContainer .questionsBody .answeredList .questionCard,
  .aaContainer .questionsBody .unansweredList .questionCard,
  .aaContainer .questionsBody .generalList .questionCard {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 20px;
  }
  .aaContainer .questionsBody .answeredList .questionCard .questionScore,
  .aaContainer .questionsBody .unansweredList .questionCard .questionScore,
  .aaContainer .questionsBody .generalList .questionCard .questionScore {
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 24px;
    text-transform: none;
    font-style: none;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: -0.03em;
    position: relative;
    bottom: initial;
    right: initial;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 60px;
    height: initial;
  }
  .aaContainer .questionsBody .answeredList .questionCard .questionScore:before,
  .aaContainer .questionsBody .unansweredList .questionCard .questionScore:before,
  .aaContainer .questionsBody .generalList .questionCard .questionScore:before {
    height: 12px;
    transform: translate(5px, -30px);
  }
  .aaContainer .questionsBody .answeredList .questionCard .questionScore:after,
  .aaContainer .questionsBody .unansweredList .questionCard .questionScore:after,
  .aaContainer .questionsBody .generalList .questionCard .questionScore:after {
    height: 12px;
    transform: translate(5px, 16px);
  }
  .aaContainer .questionsBody .answeredList .questionCard .questionDetails,
  .aaContainer .questionsBody .unansweredList .questionCard .questionDetails,
  .aaContainer .questionsBody .generalList .questionCard .questionDetails {
    padding: 0 20px;
    flex-grow: 1;
  }
  .aaContainer .questionsBody .answeredList .questionCard .questionAsker,
  .aaContainer .questionsBody .unansweredList .questionCard .questionAsker,
  .aaContainer .questionsBody .generalList .questionCard .questionAsker {
    position: relative;
    bottom: initial;
    left: initial;
    display: flex;
    flex: 0 0 70px;
    flex-direction: column;
    justify-content: center;
  }
  .aaContainer .questionsBody .answeredList .questionCard .questionAsker .userPhoto,
  .aaContainer .questionsBody .unansweredList .questionCard .questionAsker .userPhoto,
  .aaContainer .questionsBody .generalList .questionCard .questionAsker .userPhoto {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 35px;
  }
  .aaContainer .questionsBody .answeredList .questionCard .questionAsker .userPhoto .sameAskers,
  .aaContainer .questionsBody .unansweredList .questionCard .questionAsker .userPhoto .sameAskers,
  .aaContainer .questionsBody .generalList .questionCard .questionAsker .userPhoto .sameAskers {
    font-family: "Manrope", Arial, sans-serif;
    font-size: 10px;
    text-transform: none;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: normal;
    bottom: -3px;
    right: -3px;
    height: 26px;
    line-height: 26px;
    min-width: 26px;
    border-radius: 13px;
  }
}
/* Order matters: settings → tools → base → layout → components → utilities */
div.overlay div.modal.askQuestion div.modalBody div.questionContainer {
  padding: 20px;
}
div.overlay div.modal.askQuestion div.modalBody div.questionContainer label {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
  width: 100%;
  display: block;
  padding: 10px 0;
}
div.overlay div.modal.askQuestion div.modalBody div.questionContainer label input,
div.overlay div.modal.askQuestion div.modalBody div.questionContainer label textarea,
div.overlay div.modal.askQuestion div.modalBody div.questionContainer label select {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  display: block;
  width: 100%;
  margin: 5px auto;
  padding: 10px;
  border: 1px solid #DDDDDD;
  outline: none;
  border-radius: 5px;
}

/* Order matters: settings → tools → base → layout → components → utilities */
div.overlay div.modal.answerQuestion div.modalBody div.answerContainer {
  padding: 20px;
}
div.overlay div.modal.answerQuestion div.modalBody div.answerContainer div.theQuestion {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 24px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  padding-bottom: 20px;
}
div.overlay div.modal.answerQuestion div.modalBody div.answerContainer div.theQuestion div.asker {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  position: relative;
  width: 100%;
  opacity: 0.7;
  padding: 10px 0;
}
div.overlay div.modal.answerQuestion div.modalBody div.answerContainer label {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
  width: 100%;
  display: block;
  padding: 10px 0;
}
div.overlay div.modal.answerQuestion div.modalBody div.answerContainer label input,
div.overlay div.modal.answerQuestion div.modalBody div.answerContainer label textarea,
div.overlay div.modal.answerQuestion div.modalBody div.answerContainer label select {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  display: block;
  width: 100%;
  margin: 5px auto;
  padding: 10px;
  border: 1px solid #DDDDDD;
  outline: none;
  border-radius: 5px;
}

/* Order matters: settings → tools → base → layout → components → utilities */
div.pageBody .questionBlock {
  position: relative;
  width: 100%;
  padding: 20px 0;
}
div.pageBody .questionBlock .questionDate {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  position: relative;
  width: 100%;
  opacity: 0.7;
  padding: 5px 0;
}
div.pageBody .questionBlock h2 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 60px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  font-size: clamp(40px, -1.5384615385px + 0.0615384615 * 100vw, 60px);
  position: relative;
  width: 100%;
  padding: 10px 0;
  margin: 0;
}
div.pageBody .questionBlock p {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  padding: 10px 0;
  margin: 0;
}
div.pageBody .questionBlock #questionEditedNote {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  font-style: italic;
  opacity: 0.3;
}
div.pageBody .questionBlock .questionAsker {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  width: 100%;
  padding: 10px 0;
}
div.pageBody .questionBlock .questionAsker .userPhoto {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 5px;
  background-color: #1c1c1c;
  vertical-align: middle;
  background-size: cover;
}
div.pageBody .questionBlock .sameQuestionList {
  position: relative;
  width: 100%;
  padding: 10px 0;
}
div.pageBody .questionBlock .sameQuestionList .sameQuestionAvatars {
  display: inline-block;
  vertical-align: middle;
  padding-right: 10px;
}
div.pageBody .questionBlock .sameQuestionList .sameQuestionAvatars .userPhoto {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: -10px;
  background-color: #1c1c1c;
  vertical-align: middle;
  background-size: cover;
  border: 2px solid #f2f0e7;
  vertical-align: middle;
}
div.pageBody .questionBlock .sameQuestionList .sameAskers {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  display: inline-block;
  padding: 5px 10px;
  opacity: 0.7;
  vertical-align: middle;
}
div.pageBody .questionBlock .questionActions {
  position: relative;
  width: 100%;
  padding: 15px 0;
}
div.pageBody .questionBlock .questionActions button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  padding: 20px 30px;
  border-radius: 5px;
  border: 0;
  outline: none;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 10px 0;
}
div.pageBody .questionBlock .questionActions button.primary {
  background-color: #172fe0;
  color: #fefefe;
}
div.pageBody .questionBlock .questionActions button.secondary {
  background-color: #1c1c1c;
  color: #fefefe;
}
div.pageBody .answersBlock {
  position: relative;
  width: 100%;
  padding: 20px 0 100px 0;
}
div.pageBody .answersBlock h2 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 24px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  padding: 20px 0;
}
div.pageBody .answersBlock .answerCard {
  position: relative;
  width: 100%;
  padding: 30px;
  margin: 20px auto;
  background-color: #fefefe;
  border-radius: 10px;
}
div.pageBody .answersBlock .answerCard .flags {
  position: relative;
  width: 100%;
  padding: 0 0 20px 0;
}
div.pageBody .answersBlock .answerCard .flags .flagPill {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  display: inline-block;
  vertical-align: middle;
}
div.pageBody .answersBlock .answerCard .flags .flagPill.primary {
  color: #1c1c1c;
  background-color: #d0f921;
}
div.pageBody .answersBlock .answerCard .flags .flagPill.secondary {
  color: #1c1c1c;
  background-color: #EFEFEF;
}
div.pageBody .answersBlock .answerUser {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  width: 100%;
  padding: 0 0 20px 0;
}
div.pageBody .answersBlock .answerUser .userPhoto {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 5px;
  background-color: #1c1c1c;
  vertical-align: middle;
  background-size: cover;
}
div.pageBody .answersBlock .answerContent {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  padding: 10px 0 30px 0;
  margin: 0;
}
div.pageBody .answersBlock .answerContent .answerDate {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  font-style: italic;
  opacity: 0.3;
  padding: 5px 0;
}
div.pageBody .answersBlock .answerActions {
  position: relative;
  width: 100%;
  padding: 0;
}
div.pageBody .answersBlock .answerActions button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  padding: 15px 30px;
  border-radius: 5px;
  border: 0;
  outline: none;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 10px 0;
}
div.pageBody .answersBlock .answerActions button.primary {
  background-color: #172fe0;
  color: #fefefe;
}
div.pageBody .answersBlock .answerActions button.secondary {
  background-color: #1c1c1c;
  color: #fefefe;
}
div.pageBody .answersBlock .answerActions button.tertiary {
  background-color: #EFEFEF;
  color: #1c1c1c;
}
div.pageBody .answersBlock .answerActions button.tertiary.selected {
  background-color: #d0f921;
  border: 1px solid #1c1c1c;
}

/* Order matters: settings → tools → base → layout → components → utilities */
.feedbackContainer {
  position: relative;
  width: 100%;
  padding: 0 0 100px 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.feedbackContainer h3 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 20px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  margin: 10px 0;
  padding: 0;
}
.feedbackContainer .leaveFeedback {
  position: relative;
  flex-grow: 1;
}
.feedbackContainer .leaveFeedback .feedbackForm {
  position: relative;
  width: 100%;
  background-color: #fefefe;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.feedbackContainer .leaveFeedback .feedbackForm label {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
  width: 100%;
  display: block;
  padding: 10px 0;
}
.feedbackContainer .leaveFeedback .feedbackForm label input,
.feedbackContainer .leaveFeedback .feedbackForm label textarea,
.feedbackContainer .leaveFeedback .feedbackForm label select {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  display: block;
  width: 100%;
  margin: 5px auto;
  padding: 10px;
  border: 1px solid #DDDDDD;
  outline: none;
  border-radius: 5px;
}
.feedbackContainer .leaveFeedback .feedbackForm .feedbackActions {
  position: relative;
  width: 100%;
  padding: 15px 0;
}
.feedbackContainer .leaveFeedback .feedbackForm .feedbackActions button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  padding: 20px 30px;
  border-radius: 5px;
  border: 0;
  outline: none;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 10px 0;
}
.feedbackContainer .leaveFeedback .feedbackForm .feedbackActions button.primary {
  background-color: #172fe0;
  color: #fefefe;
}
.feedbackContainer .leaveFeedback .feedbackForm .feedbackActions button.secondary {
  background-color: #1c1c1c;
  color: #fefefe;
}
.feedbackContainer .leaveFeedback .feedbackForm .feedbackActions button:disabled {
  opacity: 0.3;
}
.feedbackContainer .pastFeedback {
  flex: 0 0 360px;
}
.feedbackContainer .pastFeedback div.feedbackItem {
  position: relative;
  width: 100%;
  background-color: #fefefe;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.feedbackContainer .pastFeedback div.feedbackItem h4 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 18px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  margin: 5px 0;
  padding: 0;
}
.feedbackContainer .pastFeedback div.feedbackItem .status {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  display: inline-block;
  padding: 3px 5px;
  border-radius: 2px;
}
.feedbackContainer .pastFeedback div.feedbackItem .status.open {
  background-color: #d0f921;
  color: #1c1c1c;
}
.feedbackContainer .pastFeedback div.feedbackItem .status.inprogress {
  background-color: #172fe0;
  color: #fefefe;
}
.feedbackContainer .pastFeedback div.feedbackItem .status.moredetail {
  background-color: #e11d48;
  color: #fefefe;
}
.feedbackContainer .pastFeedback div.feedbackItem .status.closed {
  background-color: #EFEFEF;
  color: #1c1c1c;
}
.feedbackContainer .pastFeedback div.feedbackItem .date {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  opacity: 0.3;
}
.feedbackContainer .pastFeedback #pastFeedbackEmpty {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  text-align: center;
  padding: 50px 20px;
  background-color: rgba(28, 28, 28, 0.05);
  border-radius: 10px;
  font-style: italic;
}

@media (min-width: 1000px) {
  .feedbackContainer {
    flex-direction: row;
  }
}
/* Order matters: settings → tools → base → layout → components → utilities */
div.pageBody .feedbackBlock {
  position: relative;
  width: 100%;
  padding: 20px 0;
}
div.pageBody .feedbackBlock .feedbackDate {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  width: 100%;
  opacity: 0.5;
  padding: 5px 0;
}
div.pageBody .feedbackBlock .status {
  font-family: "Space Mono", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: 0.02em;
  display: inline-block;
  padding: 3px 5px;
  border-radius: 2px;
}
div.pageBody .feedbackBlock .status.open {
  background-color: #d0f921;
  color: #1c1c1c;
}
div.pageBody .feedbackBlock .status.inprogress {
  background-color: #172fe0;
  color: #fefefe;
}
div.pageBody .feedbackBlock .status.moredetail {
  background-color: #e11d48;
  color: #fefefe;
}
div.pageBody .feedbackBlock .status.closed {
  background-color: #EFEFEF;
  color: #1c1c1c;
}
div.pageBody .feedbackBlock h2 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 60px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
  width: 100%;
  padding: 10px 0;
  margin: 0;
}
div.pageBody .feedbackBlock p {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  padding: 10px 0;
  margin: 0;
}
div.pageBody .feedbackBlock .ticketBody h3 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 18px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
  width: 100%;
  padding: 20px 0 5px 0;
  margin: 0;
}
div.pageBody .feedbackBlock .ticketActions {
  position: relative;
  width: 100%;
  padding: 15px 0;
}
div.pageBody .feedbackBlock .ticketActions button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  padding: 20px 30px;
  border-radius: 5px;
  border: 0;
  outline: none;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 10px 0;
}
div.pageBody .feedbackBlock .ticketActions button.primary {
  background-color: #172fe0;
  color: #fefefe;
}
div.pageBody .feedbackBlock .ticketActions button.secondary {
  background-color: #1c1c1c;
  color: #fefefe;
}
div.pageBody .commentsBlock {
  position: relative;
  width: 100%;
  padding: 20px 0 100px 0;
}
div.pageBody .commentsBlock h2 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 24px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  padding: 20px 0;
}
div.pageBody .commentsBlock .commentList {
  position: relative;
  width: 100%;
}
div.pageBody .commentsBlock .comment {
  position: relative;
  width: 100%;
  padding: 30px;
  margin: 20px auto;
  background-color: #fefefe;
  border-radius: 10px;
}
div.pageBody .commentsBlock .comment .commenter {
  position: relative;
  width: 100%;
}
div.pageBody .commentsBlock .comment .commenter .name {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 20px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  display: block;
}
div.pageBody .commentsBlock .comment .commenter .title {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  display: block;
  opacity: 0.3;
}
div.pageBody .commentsBlock .comment .message {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  position: relative;
  width: 100%;
  padding: 20px 0;
}
div.pageBody .commentsBlock .commentActions {
  position: relative;
  width: 100%;
  padding: 15px 0;
}
div.pageBody .commentsBlock .commentActions button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: normal;
  padding: 20px 30px;
  border-radius: 5px;
  border: 0;
  outline: none;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 10px 0;
}
div.pageBody .commentsBlock .commentActions button.primary {
  background-color: #172fe0;
  color: #fefefe;
}
div.pageBody .commentsBlock .commentActions button.secondary {
  background-color: #1c1c1c;
  color: #fefefe;
}

/* Order matters: settings → tools → base → layout → components → utilities */
div.overlay div.modal.addComment div.modalBody div.commentContainer {
  padding: 20px;
}
div.overlay div.modal.addComment div.modalBody div.commentContainer label {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
  width: 100%;
  display: block;
  padding: 10px 0;
}
div.overlay div.modal.addComment div.modalBody div.commentContainer label input,
div.overlay div.modal.addComment div.modalBody div.commentContainer label textarea,
div.overlay div.modal.addComment div.modalBody div.commentContainer label select {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  display: block;
  width: 100%;
  margin: 5px auto;
  padding: 10px;
  border: 1px solid #DDDDDD;
  outline: none;
  border-radius: 5px;
}

/* Order matters: settings → tools → base → layout → components → utilities */
div.overlay div.modal.editFeedback div.modalBody div.editFeedbackContainer {
  padding: 20px;
}
div.overlay div.modal.editFeedback div.modalBody div.editFeedbackContainer label {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
  width: 100%;
  display: block;
  padding: 10px 0;
}
div.overlay div.modal.editFeedback div.modalBody div.editFeedbackContainer label input,
div.overlay div.modal.editFeedback div.modalBody div.editFeedbackContainer label textarea,
div.overlay div.modal.editFeedback div.modalBody div.editFeedbackContainer label select {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.5em;
  display: block;
  width: 100%;
  margin: 5px auto;
  padding: 10px;
  border: 1px solid #DDDDDD;
  outline: none;
  border-radius: 5px;
}

/*# sourceMappingURL=main.css.map */