/* ===== Product guides section (ported from staffing) ===== */

.sk-select {
  position: relative;
  font-family: "Manrope", sans-serif;
}
.sk-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-right: 48px;
  position: relative;
  border: 1.5px solid #e9e9ea;
  border-radius: 8px;
  background: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  outline: none;
  color: #1f1c26;
}
.sk-select-trigger:focus-visible {
  border-color: #5848f7;
}
.sk-select-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sk-select-chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  pointer-events: none;
  flex: none;
}
.sk-select[data-open="true"] .sk-select-chevron {
  transform: translateY(-50%) rotate(180deg);
}
.sk-select[data-open="true"] .sk-select-trigger {
  border-color: #5848f7;
}
.sk-select-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1.5px solid #e9e9ea;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(31, 28, 38, 0.12);
  overflow: hidden;
}
.sk-select[data-open="true"] .sk-select-panel {
  display: block;
}
.sk-select-option {
  display: block;
  width: 100%;
  padding: 11px 16px;
  font-size: 14px;
  color: #1f1c26;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: "Manrope", sans-serif;
  text-align: left;
}
.sk-select-option:hover,
.sk-select-option.is-active {
  background: #f2f1fe;
}

#product {
  overflow: hidden;
  padding: 80px 80px 12px;
  position: relative;
  background: #f4f2ff
    url("/higher-education/assets/backgrounds/skilly-bg-curved-lavender-indigo.png") center bottom /
    cover no-repeat;
  border-bottom: 1px solid #e9e9ea;
}
.product-inner {
  max-width: 1250px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.product-section-title {
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1f1c26;
  margin: 0 0 16px;
  line-height: 1.08;
}
.product-byline {
  font-size: clamp(15px, 1.55vw, 16.5px);
  line-height: 1.5;
  color: #4c4951;
  margin: 0 auto 28px;
  max-width: 960px;
  text-wrap: balance;
}
.product-guide-mascots {
  --pg-mascot-h: 96px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 2vw, 18px);
  margin: 0 auto 20px;
  min-height: calc(var(--pg-mascot-h) + 6px);
}
.product-guide-mascot {
  flex: none;
  height: var(--pg-mascot-h);
  width: auto;
  display: block;
  filter: drop-shadow(0 5px 12px rgba(88, 72, 247, 0.14));
  animation: product-guide-mascot-float 4s ease-in-out infinite;
  transform-origin: 50% 85%;
}
.product-guide-mascot--neutral {
  height: calc(var(--pg-mascot-h) * 0.985);
}
@keyframes product-guide-mascot-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.035);
  }
}
.product-tabs {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid #e9e9ea;
  border-radius: 10px;
  padding: 4px;
  gap: 0;
  margin-bottom: 0;
}
.product-tab {
  border: none;
  background: transparent;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #4c4951;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.product-tab.is-active {
  background: #e8e5ff;
  color: #3827d9;
}
.product-tab.product-tab--cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #5848f7;
  color: #fff;
  margin-left: 4px;
  box-shadow: 0 4px 14px rgba(88, 72, 247, 0.28);
}
.product-tab.product-tab--cta:hover,
.product-tab.product-tab--cta.is-active {
  background: #3827d9;
  color: #fff;
}
.product-tab--cta-mobile {
  display: none;
}
.product-card-wrap {
  max-width: 100%;
  margin: 120px auto -36px;
  text-align: left;
  position: relative;
  z-index: 1;
  perspective: 1100px;
}
.product-card-col {
  position: relative;
  min-width: 0;
  height: 620px;
  padding-top: 64px;
  overflow: visible;
  box-sizing: border-box;
}
.product-stage {
  position: relative;
  height: 660px;
  overflow: visible;
  transform: none;
}
.product-card-tilt {
  transform: rotateX(5deg);
  transform-origin: 50% 42%;
  animation: product-card-3d-idle 28s ease-in-out infinite;
}
@keyframes product-card-3d-idle {
  0%,
  100% {
    transform: rotateX(5deg) rotateY(-5deg) translateY(0) scale(1);
  }
  25% {
    transform: rotateX(6.25deg) rotateY(-5deg) translateY(-7px) scale(1.003);
  }
  50% {
    transform: rotateX(5deg) rotateY(5deg) translateY(0) scale(1);
  }
  75% {
    transform: rotateX(6.25deg) rotateY(5deg) translateY(-7px) scale(1.003);
  }
}
.product-deck {
  position: relative;
  height: 660px;
  margin: 0 auto;
  max-width: 100%;
}
.product-deck-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 660px;
  transform-origin: 50% 0%;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease;
  will-change: transform;
}
.product-deck-layer.deck-pos-0 {
  z-index: 5;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.product-deck-layer.deck-pos-1 {
  z-index: 4;
  transform: translateY(-22px) scale(0.955);
}
.product-deck-layer.deck-pos-2 {
  z-index: 3;
  transform: translateY(-44px) scale(0.91);
}
.product-deck-layer.deck-pos-3 {
  z-index: 2;
  transform: translateY(-66px) scale(0.865);
}
.product-deck-layer.deck-pos-4 {
  z-index: 1;
  transform: translateY(-88px) scale(0.82);
}
.product-deck.is-shuffling .product-deck-layer {
  transition: none;
}
.product-deck-layer.anim-exit-front {
  animation: product-shuffle-exit-front 0.62s cubic-bezier(0.22, 0.61, 0.36, 1)
    forwards;
  z-index: 1;
}
.product-deck-layer.anim-promote {
  animation: product-shuffle-promote 0.62s cubic-bezier(0.22, 0.61, 0.36, 1)
    forwards;
}
.product-deck-layer.anim-shift-up {
  animation: product-shuffle-shift-up 0.62s cubic-bezier(0.22, 0.61, 0.36, 1)
    forwards;
}
.product-deck-layer.anim-sink-front {
  animation: product-shuffle-sink-front 0.62s cubic-bezier(0.22, 0.61, 0.36, 1)
    forwards;
}
.product-deck-layer.anim-sink-back1 {
  animation: product-shuffle-sink-back1 0.62s cubic-bezier(0.22, 0.61, 0.36, 1)
    forwards;
}
.product-deck-layer.anim-rise-back2 {
  animation: product-shuffle-rise-back2 0.62s cubic-bezier(0.22, 0.61, 0.36, 1)
    forwards;
}
@keyframes product-shuffle-exit-front {
  0% {
    transform: translateY(0) scale(1);
  }
  38% {
    transform: translateY(32px) scale(0.985);
  }
  100% {
    transform: translateY(-88px) scale(0.82);
  }
}
@keyframes product-shuffle-promote {
  0% {
    transform: translateY(-22px) scale(0.955);
  }
  38% {
    transform: translateY(-6px) scale(0.985);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes product-shuffle-shift-up {
  0% {
    transform: translateY(-44px) scale(0.91);
  }
  100% {
    transform: translateY(-22px) scale(0.955);
  }
}
@keyframes product-shuffle-sink-front {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-22px) scale(0.955);
  }
}
@keyframes product-shuffle-sink-back1 {
  0% {
    transform: translateY(-22px) scale(0.955);
  }
  100% {
    transform: translateY(-44px) scale(0.91);
  }
}
@keyframes product-shuffle-rise-back2 {
  0% {
    transform: translateY(-88px) scale(0.82);
  }
  38% {
    transform: translateY(-6px) scale(0.985);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.hc-root--product {
  height: 660px;
  text-align: left;
}
.hc-root--product .hc-av img,
.hc-root--product .hc-guide-rep img {
  object-position: center 12%;
}
.hc-root--product .hc-card {
  height: 660px;
  border: 1px solid #e9e9ea;
  border-radius: 16px;
  box-shadow: 0 1px 13px rgba(0, 0, 0, 0.08),
    0 26px 52px -22px rgba(31, 28, 38, 0.2);
}

.product-deck-blank {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 660px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e9e9ea;
  box-shadow: 0 1px 13px rgba(0, 0, 0, 0.08),
    0 26px 52px -22px rgba(31, 28, 38, 0.2);
}

.product-deck-layer .product-deck-glass {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 660px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid #e9e9ea;
  box-shadow: 0 1px 13px rgba(0, 0, 0, 0.08),
    0 26px 52px -22px rgba(31, 28, 38, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.product-deck-layer.deck-pos-1 .product-deck-glass,
.product-deck-layer.deck-pos-2 .product-deck-glass,
.product-deck-layer.deck-pos-3 .product-deck-glass,
.product-deck-layer.deck-pos-4 .product-deck-glass,
.product-deck-layer.deck-pos-1 .product-deck-blank,
.product-deck-layer.deck-pos-2 .product-deck-blank,
.product-deck-layer.deck-pos-3 .product-deck-blank,
.product-deck-layer.deck-pos-4 .product-deck-blank {
  pointer-events: none;
}
.product-deck-layer.anim-promote,
.product-deck-layer.anim-rise-back2 {
  z-index: 6;
}
.product-glass-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.product-glass-mascot {
  width: 64px;
  height: 64px;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(88, 72, 247, 0.35));
}
.product-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #5848f7;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  padding: 20px 44px;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(88, 72, 247, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.product-cta-btn:hover {
  background: #3827d9;
  transform: translateY(-1px);
}
.product-guide-select-wrap,
.product-mobile-wrap {
  display: none;
}

@media (max-width: 1080px) {
  #product {
    padding: 64px 32px 0;
  }
  .product-card-col {
    height: 540px;
    padding-top: 40px;
  }
  .product-stage {
    height: 600px;
  }
  .product-deck,
  .product-deck-layer,
  .product-deck-blank,
  .product-deck-layer .product-deck-glass {
    height: 600px;
  }
  .hc-root--product,
  .hc-root--product .hc-card {
    height: 600px;
  }
  .product-card-wrap {
    margin-top: 28px;
  }
}

@media (max-width: 768px) {
  #product {
    padding: 48px 20px 0;
    overflow: hidden;
    contain: layout style;
  }
  .product-inner,
  .product-card-wrap,
  .product-card-col,
  .product-stage,
  .product-deck {
    max-width: 100%;
  }
  .product-card-tilt {
    transform: none !important;
    animation: none !important;
  }

  #product .product-card-wrap.product-mobile-wrap {
    max-width: 100%;
    perspective: none;
    text-align: left;
    height: 480px;
    overflow: hidden;
    contain: layout style;
  }
  #product .product-mobile-stage {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    contain: layout style paint;
  }
  #product .product-mobile-viewport {
    height: 100%;
    overflow: hidden;
  }
  #product .product-mobile-panel {
    opacity: 1;
    transition: opacity 0.32s ease;
    height: 100%;
    overflow: hidden;
  }
  #product .product-mobile-panel.is-fading {
    opacity: 0;
  }
  #product .product-mobile-stage .hc-root--mobile-native {
    height: 100% !important;
    overflow: hidden;
  }
  #product .product-mobile-stage .hc-root--mobile-native .hc-card {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden;
  }
  #product .product-mobile-stage .hc-root--mobile-native .hc-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  #product .product-mobile-stage .hc-root--mobile-native .hc-convo {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  #product .product-mobile-stage .hc-root--mobile-native .hc-stream {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  #product .product-mobile-stage .hc-root--mobile-native .hc-bubble {
    font-size: 13px;
    line-height: 1.45;
    padding: 9px 12px;
  }
  #product .product-mobile-stage .hc-root--mobile-native .hc-suggest-module.hc-show {
    max-height: 140px;
  }
  #product .product-mobile-stage .hc-root--mobile-native .hc-suggest-panel {
    padding: 6px 10px 2px;
    gap: 6px;
  }
  #product .product-mobile-stage .hc-root--mobile-native .hc-suggest-item {
    padding: 5px 8px 5px 6px;
  }
  #product .product-mobile-stage .product-deck-blank {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    height: 100%;
  }
  #product .product-mobile-stage .product-deck-glass--mobile {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 16px;
    margin: 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid #e9e9ea;
    box-shadow: 0 1px 13px rgba(0, 0, 0, 0.08),
      0 26px 52px -22px rgba(31, 28, 38, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    box-sizing: border-box;
  }
  #product .product-mobile-stage .product-cta-btn {
    font-size: 18px;
    padding: 20px 44px;
    text-align: center;
  }
  #product .product-guide-mascots {
    --pg-mascot-h: 56px;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 16px;
  }
  #product .product-section-title {
    font-size: clamp(28px, 8vw, 36px);
    text-align: left;
  }
  #product .product-byline {
    text-align: left;
    margin-bottom: 20px;
  }
  #product .product-card-wrap.product-deck-wrap--desktop {
    display: none !important;
  }
  #product .product-tabs--desktop {
    display: none !important;
  }
  #product .product-guide-select-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: 100%;
    margin: 0 0 20px;
    text-align: left;
  }
  #product .product-tab--cta-mobile {
    display: inline-flex;
    margin-left: 0;
    width: 100%;
    box-sizing: border-box;
  }
  #product .product-mobile-wrap {
    display: block;
    margin: 20px auto -24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-deck-layer,
  .product-card-tilt {
    transition: none !important;
    animation: none !important;
  }
  .product-guide-mascot {
    animation: none !important;
  }
  #product .product-mobile-panel {
    transition: none !important;
  }
}