@charset "UTF-8";
/* ===========================
   COLOR VARIABLES
=========================== */
/* Brand Colors */
/* Text Colors */
/* Background Colors */
/* Card backgrounds */
/* Accent Colors */
/* Glass & Overlay */
/* ===========================
   TYPOGRAPHY
=========================== */
/* Font Weights */
/* ===========================
   SPACING & LAYOUT
=========================== */
/* Border Radius */
/* Spacing */
/* Layout */
/* Canonical page container — single source of truth for horizontal
   alignment across every section/page. Tweak these to shift all
   left/right gutters and content width site-wide.
   max-width is wide so content fills large/wide monitors instead of
   leaving big empty side margins; below this width it goes edge-to-edge
   minus the gutter. */
/* ===========================
   HERO SECTION VARIABLES
=========================== */
/* Hero Typography */
/* Hero Spacing */
/* Hero Colors */
/* Hero Button */
/* Hero Images */
/* ===========================
   TRANSITIONS & ANIMATIONS
=========================== */
/* ===========================
   BREAKPOINTS
=========================== */
/* ===========================
   LEGACY VARIABLES (keeping for backward compatibility)
=========================== */
.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

/* ===========================
   CUSTOM FONTS
=========================== */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background-size: 30% auto, cover;
  color: #e8e6e5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
  font-size: 16px;
  background-color: #0E0E0E;
}

body > main {
  flex: 1 0 auto;
}

body > .footer-section {
  flex-shrink: 0;
}

.container {
  width: 100%;
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 768px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.container {
  margin-top: 40px;
}

/* Global Mobile Adjustments */
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
}
.highlight {
  color: #F47923 !important;
}

/* Skeleton Loading Effect */
.skeleton {
  background-color: #191919;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0));
  background-size: 200% 100%;
  animation: skeleton-shimmer 2s infinite;
  border-radius: 4px;
  display: inline-block;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}
.site-header {
  max-width: 100vw;
  position: sticky;
  top: 0;
  z-index: 9999 !important;
  background: rgba(10, 10, 15, 0.82) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.site-header .header-inner {
  width: 100%;
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
  display: flex;
  align-items: center;
  gap: 35px;
  height: 80px;
}
@media (max-width: 768px) {
  .site-header .header-inner {
    height: 64px;
    padding-left: 16px;
    padding-right: 16px;
    justify-content: space-between;
    position: relative;
  }
}
@media (max-width: 768px) {
  .site-header .desktop-only {
    display: none !important;
  }
}
.site-header .mobile-only {
  display: none !important;
}
@media (max-width: 768px) {
  .site-header .mobile-only {
    display: flex !important;
  }
  .site-header .mobile-only.social-icons {
    display: block !important;
  }
}
.site-header .brand {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: #e8e6e5;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .site-header .brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
.site-header .brand .brand-logo {
  width: 192px;
  height: 43px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}
@media (max-width: 768px) {
  .site-header .brand .brand-logo {
    width: 140px;
    height: 32px;
  }
}
.site-header .brand .brand-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.site-header .brand .brand-title {
  font-weight: 900;
  letter-spacing: 1px;
  color: #F47923;
  font-size: 24px;
  line-height: 1;
}
.site-header .brand .brand-sub {
  font-size: 13px;
  color: #b7b3b0;
  margin-top: 4px;
}
.site-header .main-nav {
  flex: 1 1 auto;
  font-size: 1rem;
}
.site-header .main-nav ul {
  display: flex;
  align-items: center;
  gap: 17px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header .main-nav ul .d-link {
  color: #b3b3b3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.site-header .main-nav ul .d-link:hover {
  color: #F47923 !important;
}
.site-header .main-nav ul .d-link::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 3px;
  background: #F47923;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease-in-out;
}
.site-header .main-nav ul .d-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
@media (max-width: 768px) {
  .site-header .main-nav {
    position: fixed;
    left: -100%;
    top: 0;
    bottom: 0;
    width: 82vw;
    max-width: 320px;
    height: 100vh;
    background: rgba(14, 14, 18, 0.82) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    z-index: 10001 !important;
    transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 15px 0 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(244, 121, 35, 0.15) !important;
  }
  .site-header .main-nav.open {
    left: 0;
  }
  .site-header .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
    padding: 1.25rem 0.85rem;
  }
  .site-header .main-nav .nav-item {
    width: 100%;
    border-bottom: none;
    padding: 0.2rem 0;
  }
  .site-header .main-nav .nav-item a,
  .site-header .main-nav .nav-item .nav-btn {
    padding: 0.75rem 1rem !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }
  .site-header .main-nav .nav-item a:hover,
  .site-header .main-nav .nav-item a:active,
  .site-header .main-nav .nav-item .nav-btn:hover {
    background: rgba(244, 121, 35, 0.12) !important;
    color: #f47923 !important;
    transform: translateX(4px);
  }
  .site-header .main-nav .nav-item.login-link {
    padding: 0.5rem 0 1rem;
    width: 100%;
  }
  .site-header .main-nav .nav-item .mobile-btn-login {
    background: linear-gradient(135deg, #f47923, #d96210) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 14px !important;
    justify-content: center !important;
    box-shadow: 0 6px 20px rgba(244, 121, 35, 0.35);
  }
  .site-header .main-nav .nav-item.user-info-mobile {
    padding: 0.5rem 0 1.25rem;
    width: 100%;
  }
  .site-header .main-nav .nav-item.user-info-mobile .user-profile-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 0.85rem 1rem;
    width: 100%;
  }
  .site-header .main-nav .nav-item.user-info-mobile .mobile-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #f47923;
    box-shadow: 0 0 15px rgba(244, 121, 35, 0.4);
    object-fit: cover;
  }
  .site-header .main-nav .nav-item.user-info-mobile .user-details-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .site-header .main-nav .nav-item.user-info-mobile .mobile-user-name {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    word-break: break-word;
  }
  .site-header .main-nav .nav-item.user-info-mobile .mobile-logout-btn {
    font-size: 0.78rem !important;
    padding: 3px 12px !important;
    color: #f47923 !important;
    text-decoration: none;
    background: rgba(244, 121, 35, 0.15) !important;
    border: 1px solid rgba(244, 121, 35, 0.35) !important;
    border-radius: 20px !important;
    width: fit-content !important;
    font-weight: 700 !important;
    transition: all 0.2s ease;
  }
  .site-header .main-nav .nav-item.user-info-mobile .mobile-logout-btn:hover {
    background: #f47923 !important;
    color: #ffffff !important;
  }
  .site-header .main-nav .nav-item.social-icons {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
    padding: 1.25rem 0.5rem 2rem;
    width: 100%;
  }
  .social-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
  .social-grid a {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.95rem !important;
    transition: all 0.25s ease !important;
    padding: 0 !important;
  }
  .social-grid a:hover {
    background: #f47923 !important;
    border-color: #f47923 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(244, 121, 35, 0.4);
  }
}

.site-header .main-nav .nav-item.dropdown {
  position: relative !important;
}
.site-header .main-nav .nav-item #coursesBtn {
  position: relative;
  padding: 8px 36px 8px 18px !important;
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  background: transparent;
  border: 1.5px solid #f47923 !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  transition: all 0.25s ease;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
.site-header .main-nav .nav-item #coursesBtn:hover,
.site-header .main-nav .nav-item #coursesBtn.open {
  cursor: pointer;
  background: #f47923 !important;
  color: #ffffff !important;
  border-color: #f47923 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(244, 121, 35, 0.4);
}
@media (min-width: 769px) {
  .site-header .main-nav .nav-item #coursesBtn::after {
    content: "";
    position: absolute;
    padding-left: 10px;
    margin-right: 10px;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("/assets/images/nav/course-arrow.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}
@media (max-width: 768px) {
  .site-header .main-nav .nav-item #coursesBtn {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 1rem 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
}
.site-header .main-nav .nav-item:not(.sna-tools-host) a,
.site-header .main-nav .nav-item:not(.sna-tools-host) .nav-btn {
  color: #ffffff;
  text-decoration: none;
  font-weight: 400;
  padding: 6px 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  white-space: nowrap;
  transition: color 150ms ease, background 120ms ease, border-color 120ms ease;
}
@media (max-width: 768px) {
  .site-header .main-nav .nav-item:not(.sna-tools-host) a,
  .site-header .main-nav .nav-item:not(.sna-tools-host) .nav-btn {
    padding: 1.2rem 0;
    width: 100%;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
  }
  .site-header .main-nav .nav-item:not(.sna-tools-host) a:hover,
  .site-header .main-nav .nav-item:not(.sna-tools-host) .nav-btn:hover {
    background: transparent;
  }
}
.site-header .main-nav .nav-item:not(.sna-tools-host) a:hover,
.site-header .main-nav .nav-item:not(.sna-tools-host) .nav-btn:hover {
  color: #e8e6e5;
}
.site-header .main-nav .nav-item.spacer {
  flex: 1 1 auto;
  pointer-events: none;
}
.site-header .main-nav .nav-item .labs-pill {
  background: linear-gradient(90deg, #F47923, #F47923);
  padding: 4px 22px;
  border-radius: 6px;
  font-weight: 400;
  box-shadow: 0 10px 26px rgba(249, 115, 22, 0.1);
  display: inline-flex;
  align-items: center;
}
.site-header .main-nav .nav-item.cta .btn-outline {
  box-sizing: border-box;
  height: 38px;
  border: 1.5px solid #f47923 !important;
  padding: 0 20px !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-header .main-nav .nav-item.cta .btn-outline:hover {
  cursor: pointer;
  background-color: #F47923;
}
.site-header .main-nav .nav-item .dropdown {
  position: relative;
  height: 100%;
}
.site-header .main-nav .nav-item .dropdown .btn.a-reg {
  background: transparent;
  border: 1px solid #F47923;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.site-header .main-nav .nav-item .dropdown .btn.a-reg img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.site-header .main-nav .nav-item .dropdown .btn.a-reg:hover {
  border-color: #F47923;
  color: rgba(255, 255, 255, 0.9);
}
.site-header .main-nav .nav-item .dropdown .btn.a-reg .user-name-text {
  max-width: 120px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.site-header .main-nav .nav-item .dropdown .dropdown-menu-body {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  left: auto;
  min-width: 200px;
  background: #222222;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: 2px solid #F47923;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  padding: 12px 0;
  margin: 0;
  list-style: none;
  display: none;
  z-index: 100;
}
.site-header .main-nav .nav-item .dropdown .dropdown-menu-body.show {
  display: block;
}
.site-header .main-nav .nav-item .dropdown .dropdown-menu-body .line {
  display: none;
}
.site-header .main-nav .nav-item .dropdown .dropdown-menu-body .d-item {
  display: block;
  padding: 10px 24px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 15px;
  transition: all 0.2s ease;
}
.site-header .main-nav .nav-item .dropdown .dropdown-menu-body .d-item:hover {
  color: #F47923;
  background: transparent;
}
.site-header .main-nav .nav-item .dropdown-toggle {
  background: #121212;
}
.site-header .main-nav .nav-item.dropdown .dropdown-toggle {
  border: 1px solid #F47923;
  padding: 7px 14px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #b7b3b0;
  font-size: 17px;
  font-weight: 400;
}
.site-header .main-nav .nav-item.dropdown .dropdown-toggle.open {
  border: 1.5px solid #F47923;
  background: linear-gradient(90deg, #F47923, #F47923);
  color: #e8e6e5;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.08);
}
.site-header .main-nav .nav-item.dropdown .chev {
  opacity: 0.9;
  transform: translateY(1px);
}
.site-header .main-nav .nav-item.dropdown .dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 190px;
  background: linear-gradient(180deg, rgba(16, 16, 16, 0.98), rgba(11, 11, 11, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  padding: 8px;
  display: none;
  z-index: 80;
}
.site-header .main-nav .nav-item.dropdown .dropdown-menu a {
  display: block;
  padding: 10px 12px;
  color: #b7b3b0;
  text-decoration: none;
  border-radius: 8px;
}
.site-header .main-nav .nav-item.dropdown .dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.02);
  color: #e8e6e5;
}
.site-header .main-nav .nav-item.dropdown .dropdown-menu.open {
  display: block;
}
.site-header .nav-toggle {
  display: none;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  z-index: 10;
}
@media (max-width: 768px) {
  .site-header .nav-toggle {
    display: flex;
  }
}
.site-header .nav-toggle span {
  display: block;
  height: 2px;
  background: #ffffff;
  width: 26px;
  margin: 3px 0;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.site-header .nav-toggle.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.site-header .nav-toggle.open span:nth-child(2) {
  opacity: 0;
}
.site-header .nav-toggle.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
.site-header .nav-overlay {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 10000 !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}
.site-header .nav-overlay.active {
  opacity: 1;
  visibility: visible;
}
.site-header .social-icons {
  padding-top: 1.5rem !important;
}
.site-header .social-icons .mobile-nav-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 0 1.5rem 0;
  width: 100%;
}
.site-header .social-icons .social-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  width: 100%;
}
.site-header .social-icons .social-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: rgba(232, 230, 229, 0.8);
  font-size: 1.1rem;
  transition: all 0.2s ease;
}
.site-header .social-icons .social-grid a:hover {
  color: #F47923;
  background: rgba(244, 121, 35, 0.1);
  transform: translateY(-2px);
}
body.nav-open {
  overflow: hidden;
}

.footer-section {
  background: #1A1A1A;
  color: #e8e6e5;
  padding: 2.875rem 0 0.875rem 0;
}
.footer-section .footer-container {
  max-width: 1800px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
@media (max-width: 768px) {
  .footer-section .footer-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 480px) {
  .footer-section .footer-container {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    justify-content: center;
  }
}
.footer-section .footer-container .footer-brand-section {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-width: 280px;
}
@media (max-width: 1023px) {
  .footer-section .footer-container .footer-brand-section {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0.5rem 1.2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #262626;
    margin-bottom: 2rem;
    width: 100%;
  }
}
.footer-section .footer-container .footer-brand-section .ninja-brand {
  display: flex;
  flex-direction: column;
}
@media (max-width: 1023px) {
  .footer-section .footer-container .footer-brand-section .ninja-brand {
    grid-column: 1;
    grid-row: 1/3;
  }
}
.footer-section .footer-container .footer-brand-section .ninja-brand .footer-ninja-logo {
  height: 5.5rem;
  width: auto;
  object-fit: contain;
  align-self: flex-start;
}
@media (max-width: 1023px) {
  .footer-section .footer-container .footer-brand-section .ninja-brand .footer-ninja-logo {
    height: 4rem;
    align-self: center;
  }
}
.footer-section .footer-container .footer-brand-section .ninja-brand .footer-ninja-text {
  font-size: 0.85rem;
  color: #e8e6e5;
  margin-top: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  max-width: 100%;
}
.footer-section .footer-container .footer-brand-section .ninja-brand .footer-ninja-text br {
  display: none;
}
@media (max-width: 1023px) {
  .footer-section .footer-container .footer-brand-section .ninja-brand .footer-ninja-text {
    font-size: 0.75rem;
    max-width: 140px;
  }
  .footer-section .footer-container .footer-brand-section .ninja-brand .footer-ninja-text br {
    display: block;
  }
}
@media (max-width: 480px) {
  .footer-section .footer-container .footer-brand-section .ninja-brand .footer-ninja-text {
    font-size: 9px !important;
    text-align: center;
  }
}
.footer-section .footer-container .footer-brand-section .partner-logos {
  display: flex;
  align-items: center;
}
@media (max-width: 1023px) {
  /* .ninja-brand spans rows 1/3; without matching that span this cell lands in
     row 1 only, which parks the logo against the TOP of the brand block rather
     than level with it. Spanning the same rows and filling the height lets
     align-items centre it against the whole ninja block, and justify-content
     centres it across the column (the logo is narrower than its cell). */
  .footer-section .footer-container .footer-brand-section .partner-logos {
    grid-column: 2;
    grid-row: 1/3;
    height: 100%;
    justify-content: center;
  }
}
.footer-section .footer-container .footer-brand-section .partner-logos .footer-startup-logo {
  width: 14rem;
  height: auto;
  object-fit: contain;
}
@media (max-width: 1023px) {
  .footer-section .footer-container .footer-brand-section .partner-logos .footer-startup-logo {
    width: 12rem;
  }
}
.footer-section .footer-container .footer-brand-section .partner-logos .footer-gst-logo {
  grid-column: 2;
  height: 4.5rem;
  width: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
  padding: 4px;
}
@media (max-width: 1023px) {
  .footer-section .footer-container .footer-brand-section .partner-logos .footer-gst-logo {
    grid-column: 2;
    grid-row: 2;
    height: 2.8rem;
  }
}
.footer-section .footer-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.footer-section .footer-header .footer-logo {
  height: 5rem;
  width: 7rem;
  flex-shrink: 0;
  object-fit: contain;
}
.footer-section .footer-header .footer-header-content {
  flex: 1;
}
.footer-section .footer-header .footer-header-content .footer-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  border-radius: 9999px;
  background: #27272a;
  color: #d4d4d8;
}
.footer-section .footer-header .footer-header-content .footer-title-main {
  font-size: 2rem;
  font-weight: 600;
  margin-top: 1rem;
  line-height: 1.2;
}
.footer-section .footer-header .footer-header-content .footer-description {
  color: #9ca3af;
  margin-top: 0.75rem;
  max-width: 100%;
}
.footer-section .footer-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 12px;
  border-radius: 1rem;
  background-color: #0E0E0E;
}
@media (min-width: 768px) {
  .footer-section .footer-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1427px) {
  .footer-section .footer-cards {
    width: 85rem;
    margin-left: 1rem;
  }
}
.footer-section .footer-cards .footer-card {
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
  border-radius: 1rem;
  padding: 1.5rem;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 180px;
}
.footer-section .footer-cards .footer-card h4 {
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  color: #fff;
  padding-right: 3rem;
}
.footer-section .footer-cards .footer-card p {
  font-size: 0.9rem;
  color: #9ca3af;
  line-height: 1.5;
  flex-grow: 1;
}
.footer-section .footer-cards .footer-card .arrow-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: transparent;
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.footer-section .footer-cards .footer-card .arrow-btn .arrow-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
.footer-section .footer-cards .footer-card .arrow-btn .arrow-default {
  opacity: 1;
}
.footer-section .footer-cards .footer-card .arrow-btn .arrow-hover {
  opacity: 0;
}
.footer-section .footer-cards .footer-card .arrow-btn:hover .arrow-default {
  opacity: 0;
}
.footer-section .footer-cards .footer-card .arrow-btn:hover .arrow-hover {
  opacity: 1;
}
.footer-section .footer-cards .footer-card:hover {
  transform: translateY(-5px);
}
.footer-section .footer-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  /* margin-bottom: 4rem; */
  text-align: left;
  width: 100%;
  min-width: 0;
  padding-left: 1rem;
}
@media (min-width: 1024px) {
  .footer-section .footer-columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: left;
    margin-bottom: 0;
    flex: 1;
  }
}
.footer-section .footer-columns .footer-column .footer-title {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
  margin-left: 0;
  line-height: 1.57;
}
@media (min-width: 1024px) {
  .footer-section .footer-columns .footer-column .footer-title {
    font-size: 2.66rem;
  }
}
.footer-section .footer-columns .footer-column .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-section .footer-columns .footer-column .footer-links li {
  margin-bottom: 1rem;
  color: #ffffff;
  cursor: pointer;
  transition: color 0.2s;
  font-size: 0.95rem;
  font-weight: 300;
}
@media (min-width: 1024px) {
  .footer-section .footer-columns .footer-column .footer-links li {
    font-size: 1.25rem;
  }
}
.footer-section .footer-columns .footer-column .footer-links li:hover {
  color: #F47923;
}
.footer-section .footer-bottom {
  border-top: 1px solid #262626;
  padding: 1rem 48px 0;
  margin: 2rem auto 0;
  max-width: 1800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: #666666;
  font-size: 0.84rem;
  width: 100%;
}
@media (max-width: 768px) {
  .footer-section .footer-bottom {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 1023px) {
  .footer-section .footer-bottom {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }
}
@media (min-width: 1024px) {
  .footer-section .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.footer-section .footer-bottom .footer-legal {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 1023px) {
  .footer-section .footer-bottom .footer-legal {
    order: 2;
  }
}
.footer-section .footer-bottom .footer-legal a {
  color: #666666;
  text-decoration: none;
  transition: color 0.2s;
  font-size: 0.84rem;
  font-weight: 400;
}
.footer-section .footer-bottom .footer-legal a:hover {
  color: #F47923;
}
.footer-section .footer-bottom .footer-social {
  display: flex;
  gap: 1rem;
}
@media (max-width: 1023px) {
  .footer-section .footer-bottom .footer-social {
    order: 4;
    border-top: 1px solid #262626;
    padding-top: 1rem;
    margin-top: 1rem;
    width: 100%;
    justify-content: center;
  }
}
.footer-section .footer-bottom .footer-social i {
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
  color: #c9c9c9;
}
.footer-section .footer-bottom .footer-social i:hover {
  color: #fff;
  transform: translateY(-2px);
}
.footer-section .footer-bottom .footer-copyright {
  margin: 0;
  color: #666666;
  font-size: 0.74rem;
  font-weight: 400;
}
@media (max-width: 1023px) {
  .footer-section .footer-bottom .footer-copyright {
    order: 1;
  }
}
@media (min-width: 1024px) {
  .footer-section .footer-bottom .footer-copyright {
    order: 3;
  }
}

.bg-img {
  position: absolute;
  transform: translate(-60%, -25%);
}

.hero {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 48px 1.5rem;
  position: relative;
  gap: 40px;
  overflow: hidden;
}
.hero__content {
  max-width: 1100px;
  z-index: 10;
  flex: 1.5;
  animation: slideInLeft 0.8s ease-out;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 40px;
}
@media (max-width: 480px) {
  .hero__content {
    background: rgba(53, 51, 51, 0.95);
    padding: 2rem 1.5rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 20px;
    gap: 20px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}
.hero__heading-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  position: relative;
}
@media (max-width: 480px) {
  .hero__heading-wrapper {
    gap: 18px;
    text-align: left;
  }
}
.hero__title {
  font-size: 56px;
  font-weight: 500;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 0;
  letter-spacing: -1.5px;
}
.hero__title .text-underline-sml {
  position: relative;
  display: inline-block;
  font-weight: 600;
}
.hero__title .text-underline-sml::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22px;
  background: url("/assets/images/hero/Vector 1.png") no-repeat center bottom;
  background-size: contain;
  z-index: -1;
}
@media (max-width: 480px) {
  .hero__title .text-underline-sml::after {
    bottom: -4px !important;
  }
}
.hero__title .text-underline-lg {
  position: relative;
  display: inline-block;
  font-weight: 600;
}
.hero__title .text-underline-lg::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  height: 22px;
  background: url("/assets/images/hero/Vector 1.png") no-repeat center bottom;
  background-size: contain;
  z-index: -1;
}
@media (max-width: 480px) {
  .hero__title .text-underline-lg::after {
    bottom: -4px !important;
  }
}
@media (max-width: 1200px) {
  .hero__title {
    font-size: 56px;
  }
}
@media (max-width: 768px) {
  .hero__title {
    font-size: 40px;
    line-height: 1.3;
  }
}
@media (max-width: 480px) {
  .hero__title {
    font-size: 32px;
    letter-spacing: 0;
    text-align: left;
  }
}
.hero__desc {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(232, 230, 229, 0.7);
  max-width: 700px;
  margin: 0;
}
@media (max-width: 768px) {
  .hero__desc {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .hero__desc {
    font-size: 14px;
    color: rgba(232, 230, 229, 0.8);
  }
}
.hero__btn-container {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
  right: 4rem;
  transform: translate(4rem, 0);
}
@media (max-width: 480px) {
  .hero__btn-container {
    width: 100%;
    right: 0;
    transform: translate(0, 0);
    justify-content: flex-start;
  }
}
.hero__btn-container button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 15px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  border: 1px solid #ff7b23;
  background: transparent;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
}
@media (max-width: 768px) {
  .hero__btn-container button {
    font-size: 14px;
    padding: 10px 20px;
    width: auto;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .hero__btn-container button {
    font-size: 12px;
    padding: 7px 14px;
    width: auto;
    text-align: center;
  }
}
.hero__btn-container button::before {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("/assets/images/hero/scdl-btn-icon.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.hero__btn-container button span {
  position: relative;
  z-index: 1;
}
.hero__btn-container button:hover {
  background: #ff7b23;
  transform: translateY(-2px);
}
.hero__btn-container button:hover::before {
  background-image: url("/assets/images/hero/scdl-btn-icon-wt.png");
}
.hero__btn-container button:active {
  transform: translateY(0) scale(0.98);
}
.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F47923;
  padding: 12px 20px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: 0.3s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .hero__btn {
    font-size: 14px;
    padding: 10px 20px;
    width: auto;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .hero__btn {
    font-size: 12px;
    padding: 11px 11px;
    width: auto;
    text-align: center;
  }
}
.hero__btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: left 0.3s ease;
  z-index: 0;
}
.hero__btn span {
  position: relative;
  z-index: 1;
}
.hero__btn:hover {
  transform: translateY(-4px);
}
.hero__btn:hover::before {
  left: 100%;
}
.hero__btn:hover ~ .hero__btn-arrow {
  opacity: 1;
  transform: translateX(0) translateY(-4px);
  visibility: visible;
}
.hero__btn:hover ~ button,
.hero__btn:hover ~ .hero__btn--subscription {
  transform: translateX(55px);
}
@media (max-width: 768px) {
  .hero__btn:hover ~ button,
  .hero__btn:hover ~ .hero__btn--subscription {
    transform: none;
  }
}
.hero__btn-arrow {
  width: 44px;
  height: 44px;
  background: #F47923;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-30px);
  margin-right: -44px;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
@media (max-width: 768px) {
  .hero__btn-arrow {
    display: none;
  }
}
.hero__btn-arrow img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.hero__btn-arrow:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1.1);
}
.hero__btn-arrow:hover + button {
  transform: translateX(55px);
}
.hero__carousel-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 5;
  height: 38rem;
  padding-right: 8px;
}
@media (max-width: 768px) {
  .hero__carousel-wrapper {
    display: none;
  }
}
.hero {
  /* Responsive breakpoints */
}
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    padding: 10px 20px 40px 20px;
    min-height: auto;
    gap: 30px;
    align-items: flex-start;
  }
}

.carousel-content {
  position: relative;
  width: 300px;
  height: 100%;
  display: flex;
  align-items: center;
}

.carousel-arrow {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  pointer-events: none;
  animation: arrowPoke 3s infinite ease-in-out;
}
.carousel-arrow svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

.carousel-track {
  width: 100%;
  height: 560px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
}

.carousel-scroll {
  position: relative;
  height: 100%;
}

.carousel-item {
  position: absolute;
  top: 50%;
  left: 40px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  animation-duration: var(--total-duration);
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: calc(var(--i) * -3s);
  transform: translateY(-50%);
  opacity: 0;
  will-change: transform, opacity;
}

.carousel-text {
  font-size: 30px;
  font-weight: 600;
  color: #ffffff;
  opacity: 1;
  transition: opacity 0.3s;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.items-count-1 .carousel-item {
  animation-name: dynamicSnappyScroll-1;
}

@keyframes dynamicSnappyScroll-1 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  80% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-2 .carousel-item {
  animation-name: dynamicSnappyScroll-2;
}

@keyframes dynamicSnappyScroll-2 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  40% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  50% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  90% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-3 .carousel-item {
  animation-name: dynamicSnappyScroll-3;
}

@keyframes dynamicSnappyScroll-3 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  26.6666666667% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  33.3333333333% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  60% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  66.6666666667% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  93.3333333333% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-4 .carousel-item {
  animation-name: dynamicSnappyScroll-4;
}

@keyframes dynamicSnappyScroll-4 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  20% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  25% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  45% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  50% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  70% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  75% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  95% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-5 .carousel-item {
  animation-name: dynamicSnappyScroll-5;
}

@keyframes dynamicSnappyScroll-5 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  16% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  20% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  36% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  40% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  56% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  60% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  76% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  80% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  96% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-6 .carousel-item {
  animation-name: dynamicSnappyScroll-6;
}

@keyframes dynamicSnappyScroll-6 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  13.3333333333% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  16.6666666667% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  30% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  33.3333333333% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  46.6666666667% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  50% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  63.3333333333% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  66.6666666667% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  80% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  83.3333333333% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  96.6666666667% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-7 .carousel-item {
  animation-name: dynamicSnappyScroll-7;
}

@keyframes dynamicSnappyScroll-7 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  11.4285714286% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  14.2857142857% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  25.7142857143% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  28.5714285714% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  40% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  42.8571428571% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  54.2857142857% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  57.1428571429% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  68.5714285714% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  71.4285714286% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  82.8571428571% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  85.7142857143% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  97.1428571429% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-8 .carousel-item {
  animation-name: dynamicSnappyScroll-8;
}

@keyframes dynamicSnappyScroll-8 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  10% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  12.5% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  22.5% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  25% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  35% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  37.5% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  47.5% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  50% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  60% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  62.5% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  72.5% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  75% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  85% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  87.5% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  97.5% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-9 .carousel-item {
  animation-name: dynamicSnappyScroll-9;
}

@keyframes dynamicSnappyScroll-9 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  8.8888888889% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  11.1111111111% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  20% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  22.2222222222% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  31.1111111111% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  33.3333333333% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  42.2222222222% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  44.4444444444% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  53.3333333333% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  55.5555555556% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  64.4444444444% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  66.6666666667% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  75.5555555556% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  77.7777777778% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  86.6666666667% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  88.8888888889% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  97.7777777778% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-10 .carousel-item {
  animation-name: dynamicSnappyScroll-10;
}

@keyframes dynamicSnappyScroll-10 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  8% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  10% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  18% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  20% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  28% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  30% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  38% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  40% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  48% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  50% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  58% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  60% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  68% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  70% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  78% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  80% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  88% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  90% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  98% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-11 .carousel-item {
  animation-name: dynamicSnappyScroll-11;
}

@keyframes dynamicSnappyScroll-11 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  7.2727272727% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  9.0909090909% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  16.3636363636% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  18.1818181818% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  25.4545454545% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  27.2727272727% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  34.5454545455% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  36.3636363636% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  43.6363636364% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  45.4545454545% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  52.7272727273% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  54.5454545455% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  61.8181818182% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  63.6363636364% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  70.9090909091% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  72.7272727273% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  80% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  81.8181818182% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  89.0909090909% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  90.9090909091% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  98.1818181818% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-12 .carousel-item {
  animation-name: dynamicSnappyScroll-12;
}

@keyframes dynamicSnappyScroll-12 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  6.6666666667% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  8.3333333333% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  15% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  16.6666666667% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  23.3333333333% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  25% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  31.6666666667% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  33.3333333333% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  40% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  41.6666666667% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  48.3333333333% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  50% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  56.6666666667% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  58.3333333333% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  65% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  66.6666666667% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  73.3333333333% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  75% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  81.6666666667% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  83.3333333333% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  90% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  91.6666666667% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  98.3333333333% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-13 .carousel-item {
  animation-name: dynamicSnappyScroll-13;
}

@keyframes dynamicSnappyScroll-13 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  6.1538461538% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  7.6923076923% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  13.8461538462% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  15.3846153846% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  21.5384615385% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  23.0769230769% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  29.2307692308% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  30.7692307692% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  36.9230769231% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  38.4615384615% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  44.6153846154% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  46.1538461538% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  52.3076923077% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  53.8461538462% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  60% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  61.5384615385% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  67.6923076923% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  69.2307692308% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  75.3846153846% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  76.9230769231% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  83.0769230769% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  84.6153846154% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  90.7692307692% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  92.3076923077% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  98.4615384615% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-14 .carousel-item {
  animation-name: dynamicSnappyScroll-14;
}

@keyframes dynamicSnappyScroll-14 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  5.7142857143% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  7.1428571429% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  12.8571428571% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  14.2857142857% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  20% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  21.4285714286% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  27.1428571429% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  28.5714285714% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  34.2857142857% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  35.7142857143% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  41.4285714286% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  42.8571428571% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  48.5714285714% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  50% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  55.7142857143% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  57.1428571429% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  62.8571428571% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  64.2857142857% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  70% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  71.4285714286% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  77.1428571429% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  78.5714285714% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  84.2857142857% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  85.7142857143% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  91.4285714286% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  92.8571428571% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  98.5714285714% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-15 .carousel-item {
  animation-name: dynamicSnappyScroll-15;
}

@keyframes dynamicSnappyScroll-15 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  5.3333333333% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  6.6666666667% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  12% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  13.3333333333% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  18.6666666667% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  20% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  25.3333333333% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  26.6666666667% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  32% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  33.3333333333% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  38.6666666667% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  40% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  45.3333333333% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  46.6666666667% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  52% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  53.3333333333% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  58.6666666667% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  60% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  65.3333333333% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  66.6666666667% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  72% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  73.3333333333% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  78.6666666667% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  80% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  85.3333333333% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  86.6666666667% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  92% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  93.3333333333% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  98.6666666667% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-16 .carousel-item {
  animation-name: dynamicSnappyScroll-16;
}

@keyframes dynamicSnappyScroll-16 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  5% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  6.25% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  11.25% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  12.5% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  17.5% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  18.75% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  23.75% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  25% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  30% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  31.25% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  36.25% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  37.5% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  42.5% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  43.75% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  48.75% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  50% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  55% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  56.25% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  61.25% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  62.5% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  67.5% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  68.75% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  73.75% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  75% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  80% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  81.25% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  86.25% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  87.5% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  92.5% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  93.75% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  98.75% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-17 .carousel-item {
  animation-name: dynamicSnappyScroll-17;
}

@keyframes dynamicSnappyScroll-17 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  4.7058823529% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  5.8823529412% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  10.5882352941% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  11.7647058824% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  16.4705882353% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  17.6470588235% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  22.3529411765% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  23.5294117647% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  28.2352941176% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  29.4117647059% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  34.1176470588% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  35.2941176471% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  40% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  41.1764705882% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  45.8823529412% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  47.0588235294% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  51.7647058824% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  52.9411764706% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  57.6470588235% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  58.8235294118% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  63.5294117647% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  64.7058823529% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  69.4117647059% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  70.5882352941% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  75.2941176471% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  76.4705882353% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  81.1764705882% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  82.3529411765% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  87.0588235294% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  88.2352941176% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  92.9411764706% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  94.1176470588% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  98.8235294118% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-18 .carousel-item {
  animation-name: dynamicSnappyScroll-18;
}

@keyframes dynamicSnappyScroll-18 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  4.4444444444% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  5.5555555556% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  10% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  11.1111111111% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  15.5555555556% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  16.6666666667% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  21.1111111111% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  22.2222222222% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  26.6666666667% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  27.7777777778% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  32.2222222222% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  33.3333333333% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  37.7777777778% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  38.8888888889% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  43.3333333333% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  44.4444444444% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  48.8888888889% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  50% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  54.4444444444% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  55.5555555556% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  60% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  61.1111111111% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  65.5555555556% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  66.6666666667% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  71.1111111111% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  72.2222222222% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  76.6666666667% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  77.7777777778% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  82.2222222222% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  83.3333333333% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  87.7777777778% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  88.8888888889% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  93.3333333333% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  94.4444444444% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  98.8888888889% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-19 .carousel-item {
  animation-name: dynamicSnappyScroll-19;
}

@keyframes dynamicSnappyScroll-19 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  4.2105263158% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  5.2631578947% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  9.4736842105% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  10.5263157895% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  14.7368421053% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  15.7894736842% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  20% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  21.0526315789% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  25.2631578947% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  26.3157894737% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  30.5263157895% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  31.5789473684% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  35.7894736842% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  36.8421052632% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  41.0526315789% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  42.1052631579% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  46.3157894737% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  47.3684210526% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  51.5789473684% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  52.6315789474% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  56.8421052632% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  57.8947368421% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  62.1052631579% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  63.1578947368% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  67.3684210526% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  68.4210526316% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  72.6315789474% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  73.6842105263% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  77.8947368421% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  78.9473684211% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  83.1578947368% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  84.2105263158% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  88.4210526316% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  89.4736842105% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  93.6842105263% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  94.7368421053% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  98.9473684211% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-20 .carousel-item {
  animation-name: dynamicSnappyScroll-20;
}

@keyframes dynamicSnappyScroll-20 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  4% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  5% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  9% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  10% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  14% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  15% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  19% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  20% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  24% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  25% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  29% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  30% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  34% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  35% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  39% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  40% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  44% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  45% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  49% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  50% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  54% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  55% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  59% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  60% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  64% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  65% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  69% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  70% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  74% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  75% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  79% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  80% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  84% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  85% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  89% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  90% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  94% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  95% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  99% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-21 .carousel-item {
  animation-name: dynamicSnappyScroll-21;
}

@keyframes dynamicSnappyScroll-21 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  3.8095238095% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  4.7619047619% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  8.5714285714% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  9.5238095238% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  13.3333333333% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  14.2857142857% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  18.0952380952% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  19.0476190476% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  22.8571428571% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  23.8095238095% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  27.619047619% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  28.5714285714% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  32.380952381% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  33.3333333333% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  37.1428571429% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  38.0952380952% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  41.9047619048% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  42.8571428571% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  46.6666666667% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  47.619047619% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  51.4285714286% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  52.380952381% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  56.1904761905% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  57.1428571429% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  60.9523809524% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  61.9047619048% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  65.7142857143% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  66.6666666667% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  70.4761904762% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  71.4285714286% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  75.2380952381% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  76.1904761905% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  80% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  80.9523809524% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  84.7619047619% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  85.7142857143% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  89.5238095238% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  90.4761904762% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  94.2857142857% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  95.2380952381% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  99.0476190476% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-22 .carousel-item {
  animation-name: dynamicSnappyScroll-22;
}

@keyframes dynamicSnappyScroll-22 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  3.6363636364% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  4.5454545455% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  8.1818181818% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  9.0909090909% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  12.7272727273% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  13.6363636364% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  17.2727272727% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  18.1818181818% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  21.8181818182% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  22.7272727273% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  26.3636363636% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  27.2727272727% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  30.9090909091% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  31.8181818182% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  35.4545454545% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  36.3636363636% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  40% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  40.9090909091% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  44.5454545455% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  45.4545454545% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  49.0909090909% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  50% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  53.6363636364% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  54.5454545455% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  58.1818181818% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  59.0909090909% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  62.7272727273% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  63.6363636364% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  67.2727272727% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  68.1818181818% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  71.8181818182% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  72.7272727273% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  76.3636363636% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  77.2727272727% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  80.9090909091% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  81.8181818182% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  85.4545454545% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  86.3636363636% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  90% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  90.9090909091% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  94.5454545455% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  95.4545454545% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  99.0909090909% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-23 .carousel-item {
  animation-name: dynamicSnappyScroll-23;
}

@keyframes dynamicSnappyScroll-23 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  3.4782608696% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  4.347826087% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  7.8260869565% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  8.6956521739% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  12.1739130435% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  13.0434782609% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  16.5217391304% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  17.3913043478% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  20.8695652174% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  21.7391304348% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  25.2173913043% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  26.0869565217% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  29.5652173913% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  30.4347826087% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  33.9130434783% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  34.7826086957% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  38.2608695652% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  39.1304347826% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  42.6086956522% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  43.4782608696% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  46.9565217391% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  47.8260869565% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  51.3043478261% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  52.1739130435% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  55.652173913% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  56.5217391304% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  60% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  60.8695652174% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  64.347826087% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  65.2173913043% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  68.6956521739% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  69.5652173913% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  73.0434782609% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  73.9130434783% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  77.3913043478% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  78.2608695652% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  81.7391304348% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  82.6086956522% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  86.0869565217% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  86.9565217391% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  90.4347826087% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  91.3043478261% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  94.7826086957% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  95.652173913% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  99.1304347826% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-24 .carousel-item {
  animation-name: dynamicSnappyScroll-24;
}

@keyframes dynamicSnappyScroll-24 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  3.3333333333% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  4.1666666667% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  7.5% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  8.3333333333% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  11.6666666667% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  12.5% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  15.8333333333% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  16.6666666667% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  20% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  20.8333333333% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  24.1666666667% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  25% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  28.3333333333% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  29.1666666667% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  32.5% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  33.3333333333% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  36.6666666667% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  37.5% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  40.8333333333% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  41.6666666667% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  45% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  45.8333333333% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  49.1666666667% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  50% {
    transform: translateY(-50%) translate(-432px, 624px) rotate(48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  53.3333333333% {
    transform: translateY(-50%) translate(-432px, 624px) rotate(48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  54.1666666667% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  57.5% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  58.3333333333% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  61.6666666667% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  62.5% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  65.8333333333% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  66.6666666667% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  70% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  70.8333333333% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  74.1666666667% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  75% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  78.3333333333% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  79.1666666667% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  82.5% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  83.3333333333% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  86.6666666667% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  87.5% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  90.8333333333% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  91.6666666667% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  95% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  95.8333333333% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  99.1666666667% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-25 .carousel-item {
  animation-name: dynamicSnappyScroll-25;
}

@keyframes dynamicSnappyScroll-25 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  3.2% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  4% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  7.2% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  8% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  11.2% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  12% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  15.2% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  16% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  19.2% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  20% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  23.2% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  24% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  27.2% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  28% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  31.2% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  32% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  35.2% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  36% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  39.2% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  40% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  43.2% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  44% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  47.2% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  48% {
    transform: translateY(-50%) translate(-432px, 624px) rotate(48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  51.2% {
    transform: translateY(-50%) translate(-432px, 624px) rotate(48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  52% {
    transform: translateY(-50%) translate(-432px, -624px) rotate(-48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  55.2% {
    transform: translateY(-50%) translate(-432px, -624px) rotate(-48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  56% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  59.2% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  60% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  63.2% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  64% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  67.2% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  68% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  71.2% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  72% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  75.2% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  76% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  79.2% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  80% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  83.2% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  84% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  87.2% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  88% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  91.2% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  92% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  95.2% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  96% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  99.2% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-26 .carousel-item {
  animation-name: dynamicSnappyScroll-26;
}

@keyframes dynamicSnappyScroll-26 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  3.0769230769% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  3.8461538462% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  6.9230769231% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  7.6923076923% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  10.7692307692% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  11.5384615385% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  14.6153846154% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  15.3846153846% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  18.4615384615% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  19.2307692308% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  22.3076923077% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  23.0769230769% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  26.1538461538% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  26.9230769231% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  30% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  30.7692307692% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  33.8461538462% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  34.6153846154% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  37.6923076923% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  38.4615384615% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  41.5384615385% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  42.3076923077% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  45.3846153846% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  46.1538461538% {
    transform: translateY(-50%) translate(-432px, 624px) rotate(48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  49.2307692308% {
    transform: translateY(-50%) translate(-432px, 624px) rotate(48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  50% {
    transform: translateY(-50%) translate(-507px, 676px) rotate(52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  53.0769230769% {
    transform: translateY(-50%) translate(-507px, 676px) rotate(52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  53.8461538462% {
    transform: translateY(-50%) translate(-432px, -624px) rotate(-48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  56.9230769231% {
    transform: translateY(-50%) translate(-432px, -624px) rotate(-48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  57.6923076923% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  60.7692307692% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  61.5384615385% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  64.6153846154% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  65.3846153846% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  68.4615384615% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  69.2307692308% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  72.3076923077% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  73.0769230769% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  76.1538461538% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  76.9230769231% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  80% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  80.7692307692% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  83.8461538462% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  84.6153846154% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  87.6923076923% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  88.4615384615% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  91.5384615385% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  92.3076923077% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  95.3846153846% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  96.1538461538% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  99.2307692308% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-27 .carousel-item {
  animation-name: dynamicSnappyScroll-27;
}

@keyframes dynamicSnappyScroll-27 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  2.962962963% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  3.7037037037% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  6.6666666667% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  7.4074074074% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  10.3703703704% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  11.1111111111% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  14.0740740741% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  14.8148148148% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  17.7777777778% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  18.5185185185% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  21.4814814815% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  22.2222222222% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  25.1851851852% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  25.9259259259% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  28.8888888889% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  29.6296296296% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  32.5925925926% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  33.3333333333% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  36.2962962963% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  37.037037037% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  40% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  40.7407407407% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  43.7037037037% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  44.4444444444% {
    transform: translateY(-50%) translate(-432px, 624px) rotate(48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  47.4074074074% {
    transform: translateY(-50%) translate(-432px, 624px) rotate(48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  48.1481481481% {
    transform: translateY(-50%) translate(-507px, 676px) rotate(52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  51.1111111111% {
    transform: translateY(-50%) translate(-507px, 676px) rotate(52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  51.8518518519% {
    transform: translateY(-50%) translate(-507px, -676px) rotate(-52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  54.8148148148% {
    transform: translateY(-50%) translate(-507px, -676px) rotate(-52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  55.5555555556% {
    transform: translateY(-50%) translate(-432px, -624px) rotate(-48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  58.5185185185% {
    transform: translateY(-50%) translate(-432px, -624px) rotate(-48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  59.2592592593% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  62.2222222222% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  62.962962963% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  65.9259259259% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  66.6666666667% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  69.6296296296% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  70.3703703704% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  73.3333333333% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  74.0740740741% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  77.037037037% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  77.7777777778% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  80.7407407407% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  81.4814814815% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  84.4444444444% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  85.1851851852% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  88.1481481481% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  88.8888888889% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  91.8518518519% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  92.5925925926% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  95.5555555556% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  96.2962962963% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  99.2592592593% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-28 .carousel-item {
  animation-name: dynamicSnappyScroll-28;
}

@keyframes dynamicSnappyScroll-28 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  2.8571428571% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  3.5714285714% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  6.4285714286% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  7.1428571429% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  10% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  10.7142857143% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  13.5714285714% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  14.2857142857% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  17.1428571429% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  17.8571428571% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  20.7142857143% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  21.4285714286% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  24.2857142857% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  25% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  27.8571428571% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  28.5714285714% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  31.4285714286% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  32.1428571429% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  35% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  35.7142857143% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  38.5714285714% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  39.2857142857% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  42.1428571429% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  42.8571428571% {
    transform: translateY(-50%) translate(-432px, 624px) rotate(48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  45.7142857143% {
    transform: translateY(-50%) translate(-432px, 624px) rotate(48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  46.4285714286% {
    transform: translateY(-50%) translate(-507px, 676px) rotate(52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  49.2857142857% {
    transform: translateY(-50%) translate(-507px, 676px) rotate(52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  50% {
    transform: translateY(-50%) translate(-588px, 728px) rotate(56deg) scale(0.45);
    opacity: 0;
    filter: blur(78.4px);
  }
  52.8571428571% {
    transform: translateY(-50%) translate(-588px, 728px) rotate(56deg) scale(0.45);
    opacity: 0;
    filter: blur(78.4px);
  }
  53.5714285714% {
    transform: translateY(-50%) translate(-507px, -676px) rotate(-52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  56.4285714286% {
    transform: translateY(-50%) translate(-507px, -676px) rotate(-52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  57.1428571429% {
    transform: translateY(-50%) translate(-432px, -624px) rotate(-48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  60% {
    transform: translateY(-50%) translate(-432px, -624px) rotate(-48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  60.7142857143% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  63.5714285714% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  64.2857142857% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  67.1428571429% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  67.8571428571% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  70.7142857143% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  71.4285714286% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  74.2857142857% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  75% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  77.8571428571% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  78.5714285714% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  81.4285714286% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  82.1428571429% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  85% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  85.7142857143% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  88.5714285714% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  89.2857142857% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  92.1428571429% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  92.8571428571% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  95.7142857143% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  96.4285714286% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  99.2857142857% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-29 .carousel-item {
  animation-name: dynamicSnappyScroll-29;
}

@keyframes dynamicSnappyScroll-29 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  2.7586206897% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  3.4482758621% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  6.2068965517% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  6.8965517241% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  9.6551724138% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  10.3448275862% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  13.1034482759% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  13.7931034483% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  16.5517241379% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  17.2413793103% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  20% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  20.6896551724% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  23.4482758621% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  24.1379310345% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  26.8965517241% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  27.5862068966% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  30.3448275862% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  31.0344827586% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  33.7931034483% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  34.4827586207% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  37.2413793103% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  37.9310344828% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  40.6896551724% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  41.3793103448% {
    transform: translateY(-50%) translate(-432px, 624px) rotate(48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  44.1379310345% {
    transform: translateY(-50%) translate(-432px, 624px) rotate(48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  44.8275862069% {
    transform: translateY(-50%) translate(-507px, 676px) rotate(52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  47.5862068966% {
    transform: translateY(-50%) translate(-507px, 676px) rotate(52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  48.275862069% {
    transform: translateY(-50%) translate(-588px, 728px) rotate(56deg) scale(0.45);
    opacity: 0;
    filter: blur(78.4px);
  }
  51.0344827586% {
    transform: translateY(-50%) translate(-588px, 728px) rotate(56deg) scale(0.45);
    opacity: 0;
    filter: blur(78.4px);
  }
  51.724137931% {
    transform: translateY(-50%) translate(-588px, -728px) rotate(-56deg) scale(0.45);
    opacity: 0;
    filter: blur(78.4px);
  }
  54.4827586207% {
    transform: translateY(-50%) translate(-588px, -728px) rotate(-56deg) scale(0.45);
    opacity: 0;
    filter: blur(78.4px);
  }
  55.1724137931% {
    transform: translateY(-50%) translate(-507px, -676px) rotate(-52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  57.9310344828% {
    transform: translateY(-50%) translate(-507px, -676px) rotate(-52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  58.6206896552% {
    transform: translateY(-50%) translate(-432px, -624px) rotate(-48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  61.3793103448% {
    transform: translateY(-50%) translate(-432px, -624px) rotate(-48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  62.0689655172% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  64.8275862069% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  65.5172413793% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  68.275862069% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  68.9655172414% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  71.724137931% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  72.4137931034% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  75.1724137931% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  75.8620689655% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  78.6206896552% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  79.3103448276% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  82.0689655172% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  82.7586206897% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  85.5172413793% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  86.2068965517% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  88.9655172414% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  89.6551724138% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  92.4137931034% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  93.1034482759% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  95.8620689655% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  96.5517241379% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  99.3103448276% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.items-count-30 .carousel-item {
  animation-name: dynamicSnappyScroll-30;
}

@keyframes dynamicSnappyScroll-30 {
  0% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  2.6666666667% {
    transform: translateY(-50%) translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px);
  }
  3.3333333333% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  6% {
    transform: translateY(-50%) translate(-3px, 52px) rotate(4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  6.6666666667% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  9.3333333333% {
    transform: translateY(-50%) translate(-12px, 104px) rotate(8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  10% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  12.6666666667% {
    transform: translateY(-50%) translate(-27px, 156px) rotate(12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  13.3333333333% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  16% {
    transform: translateY(-50%) translate(-48px, 208px) rotate(16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  16.6666666667% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  19.3333333333% {
    transform: translateY(-50%) translate(-75px, 260px) rotate(20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  20% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  22.6666666667% {
    transform: translateY(-50%) translate(-108px, 312px) rotate(24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  23.3333333333% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  26% {
    transform: translateY(-50%) translate(-147px, 364px) rotate(28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  26.6666666667% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  29.3333333333% {
    transform: translateY(-50%) translate(-192px, 416px) rotate(32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  30% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  32.6666666667% {
    transform: translateY(-50%) translate(-243px, 468px) rotate(36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  33.3333333333% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  36% {
    transform: translateY(-50%) translate(-300px, 520px) rotate(40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  36.6666666667% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  39.3333333333% {
    transform: translateY(-50%) translate(-363px, 572px) rotate(44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  40% {
    transform: translateY(-50%) translate(-432px, 624px) rotate(48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  42.6666666667% {
    transform: translateY(-50%) translate(-432px, 624px) rotate(48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  43.3333333333% {
    transform: translateY(-50%) translate(-507px, 676px) rotate(52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  46% {
    transform: translateY(-50%) translate(-507px, 676px) rotate(52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  46.6666666667% {
    transform: translateY(-50%) translate(-588px, 728px) rotate(56deg) scale(0.45);
    opacity: 0;
    filter: blur(78.4px);
  }
  49.3333333333% {
    transform: translateY(-50%) translate(-588px, 728px) rotate(56deg) scale(0.45);
    opacity: 0;
    filter: blur(78.4px);
  }
  50% {
    transform: translateY(-50%) translate(-675px, 780px) rotate(60deg) scale(0.45);
    opacity: 0;
    filter: blur(90px);
  }
  52.6666666667% {
    transform: translateY(-50%) translate(-675px, 780px) rotate(60deg) scale(0.45);
    opacity: 0;
    filter: blur(90px);
  }
  53.3333333333% {
    transform: translateY(-50%) translate(-588px, -728px) rotate(-56deg) scale(0.45);
    opacity: 0;
    filter: blur(78.4px);
  }
  56% {
    transform: translateY(-50%) translate(-588px, -728px) rotate(-56deg) scale(0.45);
    opacity: 0;
    filter: blur(78.4px);
  }
  56.6666666667% {
    transform: translateY(-50%) translate(-507px, -676px) rotate(-52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  59.3333333333% {
    transform: translateY(-50%) translate(-507px, -676px) rotate(-52deg) scale(0.45);
    opacity: 0;
    filter: blur(67.6px);
  }
  60% {
    transform: translateY(-50%) translate(-432px, -624px) rotate(-48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  62.6666666667% {
    transform: translateY(-50%) translate(-432px, -624px) rotate(-48deg) scale(0.45);
    opacity: 0;
    filter: blur(57.6px);
  }
  63.3333333333% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  66% {
    transform: translateY(-50%) translate(-363px, -572px) rotate(-44deg) scale(0.45);
    opacity: 0;
    filter: blur(48.4px);
  }
  66.6666666667% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  69.3333333333% {
    transform: translateY(-50%) translate(-300px, -520px) rotate(-40deg) scale(0.45);
    opacity: 0;
    filter: blur(40px);
  }
  70% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  72.6666666667% {
    transform: translateY(-50%) translate(-243px, -468px) rotate(-36deg) scale(0.45);
    opacity: 0;
    filter: blur(32.4px);
  }
  73.3333333333% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  76% {
    transform: translateY(-50%) translate(-192px, -416px) rotate(-32deg) scale(0.45);
    opacity: 0;
    filter: blur(25.6px);
  }
  76.6666666667% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  79.3333333333% {
    transform: translateY(-50%) translate(-147px, -364px) rotate(-28deg) scale(0.45);
    opacity: 0;
    filter: blur(19.6px);
  }
  80% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  82.6666666667% {
    transform: translateY(-50%) translate(-108px, -312px) rotate(-24deg) scale(0.45);
    opacity: 0;
    filter: blur(14.4px);
  }
  83.3333333333% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  86% {
    transform: translateY(-50%) translate(-75px, -260px) rotate(-20deg) scale(0.5);
    opacity: 0;
    filter: blur(10px);
  }
  86.6666666667% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  89.3333333333% {
    transform: translateY(-50%) translate(-48px, -208px) rotate(-16deg) scale(0.6);
    opacity: 0.2;
    filter: blur(6.4px);
  }
  90% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  92.6666666667% {
    transform: translateY(-50%) translate(-27px, -156px) rotate(-12deg) scale(0.7);
    opacity: 0.4;
    filter: blur(3.6px);
  }
  93.3333333333% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  96% {
    transform: translateY(-50%) translate(-12px, -104px) rotate(-8deg) scale(0.8);
    opacity: 0.6;
    filter: blur(1.6px);
  }
  96.6666666667% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  99.3333333333% {
    transform: translateY(-50%) translate(-3px, -52px) rotate(-4deg) scale(0.9);
    opacity: 0.8;
    filter: blur(0.4px);
  }
  100% {
    transform: translateY(-50%) translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes arrowPoke {
  0%, 80% {
    transform: translateY(-50%) translateX(0);
  }
  90% {
    transform: translateY(-50%) translateX(12px);
  }
  100% {
    transform: translateY(-50%) translateX(0);
  }
}
.hero__btn--subscription {
  gap: 8px;
  background: linear-gradient(135deg, #fb8c3e 0%, #f97316 55%, #ea6a0a 100%);
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 0.3s ease;
  animation: sna-premium-glow 2.6s ease-in-out infinite;
}
.hero__btn--subscription::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: sna-premium-sheen 2.6s ease-in-out infinite;
  pointer-events: none;
}
.hero__btn--subscription i {
  font-size: 18px;
}
.hero__btn--subscription:hover {
  transform: translateY(-4px);
}

.about-section {
  width: 100%;
}
.about-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
  /* Nested media queries for container */
}
@media (max-width: 600px) {
  .about-section .container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .container {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
  }
}
.about-section {
  /* LEFT SIDE */
}
.about-section .about-left {
  color: #e8e6e5;
  /* Tablet view - make it flex to stretch content */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-left {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}
.about-section .about-left .section-label {
  font-size: 18px;
  opacity: 0.8;
  margin-bottom: 10px;
}
.about-section .about-left h2 {
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 40px;
  color: white;
}
.about-section .about-left h2 span {
  color: #F47923;
}
.about-section .about-left h2 {
  /* Nested media queries for h2 */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-left h2 {
    font-size: 42px;
    margin-bottom: 30px;
  }
}
@media (max-width: 1024px) {
  .about-section .about-left h2 {
    font-size: 40px;
  }
}
.about-section .about-left h2 {
  /* Mobile view - scale down h2 */
}
@media (max-width: 600px) {
  .about-section .about-left h2 {
    font-size: 20px;
    margin-bottom: 0;
    line-height: 1.25;
    width: 100%;
    text-align: center;
  }
}
.about-section .about-left {
  /* ORBIT IMAGE BOX */
}
.about-section .about-left .orbit-box {
  width: 100%;
  height: 28rem;
  background: #1c1c1c;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.about-section .about-left .orbit-box img {
  width: 100%;
  height: 100%;
}
.about-section .about-left .orbit-box {
  /* Nested media queries for orbit-box */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-left .orbit-box {
    height: auto;
    flex: 1;
  }
}
@media (max-width: 1024px) {
  .about-section .about-left .orbit-box {
    height: 350px;
  }
}
.about-section .about-left .orbit-box {
  /* Mobile view - hide orbit-box */
}
@media (max-width: 600px) {
  .about-section .about-left .orbit-box {
    display: none;
  }
}
.about-section {
  /* RIGHT SIDE */
}
.about-section .about-right {
  padding-top: 17px;
  margin-top: 66px;
  /* Mobile view - reduce margins */
}
@media (max-width: 600px) {
  .about-section .about-right {
    padding-top: 10px;
    margin-top: 0;
  }
}
.about-section .about-right {
  /* Tablet view - reduce margins */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-right {
    padding-top: 0;
    margin-top: 4rem;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
.about-section .about-right .about-text {
  font-size: 18px;
  line-height: 1.6;
  color: #e8e6e5;
  margin-bottom: 40px;
  /* Mobile view - scale down text */
}
@media (max-width: 600px) {
  .about-section .about-right .about-text {
    font-size: 14px;
    margin-bottom: 30px;
  }
}
.about-section .about-right .about-text {
  /* Tablet view - slight reduction */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-right .about-text {
    font-size: 16px;
  }
}
.about-section .about-right {
  /* STAT CARD GRID */
}
.about-section .about-right .stat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 25px;
  max-width: 100%;
  margin-bottom: 40px;
  margin-top: 75px;
  align-items: stretch;
  /* Mobile view - scale down stat-grid but keep 2 columns */
}
@media (max-width: 600px) {
  .about-section .about-right .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 100%;
    margin-bottom: 0;
    margin-top: 0;
  }
}
.about-section .about-right .stat-grid {
  /* Tablet view - scale down */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-right .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 100%;
    margin-top: 50px;
    height: 100%;
  }
}
.about-section .about-right .stat-grid .stat-column {
  display: flex;
  flex-direction: column;
  gap: 25px;
  /* Left Column: Two Stat Cards */
}
.about-section .about-right .stat-grid .stat-column:first-child .stat-card:nth-child(1) {
  height: auto;
  flex: 1.3;
}
.about-section .about-right .stat-grid .stat-column:first-child .stat-card:nth-child(2) {
  height: auto;
  flex: 1;
}
.about-section .about-right .stat-grid .stat-column {
  /* Right Column: Instructor Image Only */
}
.about-section .about-right .stat-grid .stat-column:last-child .stat-card {
  height: 100%;
}
.about-section .about-right .stat-grid .stat-column {
  /* Nested media queries for stat-column */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-right .stat-grid .stat-column {
    height: 100%;
  }
  .about-section .about-right .stat-grid .stat-column:first-child .stat-card:nth-child(1) {
    height: auto;
    flex: 1.22;
  }
  .about-section .about-right .stat-grid .stat-column:first-child .stat-card:nth-child(2) {
    height: auto;
    flex: 1;
  }
  .about-section .about-right .stat-grid .stat-column:last-child .stat-card {
    height: 100%;
  }
}
.about-section .about-right .stat-grid .stat-column {
  /* Mobile view - scale down heights keep 2 columns */
}
@media (max-width: 600px) {
  .about-section .about-right .stat-grid .stat-column {
    gap: 12px;
  }
  .about-section .about-right .stat-grid .stat-column:first-child .stat-card:nth-child(1) {
    height: auto;
    flex: 1.23;
  }
  .about-section .about-right .stat-grid .stat-column:first-child .stat-card:nth-child(2) {
    height: auto;
    flex: 1;
  }
  .about-section .about-right .stat-grid .stat-column:last-child .stat-card {
    height: 100%;
  }
}
.about-section .about-right .stat-grid .stat-card {
  background: #1A1A1A;
  border: 2px solid transparent;
  border-radius: 24px;
  padding: 30px;
  color: #e8e6e5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.about-section .about-right .stat-grid .stat-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.03) -30%, #713b14 100%);
  -webkit-mask: linear-gradient(#e8e6e5 0 0) content-box, linear-gradient(#e8e6e5 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.about-section .about-right .stat-grid .stat-card h3 {
  font-size: 2.5rem;
  color: #F47923;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 12px;
  /* Tablet view - scale down h3 */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-right .stat-grid .stat-card h3 {
    font-size: 2.25rem;
  }
}
.about-section .about-right .stat-grid .stat-card h3 {
  /* Mobile view - scale down h3 */
}
@media (max-width: 600px) {
  .about-section .about-right .stat-grid .stat-card h3 {
    font-size: 1.2rem;
    margin-bottom: 8px !important;
  }
}
.about-section .about-right .stat-grid .stat-card.left-btm h3 {
  font-size: 2.25rem;
  /* Tablet view - scale down */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-right .stat-grid .stat-card.left-btm h3 {
    font-size: 1.875rem;
  }
}
.about-section .about-right .stat-grid .stat-card.left-btm h3 {
  /* Mobile view - scale down */
}
@media (max-width: 600px) {
  .about-section .about-right .stat-grid .stat-card.left-btm h3 {
    font-size: 1.5rem;
  }
}
.about-section .about-right .stat-grid .stat-card p.stat-label {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #e8e6e5;
  line-height: 1.3;
  /* Tablet view - scale down */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-right .stat-grid .stat-card p.stat-label {
    font-size: 1rem;
    margin-bottom: 12px;
  }
}
.about-section .about-right .stat-grid .stat-card p.stat-label {
  /* Mobile view - scale down */
}
@media (max-width: 600px) {
  .about-section .about-right .stat-grid .stat-card p.stat-label {
    font-size: 0.938rem;
    margin-bottom: 8px;
  }
}
.about-section .about-right .stat-grid .stat-card p.desc {
  font-size: 12px;
  color: #cfcfcf;
  line-height: 1.5;
  /* Mobile view - scale down desc text */
}
@media (max-width: 600px) {
  .about-section .about-right .stat-grid .stat-card p.desc {
    font-size: 7.6px;
  }
}
.about-section .about-right .stat-grid .stat-card p.desc {
  /* Tablet view - slight reduction */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-right .stat-grid .stat-card p.desc {
    font-size: 13px;
  }
}
.about-section .about-right .stat-grid .stat-card {
  /* Mobile view - scale down padding */
}
@media (max-width: 600px) {
  .about-section .about-right .stat-grid .stat-card {
    padding: 16px;
    border-radius: 16px;
  }
  .about-section .about-right .stat-grid .stat-card::before {
    border-radius: 16px;
  }
}
.about-section .about-right .stat-grid .stat-card {
  /* Tablet view - slight reduction */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-right .stat-grid .stat-card {
    padding: 20px;
    border-radius: 20px;
  }
  .about-section .about-right .stat-grid .stat-card::before {
    border-radius: 20px;
  }
}
.about-section .about-right .stat-grid {
  /* INSTRUCTOR CARD */
}
.about-section .about-right .stat-grid .instructor-card {
  padding: 0;
  position: relative;
  background: #1A1A1A;
  overflow: hidden;
  border-radius: 24px;
  /* Instructor Info Card */
}
.about-section .about-right .stat-grid .instructor-card .instructor-info {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  z-index: 5;
  width: calc(100% - 40px);
  height: auto;
}
.about-section .about-right .stat-grid .instructor-card .info-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(60, 60, 60, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 12px 15px;
  opacity: 0;
  visibility: hidden;
  animation: fadeLoop 12s infinite linear;
  animation-play-state: paused;
  border: 1px solid rgba(244, 121, 35, 0.2);
  box-sizing: border-box;
}
.about-section .about-right .stat-grid .instructor-card .info-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.03) -30%, #713b14 100%);
  -webkit-mask: linear-gradient(#e8e6e5 0 0) content-box, linear-gradient(#e8e6e5 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.about-section .about-right .stat-grid .instructor-card .info-item img {
  display: inline-block !important;
  opacity: 1 !important;
  animation: none !important;
}
.about-section .about-right .stat-grid .instructor-card .info-item .role-badge {
  display: inline-block;
  background-color: #6f492e;
  color: white;
  padding: 2px 6px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 12px;
  border: 2px solid #F47923;
  /* Tablet view - scale down role-badge */
}
@media (max-width: 600px) {
  .about-section .about-right .stat-grid .instructor-card .info-item .role-badge {
    border: 1px solid #F47923 !important;
  }
}
.about-section .about-right .stat-grid .instructor-card .info-item .instructor-name {
  color: #e8e6e5;
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 2px 0;
  line-height: 1.3;
}
.about-section .about-right .stat-grid .instructor-card .info-item .linkedin-link {
  color: #F47923;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color 0.3s ease;
}
.about-section .about-right .stat-grid .instructor-card .info-item .linkedin-link:hover {
  color: rgba(244, 121, 35, 0.8);
}
.about-section .about-right .stat-grid .instructor-card .info-item .linkedin-link .arrow-icon {
  width: 17px;
  height: 21px;
  object-fit: contain;
  display: inline-block !important;
  opacity: 1 !important;
  flex-shrink: 0;
  position: relative;
  left: 7px;
}
.about-section .about-right .stat-grid .instructor-card .info-item-1 {
  animation-delay: 0s;
}
.about-section .about-right .stat-grid .instructor-card .info-item-2 {
  animation-delay: 4s;
}
.about-section .about-right .stat-grid .instructor-card .info-item-3 {
  animation-delay: 8s;
}
.about-section .about-right .stat-grid .instructor-card > img {
  position: absolute;
  top: 122px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  animation: fadeLoop 12s infinite linear;
  animation-play-state: paused;
}
.about-section .about-right .stat-grid .instructor-card.anim-ready .info-item,
.about-section .about-right .stat-grid .instructor-card.anim-ready img {
  animation-play-state: running;
}
.about-section .about-right .stat-grid .instructor-card .ninja-head-1 {
  animation-delay: 0s;
}
.about-section .about-right .stat-grid .instructor-card .ninja-head-2 {
  animation-delay: 4s;
}
.about-section .about-right .stat-grid .instructor-card .ninja-head-3 {
  animation-delay: 8s;
}
.about-section .about-right .stat-grid .instructor-card {
  /* Nested media queries for instructor-card */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-right .stat-grid .instructor-card img {
    width: 100%;
    max-width: 350px;
  }
}
.about-section .about-right .stat-grid .instructor-card {
  /* Mobile view - scale down info card */
}
@media (max-width: 600px) {
  .about-section .about-right .stat-grid .instructor-card .instructor-info {
    top: 15px;
    left: 15px;
    right: 15px;
    width: calc(100% - 30px);
  }
  .about-section .about-right .stat-grid .instructor-card .info-item {
    padding: 4px 7px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .about-section .about-right .stat-grid .instructor-card .info-item::before {
    border-radius: 12px;
  }
  .about-section .about-right .stat-grid .instructor-card .info-item .role-badge {
    padding: 3px 4px;
    font-size: 8px;
    margin: 5px 0 2px 0;
    border-radius: 16px;
    width: 50%;
    text-align: center;
    align-items: center;
  }
  .about-section .about-right .stat-grid .instructor-card .info-item .instructor-name {
    font-size: 13px;
    margin: 4px 0 0 0;
    line-height: 1;
  }
  .about-section .about-right .stat-grid .instructor-card .info-item .linkedin-link {
    font-size: 10px;
    gap: 2px;
    margin: 3px 0 6px 0;
    line-height: 1;
    display: inline-flex;
  }
  .about-section .about-right .stat-grid .instructor-card .info-item .linkedin-link .arrow-icon {
    width: 9px;
    height: 11px;
    left: 2px;
  }
  .about-section .about-right .stat-grid .instructor-card img {
    max-width: 300px;
  }
}
.about-section .about-right .stat-grid .instructor-card {
  /* Tablet view - scale down info card */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-right .stat-grid .instructor-card .instructor-info {
    top: 15px;
    left: 15px;
    right: 15px;
    width: calc(100% - 30px);
  }
  .about-section .about-right .stat-grid .instructor-card .info-item {
    padding: 10px 12px;
    border-radius: 14px;
  }
  .about-section .about-right .stat-grid .instructor-card .info-item::before {
    border-radius: 14px;
  }
  .about-section .about-right .stat-grid .instructor-card .info-item .role-badge {
    padding: 2px 6px;
    font-size: 9px;
    margin-bottom: 8px;
  }
  .about-section .about-right .stat-grid .instructor-card .info-item .instructor-name {
    font-size: 14px;
    margin: 0 0 6px 0;
  }
  .about-section .about-right .stat-grid .instructor-card .info-item .linkedin-link {
    font-size: 12px;
  }
  .about-section .about-right .stat-grid .instructor-card img {
    max-width: 320px;
  }
}
.about-section .about-right .stat-grid {
  /* Nested media queries for stat-grid */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .about-section .about-right .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 100%;
    height: 100%;
  }
}
@keyframes fadeLoop {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  3% {
    opacity: 1;
    visibility: visible;
  }
  30.33% {
    opacity: 1;
    visibility: visible;
  }
  33.33% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.learning-section {
  width: 100%;
  padding: 6rem 0 35px 0;
  color: #e8e6e5;
}
@media (max-width: 480px) {
  .learning-section {
    padding: 3rem 0 0 0;
    margin-bottom: 4rem;
  }
}
.learning-section .container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 768px) {
  .learning-section .container {
    padding: 0 16px;
  }
}
.learning-section .section-subtitle {
  font-size: 1rem;
  opacity: 0.7;
  margin-bottom: 1rem;
}
.learning-section .section-title {
  font-size: 3rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
@media (min-width: 480px) and (max-width: 1024px) {
  .learning-section .section-title {
    font-size: 2.4rem;
  }
}
@media (max-width: 768px) {
  .learning-section .section-title {
    font-size: 2.4rem;
  }
}
@media (max-width: 480px) {
  .learning-section .section-title {
    font-size: 1.7rem;
  }
}
.learning-section .section-title span {
  color: #F47923;
}
.learning-section .section-desc {
  font-size: 1rem;
  opacity: 0.8;
  margin-bottom: 3rem;
}
@media (min-width: 480px) and (max-width: 1024px) {
  .learning-section .section-desc {
    font-size: 1rem;
  }
}
@media (max-width: 768px) {
  .learning-section .section-desc {
    font-size: 0.9rem;
  }
}
.learning-section {
  /* === FEATURE CARDS MARQUEE === */
}
.learning-section .feature-cards-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 3rem;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
@media (max-width: 480px) {
  .learning-section .feature-cards-wrapper {
    margin-bottom: 1rem;
  }
}
.learning-section .feature-cards-grid {
  display: flex;
  gap: 3rem;
  margin-bottom: 3rem;
  width: 100%;
}
@media (max-width: 1024px) {
  .learning-section .feature-cards-grid {
    gap: 2.5rem;
  }
}
@media (max-width: 480px) {
  .learning-section .feature-cards-grid {
    gap: 1.5rem;
  }
}
.learning-section .feature-cards-grid .track {
  display: flex;
  gap: 3rem;
  animation: feature-cards-marquee 20s linear infinite;
  width: max-content;
}
@media (max-width: 1024px) {
  .learning-section .feature-cards-grid .track {
    gap: 2.5rem;
    animation: feature-cards-marquee 25s linear infinite;
  }
}
@media (max-width: 480px) {
  .learning-section .feature-cards-grid .track {
    gap: 1.5rem;
    animation: feature-cards-marquee 20s linear infinite;
  }
}
.learning-section .feature-cards-wrapper:hover .track {
  animation-play-state: paused;
}
.learning-section .feature-card {
  background: #1c1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
  width: 16rem;
}
@media (max-width: 1024px) {
  .learning-section .feature-card {
    border-radius: 0.75rem;
    padding: 0.75rem;
    gap: 0.5rem;
    width: 155px;
    height: auto;
  }
}
@media (max-width: 480px) {
  .learning-section .feature-card {
    border-radius: 0.75rem;
    padding: 0.75rem;
    gap: 0.5rem;
    width: 155px;
    height: auto;
  }
}
.learning-section .feature-card__icon {
  width: 100%;
  height: 80px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .learning-section .feature-card__icon {
    height: 45px;
    margin: 0.5rem 0;
  }
}
@media (max-width: 480px) {
  .learning-section .feature-card__icon {
    height: 45px;
    margin: 0.5rem 0;
  }
}
.learning-section .feature-card__icon img {
  height: 110px;
  object-fit: contain;
}
@media (max-width: 1024px) {
  .learning-section .feature-card__icon img {
    height: 60px;
  }
}
@media (max-width: 480px) {
  .learning-section .feature-card__icon img {
    height: 60px;
  }
}
.learning-section .feature-card__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: #e8e6e5;
}
@media (max-width: 1024px) {
  .learning-section .feature-card__title {
    font-size: 0.65rem;
    line-height: 1.2;
    word-break: break-word;
    margin-top: 0.7rem;
  }
}
@media (max-width: 480px) {
  .learning-section .feature-card__title {
    font-size: 0.65rem;
    line-height: 1.2;
    word-break: break-word;
    margin-top: 0.7rem;
  }
}
.learning-section .feature-card__description {
  font-size: 0.8rem;
  line-height: 1.6;
  opacity: 0.7;
  margin: 0;
}
@media (max-width: 1024px) {
  .learning-section .feature-card__description {
    font-size: 0.7rem;
    line-height: 1.3;
    word-break: break-word;
    width: 100%;
  }
}
@media (max-width: 480px) {
  .learning-section .feature-card__description {
    font-size: 0.7rem;
    line-height: 1.3;
    word-break: break-word;
    width: 100%;
  }
}
.learning-section .feature-card__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
@media (max-width: 1024px) {
  .learning-section .feature-card__bullets {
    gap: 0.1rem;
    font-size: 0.6rem;
  }
}
@media (max-width: 480px) {
  .learning-section .feature-card__bullets {
    gap: 0.1rem;
    font-size: 0.6rem;
  }
}
.learning-section .feature-card__bullets li {
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.7;
  padding-left: 1.2rem;
  position: relative;
}
@media (max-width: 1024px) {
  .learning-section .feature-card__bullets li {
    font-size: 0.7rem;
    line-height: 1.2;
    padding-left: 0.8rem;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media (max-width: 480px) {
  .learning-section .feature-card__bullets li {
    font-size: 0.7rem;
    line-height: 1.2;
    padding-left: 0.8rem;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.learning-section .feature-card__bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  font-weight: bold;
}
.learning-section .feature-card-bg {
  background-image: url(/assets/images/learning/code-arena.png);
  background-size: cover;
}
.learning-section .review {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3.5rem;
  gap: 2rem;
}
@media (max-width: 768px) {
  .learning-section .review {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}
.learning-section .review .titles .section-title {
  font-size: 3rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
@media (max-width: 480px) {
  .learning-section .review .titles .section-title {
    font-size: 1.7rem;
  }
}
.learning-section .review .titles .section-title span {
  color: #F47923;
}
.learning-section .review .titles .section-desc {
  font-size: 1.1rem;
  opacity: 0.7;
  margin: 0;
  color: #e8e6e5;
}
@media (max-width: 480px) {
  .learning-section .review .titles .section-desc {
    font-size: 0.9rem;
  }
}
.learning-section .review .button {
  flex-shrink: 0;
  align-self: center;
}
@media (max-width: 480px) {
  .learning-section .review .button {
    position: absolute;
    transform: translate(0, 29rem);
  }
}
@media (max-width: 400px) {
  .learning-section .review .button {
    position: absolute;
    transform: translate(0, 33rem);
  }
}
.learning-section .review .button .btn {
  display: inline-block;
  padding: 0.7rem 1.8rem;
  background: #3d2311;
  border: 1px solid rgba(244, 121, 35, 0.3);
  border-radius: 30px;
  color: #d8c2b3;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}
.learning-section .review .button .btn:hover {
  background: #F47923;
  color: #000;
  border-color: #F47923;
}
.learning-section {
  /* === GRID LAYOUT === */
}
.learning-section .learning-grid {
  display: grid;
  grid-template-columns: 291px 1fr 301px;
  grid-gap: 1.5rem;
}
@media (min-width: 480px) and (max-width: 1024px) {
  .learning-section .learning-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.5rem;
  }
}
@media (max-width: 1024px) {
  .learning-section .learning-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .learning-section .learning-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}
@media (max-width: 480px) {
  .learning-section .learning-grid {
    justify-items: center;
  }
}
.learning-section {
  /* === CARDS === */
}
.learning-section .learning-card {
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.learning-section .learning-card img {
  width: 100%;
  display: block;
}
.learning-section .learning-card.small-card {
  grid-column: span 1;
  width: 291px;
  height: 342px;
  padding: 0 2rem 2rem;
  justify-content: space-between;
}
@media (min-width: 480px) and (max-width: 1024px) {
  .learning-section .learning-card.small-card {
    grid-column: span 1;
    max-width: 100%;
    width: 270px;
    height: 320px;
  }
  .learning-section .learning-card.small-card .image-wrapper img {
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 768px) {
  .learning-section .learning-card.small-card {
    grid-column: span 1;
    max-width: 100%;
    width: 100%;
    width: 291px;
  }
}
.learning-section .learning-card.small-card .image-wrapper {
  position: relative;
  width: 120%;
  height: 100%;
  margin: 0;
}
.learning-section .learning-card.small-card .image-wrapper img {
  width: 100%;
  margin: 0;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: -25px;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.learning-section .learning-card.small-card .image-wrapper img.image-1 {
  opacity: 1;
}
.learning-section .learning-card.small-card .image-wrapper img.image-2 {
  opacity: 0;
}
.learning-section .learning-card.small-card:hover .image-wrapper img.image-1 {
  opacity: 0;
}
.learning-section .learning-card.small-card:hover .image-wrapper img.image-2 {
  opacity: 1;
}
.learning-section .learning-card.small-card .card-content h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.learning-section .learning-card.small-card .card-content p {
  opacity: 0.7;
  font-size: 0.95rem;
  line-height: 1.5;
}
.learning-section .learning-card.large-card {
  grid-column: span 2;
  padding: 0;
  background: #111;
  min-height: 300px;
}
@media (min-width: 480px) and (max-width: 1024px) {
  .learning-section .learning-card.large-card {
    grid-column: span 1;
    max-width: 100%;
    width: 100%;
    max-width: 500px;
    min-height: 280px;
  }
  .learning-section .learning-card.large-card img {
    width: 90%;
    height: 90%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 768px) {
  .learning-section .learning-card.large-card {
    grid-column: span 1;
    max-width: 100%;
    width: 100%;
  }
}
.learning-section .learning-card.large-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.learning-section .learning-card.large-card img.image-1 {
  opacity: 1;
}
.learning-section .learning-card.large-card img.image-2 {
  opacity: 0;
}
.learning-section .learning-card:hover img.image-1 {
  opacity: 0;
}
.learning-section .learning-card:hover img.image-2 {
  opacity: 1;
}
.learning-section .learning-card.testimonial-card {
  grid-column: span 2;
  background: #121212;
  padding: 2rem 1rem 4rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
@media (min-width: 480px) {
  .learning-section .learning-card.testimonial-card {
    flex-direction: column-reverse !important;
  }
}
@media (min-width: 480px) and (max-width: 1024px) {
  .learning-section .learning-card.testimonial-card {
    grid-column: span 1;
    max-width: 100%;
    padding: 1.5rem 2rem;
    width: 100%;
    height: 13rem;
  }
  .learning-section .learning-card.testimonial-card .quote {
    font-size: 4rem;
  }
  .learning-section .learning-card.testimonial-card p {
    font-size: 1.3rem;
  }
}
@media (max-width: 768px) {
  .learning-section .learning-card.testimonial-card {
    grid-column: span 1;
    max-width: 100%;
    width: 100%;
  }
}
@media (max-width: 480px) {
  .learning-section .learning-card.testimonial-card {
    padding: 1rem 0rem 4rem 2rem;
    width: 100%;
    height: auto;
  }
  .learning-section .learning-card.testimonial-card p {
    font-size: 0.8rem;
    max-width: 19rem;
  }
}
.learning-section .learning-card.testimonial-card .quote-desc {
  position: relative;
  padding-bottom: 14px;
}
@media (max-width: 480px) {
  .learning-section .learning-card.testimonial-card .quote-desc {
    padding-bottom: 2.5rem;
  }
}
.learning-section .learning-card.testimonial-card .quote {
  position: relative;
  top: -21px;
  margin-bottom: 1rem;
  margin-top: -0.5rem;
  width: auto;
  height: 0px;
}
@media (max-width: 480px) {
  .learning-section .learning-card.testimonial-card .quote {
    margin-bottom: 0.8rem;
    height: 1.5rem;
    top: 0;
  }
}
.learning-section .learning-card.testimonial-card .quote .quote-image {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  display: block;
  transform: translate(0, -3rem);
}
@media (max-width: 480px) {
  .learning-section .learning-card.testimonial-card .quote .quote-image {
    width: 1.5rem;
    height: 4rem;
    transform: translate(0, -1rem);
  }
}
.learning-section .learning-card.testimonial-card p {
  position: absolute;
  top: 40%;
  font-size: 1.5rem;
  line-height: 1.6;
  font-weight: 500;
  max-width: 90%;
  opacity: 0;
  animation: contentSwap 6s ease-out infinite;
  color: #ffffff;
}
@media (max-width: 480px) {
  .learning-section .learning-card.testimonial-card p {
    font-size: 0.7rem;
    max-width: 84%;
    top: 0;
  }
}
.learning-section .learning-card.testimonial-card p.quote-1 {
  animation-delay: 0s;
}
.learning-section .learning-card.testimonial-card p.quote-2 {
  animation-delay: 3s;
}
.learning-section .learning-card.testimonial-card p span {
  color: #f47923 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #f47923 !important;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(244, 121, 35, 0.35);
}
.learning-section .learning-card.stats-card {
  grid-column: span 1;
  width: 301px;
  height: 252px;
  text-align: center;
  background: #141414;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 480px) {
  .learning-section .learning-card.stats-card {
    grid-column: span 1;
    width: 328px;
    height: 119px;
    text-align: center;
    background: #141414;
    padding: 1rem 1rem 1rem 1.6rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
}
@media (min-width: 480px) and (max-width: 1024px) {
  .learning-section .learning-card.stats-card {
    grid-column: span 1;
    max-width: 100%;
    width: 280px;
    height: 240px;
  }
  .learning-section .learning-card.stats-card h2 {
    font-size: 3.5rem;
  }
  .learning-section .learning-card.stats-card p {
    font-size: 1rem;
  }
  .learning-section .learning-card.stats-card .avatars img {
    width: 45px;
    height: 45px;
  }
}
@media (max-width: 768px) {
  .learning-section .learning-card.stats-card {
    grid-column: span 1;
    max-width: 100%;
    width: 100%;
  }
}
.learning-section .learning-card.stats-card h2 {
  font-family: "Ubuntu", sans-serif;
  font-size: 4rem;
  background: linear-gradient(to bottom, #F47923 0%, #6d3103 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.learning-section .learning-card.stats-card p {
  opacity: 0.8;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}
@media (max-width: 480px) {
  .learning-section .learning-card.stats-card p {
    opacity: 0.8;
    font-size: 1.1rem;
    margin-bottom: 2rem;
    position: absolute;
    bottom: -18px;
    left: 31px;
  }
}
.learning-section .learning-card.stats-card .avatars {
  display: flex;
  justify-content: center;
}
.learning-section .learning-card.stats-card .avatars img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #141414;
  margin-left: -15px;
}
.learning-section .learning-card.stats-card .avatars img:first-child {
  margin-left: 0;
}

/* === ANIMATIONS === */
@keyframes feature-cards-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-33.333%);
  }
}
@keyframes contentSwap {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.opportunities {
  color: #e8e6e5;
  padding-top: 2.5rem;
}
@media (max-width: 768px) {
  .opportunities {
    padding-top: 1.5rem;
  }
}
.opportunities .label {
  font-size: 1rem;
  color: #b3b3b3;
  margin-bottom: 0.5rem;
}
.opportunities .title {
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .opportunities .title {
    font-size: 18px;
    text-align: center;
  }
}
.opportunities .title .highlight {
  color: #F47923;
}
.opportunities .see-all {
  float: right;
  color: #b3b3b3;
  margin-top: -2rem;
  font-size: 1rem;
  text-decoration: underline;
  cursor: pointer;
}
.opportunities {
  /* Categories */
}
.opportunities__categories {
  margin: 2.5rem 0;
  display: flex;
  gap: 1.2rem;
}
@media (max-width: 768px) {
  .opportunities__categories {
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .opportunities__categories::-webkit-scrollbar {
    display: none;
  }
}
@media (max-width: 600px) {
  .opportunities__categories {
    gap: 0.5rem;
    padding-bottom: 0 !important;
    margin: 1rem 0 0.5rem 0;
  }
}
@media (max-width: 600px) {
  .opportunities__categories .has-arrow {
    padding-right: 0.1rem !important;
  }
  .opportunities__categories .has-arrow.active, .opportunities__categories .has-arrow:hover {
    padding-right: 0.3rem !important;
  }
}
.opportunities__categories .cat-btn {
  background: transparent;
  border: 1px solid #2a2a2a;
  padding: 0.7rem 1.4rem;
  border-radius: 0.7rem;
  font-size: 1rem;
  color: #b3b3b3;
  cursor: pointer;
  transition: 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
@media (max-width: 768px) {
  .opportunities__categories .cat-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}
@media (max-width: 600px) {
  .opportunities__categories .cat-btn {
    padding: 0.1rem 0.5rem;
    font-size: 15px;
    gap: 0;
  }
}
.opportunities__categories .cat-btn .arrow-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}
@media (max-width: 600px) {
  .opportunities__categories .cat-btn .arrow-icon {
    width: 15px;
    height: 13px;
  }
}
.opportunities__categories .cat-btn.active, .opportunities__categories .cat-btn:hover {
  background: rgba(244, 121, 35, 0.1);
  border-color: #F47923;
  color: #F47923;
}
.opportunities__categories .cat-btn.active .arrow-icon, .opportunities__categories .cat-btn:hover .arrow-icon {
  transform: translateX(3px);
}
.opportunities {
  /* Cards Container - holds both buttons and wrapper */
}
.opportunities__cards-container {
  position: relative;
}
.opportunities__cards-container .scroll-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: #000;
  border: 1px solid #2a2a2a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: all 0.3s ease;
  color: #fff;
  border: none;
}
@media (max-width: 768px) {
  .opportunities__cards-container .scroll-nav {
    width: 2rem;
    height: 2rem;
  }
}
@media (max-width: 576px) {
  .opportunities__cards-container .scroll-nav {
    width: 2rem;
    height: 2rem;
  }
}
.opportunities__cards-container .scroll-nav:hover {
  background: #1a1a1a;
  transform: translateY(-50%) scale(1.1);
}
.opportunities__cards-container .scroll-nav--left {
  left: calc(max(0px, (100% - 1800px) / 2) + 28px);
}
.opportunities__cards-container .scroll-nav--right {
  right: calc(max(0px, (100% - 1800px) / 2) + 28px);
}
.opportunities__cards-container .scroll-nav svg {
  width: 24px;
  height: 24px;
}
@media (max-width: 768px) {
  .opportunities__cards-container .scroll-nav svg {
    width: 1rem;
    height: 1rem;
  }
}
@media (max-width: 576px) {
  .opportunities__cards-container .scroll-nav svg {
    width: 1rem;
    height: 1rem;
  }
}
.opportunities {
  /* Cards Wrapper */
}
.opportunities__cards-wrapper {
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
@media (max-width: 576px) {
  .opportunities__cards-wrapper {
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
    mask-image: none;
    padding-left: 16px;
    padding-right: 16px;
  }
}
.opportunities__cards-wrapper::-webkit-scrollbar {
  display: none;
}
.opportunities__cards {
  display: flex;
  gap: 2rem;
  padding: 1rem 4rem 1rem 4rem;
  width: max-content;
}
@media (max-width: 768px) {
  .opportunities__cards {
    padding: 1rem 3rem 1rem 3rem;
  }
}
@media (max-width: 576px) {
  .opportunities__cards {
    padding: 1rem 0;
  }
}
.opportunities {
  /* Card */
}
.opportunities .opp-card {
  width: 360px;
  background: #141414;
  border: 1.2px solid transparent;
  background: linear-gradient(#141414, #141414) padding-box, linear-gradient(135deg, rgba(244, 121, 35, 0.85) 0%, rgba(244, 121, 35, 0.55) 20%, rgba(244, 121, 35, 0.25) 40%, rgba(244, 121, 35, 0.12) 60%, rgba(244, 121, 35, 0.05) 80%, transparent 100%) border-box;
  border-radius: 1rem;
  padding: 1.2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}
@media (max-width: 768px) {
  .opportunities .opp-card {
    width: 320px;
    padding: 1rem;
    gap: 0.8rem;
  }
}
@media (max-width: 576px) {
  .opportunities .opp-card {
    width: calc(100vw - 16px * 2);
    padding: 1rem;
    gap: 0.7rem;
    scroll-snap-align: center;
  }
}
.opportunities .opp-card:hover {
  transform: translateY(-5px);
}
.opportunities .opp-card:hover::before {
  content: "";
  position: absolute;
  top: -140%;
  left: 0;
  width: 100%;
  height: 190%;
  background: radial-gradient(circle, rgba(244, 121, 35, 0.35), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.opportunities .opp-card .opp-card__body {
  width: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.opportunities .opp-card .opp-card__body .opp-card__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.8rem;
}
@media (max-width: 768px) {
  .opportunities .opp-card .opp-card__body .opp-card__title {
    font-size: 0.8rem;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
  }
}
@media (max-width: 576px) {
  .opportunities .opp-card .opp-card__body .opp-card__title {
    font-size: 0.7rem;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
  }
}
.opportunities .opp-card .opp-card__body .opp-card__title img {
  width: 2.5rem;
  height: 2.5rem;
}
@media (max-width: 768px) {
  .opportunities .opp-card .opp-card__body .opp-card__title img {
    width: 2rem;
    height: 2rem;
  }
}
@media (max-width: 576px) {
  .opportunities .opp-card .opp-card__body .opp-card__title img {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.opportunities .opp-card .opp-card__body .opp-card__tags {
  margin: 0.8rem 0;
  display: flex;
  gap: 0.6rem;
}
@media (max-width: 768px) {
  .opportunities .opp-card .opp-card__body .opp-card__tags {
    gap: 0.5rem;
    margin: 0.6rem 0;
  }
}
@media (max-width: 576px) {
  .opportunities .opp-card .opp-card__body .opp-card__tags {
    gap: 0.4rem;
    margin: 0.5rem 0;
    flex-wrap: wrap;
  }
}
.opportunities .opp-card .opp-card__body .opp-card__tags .tag {
  background: #1f1f1f;
  padding: 0.3rem 0.7rem;
  border-radius: 0.7rem;
  font-size: 0.85rem;
}
@media (max-width: 768px) {
  .opportunities .opp-card .opp-card__body .opp-card__tags .tag {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
  }
}
@media (max-width: 576px) {
  .opportunities .opp-card .opp-card__body .opp-card__tags .tag {
    padding: 0.2rem 0.5rem;
    font-size: 0.65rem;
  }
}
.opportunities .opp-card .opp-card__body .opp-card__desc {
  font-size: 0.8rem;
  color: #b3b3b3;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .opportunities .opp-card .opp-card__body .opp-card__desc {
    font-size: 0.75rem;
    line-height: 1.4;
  }
}
@media (max-width: 576px) {
  .opportunities .opp-card .opp-card__body .opp-card__desc {
    font-size: 0.7rem;
    line-height: 1.3;
  }
}
.opportunities .opp-card .opp-card__image {
  width: 100%;
  aspect-ratio: 12/5;
  background: #141414;
  border-radius: 0.7rem;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.opportunities .opp-card .opp-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.opportunities .opp-card .btn-view {
  display: block;
  width: 100%;
  margin-top: auto;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
  padding: 0.7rem 1.2rem;
  border-radius: 0.6rem;
  border: 1px solid #F47923;
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, transform 0.2s ease;
}
@media (max-width: 768px) {
  .opportunities .opp-card .btn-view {
    font-size: 0.8rem;
    padding: 0.6rem 1rem;
  }
}
@media (max-width: 576px) {
  .opportunities .opp-card .btn-view {
    font-size: 0.75rem;
    padding: 0.55rem 0.8rem;
  }
}
.opportunities .opp-card .btn-view:hover {
  background: rgba(244, 121, 35, 0.12);
  transform: translateY(-2px);
}
.opportunities .cta_container {
  background-image: url("/assets/images/opportunities/cta-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 2rem auto 0;
  padding: 1rem 48px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1800px;
}
@media (max-width: 768px) {
  .opportunities .cta_container {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 600px) {
  .opportunities .cta_container {
    margin-top: 0 !important;
  }
}
@media (max-width: 600px) {
  .opportunities .cta_container .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.opportunities {
  /* Bottom CTA Box */
}
.opportunities__cta {
  padding: 3rem 4rem;
  border-radius: 2rem;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  overflow: visible;
}
@media (max-width: 768px) {
  .opportunities__cta {
    padding: 2rem;
    border-radius: 1.5rem;
  }
}
@media (max-width: 600px) {
  .opportunities__cta {
    padding: 20px 18px;
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 1rem;
    overflow: visible;
  }
}
.opportunities__cta h3 {
  font-size: 2.7rem;
  font-weight: 300;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  z-index: 2;
  position: relative;
  max-width: 50rem;
}
@media (max-width: 768px) {
  .opportunities__cta h3 {
    font-size: 2.2rem;
  }
}
@media (max-width: 600px) {
  .opportunities__cta h3 {
    font-size: 13px;
    margin-bottom: 1rem;
    max-width: 160px;
  }
}
.opportunities__cta h3 span {
  color: #F47923;
}
.opportunities__cta .cta-btn-orange {
  display: none;
  background: #ff7b23;
  color: #ffffff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
  z-index: 2;
  position: relative;
}
@media (max-width: 600px) {
  .opportunities__cta .cta-btn-orange {
    display: inline-block;
    font-size: 0.5rem;
    padding: 0.5rem 1rem;
  }
}
.opportunities__cta .cta-btn-orange:hover {
  background: rgb(93.7254901961%, 37.4901960784%, 0%);
  transform: translateY(-2px);
}
.opportunities__cta .cta-text .cta-link-wrapper {
  text-decoration: none;
  display: inline-block;
}
@media (max-width: 600px) {
  .opportunities__cta .cta-text .cta-link-wrapper {
    display: none;
  }
}
.opportunities__cta .cta-text .cta-link-wrapper:hover .cta-subtext {
  color: #ffffff;
}
.opportunities__cta .cta-text .cta-link-wrapper:hover .cta-subtext svg {
  transform: translate(3px, -3px);
}
.opportunities__cta .cta-text .cta-subtext {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b3b3b3;
  font-size: 1.2rem;
  font-weight: 400;
  margin-top: 0.5rem;
  transition: color 0.3s ease;
}
@media (max-width: 768px) {
  .opportunities__cta .cta-text .cta-subtext {
    font-size: 1rem;
  }
}
.opportunities__cta .cta-text .cta-subtext svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.3s ease;
}
.opportunities__cta .cta-icon {
  width: 18rem;
  height: 22rem;
  position: absolute;
  right: 4rem;
  top: 50%;
  transform: translateY(-50%) rotate(-5deg);
  z-index: 1;
}
@media (max-width: 768px) {
  .opportunities__cta .cta-icon {
    width: 14rem;
    height: 18rem;
    right: 2rem;
  }
}
@media (max-width: 600px) {
  .opportunities__cta .cta-icon {
    width: 8rem;
    height: 11rem;
    position: absolute;
    right: -0.5rem;
    top: 35%;
    transform: translateY(-50%) rotate(-5deg);
    margin-top: 0;
    z-index: 5;
  }
}
.opportunities__cta .cta-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  right: 25px;
  opacity: 0;
  animation: imageSwap 6s ease-out infinite;
}
.opportunities__cta .cta-icon img.image-1 {
  animation-delay: 0.5s;
}
.opportunities__cta .cta-icon img.image-2 {
  animation-delay: 3.5s;
}
.opportunities__cta .cta-icon-bg {
  width: 500px;
  height: 260px;
  background: url("/assets/images/opportunities/light-image-bg.png") no-repeat center/contain;
  opacity: 0.9;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 768px) {
  .opportunities__cta .cta-icon-bg {
    width: 400px;
    height: 200px;
  }
}
@media (max-width: 576px) {
  .opportunities__cta .cta-icon-bg {
    display: none;
  }
}

/* === ANIMATIONS === */
@keyframes imageSwap {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes cardBorderMove {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.skills-section {
  padding: 0.5rem 0 3rem;
  overflow: hidden;
  width: 100%;
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 768px) {
  .skills-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.skills-section {
  margin: 0 auto 0 auto !important;
}
@media (max-width: 480px) {
  .skills-section {
    padding: 0 !important;
  }
}
.skills-section .skills-container {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
}
@media (max-width: 480px) {
  .skills-section .skills-container {
    padding: 0 !important;
  }
}
.skills-section .skills-header {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  margin-bottom: 0;
}
@media (max-width: 480px) {
  .skills-section .skills-header {
    padding: 0 20px;
    width: 8rem;
  }
}
.skills-section .skills-header .label {
  display: block;
  font-size: 2.2rem;
  width: 10rem;
  margin-top: 5px;
  color: #F47923;
  font-weight: 700;
}
@media (max-width: 480px) {
  .skills-section .skills-header .label {
    width: 9rem;
  }
}
.skills-section .skills-marquee {
  flex: 1;
  position: relative;
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.skills-section .skills-marquee .track {
  display: flex;
  gap: 80px;
  animation: marquee 80s linear infinite;
  width: max-content;
}
.skills-section .skills-marquee .track .item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.8rem;
  color: #e8e6e5;
  font-weight: 500;
}
.skills-section .skills-marquee .track .item img {
  height: 64px;
  width: auto;
  opacity: 1;
}
.skills-section .skills-marquee .track .item img[alt=CSS],
.skills-section .skills-marquee .track .item img[alt=HTML] {
  height: 84px;
}
.skills-section .skills-marquee .track .item i {
  font-size: 58px;
  line-height: 1;
  opacity: 1;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media (max-width: 768px) {
  .skills-section .skills-container {
    flex-direction: row;
    align-items: center;
    gap: 5px;
  }
  .skills-section .skills-marquee {
    width: 100%;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .skills-section .skills-marquee .track {
    gap: 40px;
  }
  .skills-section .skills-marquee .track .item {
    font-size: 1.2rem;
  }
  .skills-section .skills-header .count {
    font-size: 2rem;
  }
  .skills-section .skills-header .label {
    font-size: 1.4rem;
  }
}
@media (max-width: 600px) {
  .skills-section .skills-marquee .track {
    gap: 28px;
  }
  .skills-section .skills-marquee .track .item {
    font-size: 0.9rem;
    gap: 8px;
  }
  .skills-section .skills-marquee .track .item img {
    height: 30px;
    width: auto;
  }
  .skills-section .skills-marquee .track .item img[alt=CSS],
  .skills-section .skills-marquee .track .item img[alt=HTML] {
    height: 38px;
  }
  .skills-section .skills-marquee .track .item i {
    font-size: 26px;
    line-height: 1;
  }
}
.tech-section {
  font-family: "Ubuntu", sans-serif;
  color: #fff;
}
@media (max-width: 1024px) {
  .tech-section {
    padding: 60px 0;
  }
}
@media (max-width: 768px) {
  .tech-section {
    padding: 50px 0;
  }
}
@media (max-width: 600px) {
  .tech-section {
    padding: 40px 0;
  }
}
@media (max-width: 480px) {
  .tech-section {
    padding: 30px 0;
  }
}
.tech-section .container {
  max-width: 1800px !important;
  margin: auto !important;
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 768px) {
  .tech-section .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.tech-section .cta_container {
  padding: 32px 0 64px 0;
  background-image: url("/assets/images/opportunities/cta-bg.png");
  background-size: cover;
}
@media (max-width: 480px) {
  .tech-section .cta_container {
    padding: 30px 0 30px 0;
  }
}
@media (max-width: 1024px) {
  .tech-section .alumni-brands {
    margin-bottom: 60px;
  }
}
@media (max-width: 768px) {
  .tech-section .alumni-brands {
    margin-bottom: 50px;
  }
}
@media (max-width: 600px) {
  .tech-section .alumni-brands {
    margin-bottom: 40px;
  }
}
@media (max-width: 480px) {
  .tech-section .alumni-brands {
    margin-bottom: 35px;
  }
}
.tech-section .alumni-brands .alumni-title {
  font-size: 23px;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 50px;
  letter-spacing: 0.5px;
  display: inline-block;
  background: linear-gradient(90deg, #5f5f5f 0%, #ffffff 50%, #5f5f5f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 1024px) {
  .tech-section .alumni-brands .alumni-title {
    font-size: 28px;
    margin-bottom: 40px;
  }
}
@media (max-width: 768px) {
  .tech-section .alumni-brands .alumni-title {
    font-size: 24px;
    margin-bottom: 35px;
  }
}
@media (max-width: 600px) {
  .tech-section .alumni-brands .alumni-title {
    font-size: 22px;
    margin-bottom: 30px;
  }
}
@media (max-width: 480px) {
  .tech-section .alumni-brands .alumni-title {
    font-size: 20px;
    margin-bottom: 25px;
  }
}
.tech-section .alumni-brands .alumni-title .brands-text {
  background: none;
  -webkit-text-fill-color: transparent;
  font-weight: 400;
}
.tech-section .alumni-brands .brands-logos {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.tech-section .alumni-brands .brands-logos .track {
  display: flex;
  gap: 100px;
  animation: brands-marquee 25s linear infinite;
  width: max-content;
  align-items: center;
}
@media (max-width: 1024px) {
  .tech-section .alumni-brands .brands-logos .track {
    gap: 80px;
    animation: brands-marquee 20s linear infinite;
  }
}
@media (max-width: 768px) {
  .tech-section .alumni-brands .brands-logos .track {
    gap: 60px;
    animation: brands-marquee 18s linear infinite;
  }
}
@media (max-width: 600px) {
  .tech-section .alumni-brands .brands-logos .track {
    gap: 50px;
    animation: brands-marquee 15s linear infinite;
  }
}
@media (max-width: 480px) {
  .tech-section .alumni-brands .brands-logos .track {
    gap: 40px;
    animation: brands-marquee 15s linear infinite;
  }
}
.tech-section .alumni-brands .brands-logos .track .brand-logo {
  max-width: 180px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .tech-section .alumni-brands .brands-logos .track .brand-logo {
    max-width: 150px;
  }
}
@media (max-width: 768px) {
  .tech-section .alumni-brands .brands-logos .track .brand-logo {
    max-width: 130px;
  }
}
@media (max-width: 600px) {
  .tech-section .alumni-brands .brands-logos .track .brand-logo {
    max-width: 85px;
  }
}
@media (max-width: 480px) {
  .tech-section .alumni-brands .brands-logos .track .brand-logo {
    max-width: 70px;
  }
}
.tech-section .alumni-brands .brands-logos .track .brand-logo:hover {
  opacity: 1;
  transform: scale(1.05);
  animation-play-state: paused;
}
.tech-section .alumni-brands .brands-logos:hover .track {
  animation-play-state: paused;
}
.tech-section .tech-talks {
  margin-top: 64px;
  margin-bottom: 50px;
}
@media (max-width: 1024px) {
  .tech-section .tech-talks {
    margin-top: 48px;
  }
}
@media (max-width: 768px) {
  .tech-section .tech-talks {
    margin-top: 40px;
  }
}
@media (max-width: 480px) {
  .tech-section .tech-talks {
    margin-top: 28px;
  }
}
.tech-section .tech-talks .section-label {
  font-size: 16px;
  color: #bbbbbb;
  display: inline-block;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}
@media (max-width: 768px) {
  .tech-section .tech-talks .section-label {
    font-size: 14px;
    margin-bottom: 15px;
  }
}
@media (max-width: 480px) {
  .tech-section .tech-talks .section-label {
    font-size: 13px;
  }
}
.tech-section .tech-talks .section-title {
  font-size: 46px;
  font-weight: 400;
  margin-bottom: 20px;
  margin-left: 0;
  line-height: 1.3;
}
@media (max-width: 1024px) {
  .tech-section .tech-talks .section-title {
    font-size: 38px;
  }
}
@media (max-width: 768px) {
  .tech-section .tech-talks .section-title {
    font-size: 30px;
    margin-bottom: 15px;
  }
}
@media (max-width: 600px) {
  .tech-section .tech-talks .section-title {
    font-size: 18px;
    text-align: center;
    margin-left: 0;
  }
}
@media (max-width: 480px) {
  .tech-section .tech-talks .section-title {
    font-size: 18px;
    text-align: center;
    margin-left: 0;
  }
}
.tech-section .tech-talks .section-title .highlight {
  color: #F47923;
  font-weight: 400;
}
.tech-section .tech-talks .section-subtitle {
  font-size: 1.2rem;
  color: #c9c9c9;
  margin-bottom: 50px;
  margin-left: 0;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .tech-section .tech-talks .section-subtitle {
    font-size: 14px;
    margin-bottom: 40px;
  }
}
@media (max-width: 600px) {
  .tech-section .tech-talks .section-subtitle {
    font-size: 13px;
    margin-left: 17px;
  }
}
@media (max-width: 480px) {
  .tech-section .tech-talks .section-subtitle {
    font-size: 12px;
  }
}
.tech-section .tech-talks .gallery-grid {
  display: grid;
  grid-template-columns: 820px 490px;
  gap: 1rem;
  margin-bottom: 50px;
  justify-content: center;
}
/* Second set of cards, added by gallery-autoscroll.js to make the mobile
   carousel loop seamlessly. Only the carousel wants them — in the desktop grid
   they would just be four duplicate cards. */
.tech-section .tech-talks .gallery-grid .gallery-grid__clone {
  display: none;
}
@media (max-width: 1024px) {
  .tech-section .tech-talks .gallery-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 0.75rem;
    justify-content: stretch;
  }
}
@media (max-width: 768px) {
  .tech-section .tech-talks .gallery-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}
@media (max-width: 600px) {
  .tech-section .tech-talks .gallery-grid {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0 0 50px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tech-section .tech-talks .gallery-grid::-webkit-scrollbar {
    display: none;
  }
  /* The duplicate set only exists here, to give the loop somewhere to run on
     past the last real card. */
  .tech-section .tech-talks .gallery-grid .gallery-grid__clone {
    display: block;
  }
}
@media (max-width: 480px) {
  .tech-section .tech-talks .gallery-grid {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0;
    margin: 0 0 50px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tech-section .tech-talks .gallery-grid::-webkit-scrollbar {
    display: none;
  }
}
.tech-section .tech-talks .gallery-grid .img-card {
  border-radius: 38px;
  overflow: hidden;
  height: 340px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
@media (max-width: 1024px) {
  .tech-section .tech-talks .gallery-grid .img-card {
    height: 280px;
    border-radius: 40px;
  }
}
@media (max-width: 768px) {
  .tech-section .tech-talks .gallery-grid .img-card {
    height: 240px;
    border-radius: 35px;
  }
}
@media (max-width: 600px) {
  .tech-section .tech-talks .gallery-grid .img-card {
    height: 240px;
    border-radius: 15px;
    width: 100%;
    min-width: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}
@media (max-width: 480px) {
  .tech-section .tech-talks .gallery-grid .img-card {
    height: 200px;
    border-radius: 14px;
    width: 100%;
    min-width: 100%;
    flex-shrink: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}
.tech-section .tech-talks .gallery-grid .img-card:hover {
  transform: translateY(-5px);
  /* Vintage inner shadow */
}
.tech-section .tech-talks .gallery-grid .img-card:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  pointer-events: none;
  background: linear-gradient(to top, rgb(2, 1, 0), rgba(0, 0, 0, 0.35) 70%, rgba(1, 0, 0, 0.9) 100%);
  filter: blur(24px);
  transform: translateY(16px);
  z-index: 0;
}
@media (max-width: 480px) {
  .tech-section .tech-talks .gallery-grid .img-card:hover::after {
    height: 70%;
  }
}
.tech-section .tech-talks .gallery-grid .img-card:hover .img-overlay {
  opacity: 1;
  transform: translateY(0);
}
.tech-section .tech-talks .gallery-grid .img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.tech-section .tech-talks .gallery-grid .img-card {
  /* Text-only overlay (NO background) */
}
.tech-section .tech-talks .gallery-grid .img-card .img-overlay {
  color: #000;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px 30px;
  /* No background */
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.4s ease;
  z-index: 2;
}
.tech-section .tech-talks .gallery-grid .img-card .img-overlay .overlay-title {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.3;
}
@media (max-width: 480px) {
  .tech-section .tech-talks .gallery-grid .img-card .img-overlay .overlay-title {
    font-size: 12px;
    color: #e8e6e5;
  }
}
.tech-section .tech-talks .gallery-grid .img-card .img-overlay .overlay-title span {
  font-weight: 400;
  color: #c9c9c9;
}
@media (max-width: 480px) {
  .tech-section .tech-talks .gallery-grid .img-card .img-overlay .overlay-title span {
    color: #e8e6e5;
  }
}
.tech-section .tech-talks .gallery-grid .img-card .img-overlay .overlay-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #bbbbbb;
  margin: 0;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .tech-section .tech-talks .gallery-grid .img-card .img-overlay .overlay-subtitle {
    font-size: 9px;
  }
}
.tech-section .tech-talks .cta-container {
  text-align: center;
}
.tech-section .tech-talks .cta-container .cta-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 1rem;
  border: 2px solid #F47923;
  color: #F47923;
  font-weight: 500;
  font-size: 16px;
  transition: all 0.3s ease;
  text-decoration: none;
  letter-spacing: 0.3px;
}
@media (max-width: 768px) {
  .tech-section .tech-talks .cta-container .cta-btn {
    padding: 12px 28px;
    font-size: 15px;
  }
}
@media (max-width: 480px) {
  .tech-section .tech-talks .cta-container .cta-btn {
    padding: 10px 24px;
    font-size: 14px;
  }
}
.tech-section .tech-talks .cta-container .cta-btn:hover {
  background: #F47923;
  color: #000;
  transform: translateY(-2px);
}

@keyframes brands-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media (min-width: 1024px) {
  .hero,
  .skills-section,
  .about-section .container,
  .opportunities .container,
  .opportunities__cards-wrapper,
  .learning-section .container,
  .tech-section .container {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
.dashboard__hero {
  margin: 1rem 0 2.5rem 0;
  padding: 2rem 3rem;
  display: flex;
  align-items: center;
  background-color: #181818;
  background-image: url(/assets/images/course/bg-frame.png);
  background-position: right center;
  background-size: auto 100%;
}
@media (max-width: 768px) {
  .dashboard__hero {
    margin: 0 0 1.5rem 0;
    padding: 1.5rem 1rem;
  }
}
.dashboard__hero-content {
  position: relative;
  z-index: 1;
  flex: 1;
  margin: 0 0.5rem;
}
.dashboard__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 0.4rem 1rem;
  border-radius: 30px;
  font-size: 0.75rem;
  color: #cfcfcf;
  opacity: 0.7;
  margin-bottom: 1rem;
}
.dashboard__badge i {
  color: #ffe089;
  font-size: 0.85rem;
}
.dashboard__title {
  font-size: 45px;
  font-weight: 400;
  color: #e8e6e5;
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
  max-width: 30rem;
}
.dashboard__title .highlight {
  color: #F47923;
}
@media (max-width: 1024px) {
  .dashboard__title {
    font-size: 2rem;
  }
}
@media (max-width: 768px) {
  .dashboard__title {
    font-size: 1.75rem;
  }
}
@media (max-width: 480px) {
  .dashboard__title {
    font-size: 1.5rem;
    width: 16rem;
  }
}
.dashboard__subtitle {
  font-size: 19px;
  color: #cfcfcf;
  margin: 0 0 1.5rem 0;
  max-width: 650px;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .dashboard__subtitle {
    font-size: 10px;
  }
}

.dashboard {
  max-width: 1800px;
  margin: 20px auto;
  padding-left: 48px;
  padding-right: 48px;
}
@media (min-width: 1024px) {
  .dashboard {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
@media (max-width: 768px) {
  .dashboard {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* Glassmorphic Modern Search Bar System */
.dashboard__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 480px;
  background: rgba(23, 23, 27, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 6px;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dashboard__search:focus-within,
.dashboard__search:hover {
  border-color: rgba(244, 121, 35, 0.5);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(244, 121, 35, 0.2);
}
@media (max-width: 768px) {
  .dashboard__search {
    max-width: 100%;
  }
}
.dashboard__search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: transparent;
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
  flex: 1;
}
.dashboard__search-input-wrapper i {
  color: #f47923;
  font-size: 1.1rem;
  filter: drop-shadow(0 0 8px rgba(244, 121, 35, 0.5));
}
.dashboard__search-input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.95rem;
  width: 100%;
  font-family: "Ubuntu", sans-serif;
}
.dashboard__search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.dashboard__search-btn {
  background: linear-gradient(135deg, #f47923, #d96210);
  color: #ffffff;
  border: none;
  padding: 0.65rem 1.4rem;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  font-family: "Ubuntu", sans-serif;
  box-shadow: 0 6px 20px rgba(244, 121, 35, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.dashboard__search-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 10px 25px rgba(244, 121, 35, 0.5);
}
.dashboard__filters-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6rem;
  margin: 2rem 0;
}
@media (max-width: 768px) {
  .dashboard__filters-section {
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.5rem 0;
  }
}
.dashboard__filters-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 635px;
  min-width: 635px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .dashboard__filters-left {
    width: 100%;
    min-width: 0;
    order: 2;
  }
}
.dashboard__filter-track {
  flex: 1;
  overflow: hidden;
  position: relative;
  scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.dashboard__filter-list {
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}
.dashboard__filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: 15px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
  background: transparent;
  color: #e8e6e5;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-family: "Ubuntu", sans-serif;
}
.dashboard__filter-btn--active {
  background: linear-gradient(135deg, #f5f0e8 0%, #e8dfc8 100%);
  color: #F47923;
  border-color: transparent;
  font-weight: 600;
}
.dashboard__filter-btn:hover:not(.dashboard__filter-btn--active) {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.07);
}
@media (max-width: 480px) {
  .dashboard__filter-btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
  }
}
.dashboard__filter-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.dashboard__filter-arrow img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.dashboard__filter-arrow:hover {
  opacity: 0.7;
}
.dashboard__filters-right {
  display: flex;
  align-items: center;
  width: 46%;
  min-width: 500px;
  flex-shrink: 0;
  background: rgba(23, 23, 27, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 6px;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dashboard__filters-right:focus-within,
.dashboard__filters-right:hover {
  border-color: rgba(244, 121, 35, 0.5);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(244, 121, 35, 0.2);
}
@media (max-width: 768px) {
  .dashboard__filters-right {
    width: 100%;
    min-width: 0;
    order: 1;
  }
}
.dashboard__filter-search-wrapper {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  background: transparent;
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
}
.dashboard__filter-search-icon {
  color: rgba(255, 255, 255, 0.45);
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dashboard__filters-right:focus-within .dashboard__filter-search-icon {
  color: #F47923;
}
.dashboard__filter-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.95rem;
  font-family: "Ubuntu", sans-serif;
}
.dashboard__filter-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.dashboard__filter-search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.45);
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.dashboard__filter-search-clear:hover {
  color: #F47923;
}
.dashboard__filter-search-clear[hidden] {
  display: none;
}

.dashboard__course-card {
  background-color: #141414;
  border: 1px solid rgba(244, 121, 35, 0.5);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  width: 100%;
}
.dashboard__course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(244, 121, 35, 0.15);
}
@media (max-width: 768px) {
  .dashboard__course-card {
    width: 100%;
  }
}
.dashboard__course-image {
  width: 100%;
  padding: 0.8rem;
  background-color: #141414;
}
.dashboard__course-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0.6rem;
  transition: transform 0.3s ease;
}
.dashboard__course-card:hover .dashboard__course-image img {
  transform: scale(1.02);
}
.dashboard__course-info {
  padding: 0.75rem 1rem 1rem;
}
.dashboard__course-top-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #cfcfcf;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.2rem;
}
.dashboard__course-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e8e6e5;
  margin: 0 0 0.4rem 0;
  line-height: 1.3;
}
.dashboard__course-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: #cfcfcf;
}
.dashboard__course-label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("/assets/images/course/cr-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.dashboard__section {
  margin-bottom: 2.5rem;
}
.dashboard__section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.dashboard__section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #e8e6e5;
  margin: 0;
  white-space: nowrap;
}
.dashboard__section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
}
.dashboard__courses-grid {
  display: grid;
  gap: 1.5rem;
  margin: 0 auto;
  width: 100%;
  max-width: none;
  justify-content: center;
  justify-items: stretch;
  position: relative;
}
.dashboard__courses-grid > a.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.dashboard__courses-grid > a.reveal.is-revealed {
  opacity: 1;
  transform: none;
}
.dashboard__courses-grid--refreshing {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .dashboard__courses-grid > a.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.dashboard__courses-grid--three-col {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .dashboard__courses-grid--three-col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .dashboard__courses-grid--three-col {
    grid-template-columns: 1fr;
  }
}
.dashboard__courses-grid--small {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
@media (max-width: 768px) {
  .dashboard__courses-grid--small {
    grid-template-columns: 1fr;
  }
}
.dashboard__courses-grid--large {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1200px) {
  .dashboard__courses-grid--large {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  .dashboard__courses-grid--large {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .dashboard__courses-grid--large {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .dashboard__courses-grid--large {
    grid-template-columns: 1fr;
  }
}
.dashboard__view-more {
  display: none;
  justify-content: center;
  margin-top: 2rem;
}
@media (max-width: 768px) {
  .dashboard__view-more {
    display: flex;
  }
}
@media (max-width: 480px) {
  .dashboard__view-more {
    display: flex;
  }
}
.dashboard__view-more-btn {
  background-color: transparent;
  color: #e8e6e5;
  border: 2px solid #F47923;
  padding: 6px 15px;
  border-radius: 15px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: "Ubuntu", sans-serif;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.dashboard__view-more-btn:hover {
  background-color: #F47923;
  border-color: #F47923;
}
.dashboard__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 3rem;
  padding: 1rem;
}
.dashboard__pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease ease-in-out;
  font-family: "Ubuntu", sans-serif;
}
.dashboard__pagination-btn:hover:not(.disabled):not(.dashboard__pagination-btn--active) {
  background: rgba(255, 255, 255, 0.1);
  color: #e8e6e5;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.dashboard__pagination-btn--active {
  background: linear-gradient(135deg, #f5f0e8 0%, #e8dfc8 100%);
  color: #F47923;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.dashboard__pagination-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.02);
}
.dashboard__pagination-btn i {
  font-size: 0.8rem;
}
.dashboard__no-results {
  grid-column: 1/-1;
  padding: 3rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 1rem;
  color: #cfcfcf;
  font-size: 1.1rem;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  margin: 1rem 0;
}
.dashboard__loader {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 4rem;
  grid-column: 1/-1;
  width: 100%;
  margin: 2rem 0;
}
/* Manoz load-9 animation for course filter loading */
.dashboard__spinner.load-9 {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  position: relative;
}
.dashboard__spinner.load-9 .spinner {
  position: relative;
  width: 45px;
  height: 45px;
  margin: 0 auto;
  animation: loadingI 2s linear infinite;
}
.dashboard__spinner.load-9 .bubble-1,
.dashboard__spinner.load-9 .bubble-2 {
  position: absolute;
  top: 0;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: #f47923;
  box-shadow: 0 0 16px rgba(244, 121, 35, 0.75);
  animation: bounce 2s ease-in-out infinite;
}
.dashboard__spinner.load-9 .bubble-2 {
  top: auto;
  bottom: 0;
  animation-delay: -1.0s;
}

@keyframes loadingI {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: scale(0.0);
  }
  50% {
    transform: scale(1.0);
  }
}
.course-popup {
  position: absolute;
  top: calc(100% + 14px);
  left: -125px;
  transform-origin: 175px 0;
  width: 880px;
  max-width: calc(100vw - 32px);
  background: rgba(13, 13, 18, 0.72) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 40px rgba(244, 121, 35, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  display: none;
  z-index: 10000;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.course-popup.open {
  display: block !important;
  animation: courseGrowFromButton 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.course-popup__arrow {
  position: absolute;
  top: -12px;
  left: 175px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #0d0d12;
  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.5));
}
.course-popup__container {
  display: flex;
  min-height: 520px;
  border-radius: 24px;
  overflow: hidden;
}
.course-popup__sidebar {
  width: 240px;
  background: rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 0;
  flex-shrink: 0;
}
.course-popup__categories {
  display: block !important;
  list-style: none !important;
  padding: 0 14px !important;
  margin: 0 !important;
}
.course-popup__category {
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: 0.95rem;
  width: 100%;
  border-radius: 12px;
  margin-bottom: 4px;
}
.course-popup__category i {
  font-size: 18px;
  opacity: 0.6;
  transition: transform 0.25s ease;
}
.course-popup__category:hover {
  background: rgba(244, 121, 35, 0.14);
  color: #f47923;
}
.course-popup__category:hover i {
  transform: translateX(3px);
  opacity: 1;
}
.course-popup__category.active {
  background: linear-gradient(135deg, #f47923, #d96210) !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(244, 121, 35, 0.4);
}
.course-popup__category.active i {
  opacity: 1;
  transform: translateX(3px);
}
.course-popup__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 15px 20px;
}
.course-popup__content {
  flex: 1;
  padding: 32px 36px;
  background: transparent;
}
.course-popup__content-header {
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}
.course-popup__content-title {
  font-size: 1.4rem;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.course-popup__courses-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 12px;
}
.course-popup__courses-grid::-webkit-scrollbar {
  width: 5px;
}
.course-popup__courses-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}
.course-popup__courses-grid::-webkit-scrollbar-thumb {
  background: rgba(244, 121, 35, 0.4);
  border-radius: 10px;
}
.course-popup__courses-grid::-webkit-scrollbar-thumb:hover {
  background: #f47923;
}
.course-popup__item {
  display: flex;
  gap: 20px;
  background: rgba(255, 255, 255, 0.04);
  padding: 18px;
  border-radius: 15px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.course-popup__item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(244, 121, 35, 0.15);
  border: 1px solid rgba(244, 121, 35, 0.4);
  cursor: pointer;
}
.course-popup__item-image {
  width: 140px;
  height: 95px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.course-popup__item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.course-popup__item-title {
  font-size: 1.15rem;
  color: #ffffff;
  margin: 0 0 6px 0;
  font-weight: 700;
}
.course-popup__item-desc {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 10px 0;
  line-height: 1.4;
}
.course-popup__item-meta {
  display: flex;
  gap: 16px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
.course-popup__item-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.course-popup__item-meta span i {
  font-size: 0.95rem;
  color: #f47923;
}

@keyframes courseGrowFromButton {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(-12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
/* Tablet & Mobile Responsive for Master Popup */
@media (max-width: 900px) {
  .course-popup {
    left: 50% !important;
    transform: translateX(-50%) !important;
    transform-origin: center top !important;
    width: 92vw !important;
    max-width: 600px !important;
  }
  .course-popup__arrow {
    left: 15% !important;
  }
}
@media (max-width: 768px) {
  .course-popup {
    position: static;
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    transform: none !important;
    margin: 0 !important;
  }
  .course-popup.open {
    display: block;
    animation: none;
  }
  .course-popup__arrow {
    display: none;
  }
  .course-popup__container {
    display: none;
  }
  .course-popup__mobile-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.5rem 0 1.5rem 0;
  }
  .course-popup__mobile-category-group {
    margin-bottom: 2rem;
  }
  .course-popup__mobile-category-group:last-child {
    margin-bottom: 0;
  }
  .course-popup__mobile-category-group::after {
    content: "";
    display: block;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
  }
  .course-popup__mobile-category-group:last-child::after {
    display: none;
  }
  .course-popup__mobile-category-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0.8rem;
    padding-left: 0.5rem;
  }
  .course-popup__mobile-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  .course-popup__mobile-list li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-left: 0.8rem;
  }
  .course-popup__mobile-list li:last-child {
    border-bottom: none;
  }
  .course-popup__mobile-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.5rem;
    color: rgba(255, 255, 255, 0.5) !important;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
  }
  .course-popup__mobile-list li a span {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }
  .course-popup__mobile-list li a i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.3);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 10px;
  }
  .course-popup__mobile-list li a:hover {
    color: #F47923 !important;
  }
  .course-popup__mobile-list li a:hover i {
    color: #F47923;
    transform: translateX(3px);
  }
  .nav-btn.dropdown-toggle.open i.ri-arrow-right-s-line {
    transform: rotate(90deg);
  }
}
@keyframes sna-premium-sheen {
  0%, 55% {
    left: -60%;
  }
  100% {
    left: 140%;
  }
}
@keyframes sna-premium-glow {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 16px rgba(249, 115, 22, 0.35);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 28px rgba(249, 115, 22, 0.65);
  }
}
.course-popup__subscription {
  position: relative;
  overflow: hidden;
  margin: 10px 14px 4px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  border-radius: 12px;
  background: linear-gradient(135deg, #fb8c3e 0%, #f97316 55%, #ea6a0a 100%);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  transition: transform 0.25s ease;
  animation: sna-premium-glow 2.6s ease-in-out infinite;
}
.course-popup__subscription::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: sna-premium-sheen 2.6s ease-in-out infinite;
  pointer-events: none;
}
.course-popup__subscription span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.course-popup__subscription i {
  font-size: 18px;
}
.course-popup__subscription:hover {
  transform: translateX(2px) scale(1.02);
}

.course-popup__mobile-subscription {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fb8c3e 0%, #f97316 55%, #ea6a0a 100%);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  animation: sna-premium-glow 2.6s ease-in-out infinite;
}
.course-popup__mobile-subscription::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: sna-premium-sheen 2.6s ease-in-out infinite;
  pointer-events: none;
}
.course-popup__mobile-subscription span {
  flex: 1;
}
.course-popup__mobile-subscription i {
  font-size: 18px;
}

.course-idv {
  background-color: #0A0A0A;
  color: #e8e6e5;
  padding-bottom: 5rem;
  display: flex;
  flex-direction: column;
}
.course-idv .container,
.course-idv .container--wide {
  max-width: 1700px;
  width: 95%;
}
.course-idv__section-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: left;
  margin-bottom: 3rem;
  line-height: 1.2;
  margin-left: 0;
}
.course-idv__section-title .highlight {
  color: #F47923 !important;
}
@media (max-width: 480px) {
  .course-idv__section-title {
    margin-left: 0;
    font-size: 25px !important;
  }
}
@media (max-width: 1024px) {
  .course-idv__section-title {
    font-size: 2rem;
    text-align: center;
  }
}
.course-idv__section-subtitle {
  text-align: left;
  font-size: 2.25rem;
  color: #e8e6e5;
  margin-bottom: 0.5rem;
  margin-left: 0;
}
@media (max-width: 1024px) {
  .course-idv__section-subtitle {
    text-align: center;
    margin-left: 0;
  }
}
@media (max-width: 480px) {
  .course-idv__section-subtitle {
    margin-left: 0;
    font-size: 25px !important;
  }
}
.course-idv__master,
.course-idv .skills-section {
  padding: 1rem 0;
  text-align: left;
  order: 4;
}
@media (max-width: 1024px) {
  .course-idv__master,
  .course-idv .skills-section {
    text-align: center;
  }
}
@media (max-width: 1024px) {
  .course-idv .skills-section .skills-container {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    text-align: left;
  }
}
@media (max-width: 1024px) {
  .course-idv .skills-section .skills-header {
    width: auto;
  }
}
@media (max-width: 1024px) {
  .course-idv .skills-section .skills-marquee {
    width: 100%;
    flex: 1 1 auto;
  }
}
@media (max-width: 1024px) {
  .course-idv .skills-section .skills-marquee .track {
    justify-content: flex-start;
  }
}
.course-idv__master-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 3rem;
  margin-top: 3rem;
}
@media (max-width: 600px) {
  .course-idv__master-icons {
    gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }
  .course-idv__master-icons .master-icon:last-child {
    grid-column: span 2;
  }
}

.master-icon {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #ffffff;
  font-weight: 500;
}
.master-icon img {
  height: 30px;
  width: auto;
}
.master-icon i {
  font-size: 2rem;
}
.master-icon span {
  font-size: 1.125rem;
}

.course-idv__hero {
  padding: 3rem 0;
  order: 1;
}
@media (max-width: 1024px) {
  .course-idv__hero {
    padding: 2rem 0;
  }
}
@media (max-width: 480px) {
  .course-idv__hero {
    padding: 1rem 0;
  }
}
.course-idv__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 4rem;
  justify-content: stretch;
  align-items: stretch;
}
@media (max-width: 1400px) {
  .course-idv__hero-grid {
    gap: 3rem;
  }
}
@media (max-width: 1200px) {
  .course-idv__hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 696px;
    margin: 0 auto;
    width: 95%;
  }
}
@media (max-width: 768px) {
  .course-idv__hero-grid {
    width: 100%;
    gap: 1.5rem;
  }
}
.course-idv__hero-banner-card {
  background: rgba(23, 23, 27, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 520px;
  height: 100%;
  overflow: hidden;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.course-idv__hero-banner-card:hover {
  border-color: rgba(244, 121, 35, 0.35);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(244, 121, 35, 0.15);
}
@media (max-width: 1200px) {
  .course-idv__hero-banner-card {
    min-height: auto;
    aspect-ratio: 696/461;
  }
}
@media (max-width: 768px) {
  .course-idv__hero-banner-card {
    max-width: 100%;
    aspect-ratio: auto;
    padding: 1rem;
  }
}
.course-idv__hero-enroll {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.course-idv__hero-banner {
  overflow: hidden;
  width: 100%;
  line-height: 0;
  border-radius: 14px;
}
.course-idv__hero-banner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.course-idv__hero-banner-card:hover .course-idv__hero-banner img {
  transform: scale(1.03);
}

.enroll-card {
  background: rgba(23, 23, 27, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  min-height: 520px;
  height: 100%;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.enroll-card:hover {
  border-color: rgba(244, 121, 35, 0.4);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(244, 121, 35, 0.18);
}
@media (max-width: 1200px) {
  .enroll-card {
    min-height: auto;
  }
}
@media (max-width: 768px) {
  .enroll-card {
    max-width: 100%;
    padding: 1.5rem;
  }
}
.enroll-card__badge {
  border: 1.5px solid #f47923;
  background: rgba(244, 121, 35, 0.15);
  color: #f47923;
  display: inline-block;
  padding: 0.25rem 1.1rem;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  width: fit-content;
  box-shadow: 0 0 15px rgba(244, 121, 35, 0.25);
}
.enroll-card__title {
  font-size: 2.1rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (max-width: 480px) {
  .enroll-card__title {
    font-size: 1.75rem;
  }
}
.enroll-card__meta {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.enroll-card__meta .meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}
.enroll-card__meta .meta-item i {
  color: #f47923;
  font-size: 1.05rem;
  filter: drop-shadow(0 0 6px rgba(244, 121, 35, 0.5));
}
.enroll-card__price {
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.enroll-card__price .price-label {
  color: #f47923;
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.enroll-card__price .price-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.enroll-card__price .price-old {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
  font-size: 1.25rem;
  font-weight: 500;
}
.enroll-card__price .price-new {
  font-size: 1.55rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(244, 121, 35, 0.3);
}
@media (max-width: 380px) {
  .enroll-card__price .price-new {
    font-size: 1.25rem;
  }
}
.enroll-card__overview {
  margin-bottom: 1.5rem;
}
.enroll-card__overview .overview-title {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
}
.enroll-card__overview .overview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.enroll-card__overview .overview-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.9);
}
.enroll-card__overview .overview-list li i {
  color: #f47923;
  font-size: 1.15rem;
  margin-top: 0.1rem;
  filter: drop-shadow(0 0 6px rgba(244, 121, 35, 0.5));
}
.enroll-card__btn {
  background: linear-gradient(135deg, #f47923, #d96210);
  color: #ffffff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.4rem 0.4rem 1.4rem;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 8px 25px rgba(244, 121, 35, 0.4);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: auto;
}
.enroll-card__btn:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 30px rgba(244, 121, 35, 0.55);
}

/* Held for approval — see "ENROLL CARD: HELD FOR APPROVAL" further down.
   These rules cannot live here: the premium button block near the end of this
   file re-styles `.enroll-card__btn` on hover at equal specificity, and source
   order is what settles a tie. Anything written here loses to it. */
.enroll-card__btn-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 42px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.enroll-card__btn-icon {
  background: white;
  color: #F47923;
  width: 42px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 1.1rem;
}

.course-idv__benefits {
  padding: 1rem 0;
  order: 3;
}
@media (max-width: 480px) {
  .course-idv__benefits {
    order: 2;
  }
}
.course-idv__benefits__section-title {
  font-size: 3rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 3rem;
  line-height: 1.2;
  margin-left: 0;
  max-width: 65rem;
  text-align: left;
}
.course-idv__benefits__section-title .highlight {
  color: #F47923 !important;
}
@media (max-width: 1024px) {
  .course-idv__benefits__section-title {
    font-size: 22px;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .course-idv__benefits__section-title {
    margin-left: 0;
  }
}
.course-idv__benefits-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 769px) {
  .course-idv__benefits-grid {
    background-color: #121212;
    border-radius: 1.5rem;
    padding: 1rem 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    gap: 0;
  }
}
@media (max-width: 768px) {
  .course-idv__benefits-grid {
    gap: 1rem;
  }
}

.benefits-col {
  display: flex;
  flex-direction: row;
}
@media (min-width: 769px) {
  .benefits-col {
    position: relative;
  }
  .benefits-col:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    height: 1px;
    background-color: rgba(244, 121, 35, 0.08);
  }
}

.benefit-card {
  flex: 1;
  background-color: #121212;
  padding: 3rem 2rem;
  border-radius: 1rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 769px) {
  .benefit-card {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 2rem 2rem;
  }
  .benefit-card:not(:last-child) {
    position: relative;
  }
  .benefit-card:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background-color: rgba(244, 121, 35, 0.08);
  }
}
@media (max-width: 480px) {
  .benefit-card {
    background-color: transparent;
    border: none;
    padding: 10px 0;
    width: 100%;
  }
}
.benefit-card__icon {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}
@media (max-width: 480px) {
  .benefit-card__icon {
    margin-bottom: 10px;
  }
}
.benefit-card__icon img {
  height: 50px;
  width: auto;
  display: block;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .benefit-card__icon img {
    height: 45px;
  }
}
.benefit-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
  width: 100%;
  text-align: center;
}
@media (max-width: 480px) {
  .benefit-card__title {
    font-size: 17.1px;
    margin-bottom: 10px;
  }
}
.benefit-card__desc {
  font-size: 0.9rem;
  color: #cfcfcf;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 480px) {
  .benefit-card__desc {
    font-size: 10.5px;
    color: #999;
    line-height: 1.6;
    max-width: 85%;
    margin: 0 auto;
  }
}

.course-idv__mentor {
  padding: 1rem 0;
  order: 5;
}
@media (max-width: 768px) {
  .course-idv__mentor {
    display: none;
  }
}
@media (max-width: 480px) {
  .course-idv__mentor h2 {
    margin-left: 0;
  }
}
.course-idv__mentor-card {
  background-color: #121212;
  border-radius: 1rem;
  padding: 3rem;
  max-width: 92rem;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  position: relative;
}
@media (max-width: 768px) {
  .course-idv__mentor-card {
    padding: 2rem 1.5rem;
    max-width: 21rem;
  }
}

.mentor-card__container {
  position: relative;
  width: 100%;
}

.mentor-slide {
  display: none;
  width: 100%;
  position: relative;
}
.mentor-slide.active {
  display: flex;
}

.mentor-card__content {
  display: flex;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 768px) {
  .mentor-card__content {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
}
.mentor-card__image {
  flex-shrink: 0;
  width: 280px;
  height: 320px;
  border-radius: 1rem;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.active .mentor-card__image {
  opacity: 1;
}
.mentor-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .mentor-card__image {
    width: 200px;
    height: 230px;
  }
}
@media (max-width: 480px) {
  .mentor-card__image {
    width: 218px;
    height: 209px;
  }
}
.mentor-card__info .mentor-badge,
.mentor-card__info .mentor-name,
.mentor-card__info .mentor-bio {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.active .mentor-card__info .mentor-badge,
.active .mentor-card__info .mentor-name,
.active .mentor-card__info .mentor-bio {
  opacity: 1;
  transform: translateY(0);
}
.mentor-slide:not(.active) .mentor-card__info .mentor-badge,
.mentor-slide:not(.active) .mentor-card__info .mentor-name,
.mentor-slide:not(.active) .mentor-card__info .mentor-bio {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}
.active .mentor-card__info .mentor-badge {
  transition-delay: 0.1s;
}
.active .mentor-card__info .mentor-name {
  transition-delay: 0.2s;
}
.active .mentor-card__info .mentor-bio {
  transition-delay: 0.3s;
}
.active .mentor-card__info .mentor-title {
  transition-delay: 0.4s;
}
.mentor-card__info .mentor-badge {
  display: inline-block;
  background-color: #6f492e;
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 1rem;
  border: 2px solid #F47923;
}
@media (max-width: 480px) {
  .mentor-card__info .mentor-badge {
    display: none;
  }
}
.mentor-card__info .mentor-name {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
}
.mentor-card__info .mentor-name .highlight {
  color: #F47923 !important;
}
@media (max-width: 480px) {
  .mentor-card__info .mentor-name {
    font-size: 17px;
    font-weight: 400;
  }
  .mentor-card__info .mentor-name .highlight {
    display: block;
  }
}
.mentor-card__info .mentor-bio {
  font-size: 1rem;
  color: #cfcfcf;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
@media (max-width: 480px) {
  .mentor-card__info .mentor-bio {
    font-size: 9.6px;
  }
}
.mentor-card__info .mentor-title {
  color: #F47923;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 13px;
  justify-content: flex-start;
  position: relative;
  width: fit-content;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 768px) {
  .mentor-card__info .mentor-title {
    justify-content: center;
    margin: 0 auto;
  }
}
@media (max-width: 480px) {
  .mentor-card__info .mentor-title {
    font-size: 11px;
  }
}
.active .mentor-card__info .mentor-title {
  opacity: 1;
  transform: translateY(0);
}

.course-idv__topics {
  padding: 1rem 0 0;
  order: 2;
}
@media (max-width: 480px) {
  .course-idv__topics {
    order: 3;
    padding: 0;
  }
}
.course-idv__topics__section-title {
  font-size: 3.5rem;
  font-weight: 700;
  text-align: left;
  margin-bottom: 3rem;
  line-height: 1.2;
}
.course-idv__topics__section-title .highlight {
  color: #F47923 !important;
}
@media (max-width: 1024px) {
  .course-idv__topics__section-title {
    font-size: 22px;
    text-align: center;
  }
}
.course-idv__topics-content {
  background-color: #151515;
  padding: 2rem 0;
  box-shadow: 0 0 0 100vmax #151515;
  clip-path: inset(0 -100vmax);
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (max-width: 480px) {
  .course-idv__topics-content {
    padding: 2rem 0;
  }
}
.course-idv__topics-content .topic-item {
  display: flex;
  gap: 1rem;
}
.course-idv__topics-content .topic-item::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #e8e6e5;
  border-radius: 50%;
  margin-top: 0.6rem;
  flex-shrink: 0;
}
.course-idv__topics-content .topic-item p {
  color: #cfcfcf;
  line-height: 1.8;
  font-size: 1.05rem;
  margin: 0;
}
@media (max-width: 480px) {
  .course-idv__topics-content .topic-item p {
    font-size: 13px;
    line-height: 1.3;
  }
}

.enrollment-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.enrollment-popup-overlay.active {
  display: flex;
}

.enrollment-popup {
  border-radius: 16px;
  width: 100%;
  max-width: 850px;
  padding: 25px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  scroll-behavior: auto !important;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  contain: paint;
  will-change: transform;
  --glow-width: 20%;
  --glow-x-top: 10%;
  --glow-x-bottom: 90%;
  --glow-top-offset: 0px;
  background-color: rgba(18, 18, 22, 0.82);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-image: linear-gradient(90deg, transparent 0%, rgba(243, 133, 51, 0.1) 15%, rgba(243, 133, 51, 0.5) 30%, #f38533 50%, rgba(243, 133, 51, 0.5) 70%, rgba(243, 133, 51, 0.1) 85%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(243, 133, 51, 0.1) 15%, rgba(243, 133, 51, 0.5) 30%, #f38533 50%, rgba(243, 133, 51, 0.5) 70%, rgba(243, 133, 51, 0.1) 85%, transparent 100%);
  background-size: var(--glow-width) 2px, var(--glow-width) 2px;
  background-position: var(--glow-x-top) var(--glow-top-offset), var(--glow-x-bottom) calc(100% - var(--glow-bottom-offset));
  background-repeat: no-repeat;
  background-attachment: scroll, scroll;
}
.enrollment-popup::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}
.enrollment-popup {
  /* Nested media queries for enrollment-popup */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .enrollment-popup {
    padding: 30px;
  }
}
@media (max-width: 600px) {
  .enrollment-popup {
    padding: 20px;
  }
}
.enrollment-popup__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 30px;
  /* Nested media queries for __header */
}
@media (max-width: 600px) {
  .enrollment-popup__header {
    margin-bottom: 20px;
  }
}
.enrollment-popup__logo {
  width: 40px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.enrollment-popup__logo img {
  width: 100%;
  height: 100%;
  object-fit: auto;
}
.enrollment-popup__title {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  /* Nested media queries for __title */
}
@media (max-width: 600px) {
  .enrollment-popup__title {
    font-size: 20px;
  }
}
.enrollment-popup__close {
  position: absolute;
  top: 30px;
  right: 30px;
  background: transparent;
  border: none;
  color: #f38533;
  font-size: 24px;
  cursor: pointer;
  transition: 0.2s ease;
  /* Nested media queries for __close */
}
@media (max-width: 600px) {
  .enrollment-popup__close {
    top: 20px;
    right: 20px;
    font-size: 20px;
  }
}
.enrollment-popup__close:hover {
  transform: scale(1.1);
}
.enrollment-popup__tabs {
  display: flex;
  border-bottom: 1px solid #333333;
  margin-bottom: 40px;
  gap: 30px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.enrollment-popup__tabs::-webkit-scrollbar {
  display: none;
}
.enrollment-popup__tabs {
  /* Nested media queries for __tabs */
}
@media (max-width: 600px) {
  .enrollment-popup__tabs {
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 5px;
  }
}
.enrollment-popup__tab {
  background: transparent;
  border: none;
  padding: 0 0 12px 0;
  color: #888888;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: 0.2s ease;
  /* Nested media queries for __tab */
}
@media (max-width: 600px) {
  .enrollment-popup__tab {
    font-size: 13px;
  }
}
.enrollment-popup__tab.active {
  color: #ffffff;
}
.enrollment-popup__tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #f38533;
  border-radius: 3px 3px 0 0;
}
.enrollment-popup__tab.completed {
  color: #888888;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.enrollment-popup__tab.completed i {
  color: #f38533;
  font-size: 16px;
}
.enrollment-popup__tab.completed.active {
  color: #ffffff;
}
.enrollment-popup__tab:hover:not(.active) {
  color: #cccccc;
}
.enrollment-popup__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
  /* Nested media queries for __form */
}
@media (max-width: 600px) {
  .enrollment-popup__form {
    margin-bottom: 20px;
  }
}
.enrollment-popup__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.enrollment-popup__row.full-width {
  grid-template-columns: 1fr;
}
@media (max-width: 600px) {
  .enrollment-popup__row.kyc-row-2 {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
@media (min-width: 600px) {
  .enrollment-popup__row.kyc-row-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .enrollment-popup__row.kyc-row-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
  }
}
.enrollment-popup__row {
  /* Nested media queries for __row */
}
@media (min-width: 600px) and (max-width: 1024px) {
  .enrollment-popup__row {
    gap: 20px;
  }
}
@media (max-width: 600px) {
  .enrollment-popup__row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.enrollment-popup__group--invalid input[type=text],
.enrollment-popup__group--invalid input[type=email],
.enrollment-popup__group--invalid input[type=tel],
.enrollment-popup__group--invalid select,
.enrollment-popup__group--invalid .enrollment-popup__select-trigger {
  border-color: #ff4d4f !important;
}
.enrollment-popup__group--invalid .enrollment-popup__custom-select--country .enrollment-popup__select-trigger {
  border-color: #333333 !important;
}
.enrollment-popup__field-error {
  color: #ff4d4f;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  margin: 2px 0 0;
}
.enrollment-popup__group:has(.enrollment-popup__mobile-input) .enrollment-popup__field-error {
  margin-left: 88px;
}
.enrollment-popup__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.enrollment-popup__group label {
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
}
.enrollment-popup__group label .required {
  color: #f38533;
  margin-left: 2px;
}
@media (max-width: 600px) {
  .enrollment-popup__row.kyc-row-4 .enrollment-popup__group label {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .enrollment-popup__row.kyc-row-4 .enrollment-popup__group input[type=text] {
    padding: 0 8px;
    font-size: 12px;
  }
}
.enrollment-popup__group input[type=text],
.enrollment-popup__group input[type=email],
.enrollment-popup__group input[type=tel],
.enrollment-popup__group select {
  background: #1e1e1e;
  border: 1px solid #333333;
  border-radius: 8px;
  height: 48px;
  padding: 0 16px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  transition: 0.2s ease;
  width: 100%;
  appearance: none;
  font-family: "Ubuntu", sans-serif;
}
.enrollment-popup__group input[type=text]::placeholder,
.enrollment-popup__group input[type=email]::placeholder,
.enrollment-popup__group input[type=tel]::placeholder,
.enrollment-popup__group select::placeholder {
  color: #888888;
}
.enrollment-popup__group input[type=text]:focus,
.enrollment-popup__group input[type=email]:focus,
.enrollment-popup__group input[type=tel]:focus,
.enrollment-popup__group select:focus {
  border-color: #f38533;
}
.enrollment-popup__group input[type=text]:-webkit-autofill, .enrollment-popup__group input[type=text]:-webkit-autofill:hover, .enrollment-popup__group input[type=text]:-webkit-autofill:active,
.enrollment-popup__group input[type=email]:-webkit-autofill,
.enrollment-popup__group input[type=email]:-webkit-autofill:hover,
.enrollment-popup__group input[type=email]:-webkit-autofill:active,
.enrollment-popup__group input[type=tel]:-webkit-autofill,
.enrollment-popup__group input[type=tel]:-webkit-autofill:hover,
.enrollment-popup__group input[type=tel]:-webkit-autofill:active,
.enrollment-popup__group select:-webkit-autofill,
.enrollment-popup__group select:-webkit-autofill:hover,
.enrollment-popup__group select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #1e1e1e inset !important;
  box-shadow: 0 0 0 1000px #1e1e1e inset !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid #333333 !important;
  border-top-color: #333333 !important;
  border-bottom-color: #333333 !important;
  border-radius: 8px !important;
  -webkit-background-clip: padding-box !important;
  background-clip: padding-box !important;
  caret-color: #ffffff;
  transition: background-color 5000s ease-in-out 0s !important;
}
.enrollment-popup__group input[type=text]:-webkit-autofill:focus,
.enrollment-popup__group input[type=email]:-webkit-autofill:focus,
.enrollment-popup__group input[type=tel]:-webkit-autofill:focus,
.enrollment-popup__group select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1e1e1e inset !important;
  box-shadow: 0 0 0 1000px #1e1e1e inset !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid #f38533 !important;
  border-radius: 8px !important;
  -webkit-background-clip: padding-box !important;
  background-clip: padding-box !important;
  caret-color: #ffffff;
  transition: background-color 5000s ease-in-out 0s !important;
}
.enrollment-popup__group .select-wrapper {
  position: relative;
  width: 100%;
}
.enrollment-popup__group .select-wrapper .select-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #888888;
  pointer-events: none;
}
.enrollment-popup__file-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 60px;
  padding: 0 24px;
  border: 2px dashed #f38533;
  border-radius: 8px;
  cursor: pointer;
  color: #f38533;
  font-size: 14px;
  transition: 0.2s ease;
}
.enrollment-popup__file-upload i {
  font-size: 20px;
}
.enrollment-popup__file-upload:hover {
  background-color: rgba(243, 133, 51, 0.05);
}
.enrollment-popup__file-upload--uploaded {
  justify-content: space-between;
  border-style: solid;
  background-color: rgba(243, 133, 51, 0.08);
}
.enrollment-popup__file-upload--uploaded .enrollment-popup__file-replace {
  display: inline-flex;
}
.enrollment-popup__file-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.enrollment-popup__file-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.enrollment-popup__file-replace {
  display: none;
  align-items: center;
  flex-shrink: 0;
  padding: 4px 14px;
  border: 1px solid #f38533;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.enrollment-popup__file-replace:hover {
  background-color: #f38533;
  color: #fff;
}
.enrollment-popup__custom-select {
  position: relative;
  width: 100%;
  cursor: pointer;
}
.enrollment-popup__custom-select.open .enrollment-popup__select-trigger {
  border-color: rgba(255, 255, 255, 0.2);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.enrollment-popup__custom-select.open .enrollment-popup__select-trigger i {
  transform: rotate(180deg);
}
.enrollment-popup__custom-select.open .enrollment-popup__options-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.enrollment-popup__custom-select--country {
  width: 80px;
  flex-shrink: 0;
}
.enrollment-popup__custom-select--country .enrollment-popup__select-trigger {
  border-radius: 8px;
  border-right: none;
  padding: 0 10px;
}
.enrollment-popup__custom-select--country .enrollment-popup__select-trigger span {
  font-size: 10px;
}
.enrollment-popup__custom-select--country.open .enrollment-popup__select-trigger {
  border-bottom-left-radius: 0;
}
.enrollment-popup__custom-select--country .enrollment-popup__options-list {
  width: 80px;
}
.enrollment-popup__custom-select--country .enrollment-popup__option {
  font-size: 10px;
}
.enrollment-popup__select-trigger {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.enrollment-popup__select-trigger span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}
.enrollment-popup__select-trigger i {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}
.enrollment-popup__select-trigger:hover {
  border-color: rgba(244, 121, 35, 0.4);
  background: rgba(255, 255, 255, 0.08);
}
.enrollment-popup__custom-select.open .enrollment-popup__select-trigger {
  border-color: #f47923;
  box-shadow: 0 0 15px rgba(244, 121, 35, 0.25);
}
.enrollment-popup__options-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(18, 18, 24, 0.82);
  border: 1px solid rgba(244, 121, 35, 0.3);
  border-radius: 12px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 220px;
  overflow-y: auto;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(244, 121, 35, 0.12);
}
.enrollment-popup__options-list::-webkit-scrollbar {
  width: 5px;
}
.enrollment-popup__options-list::-webkit-scrollbar-thumb {
  background: rgba(244, 121, 35, 0.3);
  border-radius: 10px;
}
.enrollment-popup__option {
  padding: 11px 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.15s ease;
  cursor: pointer;
}
.enrollment-popup__option:hover {
  background-color: rgba(244, 121, 35, 0.15);
  color: #ffffff;
  padding-left: 22px;
}
.enrollment-popup__option.selected {
  color: #f47923;
  background-color: rgba(244, 121, 35, 0.22);
  font-weight: 600;
}
.enrollment-popup__option:first-child {
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}
.enrollment-popup__option:last-child {
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
}
.enrollment-popup__mobile-input {
  display: flex;
  gap: 8px;
  position: relative;
}
.enrollment-popup__mobile-input input {
  flex: 1;
  border-radius: 0 8px 8px 0;
}
.enrollment-popup__dob-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  /* Nested media queries for __dob-inputs */
}
@media (max-width: 600px) {
  .enrollment-popup__dob-inputs {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
}
.enrollment-popup__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid #333333;
  padding-top: 30px;
  /* Nested media queries for __footer */
}
@media (max-width: 768px) {
  .enrollment-popup__footer {
    flex-direction: column-reverse;
    align-items: center;
    gap: 20px;
  }
}
.enrollment-popup__support {
  color: #888888;
  font-size: 13px;
  max-width: 350px;
  /* Nested media queries for __support */
}
@media (max-width: 768px) {
  .enrollment-popup__support {
    text-align: center;
    max-width: 100%;
  }
}
.enrollment-popup__support p {
  margin: 0;
  line-height: 1.5;
}
.enrollment-popup__support a {
  color: #f38533;
  text-decoration: underline;
  font-weight: 500;
}
.enrollment-popup__support a:hover {
  color: rgb(90%, 41.4705882353%, 5.2941176471%);
}
.enrollment-popup__next-btn {
  background: #f38533;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  height: 35px;
  padding: 0 40px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: 0.2s ease;
  /* Nested media queries for __next-btn */
}
@media (max-width: 768px) {
  .enrollment-popup__next-btn {
    width: 100%;
  }
}
.enrollment-popup__next-btn:hover:not(:disabled) {
  background: rgb(90%, 41.4705882353%, 5.2941176471%);
  transform: translateY(-2px);
}
.enrollment-popup__next-btn:disabled {
  background: #444;
  color: #888;
  cursor: not-allowed;
  transform: none;
  opacity: 0.6;
}
.enrollment-popup__payment-group {
  display: grid;
  gap: 1rem;
}
.enrollment-popup__payment-card {
  background: #1e1e1e;
  border: 1px solid #F47923;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: 0.2s ease;
}
.enrollment-popup__payment-card.active {
  background: rgba(244, 121, 35, 0.05);
}
.enrollment-popup__payment-card .radio-dot {
  width: 18px;
  height: 18px;
  border: 2px solid #F47923;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.enrollment-popup__payment-card .radio-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  background: #F47923;
  border-radius: 50%;
}
.enrollment-popup__payment-card .enrollment-popup__payment-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}
.enrollment-popup__payment-card .enrollment-popup__payment-info .payment-name {
  color: #F47923;
  font-size: 16px;
  font-weight: 500;
}
.enrollment-popup__payment-card .enrollment-popup__payment-info .payment-amount {
  color: #F47923;
  font-size: 16px;
  font-weight: 700;
}
.enrollment-popup__price-summary {
  border: 1px solid #ffffff;
  border-radius: 4px;
  padding: 0;
  margin-top: 10px;
  background: transparent;
}
.enrollment-popup__price-summary .summary-title {
  color: #ffffff;
  font-size: 15px;
  margin: 0;
  padding: 12px 16px;
  font-weight: 500;
}
.enrollment-popup__price-summary .summary-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  border-top: 1px solid #ffffff;
}
@media (max-width: 600px) {
  .enrollment-popup__price-summary .summary-grid {
    grid-template-columns: 1fr;
  }
}
.enrollment-popup__price-summary .summary-item {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.enrollment-popup__price-summary .summary-item.border-left {
  border-left: 1px solid #ffffff;
}
@media (max-width: 600px) {
  .enrollment-popup__price-summary .summary-item.border-left {
    border-left: none;
    border-top: 1px solid #ffffff;
  }
}
.enrollment-popup__price-summary .summary-item .label {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}
.enrollment-popup__price-summary .summary-item .value {
  color: #F47923;
  font-size: 18px;
  font-weight: 700;
}
.enrollment-popup__policy-check .checkbox-container {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
}
.enrollment-popup__policy-check .checkbox-container input {
  width: 18px;
  height: 18px;
  accent-color: #F47923;
}
.enrollment-popup__captcha-container {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 600px) {
  .enrollment-popup__captcha-container {
    justify-content: center;
  }
}

.lp.lp--page {
  /* ONE ACCENT FOR THE WHOLE PAGE.
     `.lp` ships a slate default and the roadmap re-tones itself per track,
     because there a colour means "which track am I in". Nothing on these two
     pages is per-track, so a milestone glowing teal and the next one purple
     was decoration pretending to be information. Both pages set the brand
     orange once, here, and every hover glow, node, chip and highlight below
     reads it — there is no second colour to keep in step. */
  --lp-accent: #fb8c3e;
  --lp-glow: 251, 140, 62;
  /* ---- The measure ------------------------------------------------------
     A FLUID column, not a fixed one. `.lp` is 1200px because the roadmap is a
     two-across chooser and a third column would not fit; these two pages are
     a timeline and a wall of proofs, and inheriting that 1200px left a third
     of a 1900px display as margin while every component inside shrank to fit
     the column it was given.

     So: grow with the viewport and stop at 1560px. Deliberately NOT the
     1800px site container — an earlier pass tried that and the milestone
     posters became half a screen tall. The two ends of the range are the
     point: this is one column that is comfortable at 1900px AND at 360px,
     rather than one width chosen for whichever screen was last complained
     about.

     Everything below is sized in `clamp()` against the viewport as well, so
     components scale WITH the column instead of being stretched by it. */
  max-width: 1560px;
  padding: clamp(1.75rem, 1rem + 2vw, 3.25rem) clamp(1rem, 0.4rem + 1.8vw, 3rem) clamp(2.5rem, 1.5rem + 3vw, 5rem);
  /* ---- Scroll reveal ---------------------------------------------------
     The same contract the roadmap uses: the element starts transparent,
     js/lp-shell.js adds `.is-in` when it crosses into view, and `--i` staggers
     siblings so a row arrives as a sequence rather than as one block. Scoped
     to `.lp--page` on purpose — `.lp__stage` already carries its own copy of
     this and must keep it.

     AN ANIMATION, NOT A TRANSITION, and the difference is not cosmetic. As a
     transition the entrance had to declare `transition: … transform … calc(--i
     * 80ms)` on the element itself, and a transition-delay belongs to the
     PROPERTY, not to the entrance — so every later hover that moved the same
     transform waited out the card's stagger too. A card with `--i: 5` took
     400ms to begin its hover lift. An animation runs once and then gets out of
     the way.

     `backwards` and NOT `forwards`: backwards holds the opening frame through
     the stagger delay, so a card cannot flash before its turn, while the
     absence of a forwards fill means that once the entrance is over the
     element is back on its ordinary styles and the hover owns `transform`
     again. A `forwards` fill would pin `transform: none` on top of the hover
     for the life of the page. */
  /* The step between staggered siblings. A custom property so a block that
     arrives in a single column — the review wall on a phone — can set it to
     zero without having to restate the animation. */
  --lp-land-step: 55ms;
}
.lp.lp--page [data-lp-reveal]:not(.is-in) {
  opacity: 0;
}
.lp.lp--page [data-lp-reveal].is-in {
  animation: lp-page-rise 0.62s cubic-bezier(0.34, 1.3, 0.5, 1) calc(var(--i, 0) * var(--lp-land-step)) backwards;
}
.lp.lp--page {
  /* ---- Header, scaled to the wider column -------------------------------
     `.lp__header` and its parts are the theme's own and are sized for the
     roadmap's 1200px. They are re-scaled HERE, inside `.lp--page`, rather
     than in _learning-path.scss: the roadmap is a different shape and is not
     asking to change, and an override that cannot leave this page is one
     fewer thing to keep in step. Same clamp() idiom the theme already uses,
     just wound up to the wider measure. */
}
.lp.lp--page .lp__header {
  margin-bottom: clamp(1.9rem, 1rem + 2.4vw, 3.5rem);
}
.lp.lp--page .lp__eyebrow {
  font-size: clamp(11.5px, 10px + 0.25vw, 13.5px);
  padding: clamp(6px, 5px + 0.2vw, 9px) clamp(14px, 11px + 0.5vw, 20px);
}
.lp.lp--page .lp__title {
  font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.9rem);
}
.lp.lp--page .lp__subtitle {
  font-size: clamp(14.5px, 12.5px + 0.55vw, 18.5px);
  max-width: 66ch;
}
.lp.lp--page .lp__stats {
  gap: clamp(12px, 9px + 0.6vw, 20px);
  margin-top: clamp(18px, 14px + 0.6vw, 26px);
  padding: clamp(9px, 7px + 0.3vw, 13px) clamp(18px, 14px + 0.7vw, 28px);
}
.lp.lp--page .lp__stat {
  font-size: clamp(13px, 11.5px + 0.35vw, 16px);
}

/* ---- The header band -----------------------------------------------------
   `.lp__header` as a BAND rather than a centred stack: the words run along the
   left and one object — the seal on /about, the stats strip on /review — faces
   them from the right end.

   Shared, in this partial, because both pages wear it. It lived in
   about/_hero.scss first and copying it into review/_hero.scss would have been
   two definitions of one component, which is the thing every note in this
   directory is trying to avoid.

   `.lp__header.lp-band`, doubled: the theme's `.lp__header { text-align:
   center }` is a single class, so a single class here would only win while
   this partial happens to be compiled after _learning-path.scss — and in the
   deployed sheet it is not. */
.lp__header.lp-band {
  display: flex;
  align-items: center;
  gap: clamp(20px, 12px + 1.6vw, 48px);
  text-align: left;
  padding: clamp(20px, 12px + 1.6vw, 40px) clamp(20px, 12px + 1.8vw, 46px);
  border-radius: clamp(16px, 12px + 0.6vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* The glass. Two layers pulling in opposite directions: the WASH is what
     makes the pane visible, the BLUR is what makes it glass. So the wash is
     kept as thin as it can be — a fraction of what a `.lp-card` carries —
     and the card is held together by light instead: a brighter rim, a lit
     top edge and a bottom catch.

     `saturate` is load-bearing. Without it the orange circuit traces
     desaturate as they pass under the blur and the whole pane goes grey. */
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.01) 45%, rgba(255, 255, 255, 0.028) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 18px 44px rgba(0, 0, 0, 0.28);
  /* Without backdrop-filter the wash alone is invisible and the card loses
     its edge entirely, so those browsers get a real (still translucent) fill
     instead. Safari needs the -webkit- form in the query as well as the
     declaration, or it takes the fallback it does not need. */
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp__header.lp-band {
    background: rgba(23, 23, 28, 0.55);
  }
}
@media (max-width: 768px) {
  .lp__header.lp-band {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(12px, 8px + 1vw, 18px);
  }
}

.lp-band__body {
  /* `min-width: 0` so a long title wraps inside the band rather than pushing
     the trailing object off the right-hand end — a flex item's floor is its
     own content. */
  flex: 1 1 auto;
  min-width: 0;
}

/* The subtitle is `margin: 0 auto` in the theme, which centres it in a column
   layout; in a left-aligned band that auto margin is what pushes it away from
   the title it belongs to. The measure goes up as well — 66ch is right for a
   centred column, but in a band it broke a one-sentence lead across two lines
   with half the row empty beside it. */
.lp__header.lp-band .lp__subtitle {
  margin: 0;
  max-width: min(100%, 92ch);
}

/* A stats strip used AS the trailing object rather than as the last line of the
   body. The child combinator is what tells the two apart, so a strip inside
   `.lp-band__body` keeps its top margin. */
.lp__header.lp-band > .lp__stats {
  flex: 0 0 auto;
  margin-top: 0;
}

/* The band's trailing object is a medallion on both pages — the ABOUT US seal
   on /about, the logo mark on /review — and both turn on this. Shared here
   rather than left in about/_hero.scss, which is where it was: review/_hero.scss
   referencing a keyframe defined in the about partial is a dependency that only
   holds while both happen to be in the same compiled sheet. */
@keyframes lp-seal-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* THE landing, for both pages. It began as the review wall's own keyframe while
   /about kept a shorter, flatter rise; there was no reason for two, and two is
   how the pages drift apart.

   Only a `from`. The implicit `to` is whatever the element's own styles say at
   that moment, which is exactly what an entrance wants: it lands on the real
   layout rather than on a hard-coded `transform: none` that would have to be
   kept in step with every element that uses it.

   The easing overshoots — that is the 1.3 control point — so an element rises a
   few pixels past its resting place and settles back. That overshoot is the
   whole difference between something landing and something fading up. */
@keyframes lp-page-rise {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.955);
  }
}
/* ---- Section furniture ---------------------------------------------------
   Standalone blocks rather than `.lp--page` children: `.lp--page` is a MODIFIER,
   and nesting `&__h2` under it would mint `.lp--page__h2`, a class whose name
   claims a block that does not exist. */
/* One fluid rhythm instead of a desktop value and a phone value: the gap
   between sections grows with the page rather than stepping at 768px, so the
   tablet sizes in between stop inheriting a spacing meant for a phone. */
.lp-sec {
  margin-top: clamp(2.25rem, 1.4rem + 2.6vw, 4.75rem);
}

/* A smaller sibling of `.lp__title`, for the headings inside a page. Same
   gradient and the same shimmer, wound down so a page with several of them does
   not glitter all the way down. */
.lp-sec__title {
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
  background: linear-gradient(100deg, #ffffff 0%, #ffe9d4 30%, #ffffff 58%, #d8c7ff 80%, #ffffff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
  animation: lp-shimmer 11s linear infinite;
  /* review.json marks its accent words with backticks and
     renderHighlightedText() wraps them in .highlight. Inside a
     background-clipped heading a coloured child would be invisible, so the
     accent is re-applied as its own clipped gradient. */
}
.lp-sec__title .highlight {
  background: linear-gradient(100deg, #fb8c3e 0%, #ffd066 50%, #fb8c3e 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lp-shimmer 11s linear infinite;
}

.lp-sec__lead {
  max-width: 68ch;
  margin: clamp(12px, 10px + 0.4vw, 18px) 0 0;
  color: #9a9aa2;
  font-size: clamp(14.5px, 12.5px + 0.55vw, 18px);
  line-height: 1.65;
}

/* ---- The card ------------------------------------------------------------
   `.lp__stage` without the roadmap-specific geometry. Same surface, same
   border, same inset highlight, same shadow, same hover — so a card on About
   and a card on the roadmap are recognisably one component.

   The tone accent works exactly as it does there: a modifier sets --lp-accent
   and --lp-glow, and everything else reads them. */
.lp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: clamp(14px, 12px + 0.4vw, 20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(21, 21, 25, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 38px rgba(0, 0, 0, 0.42);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  /* --lp-glow is inherited from `.lp` (slate) unless a tone modifier sets it,
     so an untoned card still glows rather than losing its hover. */
}
.lp-card:hover {
  border-color: rgba(var(--lp-glow), 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 22px 48px rgba(var(--lp-glow), 0.22);
}
.lp-card {
  /* The lift is applied to revealed cards only. Before the entrance finishes
     the card's transform belongs to the reveal, and a hover mid-flight would
     cancel it half-risen. */
}
.lp-card[data-lp-reveal].is-in:hover {
  transform: translateY(-4px);
}

/* The sheen that crosses `.lp__choice` on hover, as a reusable layer. */
.lp-card__sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.1), transparent 60%);
}

.lp-card:hover .lp-card__sheen {
  opacity: 1;
}

/* `.lp.lp--page` here too, or the doubled class in the base block outranks this
   and a reader who asked for no motion still gets the entrance. */
@media (prefers-reduced-motion: reduce) {
  .lp.lp--page [data-lp-reveal],
  .lp.lp--page [data-lp-reveal]:not(.is-in),
  .lp.lp--page [data-lp-reveal].is-in {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .lp-sec__title,
  .lp-sec__title .highlight {
    animation: none;
  }
}
/* ============================================================================
   Review — header.

   The layout is the shared `.lp-band` from _lp-pages.scss. Everything here is
   what the band does not provide: the logo medallion that is this page's
   trailing object, and the accent treatment for the words review.json marks
   with backticks.
   ============================================================================ */
/* ---- The medallion --------------------------------------------------------
   /about's seal in the same slot, at the same fluid size, but with the ring
   DRAWN rather than photographed: that artwork reads "ABOUT US", which is the
   wrong words on this page. A bordered circle with one lit quadrant gives the
   same slow turn from three declarations and no second asset to keep in step.

   `order: 2` puts it at the right end of the band while it stays FIRST in the
   DOM, the same trick /about's seal uses: when the band stacks below 768px the
   order is reset and the medallion is back above the title, so both pages open
   the same way without a second block of rules. `flex: 0 0 auto` because a flex
   item with a `width` will still be shrunk by a crowded row. */
.lp-review__seal {
  position: relative;
  display: grid;
  place-items: center;
  order: 2;
  flex: 0 0 auto;
  width: clamp(74px, 52px + 3.6vw, 128px);
  height: clamp(74px, 52px + 3.6vw, 128px);
}
@media (max-width: 768px) {
  .lp-review__seal {
    order: 0;
  }
}

.lp-review__seal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* A faint full ring with one warm quadrant. The rotation is what turns two
     flat borders into a sweep; at 26s it is ambient rather than a spinner —
     a header is not loading anything. */
  border: 2px solid rgba(255, 255, 255, 0.09);
  border-top-color: rgba(251, 140, 62, 0.9);
  border-right-color: rgba(251, 140, 62, 0.3);
  box-shadow: 0 0 22px rgba(251, 140, 62, 0.16);
  animation: lp-seal-spin 26s linear infinite;
}

.lp-review__seal-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  /* The same warm bloom the aura casts, so the mark sits in the page's light
     rather than on top of it. */
  background: radial-gradient(circle at 50% 45%, rgba(251, 140, 62, 0.26), transparent 70%);
}
.lp-review__seal-mark img {
  width: 92%;
  height: auto;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6));
}

@media (prefers-reduced-motion: reduce) {
  .lp-review__seal-ring {
    animation: none;
  }
}
/* `.lp__title` clips a gradient to its own text, so a child with a plain
   `color` renders as transparent — the highlight has to bring its own clipped
   gradient. Same orange, same shimmer, so the accent moves with the title
   rather than sitting still inside it. */
.lp-review__header .lp__title .highlight {
  background: linear-gradient(100deg, #fb8c3e 0%, #ffd066 50%, #fb8c3e 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lp-shimmer 8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lp-review__header .lp__title .highlight {
    animation: none;
  }
}
/* ============================================================================
   Review — the reach panel.

   Two `.lp-card`s side by side, toned from the theme's palette: the map takes
   blue, the count the brand orange. Everything that reads as a surface here —
   the panel, the border, the inset highlight, the shadow, the hover lift and
   the sheen — comes from `.lp-card`, so this pair and a roadmap stage are the
   same component wearing different content.
   ============================================================================ */
.lp-review__reach-grid {
  display: grid;
  /* `minmax(0, …)` on both tracks: a bare fr is `minmax(auto, 1fr)` and the
     map artwork is 2390px wide, so without the zero floor the first track
     refuses to shrink below the image and the panel overflows the page. */
  /* 1.32 / 0.68 rather than 1.45 / 0.55. The map has a fixed aspect and a
     cap, so widening its card past the map only adds dark space inside the
     card — while the count card, stretched to the map's height, got taller
     and narrower until a single figure sat in a column. Closer to square is
     the shape that number wants. */
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  gap: clamp(14px, 10px + 0.8vw, 26px);
  align-items: stretch;
}
@media (max-width: 1024px) {
  .lp-review__reach-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- The map ------------------------------------------------------------- */
/* No tone override. Both cards take the page's orange from `.lp--page` — the
   map used to be blue and the count orange, which made a two-card panel look
   like two unrelated widgets. */
.lp-review__map-card {
  overflow: hidden;
  justify-content: center;
  padding: clamp(10px, 6px + 0.8vw, 24px);
}

.lp-review__map {
  position: relative;
  display: block;
  line-height: 0;
  /* Capped, and centred in the card. Left to fill the column the artwork is
     2390px of dotted world and drives the whole panel to ~490px tall, which
     made the reach section the biggest thing on the page by a wide margin.
     Fluid, so the cap is a proportion of the display rather than one number
     that is too small on a desktop and still too large on a tablet. */
  max-width: clamp(340px, 100px + 34vw, 780px);
  margin: 0 auto;
  /* The BASE image is a normal flow image and sets the height; only the lit
     copy is stacked on top of it. The obvious alternative — an
     `aspect-ratio` box with both images absolutely positioned — collapses to
     zero height on any browser that does not support `aspect-ratio`, and
     takes both artworks with it. This way the worst case is a plain image. */
}
.lp-review__map img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.55s ease;
}
.lp-review__map .lp-review__map-lit {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: contain;
}

/* The lit artwork sits on top and fades in with the card's hover — the same
   flourish the roadmap's posters get, rather than the old `:hover` swap that
   was the ONLY way to see this file and therefore invisible on every phone. */
.lp-review__map-lit {
  opacity: 0;
}

.lp-review__map-card:hover .lp-review__map-base {
  opacity: 0.25;
}
.lp-review__map-card:hover .lp-review__map-lit {
  opacity: 1;
}

/* ---- The count ----------------------------------------------------------- */
.lp-review__count-card {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(22px, 16px + 1.1vw, 40px) clamp(16px, 12px + 0.8vw, 28px);
  overflow: hidden;
  /* A warm floor under the figure, so the card reads as lit from inside
     rather than as a flat panel with big text on it. */
}
.lp-review__count-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 118%, rgba(251, 140, 62, 0.22), transparent 70%);
}

.lp-review__count {
  position: relative;
  z-index: 1;
  font-size: clamp(38px, 22px + 3.2vw, 78px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(100deg, #ffd9b0 0%, #fb8c3e 48%, #ff7a1f 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fb8c3e;
  animation: lp-shimmer 9s linear infinite;
}

.lp-review__count-label {
  position: relative;
  z-index: 1;
  margin-top: clamp(6px, 4px + 0.3vw, 10px);
  font-size: clamp(13px, 11.5px + 0.4vw, 17px);
  color: #9a9aa2;
}

@media (prefers-reduced-motion: reduce) {
  .lp-review__count {
    animation: none;
  }
  .lp-review__map img {
    transition: none;
  }
}
/* ============================================================================
   Review — the wall of proofs.

   A flow grid of `.lp-card`s: same surface, same border, same hover, same
   `[data-lp-reveal]` entrance as everything else on the site. `align-items:
   start` lets each card be exactly as tall as its proof, which is the point —
   the old row wrappers forced four cards to the tallest one's height and most
   of them carried a band of empty panel underneath.
   ============================================================================ */
.lp-review__wall-head {
  margin-bottom: clamp(1.1rem, 0.8rem + 0.9vw, 2rem);
}

.lp-review__grid {
  display: grid;
  /* The track floor is fluid, so the wall keeps a roughly constant number of
     columns as the page widens and each card gets bigger — a fixed 230px
     floor meant a 1900px display simply got MORE cards, each one too small
     to read the screenshot inside it.

     `min(100%, …)` is the guard that makes this safe at the other end: below
     the floor the track would otherwise stay 240px wide and push the grid
     off the side of a 360px phone. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(240px, 140px + 8vw, 340px)), 1fr));
  align-items: start;
  gap: clamp(12px, 8px + 0.7vw, 22px);
}
@media (max-width: 600px) {
  .lp-review__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- The card ------------------------------------------------------------ */
.lp-review__card {
  overflow: hidden;
  padding: 0 0 4px;
}

/* ---- The landing ----------------------------------------------------------
   The animation itself is the shared `lp-page-rise` in _lp-pages.scss — this
   wall and /about's milestones land the same way. The only thing the wall needs
   on top of it is the step below.

   `--i` on a card is its COLUMN, so a row of four ripples left to right. In one
   column that stops being a ripple: the cards enter the viewport one at a time
   anyway, and the delay becomes latency between the scroll and the card showing
   up. Set on the grid rather than on the card so it is one declaration. */
@media (max-width: 600px) {
  .lp.lp--page .lp-review__grid {
    --lp-land-step: 0ms;
  }
}
.lp-review__card-head {
  display: flex;
  align-items: center;
  gap: clamp(10px, 8px + 0.25vw, 13px);
  padding: clamp(10px, 8px + 0.3vw, 14px) clamp(11px, 9px + 0.3vw, 15px) clamp(8px, 6px + 0.25vw, 11px);
  /* Dropped entirely when the proof carries no attribution — many Student
     Feedback rows are an image and nothing else, and an empty header band on
     those cards was the wall's most obvious ragged edge. */
}
.lp-review__card-head:empty {
  display: none;
}

.lp-review__avatar {
  flex: 0 0 auto;
  width: clamp(32px, 26px + 0.6vw, 40px);
  height: clamp(32px, 26px + 0.6vw, 40px);
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.lp-review__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lp-review__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.lp-review__name {
  font-size: clamp(13px, 11.5px + 0.35vw, 16px);
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Two lines then stop. These come through as free text from Student Feedback
   and some of them are a paragraph — left alone, one card's job title sets the
   height of the card. */
.lp-review__role {
  margin-top: 2px;
  font-size: clamp(11px, 10px + 0.28vw, 13.5px);
  line-height: 1.4;
  color: #86868f;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lp-review__social {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.lp-review__social-link {
  display: grid;
  place-items: center;
  /* Never below 24px — these are the only tap targets on a card, and a phone
     is exactly where the fluid scale bottoms out. */
  width: clamp(26px, 22px + 0.5vw, 32px);
  height: clamp(26px, 22px + 0.5vw, 32px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #86868f;
  font-size: clamp(14px, 12.5px + 0.35vw, 17px);
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.lp-review__social-link:hover {
  color: var(--lp-accent);
  border-color: rgba(var(--lp-glow), 0.5);
  background: rgba(var(--lp-glow), 0.1);
}

/* ---- The proof ----------------------------------------------------------- */
.lp-review__proof {
  position: relative;
  margin: 0 clamp(8px, 6px + 0.25vw, 11px);
  border-radius: clamp(11px, 9px + 0.3vw, 14px);
  overflow: hidden;
  background: #0d0d11;
  line-height: 0;
  /* No fixed aspect ratio and no `object-fit: cover`. A review screenshot is
     evidence — cropping it to a tidy 4:3 is how you cut the sentence the
     student is being quoted for. The card takes the image's shape. */
}
.lp-review__proof img,
.lp-review__proof video {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-review__proof {
  /* A header-less card would otherwise show 10px of panel above the image. */
}
.lp-review__card-head:empty + .lp-review__proof {
  margin-top: 10px;
}

.lp-review__card:hover .lp-review__proof img {
  transform: scale(1.03);
}

.lp-review__play {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 10, 14, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  pointer-events: none;
}
.lp-review__play i {
  font-size: 13px;
  color: #fb8c3e;
}

.lp-review__quote {
  margin: 0;
  padding: clamp(10px, 8px + 0.3vw, 14px) clamp(12px, 10px + 0.3vw, 16px) clamp(8px, 6px + 0.3vw, 12px);
  font-size: clamp(12.5px, 11px + 0.4vw, 15.5px);
  line-height: 1.65;
  color: #9a9aa2;
}

/* ---- Infinite-scroll furniture ------------------------------------------- */
.lp-review__loader {
  display: none;
  justify-content: center;
  padding: 40px 0 6px;
}
.lp-review__loader.is-busy {
  display: flex;
}

.lp-review__spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-top-color: #fb8c3e;
  animation: lp-review-spin 0.75s linear infinite;
}

@keyframes lp-review-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Zero-height and invisible: this exists only to be observed. It must stay in
   the flow — `display: none` can never intersect. */
.lp-review__sentinel {
  width: 100%;
  height: 1px;
}

.lp-review__end {
  display: none;
  margin: 0;
  padding: 34px 0 0;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #6f6f79;
}
.lp-review__end.is-shown {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .lp-review__card:hover .lp-review__proof img {
    transform: none;
  }
  .lp-review__spinner {
    animation-duration: 2s;
  }
}
/* ============================================================================
   About — header.

   The layout is the shared `.lp-band` from _lp-pages.scss — the glass header
   band both this page and /review wear. Everything here is the little that
   neither of those provides: the rotating seal that is this page's trailing
   object, and the accent colour for the second word of the title.
   ============================================================================ */
/* ---- The seal ------------------------------------------------------------
   Kept from the old hero and folded into the centred header as a medallion. Two
   elements, because they take different transforms: the ring rotates, the mark
   stays upright. A logo on the rotating element is upside down twice a
   revolution. */
/* Fluid rather than two fixed sizes with a step at 768px — the medallion leads
   the page and was the first thing to look undersized against a wider title.

   `order: 2` puts it at the right end of the band while it stays first in the
   DOM, which is what lets the stacked layout below keep it above the title
   without a second rule. `flex: 0 0 auto` because a flex item with a `width`
   will still be shrunk by a crowded row. */
.lp-about__seal {
  position: relative;
  display: grid;
  place-items: center;
  order: 2;
  flex: 0 0 auto;
  width: clamp(74px, 52px + 3.6vw, 128px);
  height: clamp(74px, 52px + 3.6vw, 128px);
  margin: 0;
}
@media (max-width: 768px) {
  .lp-about__seal {
    order: 0;
  }
}

.lp-about__seal-ring {
  position: absolute;
  inset: 0;
  animation: lp-seal-spin 26s linear infinite;
}
.lp-about__seal-ring img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lp-about__seal-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 48%;
  height: 48%;
  border-radius: 50%;
  /* The same warm bloom the aura casts, so the mark sits in the page's light
     rather than on top of it. */
  background: radial-gradient(circle at 50% 45%, rgba(251, 140, 62, 0.26), transparent 70%);
}
.lp-about__seal-mark img {
  width: 86%;
  height: auto;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6));
}

/* `lp-seal-spin` lives in _lp-pages.scss — /review's medallion turns on it too. */
/* The second word. `.lp__title` clips a gradient to the text, so a plain
   `color` on a child would be invisible — the accent has to be its own clipped
   gradient, in the theme's orange. */
.lp-about__title-accent {
  background: linear-gradient(100deg, #fb8c3e 0%, #ffd066 50%, #fb8c3e 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lp-shimmer 8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lp-about__seal-ring,
  .lp-about__title-accent {
    animation: none;
  }
}
/* ============================================================================
   About — the timeline.

   THE PICTURE AND THE EXPLANATION SIT ON OPPOSITE SIDES OF THE SPINE, and swap
   sides every milestone. The previous version put both in one card on one side
   and left the other half of the row empty, which on a 1200px column meant the
   page was close to half blank all the way down. Facing them across the spine
   uses the width the layout was already paying for, and gives the alternation
   something to actually alternate.

   One accent, not six. `--lp-accent` / `--lp-glow` come from `.lp--page` and
   are the brand orange for the whole page — the node, the year chip, the title
   highlight and the card's hover glow all read the same two properties, so
   there is nothing here that can drift to a different colour.
   ============================================================================ */
/* Custom properties, not Sass variables, because these have to be FLUID: a
   Sass `$node: 34px` resolves at compile time and then the same 34px circle is
   asked to anchor a 360px phone and a 1900px display. As custom properties the
   node, the spine gap and the width of a half all scale with the viewport, and
   — the reason it matters here — the spine's own geometry (`calc(var(--node) /
   2)`) follows automatically instead of needing a matching breakpoint. */
.lp-about__timeline {
  position: relative;
  --node: clamp(34px, 28px + 1vw, 48px);
  --spine-gap: clamp(30px, 14px + 2.8vw, 68px);
  /* The width of one half of a row — the picture on one side, the words on
     the other, both capped to the SAME figure so the slack left over lands
     evenly in the two outer gutters rather than all on one side.

     44vw tracks what a half column actually measures, so below about 1320px
     the halves simply fill their track and there is no slack at all; the
     580px ceiling is what stops a 1900px display from turning the posters
     back into the half-screen artwork this cap exists to prevent. */
  --half: clamp(300px, 44vw, 580px);
}

/* ---- The spine ----------------------------------------------------------- */
.lp-about__spine {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spine-gap);
  /* The rule the nodes sit on. Faded at both ends so it emerges and departs
     rather than stopping dead — the roadmap's `.lp__spine` does the same. */
}
.lp-about__spine::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.16) 8%, rgba(255, 255, 255, 0.16) 92%, transparent 100%);
  /* Paired with the row's stacking breakpoint below — when the halves
     stop facing each other, the spine stops running down the middle. */
}
@media (max-width: 768px) {
  .lp-about__spine::before {
    left: calc(var(--node) / 2);
  }
}

/* ---- A row --------------------------------------------------------------- */
.lp-about__row {
  position: relative;
  display: grid;
  /* `minmax(0, 1fr)`, not `1fr`: a bare `1fr` is `minmax(auto, 1fr)`, so a
     long unbroken word or a wide image in either half can push the column
     past its share and the row overflows the page. */
  grid-template-columns: minmax(0, 1fr) var(--node) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(16px, 6px + 1.6vw, 40px);
  /* Below the two-column breakpoint the spine moves to the left edge and the
     two halves stack in the one column beside it. An alternating layout in a
     single column is just an indent that changes for no reason.

     768px, NOT 1024px. At 1024 a facing pair still measures ~445px a side —
     a readable column of text and a poster at a sensible size — so stacking
     there was throwing away a layout that fitted, and handing a tablet one
     690px-tall picture per screen instead. */
}
@media (max-width: 768px) {
  .lp-about__row {
    grid-template-columns: var(--node) minmax(0, 1fr);
    column-gap: clamp(14px, 8px + 1vw, 20px);
    row-gap: clamp(10px, 6px + 0.6vw, 16px);
    align-items: start;
  }
}
.lp-about__row {
  /* The swap, and it follows the ORIGINAL design's reading of the data:
     `position: "left"` in about.json means the TEXT is on the left and the
     picture faces it on the right. That is how the page shipped — 2021 read
     "Academy Founded" on the left with its poster to the right — so the
     field keeps meaning what the editors who wrote it meant.

     `grid-column` rather than `order`, so the node keeps the middle column to
     itself and stays on the spine whichever way round the row is. */
  /* Both halves are pulled TOWARDS the spine (`justify-self`), so the slack
     in a 1fr column collects in the outer gutter where it reads as a margin,
     instead of opening a channel down the middle of the page. */
}
.lp-about__row--left .lp-about__body {
  grid-column: 1;
  justify-self: end;
}
.lp-about__row--left .lp-about__media {
  grid-column: 3;
  justify-self: start;
}
.lp-about__row--right .lp-about__body {
  grid-column: 3;
  justify-self: start;
}
.lp-about__row--right .lp-about__media {
  grid-column: 1;
  justify-self: end;
}
@media (max-width: 768px) {
  .lp-about__row--left, .lp-about__row--right {
    /* Stacked, both halves take the whole column — the desktop caps
       would otherwise leave a 580px picture in a 900px tablet column
       with the difference sitting empty beside it. */
  }
  .lp-about__row--left .lp-about__media, .lp-about__row--right .lp-about__media {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    max-width: 100%;
  }
  .lp-about__row--left .lp-about__body, .lp-about__row--right .lp-about__body {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    max-width: 100%;
  }
}

/* The numbered node, modelled on `.lp__stage-node`. */
.lp-about__node {
  grid-column: 2;
  grid-row: 1;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  border: 1px solid rgba(var(--lp-glow), 0.55);
  background: #101014;
  color: var(--lp-accent);
  font-size: clamp(12px, 10px + 0.35vw, 15px);
  font-weight: 700;
  box-shadow: 0 0 0 5px #0b0b0f, 0 0 18px rgba(var(--lp-glow), 0.32);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
@media (max-width: 768px) {
  .lp-about__node {
    grid-column: 1;
    grid-row: 1;
    margin-top: 6px;
  }
}

/* ---- The picture --------------------------------------------------------- */
.lp-about__media {
  grid-row: 1;
  position: relative;
  width: 100%;
  /* Capped at `--half`, the same figure the words are capped at. The cap is
     what keeps a row from opening a hole in itself: unbounded, these posters
     render around 0.7 of their width in height, so a full-width half column
     puts 400-plus pixels of artwork beside four lines of text. Being fluid,
     it gives back the size that a flat 430px was taking away on a large
     display without letting the poster run away on a small one. */
  max-width: var(--half);
  overflow: hidden;
  line-height: 0;
}
.lp-about__media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.lp-about__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 11, 15, 0.55) 0%, transparent 36%, rgba(11, 11, 15, 0.42) 100%);
}

.lp-about__body {
  grid-row: 1;
  min-width: 0;
  max-width: var(--half);
}

/* The year, promoted out of the chip on the artwork and set large on the text
   side. It was the obvious thing to fill the short half with, because it is the
   one piece of the milestone that was already there and being whispered — and a
   date is what a timeline is actually about. */
.lp-about__year {
  display: block;
  font-size: clamp(32px, 20px + 2.4vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, #ffd9b0 0%, var(--lp-accent) 50%, #ff7a1f 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--lp-accent);
  animation: lp-shimmer 9s linear infinite;
}

.lp-about__title {
  margin: clamp(8px, 6px + 0.3vw, 14px) 0 0;
  font-size: clamp(17px, 13px + 0.85vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.lp-about__title-hl {
  color: var(--lp-accent);
}

.lp-about__text {
  margin: clamp(7px, 5px + 0.3vw, 12px) 0 0;
  font-size: clamp(13.5px, 12px + 0.4vw, 17px);
  line-height: 1.7;
  color: #9a9aa2;
  /* A reading limit on the LINE, separate from the cap on the block. The
     block is `--half` so the year and the title fill their side of the row;
     without this the paragraph would follow it out to 70-odd characters,
     which is past the width a line can be scanned comfortably. */
  max-width: 62ch;
}

/* ---- Row hover ----------------------------------------------------------- */
/* The ROW is the hover unit, not the picture. The explanation is half of the
   milestone and pointing at it has to light the same thing pointing at the
   photograph does, or the two halves stop reading as one row. */
.lp-about__row:hover .lp-about__media {
  border-color: rgba(var(--lp-glow), 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 22px 48px rgba(var(--lp-glow), 0.22);
  transform: translateY(-4px);
}
.lp-about__row:hover .lp-about__media img {
  transform: scale(1.04);
}
.lp-about__row:hover .lp-about__node {
  transform: scale(1.12);
  box-shadow: 0 0 0 5px #0b0b0f, 0 0 26px rgba(var(--lp-glow), 0.6);
}

/* ---- Optional editor link ------------------------------------------------ */
.lp-about__footer {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.75rem, 1rem + 1.6vw, 3rem);
}

.lp-about__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(11px, 9px + 0.35vw, 15px) clamp(22px, 18px + 0.7vw, 32px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #cbd0dc;
  font-size: clamp(13.5px, 12px + 0.35vw, 16px);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.lp-about__more:hover {
  border-color: rgba(var(--lp-glow), 0.55);
  background: rgba(var(--lp-glow), 0.1);
  color: #fff;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .lp-about__row:hover .lp-about__media {
    transform: none;
  }
  .lp-about__row:hover .lp-about__media img {
    transform: none;
  }
  .lp-about__row:hover .lp-about__node {
    transform: none;
  }
}

.payment-page {
  min-height: 60vh;
  padding: 2rem 1rem;
}

.payment-container {
  width: 100%;
  max-width: 1000px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #3f3f3f;
  border-radius: 12px;
  padding: 1.5rem;
}
.payment-container__title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
}

.payment-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.payment-list__item:last-child {
  border-bottom: none;
}
.payment-list__label {
  flex-grow: 1;
  cursor: pointer;
  font-size: 1rem;
  color: #e0e0e0;
}
.payment-list__radio {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #f47923;
}

.payment-qr {
  width: 100%;
  max-width: 1000px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #3f3f3f;
  border-radius: 12px;
  padding: 1.5rem;
}
.payment-qr__inner {
  display: flex;
  gap: 3rem;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.payment-qr__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.payment-qr__upi-icons {
  text-align: center;
  font-size: 0.85rem;
  color: #aaa;
}
.payment-qr__icon-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.3rem 0;
}
.payment-qr__total {
  text-align: center;
  font-size: 1.1rem;
  color: #f47923;
}
.payment-qr__code {
  width: 150px;
  flex-shrink: 0;
}
.payment-qr__code svg {
  width: 100%;
  height: auto;
}
.payment-qr__upload {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.payment-qr__dropzone {
  border: 2px dashed #555;
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  transition: border-color 0.2s;
  cursor: pointer;
}
.payment-qr__dropzone.dragover {
  border-color: #f47923;
}
.payment-qr__preview {
  text-align: center;
}
.payment-qr__actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.payment-qr__note {
  font-size: 0.85rem;
  color: #888;
  text-align: center;
  line-height: 1.5;
}
.payment-qr__note a {
  color: #f47923;
}

.payment-processing {
  width: 100%;
  max-width: 1000px;
  text-align: center;
  padding: 2rem;
}
.payment-processing__spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin: 0 auto 1rem;
}
.payment-processing__spinner .loader {
  --color-1: #fd6e0c;
  --size: 1px;
  width: calc(8 * var(--size));
  height: calc(40 * var(--size));
  border-radius: calc(4 * var(--size));
  display: block;
  position: relative;
  background: currentColor;
  color: var(--color-1);
  box-sizing: border-box;
  animation: animloader 0.3s 0.3s linear infinite alternate;
}
.payment-processing__spinner .loader::after, .payment-processing__spinner .loader::before {
  content: "";
  width: calc(8 * var(--size));
  height: calc(40 * var(--size));
  border-radius: calc(4 * var(--size));
  background: currentColor;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(20 * var(--size));
  box-sizing: border-box;
  animation: animloader 0.3s 0.45s linear infinite alternate;
}
.payment-processing__spinner .loader::before {
  left: calc(-20 * var(--size));
  animation-delay: 0s;
}

@keyframes animloader {
  0% {
    height: calc(48 * var(--size));
  }
  100% {
    height: calc(4 * var(--size));
  }
}
.payment-error {
  width: 100%;
  max-width: 1000px;
  background: rgba(217, 83, 79, 0.12);
  border: 1px solid rgba(217, 83, 79, 0.4);
  border-radius: 10px;
  padding: 1.25rem;
  text-align: center;
  color: #f2bfbd;
}

.payment-status-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  min-height: max(62vh, 480px);
  padding: 48px 16px;
}

.payment-result {
  width: 100%;
  max-width: 600px;
  background-color: rgba(23, 23, 27, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  background-image: radial-gradient(ellipse 70% 55% at 50% -10%, rgba(249, 115, 22, 0.14), transparent 65%), linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, 0.1) 15%, rgba(249, 115, 22, 0.5) 30%, #f97316 50%, rgba(249, 115, 22, 0.5) 70%, rgba(249, 115, 22, 0.1) 85%, transparent 100%);
  background-size: 100% 100%, 42% 2px;
  background-position: 50% 0, 50% 0;
  background-repeat: no-repeat, no-repeat;
  border: 1px solid #26262b;
  border-radius: 22px;
  padding: 48px 44px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.payment-result .payment-processing__spinner {
  margin-bottom: 20px;
}
.payment-result__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
}
.payment-result__icon--success {
  background: rgba(52, 199, 89, 0.14);
  color: #34c759;
}
.payment-result__icon--failed {
  background: rgba(217, 83, 79, 0.14);
  color: #e4605c;
}
.payment-result__icon--pending {
  background: rgba(244, 121, 35, 0.12);
  color: #f47923;
}
.payment-result__title {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.3;
}
.payment-result__text {
  font-size: 15px;
  color: #9a9aa2;
  line-height: 1.6;
  margin: 0 0 22px;
}
.payment-result__ref {
  display: inline-block;
  font-size: 13px;
  color: #b3b3b3;
  background: #1f1f24;
  border: 1px solid #26262b;
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 26px;
}
.payment-result__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 36px;
  background: linear-gradient(180deg, #fb8c3e 0%, #f97316 100%);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35);
  transition: 0.2s ease;
}
.payment-result__cta:hover {
  transform: translateY(-1px);
  color: #fff;
}

@media (max-width: 600px) {
  .payment-result {
    padding: 32px 20px;
    border-radius: 16px;
  }
}
.autopay-optin {
  width: 100%;
  max-width: 600px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  text-align: left;
  background-color: rgba(23, 23, 27, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  background-image: linear-gradient(180deg, rgba(249, 115, 22, 0.06), transparent 60%);
  border: 1px solid #26262b;
  border-radius: 18px;
  padding: 24px 26px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px rgba(0, 0, 0, 0.32);
}
.autopay-optin__icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #f9a05c;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.28);
}
.autopay-optin__body {
  flex: 1 1 auto;
  min-width: 0;
}
.autopay-optin__title {
  font-size: 17px;
  font-weight: 650;
  color: #fff;
  margin: 2px 0 6px;
  line-height: 1.35;
}
.autopay-optin__text {
  font-size: 14px;
  color: #9a9aa2;
  line-height: 1.55;
  margin: 0 0 14px;
}
.autopay-optin__benefits {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.autopay-optin__benefits li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #c8c8ce;
}
.autopay-optin__benefits li i {
  color: #34c759;
  font-size: 15px;
}
.autopay-optin__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.autopay-optin__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 26px;
  background: linear-gradient(180deg, #fb8c3e 0%, #f97316 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.32);
  transition: 0.2s ease;
}
.autopay-optin__cta:hover {
  transform: translateY(-1px);
  color: #fff;
}
.autopay-optin__cta:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
.autopay-optin__later {
  font-size: 13.5px;
  color: #9a9aa2;
  text-decoration: none;
  transition: color 0.2s ease;
}
.autopay-optin__later:hover {
  color: #c8c8ce;
}
.autopay-optin__note {
  width: 100%;
  margin: 12px 0 0;
  font-size: 13px;
  color: #e4605c;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .autopay-optin {
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: 14px;
  }
  .autopay-optin__actions {
    width: 100%;
  }
  .autopay-optin__cta {
    width: 100%;
  }
  .autopay-optin__later {
    width: 100%;
    text-align: center;
  }
}
/* All-Access subscription checkout (/payment/subscribe) + courses upsell banner.
   Authored in plain CSS (literal token values) so the compiled styles.css
   block can be mirrored verbatim. Palette: accent #F47923 / #fb8c3e–#f97316
   gradient, panels #17171b, borders #26262b, text #fff / #b3b3b3 / #9a9aa2. */
.subscribe-page {
  /* Utility classes (w-100/m-auto) aren't bundled here — size explicitly,
     or the flex-column section shrink-wraps and everything stacks. */
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  gap: 2rem;
}

/* ---- Hero ------------------------------------------------------------ */
.subscribe-page__hero {
  width: 100%;
  text-align: center;
  padding-top: 0.5rem;
}

.subscribe-page__hero-badge {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fb8c3e 0%, #f97316 100%);
  box-shadow: 0 0 0 10px rgba(249, 115, 22, 0.1), 0 0 34px 8px rgba(249, 115, 22, 0.35);
}

.subscribe-page__hero-badge i {
  font-size: 34px;
  color: #141417;
}

.subscribe-page__title {
  color: #ffffff;
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 6px;
}

.subscribe-page__title span {
  color: #F47923;
}

.subscribe-page__subtitle {
  color: #9a9aa2;
  font-size: 15px;
  margin-bottom: 18px;
}

.subscribe-page__perks {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.subscribe-page__perks li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d6d6db;
  font-size: 13px;
  padding: 8px 16px;
  border: 1px solid #26262b;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: default;
  transition: 0.2s ease;
}

.subscribe-page__perks li:hover {
  border-color: rgba(249, 115, 22, 0.6);
  background: rgba(249, 115, 22, 0.08);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.18);
}

.subscribe-page__perks li i {
  color: #F47923;
  font-size: 15px;
}

@media (max-width: 768px) {
  .subscribe-page__perks {
    flex-wrap: wrap;
  }
}
/* ---- Shared card (gate / manage states) ------------------------------ */
.subscribe-page__card {
  width: 100%;
  max-width: 640px;
  text-align: center;
  background-color: rgba(23, 23, 27, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  background-image: linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, 0.1) 15%, rgba(249, 115, 22, 0.5) 30%, #f97316 50%, rgba(249, 115, 22, 0.5) 70%, rgba(249, 115, 22, 0.1) 85%, transparent 100%);
  background-size: 42% 2px;
  background-position: 50% 0;
  background-repeat: no-repeat;
  border: 1px solid #26262b;
  border-radius: 22px;
  padding: 40px 44px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.subscribe-page__card-title {
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 10px;
}

.subscribe-page__card-text {
  color: #9a9aa2;
  font-size: 14.5px;
  line-height: 23px;
  margin: 0 0 22px;
}

.subscribe-page__card-hint {
  color: #6f6f76;
  font-size: 12.5px;
  margin: 16px 0 0;
}

.subscribe-page__card-hint i {
  color: #F47923;
  margin-right: 4px;
}

.subscribe-page__card-hint a {
  color: #F47923;
  text-decoration: none;
}

/* ---- Onboarding steps rail ------------------------------------------- */
.subscribe-page__steps {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0;
  margin: 0 0 26px;
}

.subscribe-page__steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 170px;
}

.subscribe-page__steps li + li::before {
  content: "";
  position: absolute;
  top: 20px;
  right: calc(50% + 26px);
  width: calc(100% - 52px);
  height: 2px;
  background: #26262b;
}

.subscribe-page__steps li.done + li::before {
  background: linear-gradient(90deg, #f97316, rgba(249, 115, 22, 0.35));
}

.subscribe-page__step-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #26262b;
  background: #1d1d22;
  color: #6f6f76;
  font-size: 18px;
  z-index: 1;
}

.subscribe-page__steps li.active .subscribe-page__step-dot {
  border-color: #F47923;
  color: #F47923;
  box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.12), 0 0 18px rgba(249, 115, 22, 0.35);
}

.subscribe-page__steps li.done .subscribe-page__step-dot {
  background: linear-gradient(180deg, #fb8c3e 0%, #f97316 100%);
  border-color: #f97316;
  color: #141417;
}

.subscribe-page__step-label {
  font-size: 12px;
  color: #6f6f76;
}

.subscribe-page__steps li.active .subscribe-page__step-label {
  color: #ffffff;
  font-weight: 600;
}

.subscribe-page__steps li.done .subscribe-page__step-label {
  color: #9a9aa2;
}

/* ---- CTA buttons ------------------------------------------------------ */
.subscribe-page__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 36px;
  background: linear-gradient(180deg, #fb8c3e 0%, #f97316 100%);
  color: #ffffff;
  border: none;
  border-radius: 11px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35);
  transition: 0.2s ease;
}

.subscribe-page__cta:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 9px 24px rgba(249, 115, 22, 0.45);
  color: #ffffff;
}

.subscribe-page__cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.subscribe-page__cta--block {
  display: flex;
  width: 100%;
}

.subscribe-page__cta--ghost {
  background: none;
  border: 1px solid #F47923;
  color: #F47923;
  box-shadow: none;
}

.subscribe-page__cta--ghost:hover {
  background: rgba(249, 115, 22, 0.1);
  color: #F47923;
}

/* ---- Checkout: plans + sticky order rail ------------------------------ */
.subscribe-page__checkout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
}

.subscribe-page__section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 14px;
}

.subscribe-page__section-title span {
  color: #F47923;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  border: 1px solid rgba(249, 115, 22, 0.45);
  border-radius: 7px;
  padding: 2px 7px;
  background: rgba(249, 115, 22, 0.08);
}

.subscribe-page__plans {
  display: grid;
  gap: 16px;
}

/* Plan cards (extends .enrollment-popup__payment-card) */
.subscribe-page__plan-card {
  align-items: flex-start;
  background-color: rgba(23, 23, 27, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid #26262b;
  border-radius: 16px;
  padding: 18px 20px;
  transition: 0.2s ease;
}

.subscribe-page__plan-card:hover {
  border-color: rgba(249, 115, 22, 0.5);
}

.subscribe-page__plan-card .enrollment-popup__payment-radio .radio-dot::after {
  content: none;
}

.subscribe-page__plan-card.active {
  border-color: #F47923;
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.06) 0%, rgba(249, 115, 22, 0.015) 100%), #17171b;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.35), 0 12px 30px rgba(0, 0, 0, 0.35);
}

.subscribe-page__plan-card.active .radio-dot::after {
  content: "";
}

.subscribe-page__plan-card .enrollment-popup__payment-info {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.subscribe-page__plan-card .enrollment-popup__payment-info .payment-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16.5px;
  font-weight: 600;
}

.subscribe-page__plan-card .enrollment-popup__payment-info .payment-amount small {
  color: #b3b3b3;
  font-size: 12px;
  font-weight: 400;
}

.subscribe-page__plan-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #F47923;
  border: 1px solid rgba(249, 115, 22, 0.45);
  background: rgba(249, 115, 22, 0.08);
  border-radius: 999px;
  padding: 3px 9px;
}

.subscribe-page__plan-meta {
  color: #b3b3b3;
  font-size: 13px;
}

.subscribe-page__plan-desc {
  color: #8a8a91;
  font-size: 13px;
}

/* Order summary rail */
.subscribe-page__checkout-aside {
  position: sticky;
  top: 24px;
}

.subscribe-page__order {
  background-color: rgba(23, 23, 27, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  background-image: linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, 0.1) 15%, rgba(249, 115, 22, 0.5) 30%, #f97316 50%, rgba(249, 115, 22, 0.5) 70%, rgba(249, 115, 22, 0.1) 85%, transparent 100%);
  background-size: 55% 2px;
  background-position: 50% 0;
  background-repeat: no-repeat;
  border: 1px solid #26262b;
  border-radius: 20px;
  padding: 24px;
  display: grid;
  gap: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.subscribe-page__order .subscribe-page__section-title {
  margin-bottom: 0;
}

.subscribe-page__summary {
  display: grid;
  gap: 0;
  transition: 0.2s ease;
}

.subscribe-page__summary--loading {
  opacity: 0.45;
}

.subscribe-page__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed #26262b;
}

.subscribe-page__summary-row:last-child {
  border-bottom: none;
}

.subscribe-page__summary-row .label {
  color: #9a9aa2;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.subscribe-page__summary-row .value {
  color: #ffffff;
  font-size: 14.5px;
  text-align: right;
}

.subscribe-page__summary-row .value small {
  color: #8a8a91;
  font-size: 12px;
  font-weight: 400;
}

.subscribe-page__summary-row--total .value {
  color: #F47923;
  font-size: 17px;
  font-weight: 700;
}

.subscribe-page__coupon {
  display: grid;
  gap: 10px;
}

.subscribe-page__coupon-toggle {
  background: none;
  border: none;
  padding: 0;
  color: #F47923;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.subscribe-page__coupon-toggle:hover {
  text-decoration: underline;
}

.subscribe-page__coupon-inputs {
  display: flex;
  gap: 8px;
}

.subscribe-page__coupon-input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #26262b;
  border-radius: 10px;
  color: #ffffff;
  font-size: 13.5px;
  padding: 10px 13px;
  text-transform: uppercase;
}

.subscribe-page__coupon-input:focus {
  outline: none;
  border-color: #F47923;
}

.subscribe-page__coupon-apply {
  padding: 10px 18px;
  font-size: 13px;
}

.subscribe-page__coupon-msg--ok {
  color: #4ade80;
}

.subscribe-page__autopay {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid #26262b;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.02);
  padding: 13px 15px;
}

.subscribe-page__autopay i {
  color: #F47923;
  font-size: 20px;
  margin-top: 1px;
}

.subscribe-page__autopay-name {
  display: block;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
}

.subscribe-page__autopay-desc {
  display: block;
  color: #9a9aa2;
  font-size: 12.5px;
  line-height: 19px;
  margin-top: 2px;
}

.subscribe-page__autopay-desc--warn {
  color: #eab308;
}

.subscribe-page__secured {
  text-align: center;
  color: #6f6f76;
  font-size: 12px;
  margin: 0;
}

.subscribe-page__secured i {
  color: #22c55e;
  margin-right: 4px;
}

.subscribe-page .payment-error button {
  background: none;
  color: #ffffff;
  border: 1px solid #b3b3b3;
  border-radius: 999px;
  padding: 8px 24px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s ease;
}

.subscribe-page .payment-error button:hover {
  border-color: #F47923;
  color: #F47923;
}

/* Manage / gate variants share __card; keep legacy hook alive */
.subscribe-page__manage {
  padding: 40px 44px;
}

.subscribe-page__gate {
  max-width: 880px;
  padding: 48px 56px;
  background-color: rgba(23, 23, 27, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  background-image: radial-gradient(ellipse 70% 55% at 50% -10%, rgba(249, 115, 22, 0.14), transparent 65%), linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, 0.1) 15%, rgba(249, 115, 22, 0.5) 30%, #f97316 50%, rgba(249, 115, 22, 0.5) 70%, rgba(249, 115, 22, 0.1) 85%, transparent 100%);
  background-size: 100% 100%, 42% 2px;
  background-position: 50% 0, 50% 0;
  background-repeat: no-repeat, no-repeat;
}

.subscribe-page__gate .subscribe-page__card-title {
  font-size: 1.6rem;
}

.subscribe-page__gate .subscribe-page__card-text {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.subscribe-page__gate-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 6px 0 26px;
}

.subscribe-page__gate-items > div {
  border: 1px solid #26262b;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 18px 14px;
  transition: 0.2s ease;
}

.subscribe-page__gate-items > div:hover {
  border-color: rgba(249, 115, 22, 0.55);
  background: rgba(249, 115, 22, 0.06);
  transform: translateY(-2px);
}

.subscribe-page__gate-items i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  border-radius: 50%;
  color: #F47923;
  font-size: 20px;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.35);
}

.subscribe-page__gate-items span {
  display: block;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
}

.subscribe-page__gate-items small {
  display: block;
  color: #8a8a91;
  font-size: 12px;
  margin-top: 3px;
}

@media (max-width: 640px) {
  .subscribe-page__gate {
    padding: 32px 22px;
  }
  .subscribe-page__gate-items {
    grid-template-columns: 1fr;
  }
}

/* ---- Trial lead-in (promo card above the plan preview) --------------- */
.subscribe-page__trial-lead {
  padding: 34px 44px;
  border-color: rgba(249, 115, 22, 0.45);
}
.subscribe-page__trial-lead-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #F47923;
  border: 1px solid rgba(249, 115, 22, 0.4);
  background: rgba(249, 115, 22, 0.1);
}
.subscribe-page__trial-lead-badge i {
  font-size: 14px;
}
.subscribe-page__trial-lead .subscribe-page__card-text i {
  color: #F47923;
  margin-right: 4px;
}
@media (max-width: 640px) {
  .subscribe-page__trial-lead {
    padding: 28px 22px;
  }
}

@media (max-width: 992px) {
  .subscribe-page__checkout {
    grid-template-columns: 1fr;
  }
  .subscribe-page__checkout-aside {
    position: static;
  }
}
@media (max-width: 576px) {
  .subscribe-page__card {
    padding: 28px 20px;
  }
  .subscribe-page__title {
    font-size: 1.6rem;
  }
  .subscribe-page__steps li {
    max-width: 110px;
  }
}
/* ---- DigiLocker return notice ------------------------------------------ */
.subscribe-page__notice {
  width: 100%;
  max-width: 680px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  border-radius: 12px;
  padding: 13px 18px;
}

.subscribe-page__notice i {
  font-size: 19px;
}

.subscribe-page__notice--ok {
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.08);
}

.subscribe-page__notice--ok i {
  color: #22c55e;
}

.subscribe-page__notice--warn {
  color: #fde68a;
  border: 1px solid rgba(234, 179, 8, 0.4);
  background: rgba(234, 179, 8, 0.08);
}

.subscribe-page__notice--warn i {
  color: #eab308;
}

/* ---- Courses-page upsell banner --------------------------------------- */
.subscribe-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(244, 121, 35, 0.08);
  border: 1px solid rgba(244, 121, 35, 0.45);
  border-radius: 8px;
  padding: 12px 20px;
  margin-bottom: 1.25rem;
}

.subscribe-banner__text {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 14px;
}

.subscribe-banner__text i {
  color: #F47923;
  font-size: 20px;
}

.subscribe-banner__cta {
  color: #F47923;
  border: 1px solid #F47923;
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: 0.2s ease;
}

.subscribe-banner__cta:hover {
  background: #F47923;
  color: #141417;
}

/* ---- Duration slider (Advanced plan term picker) ----------------------- */
.subscribe-page__duration {
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #26262b;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.subscribe-page__duration-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.subscribe-page__duration-label {
  font-size: 13px;
  color: #9a9aa2;
}

.subscribe-page__duration-value {
  font-size: 14px;
  font-weight: 600;
  color: #F47923;
}

.subscribe-page__duration-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, #F47923 0%, #F47923 var(--fill, 0%), #2c2c31 var(--fill, 0%), #2c2c31 100%);
  outline: none;
  cursor: pointer;
}

.subscribe-page__duration-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #F47923;
  border: 3px solid #141417;
  box-shadow: 0 0 0 2px #F47923, 0 4px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}

.subscribe-page__duration-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

.subscribe-page__duration-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #F47923;
  border: 3px solid #141417;
  box-shadow: 0 0 0 2px #F47923, 0 4px 10px rgba(0, 0, 0, 0.45);
}

.subscribe-page__duration-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: #2c2c31;
}

.subscribe-page__duration-slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: #F47923;
}

.subscribe-page__duration-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: #6f6f76;
}

.subscribe-page__duration-ticks span.active {
  color: #F47923;
  font-weight: 600;
}

.subscribe-page__duration-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.subscribe-page__price-original {
  font-size: 14px;
  color: #8a8a91;
  text-decoration: line-through;
}

.subscribe-page__price-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.08);
  border-radius: 999px;
  padding: 2px 8px;
}

.subscribe-page__price-payable {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.subscribe-page__duration-note {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: #9a9aa2;
}

.sna-modal {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sna-modal__card {
  position: relative;
  width: 100%;
  max-width: 560px;
  background-color: rgba(23, 23, 27, 0.72);
  background-image: radial-gradient(ellipse 70% 55% at 50% -10%, rgba(249, 115, 22, 0.14), transparent 65%), linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, 0.1) 15%, rgba(249, 115, 22, 0.5) 30%, #f97316 50%, rgba(249, 115, 22, 0.5) 70%, rgba(249, 115, 22, 0.1) 85%, transparent 100%);
  background-size: 100% 100%, 42% 2px;
  background-position: 50% 0, 50% 0;
  background-repeat: no-repeat, no-repeat;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 44px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.sna-modal__close {
  position: absolute;
  top: 18px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: #f97316;
  font-size: 24px;
  line-height: 1;
  padding: 4px;
}
.sna-modal__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #fff;
  background: linear-gradient(135deg, #fb8c3e 0%, #f97316 55%, #ea6a0a 100%);
  box-shadow: 0 6px 22px rgba(249, 115, 22, 0.45);
}
.sna-modal__title {
  font-size: 24px;
  color: #fff;
  margin: 0 0 12px;
  font-weight: 600;
  line-height: 1.3;
}
.sna-modal__text {
  font-size: 15px;
  color: #9a9aa2;
  margin: 0 0 28px;
  line-height: 1.6;
}
.sna-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.sna-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s ease;
}
.sna-modal__btn--primary {
  background: linear-gradient(180deg, #fb8c3e 0%, #f97316 100%);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35);
}
.sna-modal__btn--primary:hover {
  transform: translateY(-1px);
  color: #fff;
}
.sna-modal__btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.sna-modal__btn--ghost:hover {
  border-color: #f97316;
  color: #f97316;
}
@media (max-width: 600px) {
  .sna-modal__card {
    padding: 30px 20px;
    border-radius: 16px;
  }
  .sna-modal__title {
    font-size: 20px;
  }
  .sna-modal__actions {
    flex-direction: column;
  }
  .sna-modal__btn {
    width: 100%;
  }
}

/* ---- Premium glass polish layer (subscription surfaces) ---- */
.subscribe-page__perks li {
  background: rgba(23, 23, 27, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.subscribe-page__perks li:hover {
  transform: translateY(-2px);
  border-color: rgba(249, 115, 22, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 22px rgba(249, 115, 22, 0.18);
}

.subscribe-page__card,
.subscribe-page__gate,
.payment-result,
.myaccount__subscription-card,
.sna-modal__card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 50px rgba(0, 0, 0, 0.4);
}

.subscribe-page__plan-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.subscribe-page__plan-card:hover {
  transform: translateY(-2px);
  border-color: rgba(249, 115, 22, 0.45);
}

.subscribe-page__plan-card.active {
  border-color: rgba(249, 115, 22, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 32px rgba(249, 115, 22, 0.22);
}

.subscribe-page__duration-slider::-webkit-slider-thumb {
  background: linear-gradient(135deg, #fb8c3e 0%, #f97316 100%);
  box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.18), 0 4px 14px rgba(249, 115, 22, 0.5);
}

.subscribe-page__duration-slider::-moz-range-thumb {
  background: linear-gradient(135deg, #fb8c3e 0%, #f97316 100%);
  box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.18), 0 4px 14px rgba(249, 115, 22, 0.5);
}

@keyframes sna-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.sna-modal__card {
  animation: sna-modal-in 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.sna-modal__icon {
  box-shadow: 0 0 0 8px rgba(249, 115, 22, 0.12), 0 6px 22px rgba(249, 115, 22, 0.45);
}

.payment-result__icon--success {
  box-shadow: 0 0 0 8px rgba(52, 199, 89, 0.08);
}

.payment-result__icon--failed {
  box-shadow: 0 0 0 8px rgba(217, 83, 79, 0.08);
}

.myaccount__subscription-upsell,
.course-popup__subscription,
.course-popup__mobile-subscription,
.hero__btn--subscription {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

@media (max-width: 768px) {
  .subscribe-page__perks li {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }
}
/* ---- Site-wide premium polish: glass card edges, hover lift, modal shell ---- */
.myaccount__panel,
.myaccount__pay-card,
.myaccount__subscription-card,
.course-popup__container,
.subscribe-page__card,
.payment-result,
.sna-modal__card,
.enrollment-popup {
  border-color: rgba(255, 255, 255, 0.09);
}

.myaccount__pay-card,
.course-popup__item {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.myaccount__pay-card:hover {
  transform: translateY(-2px);
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.course-popup__item:hover {
  transform: translateY(-2px);
}

.myaccount__panel,
.myaccount__pay-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.28);
}

.enrollment-popup__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
}

/* Reduced motion: keep the glass, drop the animation. */
@media (prefers-reduced-motion: reduce) {
  .sna-modal__card,
  .enrollment-popup,
  .course-popup__subscription,
  .course-popup__mobile-subscription,
  .hero__btn--subscription,
  .myaccount__subscription-upsell,
  .myaccount__profile-badge--premium {
    animation: none !important;
  }
}
/* Fallback for browsers without backdrop-filter: use solid card surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .myaccount__panel,
  .myaccount__pay-card,
  .myaccount__subscription-card,
  .subscribe-page__card,
  .subscribe-page__plan-card,
  .payment-result,
  .sna-modal__card,
  .enrollment-popup {
    background-color: #17171b !important;
  }
}
.myaccount {
  padding: 0 0 5rem;
  color: #e8e6e5;
  position: relative;
}
@media (max-width: 768px) {
  .myaccount {
    padding: 0 0 3rem;
  }
}
.myaccount .container--wide {
  width: 95%;
  max-width: 1480px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .myaccount .container--wide {
    width: 94%;
  }
}
.myaccount__content {
  margin-top: 1.5rem;
}
@media (max-width: 768px) {
  .myaccount__content {
    margin-top: 1rem;
  }
}
.myaccount__panels {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (max-width: 768px) {
  .myaccount__panels {
    gap: 1rem;
  }
}
.myaccount__placeholder {
  background: #191919;
  border-radius: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: #b3b3b3;
}
.myaccount__placeholder i {
  font-size: 2rem;
  color: #F47923;
  display: inline-block;
  margin-bottom: 0.75rem;
}
.myaccount__placeholder-title {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.myaccount__placeholder-text {
  color: #b3b3b3;
  font-size: 0.9rem;
  margin: 0;
}

.myaccount__header {
  position: relative;
  width: 100%;
  text-align: center;
  padding: 2.75rem 1rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
@media (max-width: 768px) {
  .myaccount__header {
    padding: 1.75rem 1rem;
    margin-bottom: 1rem;
  }
}
.myaccount__header-grid {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.myaccount__header-grid--left {
  left: 0;
}
.myaccount__header-grid--right {
  right: 0;
  transform: scaleX(-1);
}
.myaccount__header-title {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  background-image: linear-gradient(90deg, #1a1a1a -10%, #6f6f6f 10%, #ffffff 50%, #6f6f6f 89%, #1a1a1a 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 768px) {
  .myaccount__header-title {
    font-size: 2rem;
  }
}

.myaccount__profile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0 1rem;
}
@media (max-width: 768px) {
  .myaccount__profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
  }
}
.myaccount__profile-avatar {
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 0.65rem;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.myaccount__profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.myaccount__profile-avatar:hover {
  transform: translateY(-1px);
}
.myaccount__profile-avatar:hover .myaccount__profile-avatar-overlay {
  opacity: 1;
}
.myaccount__profile-avatar:focus-visible {
  outline: 2px solid #F47923;
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .myaccount__profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 0.85rem;
  }
}
.myaccount__profile-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.myaccount__profile-avatar-overlay i {
  font-size: 1.4rem;
  line-height: 1;
}
.myaccount__profile-info {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.myaccount__profile-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
}
@media (max-width: 768px) {
  .myaccount__profile-name {
    font-size: 1.25rem;
  }
}
.myaccount__profile-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  color: #b3b3b3;
  font-size: 0.85rem;
}
@media (max-width: 768px) {
  .myaccount__profile-meta {
    justify-content: center;
  }
}
.myaccount__profile-email {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #b3b3b3;
}
.myaccount__profile-email i {
  color: #b3b3b3;
  font-size: 0.95rem;
}
.myaccount__profile-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 30px;
  background: rgba(244, 121, 35, 0.12);
  color: #F47923;
  font-weight: 500;
  font-size: 0.75rem;
  white-space: nowrap;
  position: relative;
}
.myaccount__profile-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F47923;
  margin-right: 0.4rem;
}

.myaccount__tabs {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0.25rem;
}
.myaccount__tabs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 130px;
  justify-content: space-around;
  overflow-x: auto;
  scrollbar-width: none;
}
.myaccount__tabs-list::-webkit-scrollbar {
  display: none;
}
@media (max-width: 768px) {
  .myaccount__tabs-list {
    gap: 1.25rem;
  }
}
.myaccount__tabs-item {
  flex: 0 0 auto;
}
.myaccount__tabs-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 0.1rem;
  color: #b3b3b3;
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}
.myaccount__tabs-link i {
  font-size: 1.15rem;
  line-height: 1;
}
.myaccount__tabs-link:hover {
  color: #ffffff;
}
@media (max-width: 768px) {
  .myaccount__tabs-link {
    font-size: 0.95rem;
    padding: 0.7rem 0.1rem;
  }
}
.myaccount__tabs-item.is-active .myaccount__tabs-link {
  color: #F47923;
  border-bottom-color: #F47923;
}

.myaccount__panel {
  background: #191919;
  border-radius: 1rem;
}
.myaccount__panel-head {
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
@media (max-width: 768px) {
  .myaccount__panel-head {
    padding: 0.85rem 1rem;
  }
}
.myaccount__panel-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.01em;
}
.myaccount__panel-body {
  padding: 1.5rem;
}
@media (max-width: 768px) {
  .myaccount__panel-body {
    padding: 1rem;
  }
}

.myaccount__form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
}
@media (max-width: 768px) {
  .myaccount__form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
.myaccount__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.myaccount__field--full {
  grid-column: 1/-1;
}
.myaccount__field-label {
  font-size: 0.78rem;
  color: #b3b3b3;
  font-weight: 500;
  margin: 0;
}
.myaccount__field-input {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.55rem;
  color: #ffffff;
  font-size: 0.95rem;
  font-family: inherit;
  padding: 0 0.85rem;
  height: 44px;
  outline: none;
  width: 100%;
  transition: border-color 0.2s ease;
}
.myaccount__field-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.myaccount__field-input:hover:not([readonly]):not(:disabled) {
  border-color: rgba(255, 255, 255, 0.18);
}
.myaccount__field-input:focus:not([readonly]) {
  border-color: #F47923;
}
.myaccount__field-input[readonly], .myaccount__field-input:disabled {
  color: #e8e6e5;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 480px) {
  .myaccount__field-input {
    height: 40px;
    font-size: 0.9rem;
  }
}
.myaccount__field-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: nowrap;
}
.myaccount__field-row--dob .myaccount__custom-select {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 480px) {
  .myaccount__field-row {
    gap: 0.45rem;
  }
}
.myaccount__field-required {
  color: #ff4d4f;
  margin-left: 2px;
}
.myaccount__field--invalid .myaccount__field-input,
.myaccount__field--invalid .myaccount__pill-row,
.myaccount__field--invalid .myaccount__pill-input,
.myaccount__field--invalid .myaccount__select-trigger,
.myaccount__field--invalid .myaccount__file {
  border-color: #ff4d4f;
}
.myaccount__field-error {
  color: #ff4d4f;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}

.myaccount__custom-select {
  position: relative;
  width: 100%;
  cursor: pointer;
  user-select: none;
}
.myaccount__custom-select.open {
  z-index: 200;
}
.myaccount__custom-select[data-disabled=true] {
  cursor: default;
}
.myaccount__custom-select[data-disabled=true] .myaccount__select-trigger {
  cursor: default;
}
.myaccount__custom-select[data-disabled=true] .myaccount__select-trigger:hover {
  border-color: rgba(255, 255, 255, 0.08);
}
.myaccount__custom-select[data-disabled=true] i {
  opacity: 0.45;
}
.myaccount__custom-select.open .myaccount__select-trigger {
  border-color: #F47923;
}
.myaccount__custom-select.open .myaccount__select-trigger i {
  transform: rotate(180deg);
  color: #F47923;
}
.myaccount__custom-select.open .myaccount__options-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.myaccount__select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.85rem;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.05);
  width: 100%;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.myaccount__select-trigger:hover {
  border-color: rgba(244, 121, 35, 0.4);
  background: rgba(255, 255, 255, 0.08);
}
.myaccount__select-trigger span {
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.myaccount__select-trigger i {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}
@media (max-width: 480px) {
  .myaccount__select-trigger {
    height: 40px;
  }
}
.myaccount__options-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(18, 18, 24, 0.82);
  border: 1px solid rgba(244, 121, 35, 0.3);
  border-radius: 0.55rem;
  z-index: 1000;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(244, 121, 35, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  max-height: 240px;
  overflow-y: auto;
  padding: 0.25rem 0;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.myaccount__options-list::-webkit-scrollbar {
  width: 5px;
}
.myaccount__options-list::-webkit-scrollbar-thumb {
  background: rgba(244, 121, 35, 0.3);
  border-radius: 10px;
}
.myaccount__custom-select.open .myaccount__options-list {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.myaccount__option {
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.15s ease;
}
.myaccount__option:hover {
  background-color: rgba(244, 121, 35, 0.15);
  color: #ffffff;
  padding-left: 1.05rem;
}
.myaccount__option.selected {
  color: #f47923;
  background-color: rgba(244, 121, 35, 0.22);
  font-weight: 600;
}
.myaccount__option.selected {
  color: #F47923;
  background-color: rgba(244, 121, 35, 0.06);
}

.myaccount__pill-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}
.myaccount__pill-row--bonded {
  gap: 0;
}
.myaccount__pill-row--bonded .myaccount__pill-prefix {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.myaccount__pill-row--bonded .myaccount__pill-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.myaccount__pill-row--bonded:focus-within:has(.myaccount__pill-input:not([readonly])) .myaccount__pill-prefix,
.myaccount__pill-row--bonded:focus-within:has(.myaccount__pill-input:not([readonly])) .myaccount__pill-input {
  border-color: #F47923;
}
.myaccount__pill-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 0 0.85rem;
  height: 44px;
  background: #1f1f1f;
  color: #b3b3b3;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.55rem;
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .myaccount__pill-prefix {
    min-width: 48px;
    height: 40px;
  }
}
.myaccount__pill-input {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.55rem;
  color: #ffffff;
  font-size: 0.95rem;
  font-family: inherit;
  padding: 0 0.85rem;
  height: 44px;
  outline: none;
  flex: 1 1 auto;
  min-width: 0;
  transition: border-color 0.2s ease;
}
.myaccount__pill-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.myaccount__pill-input:hover:not([readonly]):not(:disabled) {
  border-color: rgba(255, 255, 255, 0.18);
}
.myaccount__pill-input:focus:not([readonly]) {
  border-color: #F47923;
}
.myaccount__pill-input[readonly] {
  cursor: default;
  pointer-events: none;
}
@media (max-width: 480px) {
  .myaccount__pill-input {
    height: 40px;
    font-size: 0.9rem;
  }
}
.myaccount__custom-select--phone {
  flex: 0 0 auto;
  width: 92px;
}
.myaccount__custom-select--phone .myaccount__select-trigger {
  padding: 0 0.6rem;
}
.myaccount__custom-select--phone .myaccount__select-trigger span {
  font-size: 12px;
}
@media (max-width: 480px) {
  .myaccount__custom-select--phone .myaccount__select-trigger span {
    font-size: 10px;
  }
}
.myaccount__custom-select--phone .myaccount__select-trigger i {
  font-size: 1rem;
}
.myaccount__custom-select--phone .myaccount__options-list {
  min-width: 110px;
}
@media (max-width: 480px) {
  .myaccount__custom-select--phone {
    width: 84px;
  }
}

.myaccount__file {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 10px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.55rem;
  flex-wrap: wrap;
  transition: border-color 0.2s ease;
}
.myaccount__file:hover {
  border-color: rgba(255, 255, 255, 0.18);
}
@media (max-width: 480px) {
  .myaccount__file {
    min-height: 40px;
  }
}
.myaccount__file-icon {
  color: #b3b3b3;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
}
.myaccount__file-name {
  color: #ffffff;
  font-size: 0.9rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myaccount__file-edit {
  color: #b3b3b3;
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
}
.myaccount__file-replace {
  appearance: none;
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.35rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.myaccount__file-replace:hover:not(:disabled) {
  border-color: #F47923;
  color: #F47923;
}
.myaccount__file-replace:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.myaccount__edit-actions {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 500;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0;
}
@media (max-width: 768px) {
  .myaccount__edit-actions {
    right: 1rem;
    bottom: 1rem;
    gap: 0.6rem;
  }
}
.myaccount__edit-cancel {
  appearance: none;
  background: rgba(28, 28, 32, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #b3b3b3;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.55rem;
  height: 48px;
  padding: 0 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.myaccount__edit-cancel i {
  font-size: 1.15rem;
  line-height: 1;
}
.myaccount__edit-cancel:hover {
  background: rgba(48, 48, 54, 0.95);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}
.myaccount__edit-cancel[hidden] {
  display: none;
}
.myaccount__edit-toggle {
  appearance: none;
  background: #F47923;
  color: #ffffff;
  border: 0;
  border-radius: 0.65rem;
  min-width: 48px;
  height: 48px;
  padding: 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(244, 121, 35, 0.35);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, padding 0.25s ease, min-width 0.25s ease;
}
.myaccount__edit-toggle i {
  font-size: 1.25rem;
  line-height: 1;
}
.myaccount__edit-toggle span {
  display: none;
  white-space: nowrap;
}
.myaccount__edit-toggle:hover {
  background: rgb(96.162464986%, 53.251846193%, 23.2492997199%);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(244, 121, 35, 0.45);
}
.myaccount__edit-toggle.is-saving, .myaccount__edit-toggle[data-mode=on] {
  padding: 0 1.25rem;
  min-width: 0;
  border-radius: 0.55rem;
}
.myaccount__edit-toggle.is-saving span, .myaccount__edit-toggle[data-mode=on] span {
  display: inline;
}

.myaccount[data-edit-mode=off] .myaccount__field-input,
.myaccount[data-edit-mode=off] .myaccount__pill-input,
.myaccount[data-edit-mode=off] .myaccount__select-trigger {
  cursor: default;
}
.myaccount[data-edit-mode=off] .myaccount__field-input,
.myaccount[data-edit-mode=off] .myaccount__pill-input {
  caret-color: transparent;
}
.myaccount[data-edit-mode=on] .myaccount__field-input,
.myaccount[data-edit-mode=on] .myaccount__pill-input {
  caret-color: #F47923;
}

.myaccount__mc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .myaccount__mc-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
}
.myaccount__mc-intro {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  flex: 1 1 auto;
}
.myaccount__mc-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
@media (max-width: 480px) {
  .myaccount__mc-title {
    font-size: 1.35rem;
  }
}
.myaccount__mc-title-accent {
  color: #F47923;
}
.myaccount__mc-subtitle {
  color: #b3b3b3;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .myaccount__mc-subtitle {
    font-size: 0.85rem;
  }
}
.myaccount__mc-total {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 10px;
  background: #191919;
  border: 1px solid rgba(244, 121, 35, 0.18);
  border-radius: 0.6rem;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .myaccount__mc-total {
    align-self: flex-start;
  }
}
.myaccount__mc-total-icon {
  width: 36px;
  height: 36px;
  border-radius: 0.45rem;
  background: rgba(244, 121, 35, 0.14);
  color: #F47923;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.myaccount__mc-total-icon i {
  font-size: 1.1rem;
  line-height: 1;
}
.myaccount__mc-total-info {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  line-height: 1.1;
}
.myaccount__mc-total-label {
  color: #b3b3b3;
  font-size: 0.78rem;
}
.myaccount__mc-total-count {
  color: #F47923;
  font-size: 1rem;
  font-weight: 700;
}
.myaccount__mc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 380px);
  justify-content: start;
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .myaccount__mc-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
@media (max-width: 768px) {
  .myaccount__mc-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
.myaccount__mc-card {
  background: #191919;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease;
  min-height: 479px;
}
.myaccount__mc-card:hover {
  border-color: rgba(244, 121, 35, 0.25);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .myaccount__mc-card {
    min-height: 0;
  }
}
.myaccount__mc-card-image {
  aspect-ratio: 16/10;
  background: #2a2a2a;
  overflow: hidden;
  margin: 0.85rem 0.85rem 0;
  border-radius: 0.6rem;
  border: 1px solid rgba(244, 121, 35, 0.4);
}
.myaccount__mc-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.myaccount__mc-card-body {
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1 1 auto;
}
.myaccount__mc-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}
@media (max-width: 480px) {
  .myaccount__mc-card-title {
    font-size: 1.1rem;
  }
}
.myaccount__mc-card-instructor {
  color: #b3b3b3;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.4rem;
  padding: 0.35rem 0.6rem;
  align-self: flex-start;
}
.myaccount__mc-card-instructor i {
  color: #F47923;
  font-size: 0.95rem;
}
.myaccount__mc-card-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.15rem;
}
.myaccount__mc-card-progress-bar {
  flex: 1 1 auto;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
}
.myaccount__mc-card-progress-bar span {
  display: block;
  height: 100%;
  background: #F47923;
  border-radius: 99px;
  transition: width 0.4s ease;
}
.myaccount__mc-card-progress-label {
  color: #b3b3b3;
  font-size: 0.78rem;
  white-space: nowrap;
}
.myaccount__mc-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: #b3b3b3;
  font-size: 0.82rem;
  flex-wrap: wrap;
}
.myaccount__mc-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.myaccount__mc-card-meta span i {
  color: #b3b3b3;
  font-size: 0.9rem;
}
.myaccount__mc-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  margin-top: 0.4rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.myaccount__mc-card-cta i {
  font-size: 1.05rem;
  line-height: 1;
}
.myaccount__mc-card-cta--primary {
  background: #F47923;
  color: #ffffff;
}
.myaccount__mc-card-cta--primary:hover {
  background: rgb(96.162464986%, 53.251846193%, 23.2492997199%);
  transform: translateY(-1px);
}
.myaccount__mc-card-cta--success {
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.45);
}
.myaccount__mc-card-cta--success:hover {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.7);
}
.myaccount__mc-card-cta--secondary {
  background: #1A1A1A;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.myaccount__mc-card-cta--secondary:hover {
  border-color: #F47923;
  color: #F47923;
}

.myaccount__pay-subtabs {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .myaccount__pay-subtabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
}
.myaccount__pay-subtab {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(244, 121, 35, 0.5);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.myaccount__pay-subtab:hover {
  background: rgba(244, 121, 35, 0.08);
}
.myaccount__pay-subtab.is-active {
  background: #F47923;
  color: #ffffff;
  border-color: #F47923;
}
@media (max-width: 480px) {
  .myaccount__pay-subtab {
    text-align: center;
    padding: 7px 0;
    font-size: 0.78rem;
    white-space: normal;
    min-width: 0;
  }
}
.myaccount__pay-section {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 2rem;
}
.myaccount__pay-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.myaccount__pay-section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.myaccount__pay-section-title i {
  font-size: 1.2rem;
  line-height: 1;
}
.myaccount__pay-section-title--success {
  color: #22c55e;
}
.myaccount__pay-section-title--success i {
  color: #22c55e;
}
.myaccount__pay-section-title--warning {
  color: #F47923;
}
.myaccount__pay-section-title--warning i {
  color: #F47923;
}
.myaccount__pay-section-title--danger {
  color: #ef4444;
}
.myaccount__pay-section-title--danger i {
  color: #ef4444;
}
.myaccount__pay-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.95rem;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
}
.myaccount__pay-pill--success {
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.1);
}
.myaccount__pay-pill--warning {
  color: #F47923;
  border: 1px solid rgba(244, 121, 35, 0.45);
  background: rgba(244, 121, 35, 0.12);
}
.myaccount__pay-pill--danger {
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
}
.myaccount__pay-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.myaccount__pay-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 1.5rem;
  gap: 0.4rem;
}
@media (max-width: 768px) {
  .myaccount__pay-empty {
    padding: 3.5rem 1rem;
  }
}
.myaccount__pay-empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
@media (max-width: 768px) {
  .myaccount__pay-empty-title {
    font-size: 1.05rem;
  }
}
.myaccount__pay-empty-text {
  font-size: 0.88rem;
  color: #b3b3b3;
  margin: 0;
}
@media (max-width: 768px) {
  .myaccount__pay-empty-text {
    font-size: 0.82rem;
  }
}
.myaccount__pay-card {
  background: #191919;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 1rem;
  width: 65%;
  padding: 1.1rem;
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 3.25rem;
  align-items: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.myaccount__pay-card:hover {
  border-color: rgba(244, 121, 35, 0.18);
}
@media (max-width: 768px) {
  .myaccount__pay-card {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }
}
@media (max-width: 480px) {
  .myaccount__pay-card {
    width: 100%;
  }
}
.myaccount__pay-card-image {
  aspect-ratio: 16/10;
  background: #cccccc;
  border-radius: 0.6rem;
  overflow: hidden;
  width: 180px;
}
.myaccount__pay-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .myaccount__pay-card-image {
    width: 100%;
    aspect-ratio: 16/9;
  }
}
.myaccount__pay-card-main {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}
.myaccount__pay-card-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.25rem;
  row-gap: 0.4rem;
  margin: 0;
}
.myaccount__pay-card-row {
  display: contents;
}
.myaccount__pay-card-row dt {
  color: #b3b3b3;
  font-size: 0.8rem;
  font-weight: 500;
  margin: 0;
}
.myaccount__pay-card-row dd {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.myaccount__pay-card-due {
  color: #ff6b6b !important;
}
.myaccount__pay-card-amount {
  color: #ffffff;
  font-weight: 700;
  margin-right: 0.4rem;
}
.myaccount__pay-card-note {
  color: #b3b3b3;
  font-size: 0.78rem;
  font-weight: 400;
}
.myaccount__pay-card-status {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  justify-self: center;
}
.myaccount__pay-card-status i {
  font-size: 1.6rem;
  line-height: 1;
  color: #ffffff;
}
.myaccount__pay-card-status--success {
  background: #22c55e;
}
.myaccount__pay-card-status--warning {
  background: #F47923;
}
.myaccount__pay-card-status--danger {
  background: #ef4444;
}
@media (max-width: 768px) {
  .myaccount__pay-card-status {
    justify-self: flex-start;
  }
}
@media (max-width: 480px) {
  .myaccount__pay-card-status {
    display: none;
  }
}
.myaccount__pay-card-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .myaccount__pay-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
}
.myaccount__pay-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
@media (max-width: 480px) {
  .myaccount__pay-action {
    padding: 0.5rem 0.5rem;
    font-size: 0.76rem;
    white-space: normal;
    min-width: 0;
    text-align: center;
  }
}
.myaccount__pay-action i {
  font-size: 1rem;
  line-height: 1;
}
.myaccount__pay-action--success-soft {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.myaccount__pay-action--accent-soft {
  color: #F47923;
  background: rgba(244, 121, 35, 0.12);
  border: 1px solid rgba(244, 121, 35, 0.45);
}
.myaccount__pay-action--accent-soft:hover {
  background: rgba(244, 121, 35, 0.18);
}
.myaccount__pay-action--accent-filled {
  color: #ffffff;
  background: #F47923;
  border: 1px solid #F47923;
}
.myaccount__pay-action--accent-filled:hover {
  background: rgb(96.162464986%, 53.251846193%, 23.2492997199%);
}
.myaccount__pay-action--danger-soft {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.myaccount__pay-action--muted {
  color: #b3b3b3;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: default;
  pointer-events: none;
}
.myaccount__pay-action--neutral {
  color: #d1d1d6;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.myaccount__pay-action--neutral:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.myaccount__subscription-card {
  position: relative;
  width: 65%;
  background-color: rgba(23, 23, 27, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  background-image: radial-gradient(ellipse 70% 55% at 50% -10%, rgba(249, 115, 22, 0.12), transparent 65%), linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, 0.1) 15%, rgba(249, 115, 22, 0.5) 30%, #f97316 50%, rgba(249, 115, 22, 0.5) 70%, rgba(249, 115, 22, 0.1) 85%, transparent 100%);
  background-size: 100% 100%, 42% 2px;
  background-position: 50% 0, 50% 0;
  background-repeat: no-repeat, no-repeat;
  border: 1px solid #26262b;
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 1.25rem;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}
@media (max-width: 992px) {
  .myaccount__subscription-card {
    width: 100%;
  }
}
.myaccount__subscription-card .myaccount__pay-card-actions {
  margin-top: 1rem;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.myaccount__subscription .myaccount__pay-section-title i {
  color: #f97316;
}
.myaccount__subscription .myaccount__pay-section-head {
  width: 100%;
}
.myaccount__subscription-upsell {
  position: relative;
  overflow: hidden;
  width: 65%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #fb8c3e 0%, #f97316 55%, #ea6a0a 100%);
  border: none;
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 1.25rem;
  animation: sna-premium-glow 2.6s ease-in-out infinite;
}
@media (max-width: 992px) {
  .myaccount__subscription-upsell {
    width: 100%;
  }
}
.myaccount__subscription-upsell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: sna-premium-sheen 2.6s ease-in-out infinite;
  pointer-events: none;
}
.myaccount__subscription-upsell .myaccount__pay-action--accent-filled {
  background: #ffffff;
  color: #ea6a0a;
}
.myaccount__subscription-upsell-text h4 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
}
.myaccount__subscription-upsell-text p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  margin: 0;
}

.myaccount__profile-badge--premium {
  gap: 5px;
  background: linear-gradient(135deg, #fb8c3e 0%, #f97316 55%, #ea6a0a 100%);
  color: #ffffff;
  overflow: hidden;
  animation: sna-premium-glow 2.6s ease-in-out infinite;
}
.myaccount__profile-badge--premium::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  animation: sna-premium-sheen 2.6s ease-in-out infinite;
  pointer-events: none;
}

.myaccount__pay-card--subscription,
.myaccount__pay-card--compact {
  grid-template-columns: 1fr;
  gap: 1rem;
}

.myaccount__pay-card--subscription {
  border-left: 3px solid rgba(249, 115, 22, 0.65);
}
.myaccount__pay-card--subscription .myaccount__pay-card-main {
  width: 100%;
}
.myaccount__pay-card--subscription .myaccount__pay-card-actions {
  margin-top: 0.75rem;
}

.myaccount__pay-card-subtitle {
  display: block;
  color: #b3b3b3;
  font-size: 0.78rem;
  font-weight: 400;
  margin-top: 2px;
}

.myaccount__pay-section-empty {
  color: #b3b3b3;
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

.myaccount__rf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.myaccount__rf-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 auto;
  min-width: 0;
}
.myaccount__rf-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
}
@media (max-width: 480px) {
  .myaccount__rf-title {
    font-size: 1.2rem;
  }
}
.myaccount__rf-subtitle {
  font-size: 0.88rem;
  color: #b3b3b3;
  margin: 0;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .myaccount__rf-subtitle {
    font-size: 0.82rem;
  }
}
.myaccount__rf-redeem {
  appearance: none;
  background: linear-gradient(135deg, #f47923, #d96210);
  border: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.6rem 1.25rem;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(244, 121, 35, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.myaccount__rf-redeem i {
  font-size: 1.1rem;
  line-height: 1;
  color: #ffffff;
}
.myaccount__rf-redeem:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 25px rgba(244, 121, 35, 0.5);
}
.myaccount__rf-redeem:active {
  transform: translateY(0) scale(0.98);
}
@media (max-width: 768px) {
  .myaccount__rf-redeem {
    align-self: flex-start;
  }
}
.myaccount__rf-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1024px) {
  .myaccount__rf-grid {
    grid-template-columns: 1fr;
  }
}
.myaccount__rf-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.myaccount__rf-card {
  background: rgba(23, 23, 27, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 1.25rem 1.4rem;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.myaccount__rf-card:hover {
  border-color: rgba(244, 121, 35, 0.35);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5), 0 0 25px rgba(244, 121, 35, 0.15);
  transform: translateY(-2px);
}
@media (max-width: 480px) {
  .myaccount__rf-card {
    padding: 1rem 1.1rem;
  }
}
.myaccount__rf-card-label {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.myaccount__rf-card-value {
  color: #f47923;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 15px rgba(244, 121, 35, 0.3);
}
.myaccount__rf-stats {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
@media (max-width: 768px) {
  .myaccount__rf-stats {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas: "code points" "code referral";
  }
}
@media (max-width: 480px) {
  .myaccount__rf-stats {
    grid-template-columns: 1fr;
    grid-template-areas: "code" "points" "referral";
  }
}
@media (max-width: 768px) {
  .myaccount__rf-card--code {
    grid-area: code;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
.myaccount__rf-card--stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 110px;
}
@media (max-width: 768px) {
  .myaccount__rf-card--stat[data-rf-stat=points] {
    grid-area: points;
  }
}
@media (max-width: 768px) {
  .myaccount__rf-card--stat[data-rf-stat=referrals] {
    grid-area: referral;
  }
}
.myaccount__rf-code-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(10, 10, 15, 0.6);
  border: 1px dashed rgba(244, 121, 35, 0.4);
  border-radius: 12px;
  padding: 0.45rem 0.45rem 0.45rem 0.85rem;
  margin-bottom: 0.85rem;
  transition: border-color 0.2s ease;
}
.myaccount__rf-code-row:hover {
  border-color: #f47923;
}
.myaccount__rf-code-value {
  flex: 1 1 auto;
  min-width: 0;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myaccount__rf-copy {
  appearance: none;
  background: #f47923;
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(244, 121, 35, 0.3);
}
.myaccount__rf-copy:hover {
  background: #e06816;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(244, 121, 35, 0.45);
}
.myaccount__rf-copy.is-copied {
  background: #22c55e;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4);
}
.myaccount__rf-invite {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.myaccount__rf-invite-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-weight: 500;
}
.myaccount__rf-socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
}
.myaccount__rf-social {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.myaccount__rf-social i {
  line-height: 1;
}
.myaccount__rf-social:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  filter: brightness(1.15);
}
.myaccount__rf-social--facebook {
  background: #1877f2;
}
.myaccount__rf-social--twitter {
  background: #1da1f2;
}
.myaccount__rf-social--whatsapp {
  background: #25d366;
}
.myaccount__rf-social--linkedin {
  background: #0a66c2;
}
.myaccount__rf-benefits-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.myaccount__rf-benefits-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}
.myaccount__rf-benefits-count {
  color: #f47923;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(244, 121, 35, 0.12);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(244, 121, 35, 0.3);
}
.myaccount__rf-benefits-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.6;
}
.myaccount__rf-howitworks-title {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}
.myaccount__rf-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.myaccount__rf-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  position: relative;
}
.myaccount__rf-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: -1.25rem;
  left: 13px;
  width: 2px;
  background: linear-gradient(180deg, #f47923 0%, rgba(244, 121, 35, 0.2) 100%);
  border-radius: 2px;
}
.myaccount__rf-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(244, 121, 35, 0.15);
  border: 1.5px solid #f47923;
  color: #f47923;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 15px rgba(244, 121, 35, 0.3);
}
.myaccount__rf-step-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.myaccount__rf-step-text strong {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
}
.myaccount__rf-step-text span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.84rem;
  line-height: 1.45;
}
.myaccount__rf-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.myaccount__rf-history-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}
.myaccount__rf-history-subtitle {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  margin: 0 0 1rem;
}
.myaccount__rf-history-tablewrap {
  margin: 0 -0.4rem;
  overflow-x: auto;
}
.myaccount__rf-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.myaccount__rf-history-table th {
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.75rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.myaccount__rf-history-table td {
  color: rgba(255, 255, 255, 0.85);
  padding: 0.95rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.myaccount__rf-history-table tbody tr {
  transition: background 0.2s ease;
}
.myaccount__rf-history-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.myaccount__rf-history-table tbody tr:last-child td {
  border-bottom: 0;
}
.myaccount__rf-history-empty td {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  padding: 2.5rem 1rem !important;
  border-bottom: 0 !important;
}
.myaccount__rf-history-empty td {
  text-align: center;
  color: #b3b3b3;
  padding: 2.5rem 1rem !important;
  border-bottom: 0 !important;
}

.myaccount__cert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.myaccount__cert-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 auto;
  min-width: 0;
}
.myaccount__cert-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
@media (max-width: 480px) {
  .myaccount__cert-title {
    font-size: 1.25rem;
  }
}
.myaccount__cert-title-accent {
  color: #F47923;
}
.myaccount__cert-subtitle {
  font-size: 0.88rem;
  color: #b3b3b3;
  margin: 0;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .myaccount__cert-subtitle {
    font-size: 0.82rem;
  }
}
.myaccount__cert-stats {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .myaccount__cert-stats {
    width: 100%;
  }
}
.myaccount__cert-stat {
  background: #191919;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.55rem;
  padding: 0.55rem 0.95rem;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
@media (max-width: 768px) {
  .myaccount__cert-stat {
    flex: 1 1 0;
    min-width: 0;
  }
}
.myaccount__cert-stat-label {
  color: #b3b3b3;
  font-size: 0.78rem;
}
.myaccount__cert-stat-value {
  color: #F47923;
  font-size: 1rem;
  font-weight: 700;
}
.myaccount__cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .myaccount__cert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .myaccount__cert-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
.myaccount__cert-card {
  background: #191919;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.myaccount__cert-card:hover {
  border-color: rgba(244, 121, 35, 0.18);
  transform: translateY(-2px);
}
.myaccount__cert-card-image {
  position: relative;
  aspect-ratio: 16/10;
  background: #cccccc;
  margin: 0.85rem 0.85rem 0;
  border-radius: 0.55rem;
  overflow: hidden;
}
.myaccount__cert-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.myaccount__cert-card-status {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  border: 0;
  color: #ffffff;
}
.myaccount__cert-card-status i {
  font-size: 1rem;
  line-height: 1;
}
.myaccount__cert-card-status--completed {
  background: #0c3a25;
}
.myaccount__cert-card-status--completed i {
  color: #22c55e;
}
.myaccount__cert-card-status--in-progress {
  background: #2a2a2a;
}
.myaccount__cert-card-status--in-progress i {
  color: #ffffff;
}
.myaccount__cert-card-body {
  padding: 0.95rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.myaccount__cert-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}
.myaccount__cert-card-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.myaccount__cert-card-tags li {
  font-size: 0.72rem;
  color: #b3b3b3;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.25rem 0.55rem;
  border-radius: 0.35rem;
  white-space: nowrap;
}
.myaccount__cert-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  background: #F47923;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  margin-top: 0.25rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.myaccount__cert-card-cta i {
  font-size: 1rem;
  line-height: 1;
}
.myaccount__cert-card-cta:hover {
  background: rgb(96.162464986%, 53.251846193%, 23.2492997199%);
  transform: translateY(-1px);
}
.myaccount button.myaccount__cert-card-cta {
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.myaccount__cert-card-cta--loading, .myaccount__cert-card-cta:disabled {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
  transform: none;
}
.myaccount__cert-generate {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}
.myaccount__cert-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  color: #b3b3b3;
  text-align: center;
}
.myaccount__cert-empty i {
  font-size: 2.5rem;
  opacity: 0.4;
}
.myaccount__cert-empty p {
  margin: 0;
  font-size: 0.95rem;
}
.myaccount__cert-verify {
  margin-top: 2.5rem;
}
.myaccount__cert-verify .certify {
  padding: 0;
  margin: 0;
}
.myaccount__cert-verify .certify__section {
  padding: 0;
}
.myaccount__cert-verify .certify__card {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.myaccount__cert-verify .certify__title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.25rem;
  text-align: left;
}
@media (max-width: 480px) {
  .myaccount__cert-verify .certify__title {
    font-size: 1.25rem;
  }
}
.myaccount__cert-verify .certify__title {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
}
.myaccount__cert-verify .certify__title .highlight {
  color: #F47923;
  background: none;
}
.myaccount__cert-verify .certify__subtitle {
  font-size: 0.85rem;
  color: #b3b3b3;
  margin: 0 0 2rem;
  text-align: left;
}

/* Home-page free-trial banner (shown below the hero for logged-in
   students whose one-time trial is still unclaimed). Uses the premium
   glass tokens from _premium.scss. */
.trial-banner {
  display: flex;
  justify-content: center;
  padding: 0 1.5rem;
  margin: 0 auto 2.5rem;
  max-width: 1200px;
}
.trial-banner__card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  padding: 1.35rem 1.75rem;
  border-radius: 18px;
  background: var(--sna-glass-strong, rgba(23, 23, 27, 0.78));
  border: 1px solid rgba(249, 115, 22, 0.35);
  box-shadow: var(--sna-glow, 0 12px 40px rgba(249, 115, 22, 0.22));
  -webkit-backdrop-filter: var(--sna-blur, blur(16px));
  backdrop-filter: var(--sna-blur, blur(16px));
}
.trial-banner__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(249, 115, 22, 0.14);
}
.trial-banner__icon i {
  font-size: 1.9rem;
  color: var(--sna-accent, #f47923);
}
.trial-banner__info {
  flex: 1;
  min-width: 0;
}
.trial-banner__title {
  margin: 0 0 0.3rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}
.trial-banner__title span {
  color: var(--sna-accent, #f47923);
}
.trial-banner__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.trial-banner__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 12px;
  background: var(--sna-grad, linear-gradient(135deg, #fb8c3e 0%, #f97316 55%, #ea6a0a 100%));
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.trial-banner__cta:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sna-glow, 0 12px 40px rgba(249, 115, 22, 0.22));
}
@media (max-width: 767px) {
  .trial-banner__card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .trial-banner__cta {
    width: 100%;
    justify-content: center;
  }
}

/* On a phone the hero alone is taller than the viewport, so a banner placed
   after it is invisible until you scroll — the offer may as well not exist.
   Hoist it above the hero for small screens only; .section-main is an
   unstyled wrapper and .bg-img is absolutely positioned, so nothing else
   moves. Desktop keeps the hero first. */
@media (max-width: 767px) {
  .section-main {
    display: flex;
    flex-direction: column;
  }
  .section-main > .trial-banner {
    order: -1;
    margin-top: 1.5rem;
  }
}

.contact {
  padding: 64px 0 80px 0 !important;
  min-height: 100vh;
  background-color: #0a0a0a;
}
.contact__container {
  width: 100%;
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 768px) {
  .contact__container {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.contact__container {
  max-width: 1800px;
}
@media (min-width: 1024px) {
  .contact__container {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
.contact__header {
  margin-bottom: 50px;
}
.contact__title {
  font-size: 3.2rem;
  font-weight: 400;
  color: #e8e6e5;
  margin: 0 0 16px 0;
  line-height: 1.2;
}
.contact__title-highlight {
  color: #F47923;
}
.contact__subtitle {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-weight: 400;
}
.contact__content {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 50px;
  align-items: stretch;
}
.contact__info-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}
.contact__info-card {
  background: rgba(18, 18, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.contact__info-card:hover {
  border-color: rgba(244, 121, 35, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(244, 121, 35, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.contact__info-icon {
  margin-bottom: 10px;
  align-self: center;
}
.contact__info-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: 0.9;
}
.contact__info-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e8e6e5;
  margin: 0 0 4px 0;
}
.contact__info-text {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.contact__form-wrapper {
  background: rgba(18, 18, 24, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 44px;
  width: 100%;
  min-width: 0;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.contact__form-title {
  font-size: 2.2rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 30px 0;
}
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
  margin-bottom: 20px;
}
.contact__form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}
.contact__form-label {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.contact__form-required {
  color: #ff7b23;
  font-weight: 600;
}
.contact__form-input {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px 18px;
  color: #e8e6e5;
  font-size: 1rem;
  font-family: "Ubuntu", sans-serif;
  outline: none;
  transition: all 0.2s ease;
}
.contact__form-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.contact__form-input:focus {
  border-color: rgba(255, 255, 255, 0.2);
}
.contact__form-input:-webkit-autofill, .contact__form-input:-webkit-autofill:hover, .contact__form-input:-webkit-autofill:focus, .contact__form-input:-webkit-autofill:active {
  -webkit-text-fill-color: #e8e6e5 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background-color 5000s ease-in-out 0s;
}
.contact__form-input--phone {
  border-radius: 0 12px 12px 0;
  flex: 1;
  border-left: none;
  min-width: 0;
}
.contact__form-input--invalid, .contact__form-input--invalid:focus {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 1px rgba(255, 77, 79, 0.25);
}
.contact__form-group--invalid .contact__form-label {
  color: #ff7875;
}
.contact__form-phone {
  display: flex;
  align-items: stretch;
  width: 100%;
  position: relative;
  overflow: visible;
}
.contact__custom-select {
  position: relative;
  width: 100%;
  cursor: pointer;
}
.contact__custom-select--invalid .contact__select-trigger {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 1px rgba(255, 77, 79, 0.25);
}
.contact__custom-select.open .contact__select-trigger {
  border-color: rgba(255, 255, 255, 0.2);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.contact__custom-select.open .contact__select-trigger i {
  transform: rotate(180deg);
}
.contact__custom-select.open .contact__options-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.contact__custom-select--country {
  width: 90px;
  flex-shrink: 0;
}
.contact__custom-select--country .contact__select-trigger {
  border-radius: 12px 0 0 12px;
  border-right: none;
  padding: 16px 10px;
}
.contact__custom-select--country .contact__select-trigger span {
  font-size: 0.8rem;
}
.contact__custom-select--country.open .contact__select-trigger {
  border-bottom-left-radius: 0;
}
.contact__custom-select--country .contact__options-list {
  width: 100px;
}
.contact__select-trigger {
  width: 100%;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
  position: relative;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.contact__select-trigger span {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 480px) {
  .contact__select-trigger span {
    font-size: 0.9rem;
  }
}
.contact__select-trigger i {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}
.contact__select-trigger:hover {
  border-color: rgba(244, 121, 35, 0.4);
  background: rgba(255, 255, 255, 0.08);
}
.contact__custom-select.open .contact__select-trigger {
  border-color: #f47923;
  box-shadow: 0 0 15px rgba(244, 121, 35, 0.25);
}
.contact__options-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(18, 18, 24, 0.82);
  border: 1px solid rgba(244, 121, 35, 0.3);
  border-radius: 12px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 250px;
  overflow-y: auto;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(244, 121, 35, 0.12);
}
.contact__options-list::-webkit-scrollbar {
  width: 5px;
}
.contact__options-list::-webkit-scrollbar-thumb {
  background: rgba(244, 121, 35, 0.3);
  border-radius: 10px;
}
.contact__option {
  padding: 12px 18px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.15s ease;
  cursor: pointer;
}
@media (max-width: 480px) {
  .contact__option {
    font-size: 0.85rem;
    padding: 10px 15px;
  }
}
.contact__option:hover {
  background-color: rgba(244, 121, 35, 0.15);
  color: #ffffff;
  padding-left: 24px;
}
.contact__option.selected {
  color: #f47923;
  background-color: rgba(244, 121, 35, 0.22);
  font-weight: 600;
}
.contact__option:first-child {
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}
.contact__option:last-child {
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
}
.contact__option:last-child {
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
}
.contact__option--disabled {
  color: rgba(255, 255, 255, 0.35);
  cursor: not-allowed;
  font-style: italic;
}
.contact__option--disabled:hover {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.35);
  padding-left: 18px;
}
.contact__form-status {
  min-height: 1.25rem;
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}
.contact__form-status--error {
  color: #ff7875;
}
.contact__form-status--success {
  color: #52c41a;
}
.contact__form-group--recaptcha {
  margin-top: 4px;
}
.contact__form-group--recaptcha .g-recaptcha {
  display: inline-block;
}
@media (max-width: 480px) {
  .contact__form-group--recaptcha .g-recaptcha {
    transform: scale(0.9);
    transform-origin: left top;
  }
}
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.contact__form-submit {
  background-color: #ff7b23;
  border: none;
  border-radius: 12px;
  padding: 18px 24px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  font-family: "Ubuntu", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 12px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.contact__form-submit:hover {
  background-color: rgb(100%, 42.2352941176%, 3.7254901961%);
  box-shadow: 0 4px 20px rgba(255, 123, 35, 0.4);
  transform: translateY(-2px);
}
.contact__form-submit[disabled] {
  cursor: not-allowed;
  opacity: 0.75;
  transform: none;
  box-shadow: none;
}
.contact__form-submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: contact-spin 0.8s linear infinite;
}
.contact__form-submit--loading .contact__form-submit-spinner {
  display: inline-block;
}
@media (max-width: 1024px) {
  .contact {
    padding: 50px 0 60px;
  }
  .contact__title {
    font-size: 2.6rem;
  }
  .contact__content {
    grid-template-columns: 220px 1fr;
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .contact {
    padding: 40px 0 50px;
  }
  .contact__header {
    margin-bottom: 40px;
  }
  .contact__title {
    font-size: 2.2rem;
  }
  .contact__content {
    grid-template-columns: 200px 1fr;
    gap: 30px;
    align-items: stretch;
  }
  .contact__info-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
  }
  .contact__form-wrapper {
    max-width: 100%;
    padding: 24px;
  }
}
@media (max-width: 600px) {
  .contact__title {
    font-size: 1.9rem;
  }
  .contact__content {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
  .contact__form-wrapper {
    order: 1;
    padding: 20px;
  }
  .contact__info-cards {
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    height: auto;
  }
  .contact__form-row {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
}
@media (max-width: 480px) {
  .contact {
    padding: 30px 0 40px;
  }
  .contact__title {
    font-size: 1.7rem;
  }
  .contact__subtitle {
    font-size: 0.9rem;
  }
  .contact__form-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .contact__info-card {
    padding: 12px 10px;
  }
  .contact__info-icon {
    margin-bottom: 6px;
  }
  .contact__info-icon img {
    width: 22px;
    height: 22px;
  }
  .contact__info-title {
    font-size: 0.78rem;
  }
  .contact__info-text {
    font-size: 0.68rem;
  }
}

@keyframes contact-spin {
  to {
    transform: rotate(360deg);
  }
}
.certify {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 24px;
}
.certify__section {
  text-align: center;
  margin-bottom: 40px;
}
.certify__badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(244, 121, 35, 0.12);
  border: 1px solid rgba(244, 121, 35, 0.35);
  color: #f47923;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 18px;
  box-shadow: 0 0 20px rgba(244, 121, 35, 0.15);
}
.certify__title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: #ffffff;
  letter-spacing: -0.5px;
}
.certify__title .highlight {
  color: #f47923;
  background: linear-gradient(135deg, #fb8c3e 0%, #f47923 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.certify__subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 36px;
}
.certify__card {
  background: rgba(18, 18, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 44px;
  width: 100%;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 30px rgba(244, 121, 35, 0.05);
  position: relative;
  overflow: hidden;
}
.certify__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(244, 121, 35, 0.4) 30%, #f47923 50%, rgba(244, 121, 35, 0.4) 70%, transparent 100%);
}
.certify__label {
  display: block;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
}
.certify__input-group {
  position: relative;
  width: 100%;
  margin-bottom: 24px;
}
.certify__input-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: #f47923;
  pointer-events: none;
}
.certify__input {
  width: 100%;
  padding: 18px 20px 18px 54px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: #ffffff;
  font-size: 1.05rem;
  font-family: "Ubuntu", sans-serif;
  transition: all 0.25s ease;
}
.certify__input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.certify__input:focus {
  outline: none;
  border-color: #f47923;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 24px rgba(244, 121, 35, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.certify__btn {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #fb8c3e 0%, #f97316 55%, #ea6a0a 100%);
  border: none;
  border-radius: 16px;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: "Ubuntu", sans-serif;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(249, 115, 22, 0.35);
}
.certify__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(249, 115, 22, 0.5);
  background: linear-gradient(135deg, #ff974d 0%, #fa7c23 55%, #f07414 100%);
}
.certify__btn[disabled] {
  cursor: not-allowed;
  opacity: 0.75;
  transform: none;
}
.certify__btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: certify-spin 0.8s linear infinite;
}
.certify__btn--loading .certify__btn-spinner {
  display: inline-block;
}
.certify__btn--loading .certify__btn-label {
  opacity: 0.8;
}
.certify__result {
  margin-top: 40px;
}
.certify__result--hidden {
  display: none;
}
.certify__result {
  position: relative;
}
/* ── Confetti Celebration (adapted from codepen.io/zer0kool/pen/KjZWRW) ── */
.certify__confetti {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 9999;
  pointer-events: none;
}
.certify__confetti-piece {
  position: absolute;
  width: 10px;
  height: 30px;
  background: #ffd300;
  top: 0;
  opacity: 0;
}
.certify__result--animated .certify__confetti-piece {
  animation-name: certConfettiRain;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.certify__confetti-piece:nth-child(1) {
  left: 7%;
  transform: rotate(-40deg);
  animation-delay: 182ms;
  animation-duration: 1116ms;
}
.certify__confetti-piece:nth-child(2) {
  left: 14%;
  transform: rotate(4deg);
  animation-delay: 161ms;
  animation-duration: 1076ms;
}
.certify__confetti-piece:nth-child(3) {
  left: 21%;
  transform: rotate(-51deg);
  animation-delay: 481ms;
  animation-duration: 1103ms;
}
.certify__confetti-piece:nth-child(4) {
  left: 28%;
  transform: rotate(61deg);
  animation-delay: 334ms;
  animation-duration: 708ms;
}
.certify__confetti-piece:nth-child(5) {
  left: 35%;
  transform: rotate(-52deg);
  animation-delay: 302ms;
  animation-duration: 776ms;
}
.certify__confetti-piece:nth-child(6) {
  left: 42%;
  transform: rotate(38deg);
  animation-delay: 180ms;
  animation-duration: 1168ms;
}
.certify__confetti-piece:nth-child(7) {
  left: 49%;
  transform: rotate(11deg);
  animation-delay: 395ms;
  animation-duration: 1200ms;
}
.certify__confetti-piece:nth-child(8) {
  left: 56%;
  transform: rotate(49deg);
  animation-delay: 14ms;
  animation-duration: 887ms;
}
.certify__confetti-piece:nth-child(9) {
  left: 63%;
  transform: rotate(-72deg);
  animation-delay: 149ms;
  animation-duration: 805ms;
}
.certify__confetti-piece:nth-child(10) {
  left: 70%;
  transform: rotate(10deg);
  animation-delay: 351ms;
  animation-duration: 1059ms;
}
.certify__confetti-piece:nth-child(11) {
  left: 77%;
  transform: rotate(4deg);
  animation-delay: 307ms;
  animation-duration: 1132ms;
}
.certify__confetti-piece:nth-child(12) {
  left: 84%;
  transform: rotate(42deg);
  animation-delay: 464ms;
  animation-duration: 776ms;
}
.certify__confetti-piece:nth-child(13) {
  left: 91%;
  transform: rotate(-72deg);
  animation-delay: 429ms;
  animation-duration: 818ms;
}
.certify__confetti-piece:nth-child(odd) {
  background: #f47923;
}
.certify__confetti-piece:nth-child(even) {
  z-index: 1;
}
.certify__confetti-piece:nth-child(4n) {
  width: 5px;
  height: 12px;
  animation-duration: 2000ms;
}
.certify__confetti-piece:nth-child(3n) {
  width: 3px;
  height: 10px;
  animation-duration: 2500ms;
  animation-delay: 1000ms;
}
.certify__confetti-piece:nth-child(4n-7) {
  background: #4ade80;
}
@keyframes certConfettiRain {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}
.certify__result-card {
  background: rgba(18, 18, 24, 0.82);
  border: 1px solid rgba(244, 121, 35, 0.3);
  border-radius: 24px;
  padding: 44px;
  text-align: left;
  width: 100%;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 40px rgba(244, 121, 35, 0.12);
  position: relative;
  overflow: hidden;
}
.certify__scan-beam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #f47923 30%, #4ade80 50%, #f47923 70%, transparent 100%);
  box-shadow: 0 0 16px #4ade80, 0 0 32px #f47923;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.certify__success-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.certify__success-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
}
.certify__checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 3;
  stroke: #4ade80;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #4ade80;
  filter: drop-shadow(0 0 12px rgba(74, 222, 128, 0.4));
}
.certify__result--animated .certify__checkmark {
  animation: certCheckmarkFill 0.4s ease-in-out 0.4s forwards, certCheckmarkScale 0.3s ease-in-out 0.8s forwards;
}
.certify__checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke: #4ade80;
  fill: none;
}
.certify__result--animated .certify__checkmark-circle {
  animation: certCheckmarkStroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.certify__checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #4ade80;
}
.certify__result--animated .certify__checkmark-check {
  animation: certCheckmarkStroke 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}

.certify__result--animated .certify__result-card {
  animation: certCardPop 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.certify__result--animated .certify__scan-beam {
  animation: certScanSweep 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.certify__result--animated .certify__result-badge {
  animation: certBadgeBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s backwards;
}
.certify__result--animated .certify__result-row:nth-child(1) {
  animation: certRowSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}
.certify__result--animated .certify__result-row:nth-child(2) {
  animation: certRowSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.23s backwards;
}
.certify__result--animated .certify__result-row:nth-child(3) {
  animation: certRowSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.31s backwards;
}
.certify__result--animated .certify__result-row:nth-child(4) {
  animation: certRowSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.39s backwards;
}
.certify__result--animated .certify__result-row:nth-child(5) {
  animation: certRowSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.47s backwards;
}
.certify__result-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0;
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.2);
}
.certify__result-badge i {
  font-size: 1.2rem;
}
.certify__result-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.certify__result-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  transition: all 0.2s ease;
}
.certify__result-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(244, 121, 35, 0.25);
}
.certify__result-key {
  flex: 0 0 190px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.92rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.certify__result-key i {
  color: #f47923;
  font-size: 1.1rem;
}
.certify__result-value {
  flex: 1;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  word-break: break-word;
}

@keyframes certCardPop {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes certScanSweep {
  0% {
    top: 0%;
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}
@keyframes certBadgeBounce {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  70% {
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes certRowSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-16px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.certify__error {
  margin-top: 40px;
}
.certify__error--hidden {
  display: none;
}
.certify__error-card {
  background: rgba(18, 18, 24, 0.82);
  border: 1px solid rgba(255, 77, 79, 0.3);
  border-radius: 24px;
  padding: 50px 40px;
  text-align: center;
  width: 100%;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Responsive Breakpoints for Certificate Verification */
@media (max-width: 768px) {
  .certify {
    padding: 36px 16px;
  }
  .certify__title {
    font-size: 2.2rem;
  }
  .certify__subtitle {
    font-size: 0.95rem;
    margin-bottom: 24px;
  }
  .certify__card,
  .certify__result-card,
  .certify__error-card {
    padding: 28px 20px;
    border-radius: 20px;
  }
  .certify__result-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px;
  }
  .certify__result-key {
    flex: none;
    width: 100%;
    font-size: 0.85rem;
  }
  .certify__result-value {
    font-size: 0.95rem;
    padding-left: 26px;
  }
}
@media (max-width: 480px) {
  .certify {
    padding: 24px 12px;
  }
  .certify__title {
    font-size: 1.8rem;
  }
  .certify__badge-tag {
    font-size: 0.72rem;
    padding: 5px 12px;
  }
  .certify__input {
    padding: 14px 16px 14px 44px;
    font-size: 0.95rem;
  }
  .certify__input-icon {
    left: 14px;
    font-size: 1.1rem;
  }
  .certify__btn {
    padding: 14px;
    font-size: 0.95rem;
  }
}
.certify__browser {
  width: 160px;
  height: 130px;
  background: linear-gradient(180deg, #2c2c2c 0%, #141414 100%);
  border: 1px solid #3a3a3a;
  border-radius: 1rem;
  margin: 0 auto 30px;
  overflow: hidden;
  position: relative;
}
.certify__browser-dots {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  justify-content: center;
}
.certify__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #4a4a4a;
}
.certify__error-code {
  font-size: 56px;
  font-weight: 300;
  color: #4a4a4a;
  margin-top: 5px;
}
.certify__error-title {
  font-size: 28px;
  font-weight: 400;
  color: #cfcfcf;
  margin-bottom: 12px;
}
.certify__error-subtitle {
  font-size: 15px;
  color: #555;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .certify {
    padding: 30px 16px;
  }
  .certify__title {
    font-size: 32px;
  }
  .certify__subtitle {
    font-size: 16px;
  }
  .certify__card, .certify__error-card, .certify__result-card {
    padding: 20px 16px;
  }
  .certify__error-title {
    font-size: 22px;
  }
  .certify__result-row {
    flex-direction: column;
    gap: 4px;
  }
  .certify__result-key {
    flex: unset;
  }
}
@media (max-width: 480px) {
  .certify__title {
    font-size: 28px;
  }
  .certify__input::placeholder {
    font-size: 13px;
  }
  .certify__browser {
    width: 140px;
    height: 110px;
  }
  .certify__error-code {
    font-size: 44px;
  }
}

@keyframes certify-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ============================================================
   SNA PREMIUM DESIGN SYSTEM
   Site-wide glassmorphic redesign. Loaded last so it refines
   every card / section / control into one premium language.
   ============================================================ */
:root {
  --sna-accent: #f47923;
  --sna-accent-2: #f97316;
  --sna-grad: linear-gradient(135deg, #fb8c3e 0%, #f97316 55%, #ea6a0a 100%);
  --sna-glass: rgba(23, 23, 27, 0.6);
  --sna-glass-strong: rgba(23, 23, 27, 0.78);
  --sna-glass-border: rgba(255, 255, 255, 0.09);
  --sna-glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --sna-blur: blur(16px) saturate(135%);
  --sna-shadow: 0 10px 34px rgba(0, 0, 0, 0.34);
  --sna-shadow-hover: 0 18px 46px rgba(0, 0, 0, 0.44);
  --sna-glow: 0 12px 40px rgba(249, 115, 22, 0.22);
}

/* ---------- 1. Universal glass card recipe ---------- */
.stat-card,
.instructor-card,
.feature-card,
.large-card,
.learning-card,
.img-card,
.review-card,
.dashboard__course-card,
.contact__info-card,
.contact__form-wrapper,
.certify__card,
.certify__result-card,
.certify__error-card,
.footer-card,
.course-idv__mentor-card,
.course-idv__topics-content,
.course-idv__benefits-card {
  background: var(--sna-glass) !important;
  -webkit-backdrop-filter: var(--sna-blur);
  backdrop-filter: var(--sna-blur);
  border: 1px solid var(--sna-glass-border) !important;
  box-shadow: var(--sna-glass-hi), var(--sna-shadow);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}

/* Hover lift + orange glow for interactive cards */
.stat-card:hover,
.instructor-card:hover,
.img-card:hover,
.review-card:hover,
.dashboard__course-card:hover,
.contact__info-card:hover,
.certify__card:hover,
.course-idv__mentor-card:hover {
  transform: translateY(-5px);
  border-color: rgba(249, 115, 22, 0.5) !important;
  box-shadow: var(--sna-glass-hi), var(--sna-shadow-hover), var(--sna-glow);
}

/* ---------- 2. Section headings ---------- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: var(--sna-accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- 3. Stat numbers → gradient text ---------- */
.stat-card h2,
.stat-card h3,
.stat-number,
.review-stats__number {
  background: var(--sna-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 4. Course-track filter pills ---------- */
.dashboard__filter-btn {
  background: var(--sna-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--sna-glass-border);
  border-radius: 999px;
  transition: all 0.22s ease;
}

.dashboard__filter-btn:hover {
  border-color: rgba(249, 115, 22, 0.55);
}

.dashboard__filter-btn--active {
  background: var(--sna-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.4);
}

/* ---------- 5. Course-card image framing ---------- */
.dashboard__course-image,
.review-card__avatar,
.img-card {
  border-radius: 14px;
  overflow: hidden;
}

.img-card img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.img-card:hover img {
  transform: scale(1.06);
}

/* ---------- 6. Buttons ---------- */
.cta-btn,
.opportunities__cta .btn,
.course-view-btn,
.dashboard__course-card .view-btn {
  background: var(--sna-grad);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-btn:hover,
.opportunities__cta .btn:hover,
.course-view-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(249, 115, 22, 0.5);
}

/* ---------- 7. Contact form → matches the enrollment-form field style
   (solid dark field, #333 border, 8px radius, clean orange focus) ---------- */
.contact__form-input,
.contact__form select,
.contact__form textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.contact__form-input::placeholder,
.contact__form textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

.contact__form-input:focus,
.contact__form select:focus,
.contact__form textarea:focus {
  border-color: #f47923 !important;
  box-shadow: 0 0 15px rgba(244, 121, 35, 0.25) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  outline: none;
}

.contact__form-phone {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.contact__form-phone .contact__select-trigger {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
}

.contact__form-phone .contact__form-input--phone {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 0 8px 8px 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

.contact__form-phone .contact__form-input--phone:focus {
  border-color: #f47923 !important;
}

select option {
  background-color: #121218 !important;
  color: #ffffff !important;
}

/* ---------- 8. Testimonial quote card ----------
   The slides stack absolutely and mask a bleed element behind them, so they
   must stay near-opaque (a light glass, not a see-through one). */
.quote-1,
.quote-2 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ---------- 9. Alumni brand logos: plain, no chip background ---------- */
/* ---------- 10. "Find Your Right Course" CTA banner ----------
   No overflow clipping: the illustration is meant to spill past the edge. */
.opportunities__cta {
  border-radius: 22px;
  box-shadow: var(--sna-glow), var(--sna-shadow);
}

/* ---------- 11. Footer polish ---------- */
.footer-card {
  border-radius: 18px;
}

/* ---------- 12. Motion / accessibility fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .feature-card,
  .learning-card,
  .img-card,
  .review-card,
  .dashboard__course-card,
  .opportunities__cta::after,
  .img-card img {
    transition: none !important;
    animation: none !important;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stat-card,
  .instructor-card,
  .feature-card,
  .large-card,
  .learning-card,
  .img-card,
  .review-card,
  .dashboard__course-card,
  .contact__info-card,
  .contact__form-wrapper,
  .certify__card,
  .footer-card,
  .quote,
  .quote-1,
  .quote-2 {
    background: #17171b !important;
  }
}
/* ---------- 13. Responsive card grids ---------- */
@media (max-width: 768px) {
  .feature-cards-grid,
  .learning-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .stat-column {
    gap: 12px !important;
  }
}
@media (max-width: 480px) {
  .feature-cards-grid,
  .learning-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ---------- 14. Hero button row wraps on mobile (3 CTAs) ---------- */
@media (max-width: 600px) {
  .hero__btn-container {
    flex-wrap: wrap;
    gap: 10px;
  }
  .hero__btn-container .hero__btn,
  .hero__btn-container button,
  .hero__btn-container .hero__btn--subscription {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
  .hero__btn-arrow {
    display: none !important;
  }
}
/* ---------- 16. User account dropdown → dark glassmorphic ---------- */
.site-header .main-nav .nav-item .dropdown .dropdown-menu-body,
.site-header .main-nav .nav-item.dropdown .dropdown-menu {
  background: rgba(20, 20, 24, 0.7) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top: 2px solid #F47923 !important;
}

.site-header .main-nav .nav-item .dropdown .dropdown-menu-body .d-item:hover,
.site-header .main-nav .nav-item.dropdown .dropdown-menu a:hover {
  background: rgba(249, 115, 22, 0.1) !important;
  color: #f97316 !important;
}

/* ---------- 17. Course-detail "Topics Covered" card ---------- */
.course-idv__topics-content {
  /* Drop the full-bleed band; become a self-contained glass card. */
  box-shadow: var(--sna-glass-hi), var(--sna-shadow) !important;
  clip-path: none !important;
  background: var(--sna-glass) !important;
  -webkit-backdrop-filter: var(--sna-blur);
  backdrop-filter: var(--sna-blur);
  border: 1px solid var(--sna-glass-border) !important;
  border-radius: 18px;
  padding: 1.75rem !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

@media (max-width: 900px) {
  .course-idv__topics-content {
    grid-template-columns: 1fr;
  }
}
.course-idv__topics-content .topic-item {
  align-items: flex-start;
  gap: 0.85rem !important;
  padding: 0.95rem 1.05rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.course-idv__topics-content .topic-item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(249, 115, 22, 0.4);
}

.course-idv__topics-content .topic-item::before {
  content: "" !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  background-color: #f97316 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px !important;
  margin-top: 1px !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
}

.course-idv__topics-content .topic-item p {
  color: #d7d7db !important;
  line-height: 1.55 !important;
}

/* ---------- 18. Contact custom-selects match the glassmorphic field style ---------- */
.contact__custom-select:not(.contact__custom-select--country) .contact__select-trigger {
  min-height: 54px !important;
  height: 54px !important;
  padding: 0 18px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

.contact__custom-select:not(.contact__custom-select--country).open .contact__select-trigger {
  border-color: #f47923 !important;
  box-shadow: 0 0 15px rgba(244, 121, 35, 0.25) !important;
}

/* ---------- 19. My Account dropdowns: glassmorphic floating options list ---------- */
.myaccount__options-list {
  background: rgba(18, 18, 24, 0.82) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(244, 121, 35, 0.3) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(244, 121, 35, 0.12) !important;
}

.myaccount__panel:has(.myaccount__custom-select.open) {
  position: relative;
  z-index: 60;
}

.myaccount__custom-select.open {
  position: relative;
  z-index: 61;
}

/* ---------- 20. Payment history cards — premium redesign ---------- */
.myaccount__pay-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 1.25rem 1.4rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* Orange accent rail down the left edge */
.myaccount__pay-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #fb8c3e, #f97316);
  opacity: 0.85;
}

.myaccount__pay-card:hover {
  transform: translateY(-3px);
  border-color: rgba(249, 115, 22, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px rgba(0, 0, 0, 0.42), 0 0 34px rgba(249, 115, 22, 0.14);
}

/* Framed thumbnail */
.myaccount__pay-card-image {
  background: #0e0e10 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.myaccount__pay-card-image img {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.myaccount__pay-card:hover .myaccount__pay-card-image img {
  transform: scale(1.05);
}

/* Detail rows: a touch more breathing room */
.myaccount__pay-card-row {
  padding: 0.15rem 0;
}

/* Premium Futuristic Glassmorphic Status Badges */
.myaccount__pay-card-status {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.myaccount__pay-card-status:hover {
  transform: scale(1.08);
}
.myaccount__pay-card-status i {
  font-size: 1.5rem !important;
  line-height: 1 !important;
  transition: all 0.3s ease !important;
}

.myaccount__pay-card-status--success {
  background: rgba(34, 197, 94, 0.12) !important;
  border: 1.5px solid rgba(74, 222, 128, 0.5) !important;
  box-shadow: 0 0 25px rgba(74, 222, 128, 0.25), inset 0 0 15px rgba(74, 222, 128, 0.15) !important;
}
.myaccount__pay-card-status--success i {
  color: #4ade80 !important;
  filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.8));
}
.myaccount__pay-card-status--success:hover {
  box-shadow: 0 0 35px rgba(74, 222, 128, 0.45), inset 0 0 20px rgba(74, 222, 128, 0.25) !important;
  border-color: #4ade80 !important;
}

.myaccount__pay-card-status--warning {
  background: rgba(244, 121, 35, 0.12) !important;
  border: 1.5px solid rgba(244, 121, 35, 0.5) !important;
  box-shadow: 0 0 25px rgba(244, 121, 35, 0.25), inset 0 0 15px rgba(244, 121, 35, 0.15) !important;
}
.myaccount__pay-card-status--warning i {
  color: #f47923 !important;
  filter: drop-shadow(0 0 8px rgba(244, 121, 35, 0.8));
}
.myaccount__pay-card-status--warning:hover {
  box-shadow: 0 0 35px rgba(244, 121, 35, 0.45), inset 0 0 20px rgba(244, 121, 35, 0.25) !important;
  border-color: #f47923 !important;
}

.myaccount__pay-card-status--danger {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.25), inset 0 0 15px rgba(239, 68, 68, 0.15) !important;
}
.myaccount__pay-card-status--danger i {
  color: #ef4444 !important;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.8));
}
.myaccount__pay-card-status--danger:hover {
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.45), inset 0 0 20px rgba(239, 68, 68, 0.25) !important;
  border-color: #ef4444 !important;
}

/* Action buttons & status badges → pill style */
.myaccount__pay-action {
  padding: 0.55rem 1.1rem !important;
  border-radius: 9px !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

span.myaccount__pay-action {
  cursor: default !important;
  pointer-events: none !important;
  user-select: none !important;
}

.myaccount__pay-action--success-soft {
  background: rgba(52, 199, 89, 0.12) !important;
  border: 1px solid rgba(52, 199, 89, 0.4) !important;
  color: #4ade80 !important;
}

.myaccount__pay-action--danger-soft {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  color: #ef4444 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

button.myaccount__pay-action,
a.myaccount__pay-action,
.myaccount__pay-action[role="button"] {
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

button.myaccount__pay-action:hover,
a.myaccount__pay-action:hover,
.myaccount__pay-action[role="button"]:hover {
  transform: translateY(-2px);
}

button.myaccount__pay-action:active,
a.myaccount__pay-action:active,
.myaccount__pay-action[role="button"]:active {
  transform: translateY(0) scale(0.97);
}

button.myaccount__pay-action--danger-soft:hover,
a.myaccount__pay-action--danger-soft:hover,
.myaccount__pay-action--danger-soft[role="button"]:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.8) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35) !important;
}

.myaccount__pay-action--accent-soft {
  background: rgba(249, 115, 22, 0.12) !important;
  border: 1px solid rgba(249, 115, 22, 0.45) !important;
  color: #f9a25a !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

a.myaccount__pay-action--accent-soft:hover,
button.myaccount__pay-action--accent-soft:hover,
.myaccount__pay-action--accent-soft[role="button"]:hover {
  background: rgba(249, 115, 22, 0.25) !important;
  border-color: rgba(249, 115, 22, 0.8) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35) !important;
}

button.myaccount__pay-action--neutral:hover,
a.myaccount__pay-action--neutral:hover,
.myaccount__pay-action--neutral[role="button"]:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

/* ---------- 21. Unified glass modal design with original orange corner hairlines ---------- */
.enrollment-popup,
.login-popup,
.sna-modal__card {
  position: relative !important;
  background-color: rgba(20, 20, 24, 0.86) !important;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, 0.1) 15%, rgba(249, 115, 22, 0.5) 30%, #f97316 50%, rgba(249, 115, 22, 0.5) 70%, rgba(249, 115, 22, 0.1) 85%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, 0.1) 15%, rgba(249, 115, 22, 0.5) 30%, #f97316 50%, rgba(249, 115, 22, 0.5) 70%, rgba(249, 115, 22, 0.1) 85%, transparent 100%) !important;
  background-size: 20% 2px, 20% 2px !important;
  background-position: 10% 0, 90% 100% !important;
  background-repeat: no-repeat, no-repeat !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 64px rgba(0, 0, 0, 0.6) !important;
  animation: sna-modal-in 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
}

.enrollment-popup__close,
.login-popup__close,
.sna-modal__close {
  background: transparent !important;
  border: none !important;
  color: #f97316 !important;
  font-size: 24px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px !important;
  transition: transform 0.2s ease !important;
}

.enrollment-popup__close:hover,
.login-popup__close:hover,
.sna-modal__close:hover {
  background: transparent !important;
  color: #fb8c3e !important;
  transform: scale(1.15) !important;
  box-shadow: none !important;
}

.enrollment-popup-overlay,
.login-popup-overlay,
.sna-modal {
  background: rgba(0, 0, 0, 0.65) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

@media (max-width: 600px) {
  .enrollment-popup,
  .login-popup,
  .sna-modal__card {
    border-radius: 18px !important;
  }
}
/* ---------- 22. Plans preview (shown above the enrollment gate) ---------- */
.subscribe-page__preview {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 1.75rem;
  text-align: center;
}

.subscribe-page__preview-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}

.subscribe-page__preview-sub {
  font-size: 0.95rem;
  color: #9a9aa2;
  margin: 0 0 1.5rem;
}

.subscribe-page__preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
  text-align: left;
}

.subscribe-page__preview-card {
  position: relative;
  background: rgba(23, 23, 27, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 1.5rem 1.4rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.subscribe-page__preview-card:hover {
  transform: translateY(-4px);
  border-color: rgba(249, 115, 22, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(249, 115, 22, 0.14);
}

.subscribe-page__preview-card--featured {
  border-color: rgba(249, 115, 22, 0.55);
  background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(249, 115, 22, 0.1), transparent 70%);
}

/* Folded corner-ribbon banner (top-left), with a dark fold tucking
   behind the card edge — like an award/streak ribbon, but glossier. */
.subscribe-page__preview-badge {
  position: absolute;
  top: -12px;
  left: -7px;
  z-index: 2;
  background: linear-gradient(135deg, #ffb64f 0%, #f97316 58%, #e0620a 100%);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 7px 15px 7px 13px;
  border-radius: 3px 7px 7px 3px;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

/* glossy top sheen across the ribbon */
.subscribe-page__preview-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 55%);
  pointer-events: none;
}

/* dark triangular fold under the left edge (the ribbon wrapping the corner) */
.subscribe-page__preview-badge::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  border-top: 7px solid #a5480a;
  border-left: 7px solid transparent;
}

.subscribe-page__preview-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0.2rem 0 0.6rem;
}

.subscribe-page__preview-price {
  font-size: 1.9rem;
  font-weight: 800;
  color: #f97316;
  line-height: 1.1;
}

.subscribe-page__preview-from {
  font-size: 0.8rem;
  font-weight: 500;
  color: #9a9aa2;
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.subscribe-page__preview-cycle {
  font-size: 0.85rem;
  font-weight: 500;
  color: #9a9aa2;
}

.subscribe-page__preview-plannote {
  font-size: 0.82rem;
  color: #f9a25a;
  margin: 0.35rem 0 1rem;
}

.subscribe-page__preview-features {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.subscribe-page__preview-features li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  color: #d7d7db;
  padding: 5px 0;
}

.subscribe-page__preview-features i {
  color: #f97316;
  font-size: 1rem;
  flex-shrink: 0;
}

.subscribe-page__preview-tiers {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.subscribe-page__preview-tiers td {
  padding: 5px 0;
  color: #cfcfcf;
  vertical-align: middle;
}

.subscribe-page__preview-tiers td:first-child {
  color: #9a9aa2;
}

.subscribe-page__preview-tier-strike s {
  color: #77777d;
}

.subscribe-page__preview-off {
  color: #34c759;
  font-weight: 600;
  font-size: 0.74rem;
  white-space: nowrap;
}

.subscribe-page__preview-tier-pay {
  text-align: right;
}

.subscribe-page__preview-tier-pay strong {
  color: #fff;
}

@media (max-width: 600px) {
  .subscribe-page__preview-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1024px) {
  .core-team-hero .container,
  .core-team-sections .container {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}
.core-team-hero {
  text-align: left;
}
@media (max-width: 768px) {
  .core-team-hero {
    text-align: center;
  }
}
.core-team-hero .hero-title {
  font-size: 64px;
  font-weight: 600;
  margin: 0;
  color: #ffffff;
  line-height: 1.1;
}
.core-team-hero .hero-title .title-normal {
  display: block;
}
.core-team-hero .hero-title .title-highlight {
  display: block;
  color: #F47923;
}
@media (max-width: 768px) {
  .core-team-hero .hero-title {
    font-size: 48px;
  }
}
@media (max-width: 480px) {
  .core-team-hero .hero-title {
    font-size: 36px;
  }
}

.team-section {
  margin-bottom: 80px;
}
.team-section .section-header {
  margin-bottom: 40px;
  position: relative;
}
.team-section .section-header .section-title {
  font-size: 32px;
  color: #F47923;
  margin-bottom: 15px;
  font-weight: 500;
}
.team-section .section-header .section-line {
  width: 100%;
  height: 1px;
  background: rgba(244, 121, 35, 0.3);
  position: relative;
}
.team-section .section-header .section-line .line-dot {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #F47923;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

.team-card {
  background: #141414;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1;
  transition: transform 0.3s ease;
}
.team-card:hover {
  transform: translateY(-10px);
}
.team-card .card-inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.team-card .member-image {
  width: 100%;
  height: 100%;
}
.team-card .member-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.team-card:hover .member-image img {
  filter: grayscale(0%);
}
.team-card .member-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  z-index: 2;
}
.team-card .member-info .member-name {
  font-size: 24px;
  color: #ffffff;
  margin: 0;
  font-weight: 600;
}
.team-card .member-info .member-role {
  font-size: 12px;
  color: #F47923;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-top: 5px;
}

/* =========================================================================
   Legal documents (/terms, /policy)
   A long legal document, so the layout is built around reading it: a bounded
   measure, a sticky contents column on desktop, and clear separation between
   clauses. The previous version let lines run the full window width and hung
   180px watermark numerals behind the text, which collided with it and had
   drifted one out of step with the headings they were meant to label.
   ========================================================================= */
.legal-page {
  /* No scroll-behavior here: this element is not the scrolling container, so
     declaring it had no effect. Smooth anchor scrolling already comes from the
     global `html { scroll-behavior: smooth }` rule (with its own
     reduced-motion opt-out); the fixed header is cleared by scroll-margin-top
     on .legal-section. */
  --legal-measure: 68ch;
  --legal-rule: rgba(255, 255, 255, 0.09);
  --legal-muted: rgba(255, 255, 255, 0.62);
}
.legal-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--legal-rule);
}
/* The learning path's ambient aura, reused here so both pages share one
   backdrop. Geometry, blur, opacity and the lp-drift keyframes are the same;
   only the height is smaller, because this hero is shorter than that page's.
   lp-drift and the reduced-motion opt-out both live in the learning path
   block above. */
.legal-hero__aura {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 420px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
}
.legal-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}
.legal-hero__blob--1 {
  top: -80px;
  left: 8%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(251, 140, 62, 0.55), transparent 70%);
  animation: lp-drift 20s ease-in-out infinite;
}
.legal-hero__blob--2 {
  top: -40px;
  right: 10%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.5), transparent 70%);
  animation: lp-drift 26s ease-in-out infinite reverse;
}
.legal-hero__blob--3 {
  top: 40px;
  left: 42%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.4), transparent 70%);
  animation: lp-drift 30s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .legal-hero__blob {
    animation: none !important;
  }
}
.legal-hero__inner {
  /* Above the aura, which is painted at z-index 0 in the same stacking
     context. */
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}
.legal-hero__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F47923;
}
.legal-hero__title {
  margin: 0;
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.legal-hero__meta {
  margin: 1rem 0 0;
}
.legal-hero__stamp {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--legal-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--legal-rule);
}
.legal-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3rem) 1.25rem clamp(3rem, 6vw, 5rem);
}
/* Hidden until there is room for a real second column. Below this the sections
   simply read in order — a 22-item list stacked above the document would push
   the text a full screen down on a phone. */
.legal-toc {
  display: none;
}
.legal-toc__heading {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--legal-muted);
}
.legal-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-toc__item + .legal-toc__item {
  margin-top: 1px;
}
.legal-toc__link {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.42rem 0.6rem;
  border-radius: 8px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--legal-muted);
  text-decoration: none;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.legal-toc__link:hover,
.legal-toc__link:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}
.legal-toc__num {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.38);
}
/* grid child: let long strings wrap instead of widening the column */
.legal-doc {
  min-width: 0;
}
.legal-lead {
  max-width: var(--legal-measure);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--legal-rule);
}
.legal-lead p {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}
.legal-lead p:last-child {
  margin-bottom: 0;
}
.legal-section {
  /* Clears the fixed header when reached via a contents link. */
  scroll-margin-top: 104px;
}
.legal-section + .legal-section {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--legal-rule);
}
.legal-section__head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}
.legal-section__num {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #F47923;
  /* Small and inline, where the old decorative numeral was 180px and
     absolutely positioned behind the paragraphs. */
  padding-top: 0.15em;
}
.legal-section__title {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.legal-section__body {
  max-width: var(--legal-measure);
  color: rgba(255, 255, 255, 0.82);
}
.legal-section__body p {
  margin: 0 0 1rem;
  font-size: 0.98rem;
  line-height: 1.75;
}
.legal-section__body p:last-child {
  margin-bottom: 0;
}
/* Sub-heading inside a clause. The privacy policy divides several of its
   sections into lettered parts; the terms have none, so this only shows up on
   that page. Deliberately quieter than .legal-section__title so the numbered
   clause still reads as the top level. */
.legal-section__body h3 {
  margin: 1.6rem 0 0.7rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
}
.legal-section__body h3:first-child {
  margin-top: 0;
}
.legal-section__body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-section__body li {
  position: relative;
  margin-bottom: 0.85rem;
  padding-left: 1.4rem;
  font-size: 0.98rem;
  line-height: 1.75;
}
.legal-section__body li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  /* Centres the marker on the first line at this line-height rather than on
     the whole block, so multi-line items still line up. */
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #F47923;
}
.legal-section__body li:last-child {
  margin-bottom: 0;
}
/* Nested lists: a hollow marker, so the two levels stay distinguishable
   without indenting far enough to strand the text on a phone. */
.legal-section__body ul ul {
  margin: 0.7rem 0 0;
}
.legal-section__body ul ul li {
  margin-bottom: 0.5rem;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.72);
}
.legal-section__body ul ul li::before {
  background: transparent;
  border: 1px solid rgba(244, 121, 35, 0.75);
  width: 5px;
  height: 5px;
}
.legal-section__body strong {
  color: #ffffff;
  font-weight: 600;
}
.legal-facts {
  display: grid;
  gap: 0.9rem;
  margin: 1.1rem 0;
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--legal-rule);
}
.legal-fact {
  display: grid;
  /* Label column wide enough for "Registered Address" without wrapping it. */
  grid-template-columns: 9.5rem 1fr;
  gap: 0.35rem 1rem;
  align-items: baseline;
}
.legal-fact__label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.legal-fact__value {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}
.legal-link {
  color: #F47923;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 121, 35, 0.35);
  /* Padding rather than a bare inline link: these were 11-20px tall hit
     targets, under the 24px minimum, and several sit inside body copy. */
  padding: 0.3em 0;
  word-break: break-word;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.legal-link:hover,
.legal-link:focus-visible {
  color: #ff9a52;
  border-bottom-color: #ff9a52;
}
.legal-backtotop {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--legal-rule);
}
/* The site's standard CTA in its ghost variant (.subscribe-page__cta--ghost):
   same geometry and weight as the solid orange button, toned down because
   returning to the top is a utility, not the point of the page. */
.legal-backtotop__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 11px;
  background: none;
  border: 1px solid #F47923;
  color: #F47923;
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.legal-backtotop__btn i {
  font-size: 1.05em;
  line-height: 1;
}
.legal-backtotop__btn:hover,
.legal-backtotop__btn:focus-visible {
  background: rgba(244, 121, 35, 0.12);
  border-color: #ff9a52;
  color: #ff9a52;
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .legal-backtotop__btn,
  .legal-backtotop__btn:hover {
    transform: none;
  }
}
@media (min-width: 1024px) {
  .legal-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .legal-toc {
    display: block;
    position: sticky;
    /* Below the fixed header, and tall enough to scroll independently when the
       contents list outgrows the viewport. */
    top: 104px;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    padding-right: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  }
  .legal-toc::-webkit-scrollbar {
    width: 6px;
  }
  .legal-toc::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 3px;
  }
}
@media (max-width: 480px) {
  .legal-facts {
    padding: 1rem;
  }
  .legal-fact {
    /* A 9.5rem label column leaves roughly ten characters for the value at
       this width, so the pair stacks instead. */
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .legal-section__body li {
    padding-left: 1.15rem;
  }
}


.error-404 {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  background: #1A1A1A;
  position: relative;
  overflow: hidden;
}
.error-404__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
}
.error-404__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.error-404__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
}
.error-404__code {
  font-size: clamp(8rem, 20vw, 15rem);
  font-weight: 800;
  line-height: 1;
  margin: 0;
  color: #F47923;
  opacity: 0.1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.error-404__title {
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 1.2;
  color: #ffffff;
}
.error-404__title .highlight {
  color: #F47923;
}
.error-404__desc {
  font-size: 1.1rem;
  color: #cfcfcf;
  margin-bottom: 40px;
  line-height: 1.6;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.error-404__btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.error-404__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background: linear-gradient(135deg, #ff7b23 0%, #ff9544 100%);
  color: #ffffff;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  transition: 0.3s ease;
  box-shadow: 0 8px 24px rgba(255, 123, 35, 0.25);
}
.error-404__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 123, 35, 0.35);
  color: #ffffff;
}
.error-404__btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 123, 35, 0.1);
  border: 1px solid rgba(255, 123, 35, 0.3);
  transition: 0.3s ease;
}
.error-404__btn-arrow img {
  width: 20px;
  filter: brightness(1);
}
.error-404__btn-arrow:hover {
  background: rgba(255, 123, 35, 0.15);
  border-color: rgba(255, 123, 35, 0.5);
  transform: scale(1.1);
}

/*# sourceMappingURL=styles.css.map */
/* ============================================================================
   Site-wide horizontal-overflow guard (appended override). Root cause: the
   header used max-width:100vw, which includes the vertical scrollbar gutter and
   forced a horizontal scroll on every page. Fixed to 100%; html clips any other
   stray overflow (clip preserves the sticky header, unlike hidden).
   ============================================================================ */
html { overflow-x: clip; }
body { overflow-x: clip; }
.site-header { max-width: 100%; }

/* ============================================================================
   Subscribe page — ELITE polish layer (appended last; overrides by source order)
   Fixes tablet-range horizontal overflow and elevates the visual hierarchy.
   Scoped to .subscribe-page. Plain-CSS literals (mirrors compiled styles.css).
   Cross-browser: -webkit- prefixes, prefers-reduced-motion, backdrop fallbacks.
   ============================================================================ */

/* ---- 1. No horizontal page scroll at any width -------------------------- */
.subscribe-page {
  max-width: 1140px;
  padding-left: 4px;
  padding-right: 4px;
}
/* Perks wrapped gracefully instead of overflowing the viewport in the
   769–992px tablet band (the old rule only wrapped at <=768). */
.subscribe-page__perks {
  flex-wrap: wrap;
  max-width: 100%;
}
.subscribe-page__hero,
.subscribe-page__checkout,
.subscribe-page__card,
.subscribe-page__trial-section {
  max-width: 100%;
}

/* ---- 2. Hero: refined type + living badge ------------------------------- */
.subscribe-page__title {
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.45rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.subscribe-page__subtitle {
  font-size: clamp(13.5px, 12px + 0.4vw, 15.5px);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
.subscribe-page__hero-badge {
  animation: sub-badge-float 3.4s ease-in-out infinite;
}
@keyframes sub-badge-float {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 18px 3px rgba(249,115,22,.16); }
  50%      { transform: translateY(-4px); box-shadow: 0 0 26px 5px rgba(249,115,22,.24); }
}
.subscribe-page__perks li {
  font-size: 12.5px;
  padding: 8px 15px;
}

/* ---- 3. Plan cards: sharper hierarchy, elite selected state ------------- */
.subscribe-page__plan-card {
  position: relative;
  padding: 20px 22px;
  border-radius: 18px;
  overflow: hidden;
  will-change: transform;
}
.subscribe-page__plan-card .enrollment-popup__payment-info .payment-name {
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #fff;
  flex-wrap: wrap;
}
.subscribe-page__plan-card .enrollment-popup__payment-info .payment-amount {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin: 2px 0 1px;
}
.subscribe-page__plan-card .enrollment-popup__payment-info .payment-amount small {
  font-size: 12.5px;
  color: #9a9aa2;
}
.subscribe-page__price-original {
  font-size: 14px;
  color: #7d7d84;
  margin-right: 2px;
}
.subscribe-page__plan-meta {
  font-size: 12.5px;
  color: #9a9aa2;
  letter-spacing: 0.1px;
}
.subscribe-page__plan-desc {
  font-size: 12.5px;
  color: #7d7d84;
  line-height: 1.5;
}
/* Selected: a single thin border plus a top accent line. No orange ring or
   glow — one restrained accent per card keeps the screen from over-saturating. */
.subscribe-page__plan-card.active {
  border-color: rgba(249,115,22,.55);
  background:
    linear-gradient(180deg, rgba(249,115,22,.07) 0%, rgba(249,115,22,.015) 60%, transparent 100%),
    rgba(23,23,27,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 30px rgba(0,0,0,.35);
}
.subscribe-page__plan-card.active::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f97316 40%, #f97316 60%, transparent);
}
.subscribe-page__plan-card:hover:not(.active) {
  border-color: rgba(249,115,22,.5);
  transform: translateY(-2px);
}
/* Larger tap target for the radio + brand-clean dot */
.subscribe-page__plan-card .enrollment-popup__payment-radio {
  margin-top: 2px;
}

/* ---- 3b. "BEST VALUE" ribbon on the top-discount plan ------------------- */
.subscribe-page__plan-card--popular {
  padding-top: 24px;
}
.subscribe-page__plan-card--popular::after {
  content: "\2605 BEST VALUE";
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #141417;
  background: linear-gradient(135deg, #fb8c3e 0%, #f97316 100%);
  border-radius: 999px;
  padding: 4px 11px;
  box-shadow: 0 4px 14px rgba(249,115,22,.45);
  z-index: 2;
}

/* ---- 4. Order summary: premium panel ----------------------------------- */
.subscribe-page__order {
  border-radius: 22px;
  padding: 26px;
}
.subscribe-page__summary-row--total {
  margin-top: 2px;
  padding-top: 15px;
}
.subscribe-page__summary-row--total .value {
  font-size: 19px;
}
.subscribe-page__summary-row--total .label {
  color: #d6d6db;
}
.subscribe-page__autopay {
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(249,115,22,.05), transparent),
    rgba(255,255,255,.02);
}
.subscribe-page__cta--block {
  padding: 15px 36px;
  font-size: 16px;
  border-radius: 13px;
  position: relative;
  overflow: hidden;
}
/* Subtle moving sheen on the primary CTA */
.subscribe-page__cta--block::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  animation: sub-cta-sheen 4.5s ease-in-out infinite;
}
@keyframes sub-cta-sheen {
  0%, 62% { left: -60%; }
  92%, 100% { left: 130%; }
}

/* ---- 5. Trial card: inviting, elevated --------------------------------- */
.subscribe-page__trial-section .subscribe-page__card,
.subscribe-page__trial-section {
  border-color: rgba(249,115,22,.4);
}
.subscribe-page__trial-section .subscribe-page__card-title {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
}

/* ---- 6. Responsive refinements ----------------------------------------- */
/* Tablet: keep single column comfortable, tighten the plan grid */
@media (max-width: 992px) {
  .subscribe-page {
    gap: 1.5rem;
  }
  .subscribe-page__checkout {
    gap: 20px;
  }
  .subscribe-page__perks {
    gap: 9px;
  }
}
/* Small tablets / large phones */
@media (max-width: 680px) {
  .subscribe-page__perks li {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    min-width: 0;
  }
  .subscribe-page__plan-card {
    padding: 18px 16px;
  }
  .subscribe-page__plan-card .enrollment-popup__payment-info .payment-amount {
    font-size: 20px;
  }
  .subscribe-page__order {
    padding: 20px 16px;
  }
  .subscribe-page__summary-row {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .subscribe-page__summary-row .value {
    text-align: left;
  }
}
/* Phones: full-width comfortable touch targets */
@media (max-width: 480px) {
  .subscribe-page__perks li {
    flex-basis: 100%;
    font-size: 13px;
    padding: 10px 14px;
  }
  .subscribe-page__cta {
    width: 100%;
  }
  .subscribe-page__plan-card--popular::after {
    top: 10px;
    right: 12px;
  }
}

/* ---- 7. Cross-browser & accessibility ---------------------------------- */
.subscribe-page__cta:focus-visible,
.subscribe-page__plan-card:focus-within,
.subscribe-page__coupon-input:focus-visible {
  outline: 2px solid rgba(249,115,22,.9);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .subscribe-page__hero-badge,
  .subscribe-page__cta--block::after {
    animation: none !important;
  }
  .subscribe-page__plan-card,
  .subscribe-page__plan-card:hover {
    transition: none !important;
    transform: none !important;
  }
}
/* No backdrop-filter support (older Firefox/Safari): solid, never mush */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .subscribe-page__order,
  .subscribe-page__plan-card,
  .subscribe-page__plan-card.active {
    background-color: #17171b !important;
  }
}

/* ============================================================================
   Header: collapse the desktop nav to the hamburger through the tablet band.
   The desktop nav needs ~1031px, but the off-canvas menu only engaged at
   <=768px, so 769-1080px overflowed and clipped the user menu. This extends
   the existing mobile-collapse behaviour up to 1080px. Append-only override
   (the deployed styles.css carries hand-edits absent from the SASS source, so
   a full recompile is unsafe). Mirrors the <=768 rules in _header.scss.
   ============================================================================ */
@media (min-width: 769px) and (max-width: 1080px) {
  .site-header .desktop-only { display: none !important; }
  .site-header .mobile-only { display: flex !important; }
  .site-header .mobile-only.social-icons { display: block !important; }
  .site-header .nav-toggle { display: flex !important; }
  .site-header .brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .site-header .main-nav {
    position: fixed;
    left: -100%;
    top: 0;
    bottom: 0;
    width: 340px;
    max-width: 82vw;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, #0b0b0b 0%, #141414 100%) !important;
    z-index: 10001 !important;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    padding: 88px 22px 28px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.8);
  }
  .site-header .main-nav.open { left: 0; }
  .site-header .main-nav > ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
  }
  .site-header .main-nav > ul > li { width: 100%; }
  .site-header .main-nav > ul > li > a,
  .site-header .main-nav > ul > li > .d-link,
  .site-header .main-nav > ul > li > .nav-btn {
    width: 100%;
    padding: 13px 6px;
  }
}

/* ---- Fix: "View Reviews" button (was position:absolute + translate 29rem, muted brown) ---- */
.learning-section .review .button { position: static !important; transform: none !important; }
@media (max-width: 768px) { .learning-section .review .button { align-self: flex-start; } }
.learning-section .review .button .btn {
  background: linear-gradient(180deg, #fb8c3e 0%, #f97316 100%) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  font-weight: 600;
}
.learning-section .review .button .btn:hover { background: #F47923 !important; color: #000 !important; }

/* ---- Fix: off-canvas menu must be viewport-fixed, not pinned to page top ----
   The header's backdrop-filter created a containing block for the fixed
   .main-nav, so opening the menu after scrolling showed it above the fold.
   The header background is opaque, so dropping the blur is invisible. ---- */
.site-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ---- Premium hero card (mobile): glass surface + orange top accent + glow ---- */
@media (max-width: 480px) {
  .hero .hero__content {
    background-color: rgba(23, 23, 27, 0.72) !important;
    background-image:
      radial-gradient(ellipse 85% 55% at 50% -12%, rgba(249,115,22,0.16), transparent 62%),
      linear-gradient(90deg, transparent 0%, rgba(249,115,22,0.12) 18%, rgba(249,115,22,0.55) 34%, #f97316 50%, rgba(249,115,22,0.55) 66%, rgba(249,115,22,0.12) 82%, transparent 100%) !important;
    background-size: 100% 100%, 62% 2px !important;
    background-position: 50% 0, 50% 0 !important;
    background-repeat: no-repeat, no-repeat !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 20px 48px rgba(0,0,0,0.5) !important;
    padding: 2.1rem 1.5rem !important;
  }
}
/* No-backdrop-filter fallback: keep it solid, never transparent */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 480px) { .hero .hero__content { background-color: #17171b !important; } }
}

/* ---- Frosted-glass side nav (mobile + tablet off-canvas) ----
   Blur lives on the panel itself (safe — it's viewport-fixed and has no fixed
   descendants), not the header, so the menu still opens at the viewport. The
   overlay dims the page so the frost reads as dark glass. ---- */
@media (max-width: 1080px) {
  .site-header .main-nav {
    background: rgba(13, 13, 16, 0.72) !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.55);
  }
  .site-header .nav-overlay { background: rgba(0, 0, 0, 0.55) !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 1080px) { .site-header .main-nav { background: #0f0f12 !important; } }
}



/* ============================================================================
   Learning Path (/learning-path).

   Track chooser (poster-overlay cards) and a per-track horizontal roadmap, over
   an animated backdrop (aura blobs, the circuit field canvas, a hex mesh and a
   pointer spotlight). Tone accents are driven by CSS custom properties
   (--lp-accent / --lp-glow) set on the tone modifier classes. Animation uses
   transform and opacity only and is disabled under prefers-reduced-motion.

   This block mirrors the same rules in the compiled htdocs/css/styles.css.
   ============================================================================ */

.lp {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1rem 4.5rem;
  isolation: isolate;

  /* Tone palette — each modifier sets the accent + glow triplet. */
  --lp-accent: #94a3b8;
  --lp-glow: 148, 163, 184;
}
.lp__choice--red,    .lp__flow--red,    .lp__stage--red,    .lp__stage-chip--red    { --lp-accent: #f87171; --lp-glow: 248,113,113; }
.lp__choice--green,  .lp__flow--green,  .lp__stage--green,  .lp__stage-chip--green  { --lp-accent: #4ade80; --lp-glow: 74,222,128; }
.lp__choice--blue,   .lp__flow--blue,   .lp__stage--blue,   .lp__stage-chip--blue   { --lp-accent: #60a5fa; --lp-glow: 96,165,250; }
.lp__choice--purple, .lp__flow--purple, .lp__stage--purple, .lp__stage-chip--purple { --lp-accent: #c084fc; --lp-glow: 192,132,252; }
.lp__choice--pink,   .lp__flow--pink,   .lp__stage--pink,   .lp__stage-chip--pink   { --lp-accent: #f472b6; --lp-glow: 244,114,182; }
.lp__choice--orange, .lp__flow--orange, .lp__stage--orange, .lp__stage-chip--orange { --lp-accent: #fb8c3e; --lp-glow: 251,140,62; }
.lp__choice--teal,   .lp__flow--teal,   .lp__stage--teal,   .lp__stage-chip--teal   { --lp-accent: #2dd4bf; --lp-glow: 45,212,191; }
.lp__choice--slate,  .lp__flow--slate,  .lp__stage--slate,  .lp__stage-chip--slate  { --lp-accent: #94a3b8; --lp-glow: 148,163,184; }

/* ---- Ambient aura ------------------------------------------------------- */
/* Full-bleed for the same reason as .lp__field below — a colour wash that stops
   at the column edge draws the edge instead of hiding it. */
.lp__aura {
  position: absolute;
  top: -10%;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 620px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
}
.lp__aura-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}
.lp__aura-blob--1 { top: -80px; left: 8%;  width: 360px; height: 360px; background: radial-gradient(circle, rgba(251,140,62,0.55), transparent 70%); animation: lp-drift 20s ease-in-out infinite; }
.lp__aura-blob--2 { top: -40px; right: 10%; width: 340px; height: 340px; background: radial-gradient(circle, rgba(192,132,252,0.5), transparent 70%);  animation: lp-drift 26s ease-in-out infinite reverse; }
.lp__aura-blob--3 { top: 40px;  left: 42%;  width: 300px; height: 300px; background: radial-gradient(circle, rgba(45,212,191,0.4), transparent 70%);    animation: lp-drift 30s ease-in-out infinite; }
.lp__aura-blob--4 { top: 210px; right: 30%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(96,165,250,0.34), transparent 70%);   animation: lp-drift 36s ease-in-out infinite reverse; }
@keyframes lp-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(40px, 26px, 0) scale(1.08); }
  66%      { transform: translate3d(-30px, 12px, 0) scale(0.95); }
}

/* ---- Backdrop field ----------------------------------------------------- */
/* Behind everything (the aura sits between this and the content), spanning the
   whole page block so the field reads as the room the page is in rather than a
   band stuck to the header. Three layers: the live circuit board painted by
   js/learning-path-fx.js, a hex mesh drifting behind it, and a spotlight that
   follows the pointer. All decoration — aria-hidden in the markup, and inert to
   the pointer here.

   Full-bleed: .lp is a 1200px column, and a backdrop that stopped at its edges
   read as a panel behind the cards rather than as the page's own background. The
   negative-offset trick escapes the column to the viewport width; 100vw includes
   the scrollbar gutter, which is why this can only be done here — html and body
   are `overflow-x: clip`, so the few px of overhang are clipped instead of
   growing the document. */
.lp__field {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
/* Faded out at the very bottom so the board meets the footer on a soft edge
   rather than a cut line. */
.lp__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, 0.45) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, 0.45) 90%, transparent 100%);
}
/* Hex mesh — two 60° line families over one vertical family. Sized in a single
   custom property so the whole grid scales as one, and drifting by exactly one
   cell so the loop has no seam. */
.lp__mesh {
  --lp-cell: 46px;
  position: absolute;
  inset: -10% -10% 0;
  opacity: 0.5;
  background-image: repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px var(--lp-cell)), repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px var(--lp-cell)), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px var(--lp-cell));
  -webkit-mask-image: radial-gradient(120% 70% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
  mask-image: radial-gradient(120% 70% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
  animation: lp-mesh 24s linear infinite;
}
@keyframes lp-mesh {
  to { background-position: var(--lp-cell) var(--lp-cell), calc(var(--lp-cell) * -1) var(--lp-cell), 0 var(--lp-cell); }
}
/* Pointer spotlight. The script writes --lp-sx / --lp-sy on .lp and adds .is-lit
   once the pointer is actually over the block, so the light fades in where the
   pointer entered instead of snapping in from the top-left default. */
.lp__spot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(460px 460px at var(--lp-sx, 50%) var(--lp-sy, 25%), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025) 42%, transparent 70%);
}
.lp.is-lit .lp__spot { opacity: 1; }

/* ---- Header ------------------------------------------------------------- */
.lp__header { text-align: center; margin-bottom: 2.75rem; }
.lp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #cbd0dc;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lp__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fb8c3e;
  box-shadow: 0 0 0 0 rgba(251, 140, 62, 0.6);
  animation: lp-pulse 2.4s ease-out infinite;
}
@keyframes lp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(251, 140, 62, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(251, 140, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 140, 62, 0); }
}
.lp__title {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 16px 0 0.7rem;
  background: linear-gradient(100deg, #ffffff 0%, #ffe9d4 28%, #ffffff 52%, #d8c7ff 76%, #ffffff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
  animation: lp-shimmer 8s linear infinite;
}
@keyframes lp-shimmer { to { background-position: 220% center; } }
.lp__subtitle {
  color: #9a9aa2;
  font-size: clamp(14px, 12px + 0.5vw, 16.5px);
  max-width: 62ch;
  margin: 0 auto;
  line-height: 1.65;
}
.lp__stats {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(23, 23, 27, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lp__stat { font-size: 13px; color: #9a9aa2; }
.lp__stat b { color: #fff; font-weight: 700; margin-right: 3px; }
.lp__stat-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }

/* ---- Track chooser ------------------------------------------------------ */
/* Two across, so each card is wide enough to show the whole poster. The
   posters are 1536x1024 (3:2); at a 1168px content width two columns give
   ~573px, and the 3/2 aspect below puts the card at ~382px tall — within a
   couple of pixels of the 380px the overlay text was laid out against. */
.lp__chooser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 22px;
}
/* Poster-overlay card: the poster image fills the card, a bottom gradient keeps
   the text legible, and the content is anchored to the bottom. Each layer has an
   explicit z-index and the body stacks as block elements. */
.lp__choice {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Match the poster's own 3:2 so object-fit: cover has nothing to crop.
     min-height stays as the floor for narrow viewports, where the column
     collapses and the card would otherwise get too short for its text. */
  aspect-ratio: 3/2;
  min-height: 380px;
  /* Guard: aspect-ratio resolves against min-height by making the box WIDER
     (380 x 1.5 = 570px), so without this a narrow viewport gets a 570px card
     and a horizontal scrollbar instead of a taller one. */
  max-width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 0;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #141418;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  /* Entrance, then a very slow idle drift.
     The drift animates `translate`, NOT `transform`: the entrance and the hover
     lift both own `transform`, and an infinite animation on that property would
     outrank the hover transition and kill the lift. `translate` composes with
     `transform` instead, so the two never fight. Each card is offset by --i so
     they breathe out of step rather than as one block. */
  opacity: 0;
  transform: translateY(20px);
  animation: lp-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards, lp-float 7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 90ms + 80ms), calc(var(--i, 0) * 800ms + 700ms);
}
@keyframes lp-rise { to { opacity: 1; transform: none; } }
/* 5px is deliberate — enough to read as alive, small enough not to distract. */
@keyframes lp-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
.lp__choice:hover {
  /* Hold the drift still while the card is being pointed at. */
  animation-play-state: paused;
  transform: translateY(-6px);
  /* The border IS the signal here — this card has always had one. All the
     accent bloom below it did was spill the same colour over the gap between
     the two chooser cards; it is a tight halo now, with the depth carried in
     black, matching .lp__stage:hover. */
  border-color: rgba(var(--lp-glow), 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
              0 0 18px rgba(var(--lp-glow), 0.22),
              0 18px 36px rgba(0, 0, 0, 0.45);
}
/* Poster image — full-bleed background layer */
.lp__choice-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp__choice:hover .lp__choice-img { transform: scale(1.05); }
/* Readability gradient */
.lp__choice-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 8, 11, 0.05) 0%, rgba(8, 8, 11, 0.35) 42%, rgba(8, 8, 11, 0.86) 72%, rgba(6, 6, 9, 0.97) 100%);
}
/* Tone accent line along the top */
.lp__choice-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--lp-accent) 45%, var(--lp-accent) 55%, transparent);
}
/* Hover sheen border */
.lp__choice-sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(var(--lp-glow), 0.6), transparent 45%, transparent 70%, rgba(var(--lp-glow), 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.lp__choice:hover .lp__choice-sheen { opacity: 1; }
/* Frosted glass chip. The blur is what makes it glass — it samples the poster
   behind it — and the two inset shadows are the lit top edge and shaded bottom
   edge that stop it reading as a flat translucent rectangle. */
.lp__choice-count {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  padding: 5px 12px;
  background-color: rgba(18, 18, 24, 0.38);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 52%, rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 6px 18px rgba(0, 0, 0, 0.32);
}
/* Body — anchored to the bottom, always a vertical block stack */
.lp__choice-body {
  position: relative;
  z-index: 2;
  padding: 20px 22px 22px;
}
.lp__choice-body > * { display: block; }
.lp__choice-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--lp-accent);
  margin-bottom: 7px;
}
.lp__choice-title {
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.22;
  margin-bottom: 8px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.lp__choice-summary {
  color: #c2c2ca;
  font-size: 13px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp__choice-cta {
  width: -webkit-fit-content;
  width: fit-content;
  margin-top: 16px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: rgba(var(--lp-glow), 0.1);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, rgba(var(--lp-glow), 0.3), rgba(var(--lp-glow), 0.14));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 8px 22px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(var(--lp-glow), 0.22);
  transition: background-image 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.lp__choice-cta > span { display: inline; }
/* Hover lifts the sheen and the accent together, so the glass looks lit rather
   than just tinted darker. */
.lp__choice:hover .lp__choice-cta {
  border-color: rgba(255, 255, 255, 0.34);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, rgba(var(--lp-glow), 0.46), rgba(var(--lp-glow), 0.24));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 12px 28px rgba(0, 0, 0, 0.4), 0 3px 12px rgba(var(--lp-glow), 0.4);
}
/* Without backdrop-filter there is nothing frosted to see, so fall back to
   opaque surfaces rather than a washed-out translucent pill. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp__choice-cta { background-color: rgba(var(--lp-glow), 0.42); }
  .lp__choice-count { background-color: rgba(18, 18, 24, 0.86); }
}
.lp__choice-arrow { display: inline-block; margin-left: 6px; transition: transform 0.25s ease; }
.lp__choice:hover .lp__choice-arrow { transform: translateX(5px); }

/* ---- Flow (one per track; toggled by JS via [hidden]) ------------------- */
.lp__flow[hidden] { display: none; }
.lp__flow { animation: lp-fade 0.4s ease; }
@keyframes lp-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.lp__flow-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.lp__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e8e8ea;
  border-radius: 999px;
  padding: 9px 17px;
  font-size: 13.5px;
  font-weight: 600;
  transition: 0.22s ease;
}
.lp__back:hover { border-color: var(--lp-accent); color: var(--lp-accent); transform: translateX(-2px); }
.lp__flow-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lp__flow-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 20px;
  border-radius: 12px;
  border: 1px solid rgba(var(--lp-glow), 0.35);
  background: linear-gradient(160deg, rgba(var(--lp-glow), 0.2), rgba(255, 255, 255, 0.02));
}
.lp__flow-hint {
  margin-left: auto;
  color: #8a8a90;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lp__flow-hint i { color: var(--lp-accent); }

/* Scroll progress */
.lp__progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin-bottom: 20px;
}
.lp__progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lp-accent), rgba(var(--lp-glow), 0.55));
  box-shadow: 0 0 12px rgba(var(--lp-glow), 0.6);
  transition: width 0.1s linear;
}

/* Horizontal scroll viewport.

   No `scroll-behavior: smooth` and no scroll snapping here, deliberately. Both
   fight a wheel: the CSS smoothing animates away from every position the wheel
   handler reads back, so consecutive notches cancelled out and the rail crawled;
   snapping then re-settled the rail after each one. The easing now lives in the
   script at the foot of the template, which accumulates onto a target instead.

   The native scrollbar stays hidden — the progress bar above the rail is the
   position cue.

   The bottom padding is sized to the card's hover shadow, not to taste. A
   scroller clips at its padding box, and a box-shadow's visible reach is its
   y-offset plus half its blur — for .lp__stage:hover the deepest layer is
   `0 14px 30px`, so 14 + 15 = 29px, less the 4px the card lifts. Too little and
   the shadow is sliced off mid-gradient and hovering a card lights a hard-edged
   slab under it. It was 48px when the hover was a 48px accent bloom; that bloom
   is now a 1px ring. CHANGE ONE AND CHANGE THE OTHER. */
.lp__track {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;   /* don't hand a flick to the browser's back gesture */
  padding: 26px 2px 34px;
  scroll-behavior: auto;
  scrollbar-width: none;      /* Firefox — hide scrollbar; progress bar is the cue */
  -ms-overflow-style: none;   /* legacy Edge */
  cursor: grab;
}
.lp__track.is-grabbing { cursor: grabbing; }
.lp__track::-webkit-scrollbar { display: none; }   /* WebKit — hide scrollbar */
.lp__track:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; border-radius: 16px; }

.lp__rail {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  min-width: min-content;
  /* 18px, for the same reason as .lp__track's bottom padding: it is the sideways
     reach of the hover shadow (half its 30px blur). Anything less and the first
     and last cards get their shadow cut down the side by the scroller's clip. */
  padding: 0 18px;
}
/* Timeline spine behind the node row */
.lp__spine {
  position: absolute;
  top: 12px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--lp-glow), 0.28) 8%, rgba(var(--lp-glow), 0.28) 92%, transparent);
  z-index: 0;
}

/* Connector between stages */
.lp__connector {
  position: relative;
  flex: 0 0 52px;
  min-width: 52px;
  align-self: flex-start;
  margin-top: 11px;
  height: 3px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(var(--lp-glow), 0.5) 0 9px, transparent 9px 17px);
  z-index: 1;
}
.lp__connector::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 7px solid rgba(var(--lp-glow), 0.7);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.lp__connector-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lp-accent);
  box-shadow: 0 0 12px 2px rgba(var(--lp-glow), 0.8);
  transform: translate(-50%, -50%);
  animation: lp-travel 2.6s ease-in-out infinite;
}
@keyframes lp-travel {
  0%   { left: 0;   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.lp__connector--end { flex-basis: 44px; min-width: 44px; }

/* Stage card.
   The card is defined by its surface and its shadow. On hover it gains ONE
   stroke — a 1px ring in the track's accent — and that ring is the signal. It
   used to be signalled by a 48px bloom of accent colour instead, which at a
   card's size read as the card leaking rather than as the card being pointed
   at, and on a row of three left a wash of green over everything between them.
   The divider under the poster (.lp__stage-media) is the other stroke. */
.lp__stage {
  position: relative;
  flex: 0 0 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background-color: rgba(21, 21, 25, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 38px rgba(0, 0, 0, 0.42);
  z-index: 1;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease, box-shadow 0.3s ease;
  /* Reveal-on-scroll initial state */
  opacity: 0;
  transform: translateY(22px) scale(0.97);
}
.lp__stage.is-in { opacity: 1; transform: none; }
/* Four layers, and only two of them are coloured: the ring that lights the
   outline, and a tight halo that keeps the ring from looking drawn on. The
   depth shadow underneath is BLACK, not accent — that is what stops a hovered
   card from tinting the page around it while still lifting it off the field. */
.lp__stage:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
              0 0 0 1px rgba(var(--lp-glow), 0.6),
              0 0 14px rgba(var(--lp-glow), 0.2),
              0 14px 30px rgba(0, 0, 0, 0.45);
}
.lp__stage.is-in:hover { transform: translateY(-4px); }
.lp__stage-node {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #141417;
  background: var(--lp-accent);
  border: 3px solid #141417;
  box-shadow: 0 0 0 1px rgba(var(--lp-glow), 0.6), 0 6px 16px rgba(var(--lp-glow), 0.5);
  z-index: 4;
}
/* Course thumbnail */
.lp__stage-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid rgba(var(--lp-glow), 0.25);
  background: linear-gradient(160deg, rgba(var(--lp-glow), 0.28), rgba(18, 18, 22, 0.8));
}
.lp__stage-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp__stage:hover .lp__stage-img { transform: scale(1.06); }
.lp__stage-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 12, 15, 0) 45%, rgba(21, 21, 25, 0.55) 78%, rgba(21, 21, 25, 0.95) 100%);
}
.lp__stage-emoji {
  position: absolute;
  left: 12px;
  bottom: 9px;
  z-index: 2;
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
}
.lp__stage-delta {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(var(--lp-glow), 0.6);
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 3px 10px;
}
.lp__stage-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px 20px 20px;
}
.lp__stage-title {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.lp__stage-blurb {
  color: #9a9aa2;
  font-size: 13px;
  line-height: 1.58;
  margin: 0;
  flex: 1;
}
.lp__stage-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.lp__stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #d6d6db;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
  padding: 4px 10px;
}
.lp__stage-chip i { opacity: 0.8; }
.lp__stage-chip--green, .lp__stage-chip--teal, .lp__stage-chip--blue,
.lp__stage-chip--red, .lp__stage-chip--purple, .lp__stage-chip--orange, .lp__stage-chip--pink {
  color: var(--lp-accent);
  border-color: rgba(var(--lp-glow), 0.4);
  background: rgba(var(--lp-glow), 0.1);
}
.lp__stage-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: 2px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-accent);
  text-decoration: none;
  border: 1px solid rgba(var(--lp-glow), 0.35);
  border-radius: 999px;
  background: rgba(var(--lp-glow), 0.08);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.lp__stage-link:hover {
  background: rgba(var(--lp-glow), 0.18);
  border-color: rgba(var(--lp-glow), 0.6);
  text-decoration: none;
  color: var(--lp-accent);
}
.lp__stage-link-arrow { transition: transform 0.25s ease; }
.lp__stage-link:hover .lp__stage-link-arrow { transform: translateX(4px); }

/* Certification finish card */
.lp__finish {
  position: relative;
  overflow: hidden;
  flex: 0 0 220px;
  width: 220px;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 30px 20px;
  border-radius: 20px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: linear-gradient(160deg, rgba(251, 191, 36, 0.14), rgba(249, 115, 22, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 40px rgba(249, 115, 22, 0.18);
  z-index: 1;
  opacity: 0;
  transform: translateY(22px) scale(0.97);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease;
}
.lp__finish.is-in { opacity: 1; transform: none; }
.lp__finish-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: lp-sweep 4.5s ease-in-out infinite;
  animation-delay: 1s;
  pointer-events: none;
}
@keyframes lp-sweep { 0%, 55% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }
.lp__finish-icon { font-size: 40px; filter: drop-shadow(0 6px 14px rgba(251, 191, 36, 0.55)); animation: lp-float 3s ease-in-out infinite; }
.lp__finish-label { color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 0.2px; }
.lp__finish-sub { color: #cbb48f; font-size: 12px; line-height: 1.5; }
.lp__finish-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fbbf24;
  text-decoration: none;
}
.lp__finish-link:hover { color: #fbbf24; text-decoration: underline; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  /* One across below two-column width. Two columns here would be ~420px wide,
     which is under the ~570px a 3:2 card needs to clear the 380px min-height —
     the min-height would win and the poster would start cropping again. */
  .lp__chooser { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 600px) {
  .lp { padding: 2rem 0.85rem 3rem; }
  .lp__aura { height: 460px; }
  /* Phones: the mesh is too fine to read at this width and the field is behind a
     single column of cards, so keep the board and drop the rest of the room. */
  .lp__mesh, .lp__spot { display: none; }
  .lp__fx { opacity: 0.36; }
  .lp__chooser { grid-template-columns: 1fr; gap: 16px; }
  /* Under ~570px the card can no longer be wide enough for 3:2 to clear the
     380px floor, so the ratio stops helping and only fights the width. Drop it
     and go back to the tall portrait card — the poster crops here, as it always
     did on phones. */
  .lp__choice { aspect-ratio: auto; }
  .lp__stage { flex-basis: 84vw; width: 84vw; max-width: 330px; }
  .lp__connector { flex-basis: 38px; min-width: 38px; }
  .lp__connector--end { flex-basis: 30px; min-width: 30px; }
  .lp__flow-hint { display: none; }
  .lp__spine { left: 16px; right: 16px; }
}

/* Fallback for browsers without backdrop-filter: use solid card surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp__choice, .lp__stage { background-color: #17171b; }
  .lp__eyebrow, .lp__stats { background-color: #17171b; }
}

/* Reduced motion: disable drift, shimmer, reveal offsets, and image zoom. The
   circuit field paints one static frame instead (learning-path-fx.js) — it is
   something to look at, not something you have to sit through — and the pointer
   spotlight never binds at all. */
@media (prefers-reduced-motion: reduce) {
  .lp__aura-blob, .lp__title, .lp__eyebrow-dot, .lp__connector-pulse,
  .lp__finish-shine, .lp__finish-icon, .lp__choice-icon, .lp__mesh { animation: none !important; }
  .lp__spot { display: none; }
  .lp__flow, .lp__choice { animation: none !important; }
  .lp__choice { opacity: 1; transform: none; }
  .lp__stage, .lp__finish { opacity: 1; transform: none; transition: none !important; }
  .lp__choice-img, .lp__stage-img { transition: none !important; }
  .lp__track { scroll-behavior: auto; }
}

/* ============================================================================
   Global premium theme layer.

   App-wide visual polish applied through shared component classes: refined
   scrollbar / selection / focus styling, frosted-glass surfaces, dialog
   styling, and a scroll-reveal animation driven by the inline script in
   _master.php.

   This partial mirrors a block appended to the compiled htdocs/css/styles.css;
   the two must be edited together. Declarations are additive and use the
   lowest specificity that works, with !important only where an existing rule
   must be overridden.
   ============================================================================ */

/* ---- Global chrome ------------------------------------------------------- */
html { scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: rgba(244, 121, 35, 0.18); }
::selection { background: rgba(244, 121, 35, 0.32); color: #fff; }
::-moz-selection { background: rgba(244, 121, 35, 0.32); color: #fff; }

/* Document scrollbar (WebKit and Firefox). */
html { scrollbar-width: thin; scrollbar-color: rgba(244, 121, 35, 0.65) rgba(255, 255, 255, 0.05); }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: #0b0b10; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background: linear-gradient(#f47923, #c85a12);
  border-radius: 999px;
  border: 3px solid #0b0b10;
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: #f47923; }

/* Keyboard focus ring for links and buttons. Form controls are excluded
   because they define their own focus styling. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgba(244, 121, 35, 0.9);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Opt-in frosted-glass surface utility. */
.glass, .glass-card {
  background: rgba(22, 22, 28, 0.55) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

/* Card hover uses border and shadow only, never a transform: several card
   variants sit inside overflow:hidden carousels where a translateY would clip
   the top edge. Buttons are left untouched so their own animations apply. */

/* ---- My Account panels --------------------------------------------------- */
/* Frosted surface matching the contact form cards, with a title accent bar
   and a hover border glow. */
.myaccount__panel {
  background: rgba(18, 18, 24, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.myaccount__panel:hover {
  border-color: rgba(244, 121, 35, 0.4);
  box-shadow: 0 12px 36px rgba(244, 121, 35, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.myaccount__panel-head {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.myaccount__panel-title { display: inline-flex; align-items: center; }
.myaccount__panel-title::before {
  content: "";
  width: 3px;
  height: 15px;
  margin-right: 10px;
  border-radius: 2px;
  background: linear-gradient(#fb8c3e, #f47923);
  box-shadow: 0 0 10px rgba(244, 121, 35, 0.5);
}

/* Certificate verifier embedded in the account tab: title and subtitle
   left-aligned (the badge keeps the section's centred alignment), and the base
   1200px cap on .certify removed so the card spans the panel width. */
.myaccount__cert-verify .certify { max-width: none !important; }
.myaccount__cert-verify .certify__title,
.myaccount__cert-verify .certify__subtitle { text-align: left !important; }
.myaccount__cert-verify .certify__card {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- Shared content cards ------------------------------------------------ */
/* Frosted-glass background and hover glow for the main marketing cards. */
.feature-card, .opp-card, .testimonial-card, .learning-card,
.stat-card, .stats-card, .instructor-card {
  background: rgba(20, 20, 26, 0.55) !important;
  -webkit-backdrop-filter: blur(15px) saturate(135%);
  backdrop-filter: blur(15px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.feature-card:hover, .opp-card:hover, .testimonial-card:hover,
.learning-card:hover, .stat-card:hover, .stats-card:hover, .instructor-card:hover {
  border-color: rgba(244, 121, 35, 0.45);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(244, 121, 35, 0.12);
}

/* User account dropdown menu. */
.dropdown-menu-body {
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

/* ---- Navigation ---------------------------------------------------------- */
/* The header pills — "Learning Path", "Labs" and "Sign in" — are one control
   with three labels, so they are declared once, together. Declaring them apart
   is how they drifted: the pair carried different padding, radius, border and
   type, and the difference read as the padding changing with the length of the
   word inside.

   The box is sized by `height` and the horizontal padding, never by the label's
   own line box. Deriving it (8px + a 1.3 line-height on 15px text) produced a
   37.5px box — a half pixel the sticky header re-rounded at every scroll
   offset, which is what made the Learning Path outline break up while
   scrolling. A whole number cannot round two ways.

   Desktop horizontal nav only (>= 1081px); below that the off-canvas menu keeps
   its own link styling. Kept identical to the twin rule in layout/_header.scss
   — edit the two together. */
@media (min-width: 1081px) {
  .site-header .main-nav .nav-item a[href="/learning-path"],
  .site-header .main-nav .nav-item.cta .btn-outline {
    box-sizing: border-box !important;
    height: 38px !important;
    border: 1.5px solid #f47923 !important;
    padding: 0 20px !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
  }
  .site-header .main-nav .nav-item a[href="/learning-path"]:hover,
  .site-header .main-nav .nav-item.cta .btn-outline:hover {
    background-color: #f47923;
    cursor: pointer;
  }
}
/* The nav's sliding underline is suppressed on the Learning Path item, which
   is styled as a button above — and with no underline to contain, the `.d-link`
   clip has nothing left to do here but harm. Its box is exactly the button's
   box, so the clip edge and the 1.5px border sit on the same fractional line:
   inside a `position: sticky` header the two round independently as the page
   moves and the border drops out along an edge, which is the outline
   "breaking" on scroll. It also swallowed the pill's drop shadow, the one
   remaining difference between this pill and the Labs one beside it. */
.site-header .main-nav ul .d-link:has(a[href="/learning-path"]) {
  overflow: visible !important;
}
.site-header .main-nav ul .d-link:has(a[href="/learning-path"])::after { display: none !important; }

/* Active nav item: the current page's link is shown in orange, on desktop and
   in the off-canvas menu. Set from the `active` class the template adds to the
   matching item (replacing the previous permanent highlight of one link). */
.site-header .main-nav ul .d-link.active > a,
.site-header .main-nav ul .d-link.active > a span { color: #f47923 !important; }

/* ---- My Account payments ------------------------------------------------- */
/* Hide the payment status badge on mobile, where the stacked card makes it
   redundant. !important overrides the later badge rule that always shows it. */
@media (max-width: 768px) {
  .myaccount__pay-card-status { display: none !important; }
}

/* ---- Sticky header ------------------------------------------------------- */
/* Frosted header. The backdrop-filter is applied to a ::before layer rather
   than to .site-header itself, because a filter on the header would establish
   the containing block for the fixed off-canvas menu and offset it. */
.site-header { background: transparent !important; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 15, 0.5);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  pointer-events: none;
}
/* Profile dropdown, matching the header glass. */
.site-header .main-nav .nav-item .dropdown .dropdown-menu-body {
  background: rgba(16, 16, 22, 0.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
}

/* ---- Courses page -------------------------------------------------------- */
/* Constrain the courses dashboard width. As a flex-column child of
   .section-main its width follows its content; on narrow viewports the filter
   bar and grid expand it past the viewport, so width:100% forces a reflow. */
@media (max-width: 1024px) {
  .section-main .dashboard { width: 100%; max-width: 100%; }
}

/* ---- Enrollment / subscription form -------------------------------------- */
/* Shared .enrollment-popup modal: frosted-glass panel and dark input fields.
   The autofill rule keeps filled fields dark instead of the WebKit default. */
.enrollment-popup-overlay { background: rgba(0, 0, 0, 0.5) !important; }
.enrollment-popup {
  background-color: rgba(18, 18, 24, 0.72) !important;
  -webkit-backdrop-filter: blur(26px) saturate(140%) !important;
  backdrop-filter: blur(26px) saturate(140%) !important;
}
.enrollment-popup__group input[type=text],
.enrollment-popup__group input[type=email],
.enrollment-popup__group input[type=tel],
.enrollment-popup__group select,
.enrollment-popup__select-trigger {
  background: #14141a !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.enrollment-popup__group input[type=text]:focus,
.enrollment-popup__group input[type=email]:focus,
.enrollment-popup__group input[type=tel]:focus,
.enrollment-popup__group select:focus,
.enrollment-popup__select-trigger:focus {
  border-color: #f38533 !important;
}
/* A field the account owns rather than one the student fills in: dimmed, with a
   padlock so the state is visible rather than just inert. The base rule above
   uses the `background` shorthand, so the colour and the padlock have to be set
   as separate longhands to survive it. Text stays selectable — copying the
   address is fine, editing it is not. */
.enrollment-popup__group input.enrollment-popup__input--locked {
  color: rgba(255, 255, 255, 0.6) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
  background-color: #101014 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  cursor: not-allowed;
  padding-right: 2.25rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.7rem center !important;
  background-size: 14px 14px !important;
}
/* Never take the orange focus ring: it would advertise an editable field. */
.enrollment-popup__group input.enrollment-popup__input--locked:focus {
  border-color: rgba(255, 255, 255, 0.08) !important;
  outline: none !important;
}
/* Override the WebKit autofill background so filled fields keep the dark fill. */
.enrollment-popup__group input:-webkit-autofill,
.enrollment-popup__group input:-webkit-autofill:hover,
.enrollment-popup__group input:-webkit-autofill:focus,
.enrollment-popup__group input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #14141a inset !important;
  box-shadow: 0 0 0 1000px #14141a inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* ---- Modal dialogs ------------------------------------------------------- */
/* Shared frosted-glass styling for every modal: the login prompt, the
   sna-modal confirmation dialogs, the course quick-view, and the enrollment
   form. Overlays are translucent so the blurred page shows through; card
   backgrounds are translucent and keep their own accent line. */
.enrollment-popup-overlay,
.login-popup-overlay,
.sna-modal {
  background: rgba(0, 0, 0, 0.5) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}
.sna-modal__card,
.login-popup,
.course-popup {
  background-color: rgba(18, 18, 24, 0.72) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
}

/* ---- Coupon feedback ----------------------------------------------------- */
/* An invalid coupon code shows in red (the icon inherits the text colour) so
   the error reads at a glance; the success message stays green. */
.subscribe-page__coupon-msg--ok,
.subscribe-page__coupon-msg--error { display: inline-flex; align-items: center; gap: 6px; }
.subscribe-page__coupon-msg--error { color: #ef4444 !important; }

/* ---- Scroll-reveal ------------------------------------------------------- */
/* Initial state applied by the _master.php script to below-the-fold sections;
   .is-revealed transitions them in. Disabled under reduced-motion. */
.reveal-init { opacity: 0; transform: translateY(30px); will-change: opacity, transform; }
.reveal-init.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-init { opacity: 1 !important; transform: none !important; }
}

.sna-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 100002;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: min(520px, 100vw - 32px);
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background-color: rgba(23, 23, 27, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  color: #f4f4f5;
  font-size: 14.5px;
  line-height: 21px;
  opacity: 0;
  transform: translateX(-50%) translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.sna-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sna-toast__icon {
  flex-shrink: 0;
  font-size: 19px;
  line-height: 21px;
}
.sna-toast__message {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  white-space: pre-line;
}
.sna-toast__close {
  flex-shrink: 0;
  padding: 0 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: #9a9aa2;
  font-size: 22px;
  line-height: 21px;
  transition: color 0.2s ease;
}
.sna-toast__close:hover, .sna-toast__close:focus-visible {
  color: #ffffff;
}
.sna-toast__action {
  flex-shrink: 0;
  padding: 0 2px;
  border: none;
  background: none;
  cursor: pointer;
  color: #f97316;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 21px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.sna-toast__action:hover, .sna-toast__action:focus-visible {
  color: #ffa04a;
}
.sna-toast--error {
  border-color: rgba(217, 83, 79, 0.45);
}
.sna-toast--error .sna-toast__icon {
  color: #ff6b63;
}
.sna-toast--error .sna-toast__action {
  color: #ff6b63;
}
.sna-toast--error .sna-toast__action:hover, .sna-toast--error .sna-toast__action:focus-visible {
  color: #ff8b85;
}
.sna-toast--success {
  border-color: rgba(249, 115, 22, 0.45);
}
.sna-toast--success .sna-toast__icon {
  color: #f97316;
}
.sna-toast--warning {
  border-color: rgba(245, 158, 11, 0.45);
}
.sna-toast--warning .sna-toast__icon {
  color: #fbbf24;
}
.sna-toast--warning .sna-toast__action {
  color: #fbbf24;
}
.sna-toast--warning .sna-toast__action:hover, .sna-toast--warning .sna-toast__action:focus-visible {
  color: #fcd34d;
}
.sna-toast--info {
  border-color: rgba(148, 163, 184, 0.4);
}
.sna-toast--info .sna-toast__icon {
  color: #cbd5e1;
}
.sna-toast--info .sna-toast__action {
  color: #e2e8f0;
}
.sna-toast--info .sna-toast__action:hover, .sna-toast--info .sna-toast__action:focus-visible {
  color: #ffffff;
}
@media (max-width: 600px) {
  .sna-toast {
    top: 12px;
    padding: 14px 16px;
    font-size: 13.5px;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sna-toast {
    background-color: #17171b;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sna-toast {
    transition: opacity 0.01ms linear;
  }
}

/* =========================================================================
   Premium polish layer — My Account cards
   Additive, in the same spirit as the "Premium glass polish layer" in
   _subscribe.scss: upgrades the finish of surfaces that already work, and
   leaves their layout to the partials that own it.
   Material matches .sna-modal / .sna-toast throughout.
   ========================================================================= */
.myaccount__mc-card,
.myaccount__cert-card {
  position: relative;
  border-radius: 20px;
  background-color: rgba(23, 23, 27, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px rgba(0, 0, 0, 0.45);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}
/* The payment card already has its own premium pass above ("Payment history
   cards — premium redesign"), including the orange rail it draws with ::before.
   Only the surface material is upgraded here — no ::before, no border/radius —
   so that rail survives and the two layers do not fight. */
.myaccount__pay-card {
  background-color: rgba(23, 23, 27, 0.72) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px rgba(0, 0, 0, 0.45);
}
/* Hairline of accent light along the top edge — bright in the middle, gone by
   the corners so it never fights the border radius. */
.myaccount__mc-card::before,
.myaccount__cert-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(244, 121, 35, 0.26) 22%, rgba(244, 121, 35, 0.75) 50%, rgba(244, 121, 35, 0.26) 78%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 4;
}
.myaccount__mc-card:hover::before,
.myaccount__cert-card:hover::before {
  opacity: 1;
}
.myaccount__mc-card:hover,
.myaccount__cert-card:hover {
  transform: translateY(-6px);
  border-color: rgba(244, 121, 35, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 26px 58px rgba(0, 0, 0, 0.55), 0 10px 34px rgba(244, 121, 35, 0.18);
}
.myaccount__pay-card:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 20px 48px rgba(0, 0, 0, 0.52), 0 0 34px rgba(249, 115, 22, 0.14);
}

/* Card imagery: soft light edge instead of the old solid orange outline, so
   the poster is the thing you look at. */
.myaccount__mc-card-image,
.myaccount__pay-card-image {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.myaccount__mc-card-image img,
.myaccount__cert-card-image img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.myaccount__mc-card:hover .myaccount__mc-card-image img,
.myaccount__cert-card:hover .myaccount__cert-card-image img {
  transform: scale(1.06);
}

/* Progress: a lit track rather than a flat bar. */
.myaccount__mc-card-progress-bar {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.myaccount__mc-card-progress-bar > span {
  border-radius: 999px;
  background: linear-gradient(90deg, #f47923 0%, #ffb366 55%, #ffd066 100%) !important;
  box-shadow: 0 0 12px rgba(244, 121, 35, 0.55);
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Shared button geometry. Colour stays per-variant below: --primary is the
   action, --success and --secondary are not, and a frosted tint applied to all
   three would erase that distinction. A flat tint also goes muddy on a dark
   card, so the primary keeps a real orange gradient and wears the glass as a
   sheen on top rather than as its body. */
/* Geometry matches .subscribe-page__cta, the site's standard button. */
.myaccount__mc-card-cta,
.myaccount__cert-card-cta {
  border-radius: 11px;
  transition: background-image 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, color 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Same fill, radius and glow as .subscribe-page__cta ("Start free trial",
   subscribe pages, payment result) so the account actions read as the same
   control, not a second orange button with its own rules. */
.myaccount__mc-card-cta--primary,
.myaccount__cert-card-cta:not(:disabled) {
  border: none;
  background-color: transparent;
  background-image: linear-gradient(180deg, #fb8c3e 0%, #f97316 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35);
}
.myaccount__mc-card-cta--primary:hover,
.myaccount__cert-card-cta:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 24px rgba(249, 115, 22, 0.45);
  color: #ffffff;
}
/* Not-the-primary-action variants: glass outlines that keep their own colour. */
.myaccount__mc-card-cta--success {
  border: 1px solid rgba(34, 197, 94, 0.5);
  background-color: rgba(34, 197, 94, 0.1);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  color: #4ade80;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 18px rgba(0, 0, 0, 0.3);
}
.myaccount__mc-card-cta--success:hover {
  transform: translateY(-1px);
  border-color: rgba(34, 197, 94, 0.75);
  background-color: rgba(34, 197, 94, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 10px 24px rgba(0, 0, 0, 0.36), 0 4px 16px rgba(34, 197, 94, 0.28);
}
.myaccount__mc-card-cta--secondary {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.05);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 18px rgba(0, 0, 0, 0.3);
}
.myaccount__mc-card-cta--secondary:hover {
  transform: translateY(-1px);
  border-color: rgba(244, 121, 35, 0.7);
  color: #ffb366;
  background-color: rgba(244, 121, 35, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 10px 24px rgba(0, 0, 0, 0.36), 0 4px 16px rgba(244, 121, 35, 0.26);
}
.myaccount__cert-card-cta:disabled {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.04);
  background-image: none;
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Payment status tick: a glass medallion with a ring of its own colour. */
.myaccount__pay-card-status {
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 20px rgba(0, 0, 0, 0.4);
}
.myaccount__pay-card-status--success {
  border-color: rgba(34, 197, 94, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 6px rgba(34, 197, 94, 0.07), 0 6px 24px rgba(34, 197, 94, 0.28);
}
.myaccount__pay-action {
  border-radius: 999px;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.myaccount__pay-action:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 8px 20px rgba(0, 0, 0, 0.35);
}
.myaccount__pay-pill {
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Certificates */
.myaccount__cert-card[data-cert-status=completed] {
  border-color: rgba(34, 197, 94, 0.22);
}
.myaccount__cert-card-image {
  position: relative;
}
/* Keeps the status chip legible over a busy poster. */
.myaccount__cert-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 14, 0.55) 0%, rgba(10, 10, 14, 0) 42%);
  pointer-events: none;
}
.myaccount__cert-card-status {
  z-index: 2;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px rgba(0, 0, 0, 0.38);
}
.myaccount__cert-card-tags li {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .myaccount__mc-card,
  .myaccount__pay-card,
  .myaccount__cert-card {
    background-color: #17171b;
  }
}
@media (prefers-reduced-motion: reduce) {
  .myaccount__mc-card,
  .myaccount__pay-card,
  .myaccount__cert-card {
    transition: none !important;
  }
  .myaccount__mc-card:hover,
  .myaccount__pay-card:hover,
  .myaccount__cert-card:hover {
    transform: none !important;
  }
  .myaccount__mc-card-image img,
  .myaccount__cert-card-image img {
    transition: none !important;
    transform: none !important;
  }
}

/* =========================================================================
   Premium polish layer — Footer
   The structural problem was hierarchy: column headings rendered at 2.66rem
   while their links sat at 1.25rem, so the labels shouted and the things you
   actually click receded. Headings become quiet uppercase labels and the
   links become the content. The rest is depth — a lit seam, a soft aurora,
   and real affordances on the social buttons.
   ========================================================================= */
.footer-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0b0b0e 0%, #0e0e12 55%, #111116 100%);
  padding-top: 4.25rem;
}
/* The seam between page and footer, lit in the middle. */
.footer-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(244, 121, 35, 0.15) 18%, rgba(244, 121, 35, 0.65) 50%, rgba(244, 121, 35, 0.15) 82%, transparent 100%);
  z-index: 2;
}
/* Depth, so the footer is a surface rather than a flat slab. */
.footer-section::after {
  content: "";
  position: absolute;
  top: -45%;
  left: 50%;
  width: 70vw;
  height: 70vw;
  max-width: 920px;
  max-height: 920px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(244, 121, 35, 0.1) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.footer-section .footer-container,
.footer-section .footer-bottom {
  position: relative;
  z-index: 1;
}
.footer-section .footer-columns .footer-column .footer-title {
  font-size: 0.78rem !important;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a8a94;
  margin-bottom: 1.2rem;
  line-height: 1.4;
}
.footer-section .footer-columns .footer-column .footer-links li {
  font-size: 0.98rem !important;
  font-weight: 400;
  margin-bottom: 0.72rem;
  color: #c9c9d1;
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hover belongs to the link, not the row. Each <li> is a block that spans the
   full column width, so li:hover fired anywhere across that width — including
   empty space well away from the text. The <a> is inline-block, so it is only
   as wide as its label and the hover target matches what you can see. */
.footer-section .footer-columns .footer-column .footer-links li:hover {
  color: #c9c9d1;
  transform: none;
}
/* No transform here on purpose. Sliding the link 4px right moved the hit box
   out from under the cursor: hovering the leftmost 4px shifted it away,
   un-hovered, shifted back, and flickered. The underline wipe is the
   affordance; it costs no layout. */
.footer-section .footer-columns .footer-column .footer-links a:hover {
  color: #fff;
}
/* The pointer cursor belongs to the link too. It was set on the <li>, a block
   spanning the whole column, so the hand cursor appeared over empty space far
   from any text — the same row-vs-link mismatch as the hover state. */
.footer-section .footer-columns .footer-column .footer-links li {
  cursor: default;
}
.footer-section .footer-columns .footer-column .footer-links a {
  cursor: pointer;
}
/* An underline that wipes in from the left — the affordance the links never had. */
.footer-section .footer-links a {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-section .footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #F47923, rgba(244, 121, 35, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-section .footer-links a:hover::after {
  transform: scaleX(1);
}
/* Social: frosted glass buttons. */
.footer-section .footer-social {
  gap: 0.6rem;
}
.footer-section .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #c9c9d1;
  background-color: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}
.footer-section .footer-social a:hover {
  transform: translateY(-3px);
  color: #fff;
  background-color: rgba(244, 121, 35, 0.16);
  border-color: rgba(244, 121, 35, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(244, 121, 35, 0.35);
}
/* The lift now belongs to the button, not the glyph inside it. */
.footer-section .footer-social i {
  font-size: 1.02rem;
  transition: none;
}
.footer-section .footer-social i:hover {
  transform: none;
}
.footer-section .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 2.5rem;
  padding-top: 1.35rem;
}
.footer-section .footer-ninja-text {
  color: #9a9aa4;
  letter-spacing: 0.01em;
}
@media (prefers-reduced-motion: reduce) {
  .footer-section .footer-columns .footer-column .footer-links a:hover,
  .footer-section .footer-social a:hover {
    transform: none;
  }
  .footer-section .footer-links a::after {
    transition: none;
  }
}

/* =========================================================================
   In-button hover motion (site-wide)
   The outer "pop" every button already has (lift + shadow) is deliberately
   untouched. This adds movement INSIDE the button: a light sweep across its
   face and a nudge on its icon.
   ::after is free on all of these — .hero__btn is the only one already using
   a pseudo-element and it uses ::before.
   ========================================================================= */
.lp__choice-cta,
.subscribe-page__cta,
.subscribe-banner__cta,
.sna-modal__btn,
.enroll-card__btn,
.payment-result__cta,
.trial-banner__cta,
.hero__btn,
.cta-btn,
.enrollment-popup__next-btn,
.myaccount__mc-card-cta,
.myaccount__cert-card-cta,
.myaccount__pay-action,
.ban-notice__btn--ok,
.legal-backtotop__btn {
  position: relative;
  overflow: hidden;
}
/* The sweep. Parked off the left edge, skewed so it reads as a light source
   crossing the face rather than a sliding rectangle. */
.lp__choice-cta::after,
.subscribe-page__cta::after,
.subscribe-banner__cta::after,
.sna-modal__btn::after,
.enroll-card__btn::after,
.payment-result__cta::after,
.trial-banner__cta::after,
.hero__btn::after,
.cta-btn::after,
.enrollment-popup__next-btn::after,
.myaccount__mc-card-cta::after,
.myaccount__cert-card-cta::after,
.myaccount__pay-action::after,
.ban-notice__btn--ok::after,
.legal-backtotop__btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 1;
}
.lp__choice-cta:hover::after,
.subscribe-page__cta:not(:disabled):hover::after,
.subscribe-banner__cta:hover::after,
.sna-modal__btn:hover::after,
.enroll-card__btn:hover::after,
.payment-result__cta:hover::after,
.trial-banner__cta:hover::after,
.hero__btn:hover::after,
.cta-btn:hover::after,
.enrollment-popup__next-btn:not(:disabled):hover::after,
.myaccount__mc-card-cta:hover::after,
.myaccount__cert-card-cta:not(:disabled):hover::after,
.myaccount__pay-action:hover::after,
.ban-notice__btn--ok:hover::after,
.legal-backtotop__btn:hover::after {
  animation: sna-btn-shine 0.8s ease-in-out;
}
@keyframes sna-btn-shine {
  from { left: -60%; }
  to { left: 125%; }
}
/* Disabled buttons do not respond. */
.subscribe-page__cta:disabled::after,
.enrollment-popup__next-btn:disabled::after,
.myaccount__cert-card-cta:disabled::after {
  content: none;
}
@media (prefers-reduced-motion: reduce) {
.lp__choice-cta:hover::after,
.subscribe-page__cta:not(:disabled):hover::after,
.subscribe-banner__cta:hover::after,
.sna-modal__btn:hover::after,
.enroll-card__btn:hover::after,
.payment-result__cta:hover::after,
.trial-banner__cta:hover::after,
.hero__btn:hover::after,
.cta-btn:hover::after,
.enrollment-popup__next-btn:not(:disabled):hover::after,
.myaccount__mc-card-cta:hover::after,
.myaccount__cert-card-cta:not(:disabled):hover::after,
.myaccount__pay-action:hover::after,
.ban-notice__btn--ok:hover::after,
.legal-backtotop__btn:hover::after {
    animation: none;
  }
}

/* The icon leans in with the sweep. Scale rather than a slide, because these
   are leading icons (play, download, lock) — sliding them right would read as
   a back-to-front arrow. The My Account block below replaces this with its
   own icon treatment. */
.lp__choice-cta i,
.subscribe-page__cta i,
.subscribe-banner__cta i,
.sna-modal__btn i,
.enroll-card__btn i,
.payment-result__cta i,
.trial-banner__cta i,
.hero__btn i,
.cta-btn i,
.enrollment-popup__next-btn i,
.myaccount__mc-card-cta i,
.myaccount__cert-card-cta i,
.myaccount__pay-action i {
  display: inline-block;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp__choice-cta:hover i,
.subscribe-page__cta:not(:disabled):hover i,
.subscribe-banner__cta:hover i,
.sna-modal__btn:hover i,
.enroll-card__btn:hover i,
.payment-result__cta:hover i,
.trial-banner__cta:hover i,
.hero__btn:hover i,
.cta-btn:hover i,
.enrollment-popup__next-btn:not(:disabled):hover i,
.myaccount__mc-card-cta:hover i,
.myaccount__cert-card-cta:not(:disabled):hover i,
.myaccount__pay-action:hover i {
  transform: scale(1.14);
}
@media (prefers-reduced-motion: reduce) {
.lp__choice-cta i,
.subscribe-page__cta i,
.subscribe-banner__cta i,
.sna-modal__btn i,
.enroll-card__btn i,
.payment-result__cta i,
.trial-banner__cta i,
.hero__btn i,
.cta-btn i,
.enrollment-popup__next-btn i,
.myaccount__mc-card-cta i,
.myaccount__cert-card-cta i,
.myaccount__pay-action i {
    transition: none;
  }
.lp__choice-cta:hover i,
.subscribe-page__cta:not(:disabled):hover i,
.subscribe-banner__cta:hover i,
.sna-modal__btn:hover i,
.enroll-card__btn:hover i,
.payment-result__cta:hover i,
.trial-banner__cta:hover i,
.hero__btn:hover i,
.cta-btn:hover i,
.enrollment-popup__next-btn:not(:disabled):hover i,
.myaccount__mc-card-cta:hover i,
.myaccount__cert-card-cta:not(:disabled):hover i,
.myaccount__pay-action:hover i {
    transform: none;
  }
}

/* =========================================================================
   My Account button motion
   Deliberately a different mechanic from the site-wide shine. Instead of a
   highlight travelling ACROSS a static fill, the fill itself lights up: a
   radial bloom parked at zero width behind the label expands from the icon
   side, so the button reads as lit from within. Paired with a halo that opens
   outward and an icon that lifts and glows.

   Done with background-size on a second background layer, not a pseudo-
   element: backgrounds always paint behind text, so the label needs no z-index
   — which matters because the certificate button's label is a bare text node
   with nothing to stack.
   ========================================================================= */
.myaccount__mc-card-cta,
.myaccount__cert-card-cta,
.myaccount__pay-action {
  background-repeat: no-repeat;
  transition: background-size 0.55s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Primary — bloom over the site-standard orange fill. The base layer is
   untouched, so the resting button still matches .subscribe-page__cta. */
.myaccount__mc-card-cta--primary,
.myaccount__cert-card-cta:not(:disabled) {
  background-image: radial-gradient(circle at 12% 50%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, #fb8c3e 0%, #f97316 100%);
  background-size: 0% 320%, 100% 100%;
  background-position: 0% 50%, 0 0;
}
.myaccount__mc-card-cta--primary:hover,
.myaccount__cert-card-cta:not(:disabled):hover {
  background-size: 280% 320%, 100% 100%;
  box-shadow: 0 9px 24px rgba(249, 115, 22, 0.45), 0 0 0 3px rgba(249, 115, 22, 0.16);
}
/* Outline variants — same bloom, tuned down so it reads on glass. */
.myaccount__mc-card-cta--success {
  background-image: radial-gradient(circle at 12% 50%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 0% 320%, 100% 100%;
  background-position: 0% 50%, 0 0;
}
.myaccount__mc-card-cta--success:hover {
  background-size: 280% 320%, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 10px 24px rgba(0, 0, 0, 0.36), 0 0 0 3px rgba(34, 197, 94, 0.14);
}
.myaccount__mc-card-cta--secondary {
  background-image: radial-gradient(circle at 12% 50%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 0% 320%, 100% 100%;
  background-position: 0% 50%, 0 0;
}
.myaccount__mc-card-cta--secondary:hover {
  background-size: 280% 320%, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 10px 24px rgba(0, 0, 0, 0.36), 0 0 0 3px rgba(244, 121, 35, 0.16);
}
/* Payment pills get the halo and icon glow, but no bloom — their fill is set
   by the payments partial and layering a second background here would fight
   whichever variant (paid / pending / overdue) is in play. */
.myaccount__pay-action:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 8px 20px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(255, 255, 255, 0.07);
}
/* The icon lifts and picks up a glow instead of the plain scale used site-wide. */
.myaccount__mc-card-cta i,
.myaccount__cert-card-cta i,
.myaccount__pay-action i {
  display: inline-block;
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.42s ease;
}
.myaccount__mc-card-cta:hover i,
.myaccount__cert-card-cta:not(:disabled):hover i,
.myaccount__pay-action:hover i {
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 3px 6px rgba(255, 255, 255, 0.45));
}
.myaccount__cert-card-cta:disabled:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
@media (prefers-reduced-motion: reduce) {
  .myaccount__mc-card-cta,
  .myaccount__cert-card-cta,
  .myaccount__pay-action {
    transition: none;
  }
  .myaccount__mc-card-cta:hover,
  .myaccount__cert-card-cta:hover,
  .myaccount__pay-action:hover {
    background-size: 0% 320%, 100% 100%;
  }
  .myaccount__mc-card-cta i,
  .myaccount__cert-card-cta i,
  .myaccount__pay-action i {
    transition: none;
  }
  .myaccount__mc-card-cta:hover i,
  .myaccount__cert-card-cta:hover i,
  .myaccount__pay-action:hover i {
    transform: none;
    filter: none;
  }
}

/* =========================================================================
   Premium polish — course cards, mentor rows, account profile
   Built on the existing --sna-* tokens from the SNA PREMIUM DESIGN SYSTEM
   block above rather than fresh rgba values, so these surfaces stay tied to
   the same palette as every other glass card.
   ========================================================================= */

/* ---- Courses listing card ---------------------------------------------- */
.dashboard__course-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}
/* Lit top edge, revealed on hover — the same signature as the account cards. */
.dashboard__course-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(244, 121, 35, 0.26) 22%, rgba(244, 121, 35, 0.78) 50%, rgba(244, 121, 35, 0.26) 78%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 3;
}
.dashboard__course-card:hover::before {
  opacity: 1;
}
.dashboard__course-image img {
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.dashboard__course-card:hover .dashboard__course-image img {
  transform: scale(1.05);
}
/* Category becomes a glass chip instead of loose uppercase text — it reads as
   a tag you could filter by, which is what it is. */
.dashboard__course-top-title {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin-bottom: 0.6rem;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(244, 121, 35, 0.12);
  border: 1px solid rgba(244, 121, 35, 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #ffb366;
  font-size: 0.66rem;
  letter-spacing: 0.13em;
}
.dashboard__course-title {
  font-size: 1.16rem;
  color: #ffffff;
  letter-spacing: -0.005em;
  margin-bottom: 0.1rem;
}
/* Mentor row: separated by a hairline and given an avatar disc, so the
   attribution reads as a person rather than a caption. */
.dashboard__course-label {
  margin-top: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: #b9b9c4;
  font-size: 0.84rem;
  gap: 0.55rem;
}
.dashboard__course-label::before {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.05);
  background-size: 16px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.dashboard__course-card:hover .dashboard__course-label::before {
  border-color: rgba(244, 121, 35, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 14px rgba(244, 121, 35, 0.28);
}

/* ---- My Courses mentor chip -------------------------------------------- */
.myaccount__mc-card-instructor {
  align-self: flex-start;
  gap: 0.5rem;
  padding: 4px 12px 4px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #c9c9d1;
}
.myaccount__mc-card-instructor i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sna-grad);
  color: #fff;
  font-size: 0.78rem;
  box-shadow: 0 2px 8px rgba(244, 121, 35, 0.4);
}

/* ---- Account profile ---------------------------------------------------- */
.myaccount__profile {
  position: relative;
  overflow: hidden;
  padding: 1.15rem 1.4rem;
  border-radius: 20px;
  background: var(--sna-glass);
  -webkit-backdrop-filter: var(--sna-blur);
  backdrop-filter: var(--sna-blur);
  border: 1px solid var(--sna-glass-border);
  box-shadow: var(--sna-glass-hi), var(--sna-shadow);
}
/* A soft accent wash behind the avatar so the block has a light source. */
.myaccount__profile::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -6%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(244, 121, 35, 0.16) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.myaccount__profile-avatar,
.myaccount__profile-info {
  position: relative;
  z-index: 1;
}
/* Ringed avatar: hairline, then an accent halo, then depth. */
.myaccount__profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 4px rgba(244, 121, 35, 0.16), 0 12px 28px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.myaccount__profile-avatar:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 0 5px rgba(244, 121, 35, 0.3), 0 16px 34px rgba(0, 0, 0, 0.55);
}
.myaccount__profile-name {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #ffffff;
  line-height: 1.15;
}
.myaccount__profile-meta {
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
/* Email becomes a glass chip so it stops competing with the name. */
.myaccount__profile-email {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #c2c2cc;
  font-size: 0.84rem;
}
.myaccount__profile-email i {
  color: #ffb366;
  font-size: 0.92rem;
}
.myaccount__profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(244, 121, 35, 0.12);
  border: 1px solid rgba(244, 121, 35, 0.36);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #ffb366;
}
/* ---- Entitlement tiers -------------------------------------------------
   Three distinct materials, so the tier is readable at a glance rather than
   from the wording alone. Weight tracks entitlement: the two owned tiers are
   filled metal, the trial is glass — lighter, and visibly temporary.
   ------------------------------------------------------------------------ */

/* Pro Student — owns the course outright. Gold: permanent, earned. */
.myaccount__profile-badge--pro {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 58%), linear-gradient(135deg, #f9d976 0%, #f0a91f 52%, #d9820a 100%);
  border-color: rgba(255, 255, 255, 0.34);
  color: #2a1c05;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(120, 74, 6, 0.35), 0 4px 14px rgba(240, 169, 31, 0.38);
}
.myaccount__profile-badge--pro i {
  color: #4a3208;
}

/* Subscription — a live plan. Brand orange, so it reads as "currently on",
   and distinct from the gold of ownership. */
.myaccount__profile-badge--subscription {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 58%), var(--sna-grad);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(120, 52, 4, 0.3), 0 4px 14px rgba(249, 115, 22, 0.4);
}
.myaccount__profile-badge--subscription i {
  color: #fff3e6;
}

/* Free Trial — borrowed, not owned. Cool teal glass instead of filled metal:
   lighter in the hierarchy, and the only tier that is see-through. */
.myaccount__profile-badge--trial {
  background-color: rgba(45, 212, 191, 0.12);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0) 100%);
  border-color: rgba(45, 212, 191, 0.45);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  color: #7fe7d5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 14px rgba(45, 212, 191, 0.18);
}
.myaccount__profile-badge--trial i {
  color: #5eead4;
}

/* The tier icon already carries the meaning; the generic status dot beside it
   just reads as a smudge on the filled badges. */
.myaccount__profile-badge--pro::before,
.myaccount__profile-badge--subscription::before,
.myaccount__profile-badge--trial::before {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .dashboard__course-image img,
  .myaccount__profile-avatar {
    transition: none;
  }
  .dashboard__course-card:hover .dashboard__course-image img,
  .myaccount__profile-avatar:hover {
    transform: none;
  }
}

/* The animated shimmer that used to live on --premium, carried onto the two
   OWNED tiers. Each gets a glow in its own colour — the shared
   sna-premium-glow hardcodes orange, which fights the gold. The trial stays
   deliberately still: it is a countdown, not an achievement, and a shimmering
   "Free Trial" would outshine the tiers people pay for. */
@keyframes sna-badge-glow-gold {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(120, 74, 6, 0.35), 0 4px 14px rgba(240, 169, 31, 0.38);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(120, 74, 6, 0.35), 0 4px 26px rgba(240, 169, 31, 0.7);
  }
}
@keyframes sna-badge-glow-accent {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(120, 52, 4, 0.3), 0 4px 14px rgba(249, 115, 22, 0.4);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(120, 52, 4, 0.3), 0 4px 26px rgba(249, 115, 22, 0.7);
  }
}
.myaccount__profile-badge--pro,
.myaccount__profile-badge--subscription {
  position: relative;
  overflow: hidden;
}
.myaccount__profile-badge--pro {
  animation: sna-badge-glow-gold 2.6s ease-in-out infinite;
}
.myaccount__profile-badge--subscription {
  animation: sna-badge-glow-accent 2.6s ease-in-out infinite;
}
.myaccount__profile-badge--pro::after,
.myaccount__profile-badge--subscription::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  animation: sna-premium-sheen 2.6s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .myaccount__profile-badge--pro,
  .myaccount__profile-badge--subscription {
    animation: none;
  }
  .myaccount__profile-badge--pro::after,
  .myaccount__profile-badge--subscription::after {
    animation: none;
    display: none;
  }
}

/* =========================================================================
   Footer social — macOS Dock tiles
   Dock geometry (squircle tiles, magnify on hover) but a single glass material
   instead of brand colours: translucent, blurred, with a lit top edge. The
   glyph carries the identity; the tile stays neutral so the row reads as one
   set rather than eight competing logos.
   ========================================================================= */
/* Scoped under .footer-bottom (0,3,0) so it outranks
   `.footer-section .footer-bottom .footer-social { gap: 1rem }` further up the
   sheet — the gap declared here previously lost to it and never applied.
   16px is what that 1rem actually rendered, and the spacing the no-bleed hover
   shadows below were measured against; stated in px so a change to the root
   font size cannot narrow it back into bleeding range. */
.footer-section .footer-bottom .footer-social {
  column-gap: 16px;
  /* Bottom-aligned so a magnified tile grows upward out of the row, the way
     the Dock does, instead of pushing its neighbours around. */
  align-items: flex-end;
  padding-bottom: 6px;
}
.footer-section .footer-bottom .footer-social .footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* ~22.5% of the box — the Big Sur icon-corner ratio. */
  border-radius: 10px;
  color: #e6e6ef;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-color: rgba(255, 255, 255, 0.06);
  /* Sheen fading out by the midpoint: the light falling on the top of the
     glass. The inner bottom edge gives the tile thickness. */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  /* Drop shadows here have to stay inside the 16px gap. A tile has its own
     backdrop-filter, so a shadow reaching across the gap gets re-blurred by the
     neighbour and tints its whole glass panel — the neighbour appears to react
     to a hover it never received. Measured: a 20px-blur resting shadow plus a
     28px hover shadow changed 1118 neighbour pixels; these tight ones change 0. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.24), 0 3px 8px rgba(0, 0, 0, 0.34);
  transform-origin: bottom center;
  /* Never shrink: flex-shrink crushed these to 23x40 at 320px. Below 600px the
     row is a grid instead, so this only guards the single-row widths. */
  flex: 0 0 auto;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, border-color 0.28s ease, background-color 0.28s ease, color 0.28s ease;
}
.footer-section .footer-bottom .footer-social .footer-social__link i {
  font-size: 1.2rem;
  line-height: 1;
}
/* The magnify. */
.footer-section .footer-bottom .footer-social .footer-social__link:hover,
.footer-section .footer-bottom .footer-social .footer-social__link:focus-visible {
  /* The old glass-circle hover tinted the border orange; the tile keeps a
     neutral lit rim and just brightens instead. */
  border-color: rgba(255, 255, 255, 0.34);
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transform: translateY(-9px) scale(1.2);
  /* Deeper than the resting shadow so the tile reads as lifted, but still short
     of the gap. A scale(1.2) on 44px only grows 4.4px per side, so the tile
     never overlaps a neighbour and needs no z-index — and skipping it avoids a
     paint-order jump that made every later sibling repaint on hover. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.26), 0 8px 14px rgba(0, 0, 0, 0.48);
}

@media (max-width: 600px) {
  /* Eight tiles cannot share one line on a phone: at 320px only 288px is
     available, which caps a one-row tile at 22px — under the 24px minimum touch
     size. Free wrapping filled the first line greedily and left an orphaned
     6 + 2. An explicit four-column grid gives a deliberate 4 + 4 block at every
     phone width, with 40px tiles intact. */
  .footer-section .footer-bottom .footer-social {
    display: grid;
    grid-template-columns: repeat(4, 40px);
    justify-content: center;
    align-items: end;
    column-gap: 14px;
    /* A hovered tile on the lower row travels 9px up and gains ~4px from
       scale(1.2); this row-gap keeps it clear of the tile above, shadow
       included, so the two rows never interfere. */
    row-gap: 22px;
  }
  .footer-section .footer-bottom .footer-social .footer-social__link {
    width: 40px;
    height: 40px;
    border-radius: 9px;
  }
}
/* Without backdrop-filter the tiles would read as flat grey squares. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .footer-section .footer-social .footer-social__link {
    background-color: rgba(38, 38, 44, 0.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  .footer-section .footer-social .footer-social__link,
  .footer-section .footer-social .footer-social__link:hover,
  .footer-section .footer-social .footer-social__link:focus-visible {
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   Footer brand — optical alignment of the Startup India mark
   The element edges were already flush with the tagline above it; the inset
   is baked into the asset. footer_startup_logo.png is a 404x95 canvas whose
   artwork starts 8px in (~1.98% of the width), so at the rendered 14rem the
   mark floated ~4.4px right of the text. Pull it back by that same ratio so
   the correction holds if the width changes.

   Left-aligned layouts only: below 1024px the logo is centred in its grid
   cell, where a one-sided trim would push it off-centre instead.
   ========================================================================= */
@media (min-width: 1024px) {
  .footer-section .footer-container .footer-brand-section .partner-logos .footer-startup-logo {
    margin-left: calc(14rem * -0.0198);
  }
}


/* =========================================================================
   ENROLL CARD: HELD FOR APPROVAL
   template/course/hero.php  —  the $isApplicationPending branch

   A free-plan student whose course request is waiting on the team. The button
   keeps its own label and stops working; the reason lives in a popover on it,
   because a card that has room for one sentence should not spend it on a
   paragraph nobody reads until the button disappoints them.

   POSITION IS LOAD-BEARING. This block sits AFTER the premium button
   treatment above, which gives every `.enroll-card__btn` a hover shine
   (`::after`) and an icon lean at equal specificity. Equal specificity is
   settled by source order, so a held button written earlier in this file
   still shimmers and still leans — it looks alive while doing nothing.

   Written straight into styles.css, like the rest of this card. The SASS at
   workspace/sass/layout/course-idv/_hero.scss compiles to roughly line 10800
   and would land these rules on the wrong side of that premium block, so a
   copy over there would be a source of truth that does not work.
   ========================================================================= */

/* The button is absolutely positioned FROM here, and inherits the auto margin
   that used to pin the button itself to the bottom of the card. */
.enroll-card__pending {
  position: relative;
  margin-top: auto;
}
.enroll-card__pending .enroll-card__btn--pending {
  margin-top: 0;
}

/* Not the orange CTA. A dimmed primary button still reads as the thing to
   press; this reads as a state. `not-allowed` rather than `default` because
   the cursor is the first hint that the hover is worth waiting for. */
.enroll-card__btn--pending {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.74);
  cursor: not-allowed;
  box-shadow: none;
}
.enroll-card__btn--pending:hover {
  transform: none;
  box-shadow: none;
}
.enroll-card__btn--pending .enroll-card__btn-icon {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.66);
}

/* Undo the two inherited "this button is alive" cues. `content: none` follows
   the same idiom the disabled buttons above use — it removes the sweep
   outright rather than only suppressing it on hover. */
.enroll-card__btn--pending::after {
  content: none;
}
.enroll-card__btn--pending:hover i {
  transform: none;
}

/* The popover. A SIBLING of the button, never a child: `.enroll-card__btn`
   carries `overflow: hidden` for the shine, which would clip this to the
   button's own box.

   BELOW the button, not above. Above, it landed on top of the course overview
   list — the button is the last thing in the card, so there is nothing under it
   to cover, and no ancestor (`.enroll-card`, `.course-idv__hero`, the grid)
   sets `overflow: hidden`, so hanging past the card's bottom edge is safe. */
.enroll-card__popover {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 4;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(23, 23, 27, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 400;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  /* Rises INTO place from just under the button, matching the new direction —
     the old +4px slid it up toward a button that is now above it. */
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.enroll-card__popover strong {
  display: block;
  margin-bottom: 3px;
  color: #ffffff;
  font-weight: 600;
}

/* The caret is nearly opaque on purpose: it sits over the card, outside the
   popover's backdrop-filter region, so a 0.72 alpha that matches the panel on
   paper reads noticeably lighter on screen.

   Points UP, off the popover's top edge, since the panel now hangs below the
   button. */
.enroll-card__popover::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 26px;
  border: 7px solid transparent;
  border-bottom-color: rgba(28, 28, 32, 0.92);
}

/* Hover for a mouse, focus for everything else. `:focus-within` is what makes
   this work on a phone and from the keyboard — the button is a focusable
   <span>, so a tap or a Tab opens the popover exactly like a hover does.
   `:focus-visible` would have been wrong here: it stays quiet for a tap,
   which is the one case with no hover to fall back on. */
.enroll-card__pending:hover .enroll-card__popover,
.enroll-card__pending:focus-within .enroll-card__popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .enroll-card__popover {
    transition: none;
  }
}

/* == SALE OFFER: START (compiled from workspace/sass/layout/_offer.scss) == */
/* ==========================================================================
   SALE OFFER BAR  —  template/layout/_offer-bar.php

   The strip above the header, and the popup that goes with it.

   Self-contained: it is appended to the deployed styles.css as one block (this
   repo has no node_modules, so the whole file cannot be safely recompiled), so
   it must not depend on variables declared elsewhere. Colours are literal.
   ========================================================================== */
.sna-offer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 44px 10px 20px; /* right padding clears the close button */
  /* Dark, with the light gathering in the middle where the copy is. The
     reference runs black-to-blue; this runs black-to-ember so the strip reads
     as part of this site rather than as an advert pasted onto it. */
  background: radial-gradient(120% 180% at 50% 120%, rgba(249, 115, 22, 0.38) 0%, rgba(249, 115, 22, 0) 62%), linear-gradient(90deg, #050506 0%, #101014 28%, #16161c 50%, #101014 72%, #050506 100%);
  border-bottom: 1px solid rgba(249, 115, 22, 0.22);
  color: #f5f5f6;
  /* ABOVE the sticky header's 9999, because the bar sits above it in the flow
     and its ember glow bleeds upward into the header's own shadow. Without
     this the glow is clipped by the header and the strip gets a hard seam. */
  position: relative;
  z-index: 10000;
  /* ...but BELOW it while the off-canvas menu is open.

     The mobile menu is `position: fixed; top: 0; bottom: 0` — it covers the
     whole screen — but it lives INSIDE `.site-header`, so its own z-index of
     10001 is scoped to the header's 9999 context and cannot reach past this
     strip. The result was the menu's top 96px being painted over by the sale
     copy, and on a phone that band is exactly where the signed-in profile
     block sits: avatar, name and Log out, all hidden behind the offer.

     Only while the menu is open, so the glow keeps its reason for existing the
     rest of the time. `body.nav-open` is the site's own signal, set in
     workspace/js/layout/_nav.js alongside `.main-nav.open`.

     9998, not 9999: below the header rather than level with it, so the menu,
     the dark overlay behind it and the header itself all paint over the bar
     instead of tying with it. */
}
body.nav-open .sna-offer {
  z-index: 9998;
}

.sna-offer__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
}

.sna-offer__copy {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* The number is the message. Everything else on the strip is support for it. */
.sna-offer__percent {
  font-weight: 800;
  color: #fb923c;
  text-shadow: 0 0 18px rgba(249, 115, 22, 0.45);
}

.sna-offer__title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #e9e9ee;
}

/* The way to the offers the strip has no room to name. Quiet on purpose: it
   sits inside the sentence, and a second solid button beside the real CTA would
   compete with the thing the bar exists to get pressed. */
.sna-offer__more {
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(249, 115, 22, 0.45);
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.12);
  color: #fb923c;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.sna-offer__more:hover, .sna-offer__more:focus-visible {
  background: rgba(249, 115, 22, 0.24);
  color: #ffd6b0;
}
.sna-offer__more:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.85);
  outline-offset: 2px;
}

.sna-offer__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f97316 0%, #ff9544 100%);
  color: #170d03;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
  transition: filter 0.18s ease, transform 0.18s ease;
}
.sna-offer__cta:hover, .sna-offer__cta:focus-visible {
  filter: brightness(1.07);
  transform: translateY(-1px);
  color: #170d03;
  text-decoration: none;
}

/* ---- the clock ----------------------------------------------------------- */
.sna-offer__clock {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  color: #fff;
  /* Tabular figures, and this is not cosmetic: without them the strip's width
     shifts every single second as the digits change, and on a centred layout
     that means the whole bar twitches once a second, forever. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.sna-offer__clock i {
  font-style: normal;
  font-size: 17px;
  line-height: 1.05;
  color: rgba(255, 255, 255, 0.35);
}

.sna-offer__unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 26px;
}
.sna-offer__unit b {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
}
.sna-offer__unit small {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.5);
}

.sna-offer__close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 17px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.sna-offer__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.sna-offer__close:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.85);
  outline-offset: 2px;
  border-radius: 8px;
}

/* On a phone the strip stacks: copy on one line, then the button and the clock
   side by side. Hiding the countdown would be the easy answer and the wrong
   one — the timer is the reason the bar works. */
@media (max-width: 767.98px) {
  .sna-offer {
    padding: 9px 38px 9px 12px;
  }
  .sna-offer__inner {
    gap: 6px 12px;
  }
  .sna-offer__copy {
    flex: 1 0 100%;
    text-align: center;
    font-size: 13px;
  }
  .sna-offer__cta {
    padding: 6px 13px;
    font-size: 12.5px;
  }
  .sna-offer__unit {
    min-width: 22px;
  }
  .sna-offer__unit b {
    font-size: 17px;
  }
  .sna-offer__unit small {
    font-size: 8.5px;
  }
}
/* ---- the digits ----------------------------------------------------------

   A value leaves upward and its replacement arrives from below, like a split-
   flap board. Two layers, because a single element cannot be in both places:
   the JS stacks an outgoing span on an incoming one and removes the loser.

   The clipping window is the `b`. Without a definite height and overflow the
   two layers would simply both be visible, mid-slide, forever. */
.sna-offer__unit b {
  position: relative;
  display: block;
  overflow: hidden;
  /* em, not px: the strip sets these at 20px and the popup at 26px, and the
     window has to track whichever it is. Slightly over 1 so descenders and
     the odd tall glyph are not shaved. */
  height: 1.08em;
  line-height: 1.08;
}

.sna-offer__roll {
  display: block;
  will-change: transform;
}

/* Absolute so the two occupy the same line while they cross, rather than the
   outgoing one briefly doubling the height of the clock. */
.sna-offer__roll.is-out {
  position: absolute;
  inset: 0;
  animation: sna-offer-roll-out 0.2s ease-in both;
}

/* HANDED OVER, NOT CROSSED. The delay is the fix, not a flourish.
   Running both at once meant they travelled through the same clipping window
   together — measured mid-swap, the old value sat at -15px on 0.33 opacity
   while the new one was at +7px on 0.67, i.e. two digits legibly printed over
   each other every single second. The leaver is gone before the arrival is
   anywhere near the window. */
.sna-offer__roll.is-in {
  animation: sna-offer-roll-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}

/* ---- the popup ----------------------------------------------------------- */
/* Sized by what it says. An offer is one sentence, one clock and one button —
   sometimes three words, sometimes three lines — so the card measures its own
   content instead of sitting in a fixed column that a short offer leaves half
   empty and a long one crams. */
.sna-offer-modal {
  position: fixed;
  inset: 0;
  z-index: 20000; /* above the bar (10000) and the header (9999) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
.sna-offer-modal[hidden] {
  display: none;
}
.sna-offer-modal {
  /* The dialog takes focus on open so the reader lands inside it. It is a
     container, not a control — the card appearing IS the affordance, and a
     ring around the whole overlay would be meaningless. Suppressed here and
     ONLY here: every real control inside keeps its own focus-visible ring. */
}
.sna-offer-modal:focus, .sna-offer-modal:focus-visible {
  outline: none;
}
.sna-offer-modal {
  /* The site's glass, token for token with the notification panel and the app
     launcher — same 0.72 tint, same frost, same gradient glow along the top
     edge. This card used to be an opaque slab, which made it the one dialog
     on either site built from a different material.

     The ember radial sits UNDER the glow line: both are background-image
     layers on one element, and the first listed paints on top. */
}
.sna-offer-modal__card {
  position: relative;
  /* A DEFINITE width, not one derived from the content.
     This card used to size to `max-content`, which hugged the longest
     line it contained. That cannot coexist with centred content: a box
     exactly as wide as its widest line has nothing to centre anything
     within, so every line would sit flush anyway and the centring would
     be invisible. A fixed measure is what makes the alignment read.
     `min(…, 100%)` keeps it inside whatever width the overlay's own
     padding leaves on a narrow screen. */
  width: 100%;
  max-width: min(640px, 100%);
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid #26262b;
  /* Glassier than the site's standard 0.72 panel, deliberately: this one
     sits over a course page rather than over the flat page background, so
     there is real content behind it for the blur to work on. The heavier
     blur is what buys the transparency — at 30px the backdrop is smeared
     far past legibility, so letting more of it through costs no contrast. */
  background-color: rgba(23, 23, 27, 0.58);
  /* One neutral highlight along the top edge and nothing else. The ember
     wash that used to sit under this made the card read as a coloured
     panel rather than as glass — you saw orange, not through it. All the
     colour on the card now comes from its content: the percentage and the
     button. This is just the light catching the top edge. */
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 18%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0.06) 82%, transparent 100%);
  background-size: 56% 1px;
  background-position: 50% 0;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  backdrop-filter: blur(30px) saturate(165%);
  /* Transparency costs a card its edge definition; the shadow puts it
     back, or the dialog reads as part of the page behind it. */
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: sna-offer-pop 0.44s cubic-bezier(0.16, 1, 0.3, 1) both;
  /* Depth, with no hue. Two very faint WHITE lights drifting behind the
     copy on a slow 22s cycle — enough that the surface is not perfectly
     flat, not enough to tint it. This replaced an orange-and-violet
     aurora that was doing the same job far too loudly: it painted the
     card instead of lighting it. */
}
.sna-offer-modal__card::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(38% 44% at 30% 34%, rgba(255, 255, 255, 0.055) 0%, transparent 70%), radial-gradient(34% 40% at 72% 62%, rgba(255, 255, 255, 0.035) 0%, transparent 70%);
  animation: sna-offer-aurora 22s ease-in-out infinite alternate;
}
.sna-offer-modal__card {
  /* A single specular line travelling down the glass, once, as the card
     lands. It is what makes the surface read as glass rather than as a
     dark rectangle — and it happens once, so it cannot become wallpaper. */
}
.sna-offer-modal__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(160deg, transparent 30%, rgba(255, 255, 255, 0.07) 45%, transparent 60%);
  transform: translateY(-100%);
  animation: sna-offer-sheen 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.28s both;
}
.sna-offer-modal {
  /* Everything readable sits above the aurora. */
}
.sna-offer-modal__viewport, .sna-offer-modal__dots {
  position: relative;
  z-index: 1;
}
.sna-offer-modal__body {
  padding: 30px 28px;
  /* Centres the headline and the lede outright, and the CTA with them:
     it is inline-flex, so it is an inline-level box and this aligns it
     too — no `margin: 0 auto` needed. The clock is a flex container and
     has to be told separately, below. */
  text-align: center;
}
.sna-offer-modal {
  /* One sentence. The percentage is emphasised INSIDE it rather than lifted
     out above it — a number on its own line turns the card into a price tag. */
}
.sna-offer-modal__headline {
  margin: 0;
  /* Clears the close button on the right — and the SAME amount on the
     left, which is the part that matters now. Centred text centres inside
     the content box, so clearance on one side only would pull every
     headline 22px off-centre while looking like a centring bug. */
  padding-left: 44px;
  padding-right: 44px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-transform: uppercase;
}
.sna-offer-modal__percent {
  color: #fb923c;
  text-shadow: 0 0 22px rgba(249, 115, 22, 0.5);
}
.sna-offer-modal__lede {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: #e7e7ee;
  /* Newlines the operator typed are honoured; a sale blurb is routinely
     two short lines. */
  white-space: pre-line;
}
.sna-offer-modal {
  /* Block-level, so the button below starts on its own line. As inline-flex
     the two sat side by side and the button crowded the "sec" label — the
     reference stacks them, and so should this. */
}
.sna-offer-modal__clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.sna-offer-modal__clock i {
  font-style: normal;
  font-size: 20px;
  line-height: 1.05;
  color: rgba(255, 255, 255, 0.3);
}
.sna-offer-modal__clock .sna-offer__unit {
  min-width: 32px;
}
.sna-offer-modal__clock .sna-offer__unit b {
  font-size: 26px;
  display: inline-block;
}
.sna-offer-modal__clock .sna-offer__unit small {
  font-size: 10px;
}
.sna-offer-modal {
  /* Both cases now share one measure, so a single offer and four are the
     same shape. Kept as its own rule only because the phone override below
     still needs a hook. */
}
.sna-offer-modal__card.is-multi {
  width: 100%;
  max-width: min(640px, 100%);
}
.sna-offer-modal {
  /* The viewport clips, the track slides. */
}
.sna-offer-modal__viewport {
  overflow: hidden;
  /* The card already clips to its own radius, but a transformed child can
     still paint over a rounded corner during the slide on some engines. */
  border-radius: inherit;
}
.sna-offer-modal {
  /* A STACK, not a strip.
     This was a flex row translated sideways, which made the wrap visible: the
     track had to travel back across every slide to reach the first one, so
     the last-to-first step was a long rewind while every other step was a
     short nudge. Stacking them means each change is the same movement
     whichever slide follows whichever — the loop has no seam to see.

     Grid with every child in one cell keeps the height behaviour that flex
     `stretch` gave: the container is as tall as the tallest slide, so the
     card does not resize as offers of different lengths come round. */
}
.sna-offer-modal__track {
  display: grid;
  grid-template-areas: "slide";
  align-items: stretch;
}
.sna-offer-modal__slide {
  grid-area: slide;
  width: 100%;
  min-width: 0;
  /* Three states, and the direction is always the same: the next offer
     comes in from the right, the old one leaves to the left. Consistent
     direction is what makes the wrap invisible — going from the last
     offer back to the first looks exactly like every other advance. */
  opacity: 0;
  transform: translateX(26px);
  transition: opacity 0.34s ease, transform 0.44s cubic-bezier(0.16, 1, 0.3, 1);
}
.sna-offer-modal__slide.is-leaving {
  opacity: 0;
  transform: translateX(-26px);
}
.sna-offer-modal__slide.is-active {
  opacity: 1;
  transform: translateX(0);
}
.sna-offer-modal__slide {
  /* The offer assembles itself rather than arriving as a finished block.
     Keyed off aria-hidden, which goTo() already maintains — so the reveal
     replays for every offer as it comes round, not just the first. A CSS
     animation restarts whenever an element newly matches its selector,
     which is exactly what the false -> true -> false flip does. */
}
.sna-offer-modal__slide[aria-hidden=false] .sna-offer-modal__headline {
  animation: sna-offer-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both;
}
.sna-offer-modal__slide[aria-hidden=false] .sna-offer-modal__lede {
  animation: sna-offer-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.11s both;
}
.sna-offer-modal__slide[aria-hidden=false] .sna-offer-modal__clock {
  animation: sna-offer-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}
.sna-offer-modal__slide[aria-hidden=false] .sna-offer-modal__cta {
  animation: sna-offer-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.sna-offer-modal__slide {
  /* Nothing off-screen is reachable by tab. Without this the keyboard
     walks into the buttons of three offers nobody can see.

     The DELAY is the whole trick: aria-hidden flips the instant goTo runs,
     so hiding immediately would make the outgoing offer blink out of
     existence instead of sliding away. Holding visibility until the
     transform has finished lets it leave properly and only then drops it
     out of the tab order. */
  /* Stacked slides all sit in the same cell, so an inactive one would
     otherwise take clicks and tab stops for a card nobody can see. The
     DELAY lets the outgoing offer finish leaving before it is dropped —
     aria-hidden flips the instant goTo runs, and hiding immediately made
     it blink out instead of sliding away. */
}
.sna-offer-modal__slide[aria-hidden=true] {
  visibility: hidden;
  transition: opacity 0.34s ease, transform 0.44s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.44s;
}
.sna-offer-modal__slide[aria-hidden=false] {
  visibility: visible;
  transition: opacity 0.34s ease 0.06s, transform 0.44s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
.sna-offer-modal {
  /* Dots — the required way to take control of content that moves on its own,
     not decoration. Anything auto-advancing for longer than five seconds has
     to offer a way to stop it. */
}
.sna-offer-modal__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 0 18px;
}
.sna-offer-modal__dot {
  position: relative;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  overflow: hidden;
  cursor: pointer;
  transition: background 0.25s ease, width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sna-offer-modal__dot:hover {
  background: rgba(255, 255, 255, 0.45);
}
.sna-offer-modal__dot:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.85);
  outline-offset: 3px;
}
.sna-offer-modal__dot {
  /* The active one lengthens rather than merely brightening: a size
     difference survives being looked at out of the corner of an eye, and
     it does not depend on colour. */
}
.sna-offer-modal__dot.is-active {
  width: 26px;
  background: rgba(249, 115, 22, 0.28);
}
.sna-offer-modal__dot {
  /* DWELL METER. The active dot fills across the six seconds it has, so
     the rotation is something you can see coming instead of something
     that happens to you. It is also the honest readout of the pause:
     hovering the card freezes the fill exactly where it stands. */
}
.sna-offer-modal__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #f97316;
  transform: scaleX(0);
  transform-origin: left center;
}
.sna-offer-modal__dot.is-active::after {
  animation: sna-offer-dwell var(--offer-dwell, 6s) linear both;
}
.sna-offer-modal {
  /* Paused by a pointer resting on the card, or by focus inside it. The
     meter has to agree with the timer or it is lying about what happens next. */
}
.sna-offer-modal__card.is-paused .sna-offer-modal__dot::after {
  animation-play-state: paused;
}
.sna-offer-modal {
  /* The reader picked a slide, so nothing is coming. An empty track would
     imply a countdown that never arrives; a full one says "this one stays". */
}
.sna-offer-modal__card.is-manual .sna-offer-modal__dot.is-active::after {
  animation: none;
  transform: scaleX(1);
}
.sna-offer-modal__cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  margin-top: 22px;
  padding: 11px 22px;
  border-radius: 9px;
  background: linear-gradient(135deg, #f97316 0%, #ff9544 100%);
  color: #170d03;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(249, 115, 22, 0.4);
  transition: box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.18s ease;
  /* A slow specular pass over the button — the one element on the card
     that is asking to be pressed, so it is the one worth catching an eye.
     `left` rather than a transform so it cannot fight the hover lift. */
}
.sna-offer-modal__cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  animation: sna-offer-shimmer 3.6s ease-in-out 1.2s infinite;
}
.sna-offer-modal__cta:hover, .sna-offer-modal__cta:focus-visible {
  filter: brightness(1.05);
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 14px 34px rgba(249, 115, 22, 0.5);
  color: #170d03;
  text-decoration: none;
}
.sna-offer-modal__cta:active {
  transform: translateY(0) scale(0.99);
}
.sna-offer-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  /* Above the viewport, which is z-index 1 and a LATER sibling — equal
     layers are settled by document order, so at 1 the viewport covered
     the corner this button sits in. It still drew (the viewport is
     transparent there) but every click landed on the slide behind it and
     the dialog could not be closed at all. */
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  /* THE GLYPH ONLY. No ring, no fill, no shadow.
     Each of those was drawing a disc over the glass, and the
     backdrop-filter was the worst of them: it re-blurred the already
     blurred card behind it, so even at 4% background it printed a
     distinctly greyer circle. Removing the background alone would NOT
     have fixed that — a backdrop-filter blurs its region whether or not
     anything is painted on top, which is the same trap the profile
     presence pip hit.
     The 34px box stays as the hit target; it is simply invisible. */
  border: 0;
  background: none;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  /* The glyph is the whole control now, so this is what turns. */
}
.sna-offer-modal__close i {
  display: block;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.sna-offer-modal__close {
  /* Feedback is the glyph itself: it brightens and turns. Nothing
     appears behind it, so there is no shape to arrive out of nowhere. */
}
.sna-offer-modal__close:hover, .sna-offer-modal__close:focus-visible {
  color: #ffffff;
  transform: scale(1.1);
}
.sna-offer-modal__close:hover i, .sna-offer-modal__close:focus-visible i {
  transform: rotate(90deg);
}
.sna-offer-modal__close:active {
  transform: scale(0.94);
}
.sna-offer-modal__close {
  /* A keyboard user still has to be able to see where they are. This is
     the ONE case that draws a ring, and only for real keyboard focus —
     `:focus-visible`, not `:focus`, so a mouse click never summons it.
     Round, because `_premium.scss` carries a global
     `a, button, [tabindex]:focus-visible { border-radius: 6px }` that
     outranks anything here on specificity regardless of source order;
     without restating it the ring would be a rounded square around a
     glyph that has no square. */
}
.sna-offer-modal__close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 4px;
  border-radius: 50%;
}
@media (max-width: 639.98px) {
  .sna-offer-modal {
    padding: 14px;
    /* Content sizing is switched OFF here. A phone has no spare width worth
       measuring for, and a two-word offer measured intrinsically would
       render as a narrow sliver floating in a screenful of dimmed page —
       which reads as a broken dialog, not a compact one. */
  }
  .sna-offer-modal__card {
    width: 100%;
    min-width: 0;
    max-width: 460px;
  }
  .sna-offer-modal__card.is-multi {
    max-width: 460px;
  }
  .sna-offer-modal__dots {
    padding-bottom: 14px;
  }
  .sna-offer-modal__body {
    padding: 26px 20px;
  }
  .sna-offer-modal {
    /* Clear the close button DOWNWARDS here, not sideways.
       The 44px-a-side gutter that keeps a centred headline off the button
       on desktop costs 88px of a 332px card — it would leave about 210px of
       text and wrap "Identity verification unsuccessful" over four lines.
       Starting the headline below the button instead costs ~22px of height
       and gives the words the whole width back. */
  }
  .sna-offer-modal__headline {
    font-size: 21px;
    padding-left: 0;
    padding-right: 0;
    margin-top: 22px;
  }
  .sna-offer-modal__lede {
    font-size: 14px;
  }
  .sna-offer-modal__cta {
    width: 100%;
    justify-content: center;
  }
}

@keyframes sna-offer-pop {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.94);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
/* Slow, and drifting rather than looping: `alternate` means it eases back the
   way it came instead of snapping to the start every cycle. */
@keyframes sna-offer-aurora {
  from {
    transform: translate3d(-4%, -3%, 0) scale(1);
  }
  to {
    transform: translate3d(5%, 4%, 0) scale(1.12);
  }
}
@keyframes sna-offer-sheen {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes sna-offer-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sna-offer-shimmer {
  /* Sits off the left edge for most of the cycle: the sweep is an occasional
     glint, not a strobe. */
  0%, 62% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}
/* The split-flap pair. The outgoing value rises out of the window while the
   incoming one rises into it, so the column reads as one strip of numbers being
   pulled upward rather than as two elements swapping.

   An earlier version nudged the whole digit and had to go: it moved the glyph
   inside a line of tabular figures, so any still of it caught the seconds
   sitting higher than the minutes beside them. Clipping the movement to a
   window keeps every digit on its baseline. */
@keyframes sna-offer-roll-out {
  /* Transparent well before it has finished travelling. Clipping alone does
     not separate the two — while a digit is halfway out it is still halfway
     IN, and that half is what was landing on top of its replacement. */
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
  100% {
    transform: translateY(-110%);
    opacity: 0;
  }
}
@keyframes sna-offer-roll-in {
  /* Opaque by the time it reaches the window, so it arrives as a whole digit
     rather than fading up through the one it is replacing. */
  0% {
    transform: translateY(110%);
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes sna-offer-dwell {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sna-offer-modal__card {
    animation: none;
  }
  /* The carousel stops sliding AND stops advancing — the JS reads the same
     query. Someone who has asked for less motion gets the first offer and the
     dots, not a card that changes under them every six seconds. */
  .sna-offer-modal__track {
    transition: none;
  }
  .sna-offer-modal__dot {
    transition: none;
  }
  /* Every decorative loop off. The aurora and the shimmer are the two that
     matter most here: both run forever, and perpetual motion inside a dialog
     someone cannot dismiss without reading it is exactly what this setting
     exists to stop. The dwell meter goes too — it is a progress bar for an
     advance that no longer happens. */
  .sna-offer-modal__card::before,
  .sna-offer-modal__card::after,
  .sna-offer-modal__cta::after,
  .sna-offer-modal__dot::after,
  .sna-offer-modal__slide[aria-hidden=false] .sna-offer-modal__headline,
  .sna-offer-modal__slide[aria-hidden=false] .sna-offer-modal__lede,
  .sna-offer-modal__slide[aria-hidden=false] .sna-offer-modal__clock,
  .sna-offer-modal__slide[aria-hidden=false] .sna-offer-modal__cta,
  .sna-offer__roll.is-in,
  .sna-offer__roll.is-out {
    animation: none;
  }
  /* The sheen overlay would otherwise sit frozen mid-sweep across the glass. */
  .sna-offer-modal__card::after {
    opacity: 0;
  }
  /* `animation: none` also drops the `both` fill that was holding the old
     digit off-screen, which would leave it stacked on the new one. */
  .sna-offer__roll.is-out {
    display: none;
  }
  /* Slides still travel, but without the fade there is nothing to stagger. */
  .sna-offer-modal__slide[aria-hidden=true] {
    opacity: 0;
    transform: none;
  }
  .sna-offer-modal__slide[aria-hidden=false] {
    opacity: 1;
    transform: none;
  }
  .sna-offer-modal__cta {
    transition: none;
  }
  .sna-offer-modal__cta:hover {
    transform: none;
  }
  .sna-offer__cta {
    transition: none;
  }
  .sna-offer__cta:hover {
    transform: none;
  }
}
/* Without backdrop-filter there is nothing frosted to see, and a 72%-opaque
   card over unblurred page content is unreadable — fall back to solid, exactly
   as the notification panel does. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sna-offer-modal__card {
    background-color: #17171b;
  }
}
/* == SALE OFFER: END == */

/* == PROFILE CARD EXTRAS: START (compiled from workspace/sass/layout/myaccount/_profile-card-extras.scss) == */
/* ==========================================================================
   My Account profile card — presence pip, headline badge, meta chips, and the
   edit button's label.

   Self-contained on purpose: it is appended to the deployed styles.css as one
   block (this repo has no node_modules, so the whole file cannot be safely
   recompiled), which means it must not depend on variables declared elsewhere.
   Colours are therefore literal, matching _premium-account.scss.

   Everything here that OVERRIDES an existing rule relies on source order, not
   specificity — this block is appended after them, and the selectors are the
   same weight. Moving it earlier in the file would silently undo those parts.
   ========================================================================== */
/* ---- name + badge on one line -------------------------------------------- */
.myaccount__profile-headline {
  display: flex;
  align-items: center;
  /* Wraps rather than shrinking the badge: a long name should push the title
     to the next line intact, not squeeze "Pro Student" into "Pro Stu…". */
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}

/* The avatar is a <button> that opens the photo picker. The pip has to sit over
   its corner without joining that hit area, so it is a sibling positioned
   against this wrapper rather than a child of the button. */
.myaccount__profile-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  /* The avatar already carries z-index:1 from _premium-account.scss so it
     clears the card's decorative background; the wrapper has to match or the
     pair sinks behind it. */
  z-index: 1;
}

/* ---- presence pip -------------------------------------------------------- */
/* Discord's idea: a small badge on the corner of the avatar saying "here, and
   on this kind of device". Green because that is the universal read for
   "online" — and this only ever renders for the person looking at their own
   page, who is by definition online.

   THE MARK ALONE. No plate, no ring, no glow — just the green device glyph on
   the avatar's corner. Every plate treatment tried before this one had the same
   problem: the badge became an object competing with the avatar it annotates,
   when all it has to say is "on a computer, right now".

   The box survives at 26px because it is what CENTRES the glyph over the
   corner; it simply paints nothing. `backdrop-filter` had to go with the
   background rather than being left behind — it filters its own region
   regardless of whether anything is painted there, so a transparent box would
   still have shown a blurred square hanging off the avatar.

   With no plate the glyph sits directly on the photo, so the drop-shadow is
   not decoration: it is the only thing keeping a green mark legible over a
   bright avatar. Two shadows, a tight dark one for the edge and a wider soft
   one for separation, because a single shadow strong enough to do both reads
   as a smudge. */
.myaccount__profile-presence {
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: 0;
  box-shadow: none;
  color: #3ddc84;
  /* Decoration, not a control: it must never eat a tap meant for the avatar
     underneath it. */
  pointer-events: none;
}
.myaccount__profile-presence i {
  /* Larger than it was on the plate: an unenclosed glyph has nothing
     lending it presence and reads smaller at the same size. */
  font-size: 17px;
  line-height: 1;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.6));
}
.myaccount__profile-presence {
  /* A phone glyph is tall and narrow, a monitor is wide and short. Left at
     one size they look like different weights of mark, so each is nudged to
     the optical size the others sit at. */
}
.myaccount__profile-presence--phone i {
  font-size: 17px;
}
.myaccount__profile-presence--tablet i {
  font-size: 16px;
}
.myaccount__profile-presence--computer i {
  font-size: 16px;
}

/* ---- meta chips ---------------------------------------------------------- */
/* Same glass pill as .myaccount__profile-email, deliberately: location and
   member-since belong to the same row and the same class of fact, so a second
   chip style beside it would only look like a mistake. Not merged into that
   selector because it carries an orange mail icon and its own semantics. */
.myaccount__profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #c2c2cc;
  font-size: 0.84rem;
  white-space: nowrap;
}
.myaccount__profile-chip i {
  color: #f47923;
  font-size: 0.92rem;
}

/* Visually hidden but read aloud — the pip's meaning is carried by colour and
   an icon, neither of which a screen reader can announce. */
.myaccount__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* On a phone the meta row wraps to several lines; a slightly smaller chip keeps
   it to two rather than four. */
@media (max-width: 575.98px) {
  .myaccount__profile-chip {
    font-size: 0.78rem;
    padding: 3px 10px;
  }
  .myaccount__profile-presence {
    width: 22px;
    height: 22px;
    right: -2px;
    bottom: -2px;
  }
  .myaccount__profile-presence i {
    font-size: 15px;
  }
}
/* ---- the edit button says which mode it is in ---------------------------- */
/* The toggle shipped as a 48x48 icon-only square with `span { display: none }`,
   revealed only under `[data-mode=on]`. So the button that starts an edit was a
   bare pencil with no word on it, and the word only ever appeared once you were
   already editing — the one moment you no longer needed telling.
   Now it is a labelled pill in both states: "Edit", then "Save". */
.myaccount__edit-toggle {
  padding: 0 1.15rem;
  min-width: 0;
  border-radius: 0.55rem;
}
.myaccount__edit-toggle span {
  display: inline;
}
/* == PROFILE CARD EXTRAS: END == */

/* ==========================================================================
   NOTIFICATION BELL  —  compiled from workspace/sass/layout/_notifications.scss

   Hand-spliced: this repo has no node_modules, so styles.css cannot be safely
   recompiled as a whole. This block runs from this comment to END OF FILE, and
   the splice replaces all of that — so nothing may ever be appended below it,
   or the next recompile eats it.
   ========================================================================== */
/* Header notification bell + panel.
   Glass surfaces and an orange glow, matching the trial pill it sits beside.
   Colours are literal hex rather than the shared variables because $bg-dark is
   declared twice in _variables.scss and resolves to the legacy value — the
   header needs the darker one. */
/* The site's glass card surface — same tint, frost and gradient glow edge as
   `.subscribe-page__card` in _subscribe.scss and the enrollment popup.
   Deliberately the existing family rather than a nearby invention; two
   "almost the same" glasses side by side look like a mistake.

   The one departure is the alpha: 0.72 here against the cards' 0.62. Those
   cards sit in the page flow on a known dark section, so 0.62 is only ever
   letting near-black through. This panel FLOATS over whatever the student
   happens to be looking at — including the course hero, which is a bright
   orange-to-violet gradient. Measured over that hero, 0.62 puts the secondary
   message lines at roughly 3:1, under the 4.5:1 body copy needs; 0.72 restores
   it while still reading unmistakably as transparent frosted glass. The blur is
   raised to match, because more frost buys back some of the transparency the
   extra alpha costs. */
/* Sub-surfaces (settings drawer, footer) are a white veil ON the glass rather
   than another translucent dark layer. Stacking a second dark layer would make
   them read as denser panels pasted onto the card; a veil keeps one continuous
   sheet of glass with a slightly lifted band. */
/* Text sits on a translucent surface now, so whatever is behind the panel shows
   faintly through and every secondary tone loses contrast. Lifted from the
   original 0.55/0.38 to keep the message lines and timestamps legible against a
   bright hero rather than dissolving into it. */
/* The header tools — bell + app launcher — travel as one cluster with two
   homes, and apps.js moves them between the two.
   `.sna-tools-slot` is the authored home, a direct child of .header-inner, so
   the tools survive in the header bar when .main-nav collapses to an off-canvas
   sidebar. `.sna-tools-host` is an empty <li> in the nav list, immediately
   before Certificate Verification, and is where they live on desktop.
   flex-shrink:0 keeps the triggers from squashing when the header is tight. */
.sna-tools-slot,
.sna-tools-host {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Tighter than the nav list's own 17px: the bell and the launcher are one
   control group, and spacing them like unrelated nav links would break that
   reading. */
.sna-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Empty on narrow viewports (the cluster has moved to the slot) — collapse it
   so the nav list's gap does not leave a hole where it used to be. The
   sidebar's own rules stretch every <li> to full width, which an empty one must
   not obey. */
.sna-tools-host:empty {
  display: none;
}

.sna-notify {
  position: relative;
  display: inline-flex;
  /* ============ trigger ============ */
  /* A bare glyph — no disc, no ring, no glow.
     Every visible circle has been removed on purpose. The button keeps its
     42x42 box because that is the TOUCH TARGET, not decoration: the bell
     glyph alone is ~18px, well under the 44px minimum a thumb needs, and
     shrinking the button to fit the ink would make it genuinely hard to tap.
     The box is simply invisible now.

     With the chrome gone, every state has to be carried by the glyph itself
     plus the badge — colour, scale and the shake. That is a real constraint,
     not a shortcut, so the state colours below are pushed harder than they
     were when a lit rim was doing half the work. */
}
.sna-notify__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%; /* focus ring + hit area only; nothing is painted */
  background: none;
  box-shadow: none;
  color: #f5f5f6;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.sna-notify__trigger:hover {
  transform: translateY(-1px) scale(1.06);
}
.sna-notify__trigger:active {
  transform: translateY(0) scale(0.94);
}
.sna-notify__trigger {
  /* The one ring that stays. Removing the focus indicator too would leave
     keyboard users with no way to see where they are.

     `border-radius` is restated because the site-wide
     `a, button, [tabindex]:focus-visible` rule in _premium.scss forces
     `border-radius: 6px` on every focused control — sensible for the
     rectangular buttons it was written for, and it turned this one's ring
     into a rounded square floating around a bell. An outline follows the
     element's radius, so putting it back is the whole fix. */
}
.sna-notify__trigger:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.8);
  outline-offset: 3px;
  border-radius: 50%;
}
.sna-notify__trigger {
  /* Keeps ringing until the notification is READ, not merely seen.
     `has-unread` is driven off the badge count, so the loop ends by
     itself the moment the last unread row is cleared.

     Bursts, not a continuous vibration: the keyframes only move for the
     first ~18% of a 5s cycle, so the bell swings for ~0.9s and then
     rests. That still nags indefinitely — which is the point — without
     becoming a permanently trembling UI element that is exhausting to sit
     beside and impossible to read text next to.

     Paused while the panel is open (aria-expanded, which the JS already
     maintains) so it is not twitching in the student's face as they read.
     Closing without reading resumes it. */
}
.sna-notify__trigger.has-unread:not([aria-expanded=true]) .sna-notify__bell {
  animation: sna-notify-shake 5s ease-in-out infinite;
}
.sna-notify {
  /* The halo is gone with the disc. The element is kept in the template but
     painted as nothing: it is `aria-hidden` decoration, and leaving a
     zero-size no-op costs nothing while keeping the markup stable for any
     cached page still serving the old HTML. */
}
.sna-notify__halo {
  display: none;
}
.sna-notify {
  /* The bell IS the control now, so it carries the whole design. Bigger than
     it was inside the disc — 20px, because a glyph on bare background has no
     enclosure lending it presence and reads smaller than the same glyph in a
     circle. */
}
.sna-notify__bell {
  position: relative;
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.2s ease, filter 0.2s ease;
  /* Pivot at the crown, like a real bell on its mount. Set here rather
     than alongside each animation so the swing and the shake cannot
     disagree about where the hinge is. */
  transform-origin: top center;
  /* Separates the glyph from whatever the header is sitting on. It used
     to lift the icon off the glass; with no disc it is the only thing
     keeping the bell from dissolving into a light page section. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
.sna-notify {
  /* A metallic vertical gradient on the glyph itself — bright at the crown,
     saturated at the lip, exactly as a lit metal bell falls off. With the
     disc removed this is no longer flourish: it is the only thing that says
     "unread" apart from the badge and the shake.

     `background-clip: text`, guarded: an engine without it would paint the
     fill as a rectangle behind a transparent glyph — an orange block where
     the bell should be. Everything inside the guard is enhancement; the plain
     coloured icon above stands on its own, so the fallback below keeps the
     states legible with flat colour. */
}
.sna-notify__trigger.has-unread .sna-notify__bell, .sna-notify__trigger[aria-expanded=true] .sna-notify__bell, .sna-notify__trigger:hover .sna-notify__bell {
  color: #fb923c;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .sna-notify__trigger.has-unread .sna-notify__bell, .sna-notify__trigger[aria-expanded=true] .sna-notify__bell, .sna-notify__trigger:hover .sna-notify__bell {
    background: linear-gradient(180deg, #ffe6cc 0%, #ffab5e 45%, #f97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* A warm glow instead of a dark shadow once the glyph is lit — a
       black drop-shadow under an orange bell just muddies it. */
    filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.45));
  }
}
.sna-notify__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  /* Light from the top-left like the disc it sits on, with a paler
     highlight at the very top so the pill reads as a bead rather than a
     flat dot. */
  background: linear-gradient(160deg, #ffc078 0%, #ff8a2b 42%, #ef6a12 100%);
  /* Dark ring first, then the inner highlight, then the glow. The ring is
     what keeps the count legible: the badge sits directly on top of the
     halo, and without a hard edge between them the orange-on-orange reads
     as one smudge. */
  box-shadow: 0 0 0 2px #0e0e0e, inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 10px rgba(249, 115, 22, 0.55);
  color: #1b0d02;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}
.sna-notify__badge.is-visible {
  display: inline-flex;
  animation: sna-notify-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sna-notify {
  /* ============ panel ============ */
}
.sna-notify__panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 1200;
  /* Fluid rather than fixed: 400px was tight enough that a two-line
     message plus the timestamp left the subject nowhere to go. It grows
     with the viewport up to a readable cap and never exceeds it. */
  width: min(428px, 100vw - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid #26262b;
  /* The glass, and the gradient glow along the top edge — both exactly as
     `.subscribe-page__card` and the enrollment popup do it. The glow is a
     background-image rather than a ::before so it clips to the border
     radius for free and cannot be painted over by a child. */
  background-color: rgba(23, 23, 27, 0.72);
  background-image: linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, 0.1) 15%, rgba(249, 115, 22, 0.5) 30%, #f97316 50%, rgba(249, 115, 22, 0.5) 70%, rgba(249, 115, 22, 0.1) 85%, transparent 100%);
  background-size: 42% 2px;
  background-position: 50% 0;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  /* A stronger drop shadow than an opaque panel needs. Transparency costs
     the card its edge definition, and the shadow is what puts it back —
     without it a 62% panel reads as part of the page rather than floating
     above it. */
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.66), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  color: #f5f5f6;
}
.sna-notify__panel[hidden] {
  display: none;
}
.sna-notify__panel.is-open {
  animation: sna-notify-drop 0.22s ease-out;
}
.sna-notify__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sna-notify__head-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sna-notify__title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.sna-notify__subtitle {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.74);
}
.sna-notify__head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sna-notify__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.sna-notify__icon-btn:hover, .sna-notify__icon-btn.is-active {
  color: #fb923c;
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.28);
}
.sna-notify__icon-btn[hidden] {
  display: none;
}
.sna-notify {
  /* ============ settings drawer ============ */
  /* A white veil on the panel's glass, with no blur of its own.
     It needs neither: the drawer is a flex SIBLING of the list, not an
     overlay on it, so nothing scrolls underneath it to hide. Adding a second
     backdrop-filter here would re-frost an already-frosted surface and cost a
     compositing layer for no visible gain. */
}
.sna-notify__settings {
  padding: 14px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.045);
  animation: sna-notify-drop 0.18s ease-out;
}
.sna-notify__settings[hidden] {
  display: none;
}
.sna-notify__settings-intro {
  margin: 0 0 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
}
.sna-notify__settings-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sna-notify__settings-status {
  margin: 10px 0 0;
  min-height: 14px;
  font-size: 11px;
  color: #fb923c;
}
.sna-notify__switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  cursor: pointer;
  /* The real checkbox stays in the accessibility tree and keeps keyboard
     behaviour; only its default painting is removed. */
}
.sna-notify__switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sna-notify__switch input:disabled ~ .sna-notify__switch-track {
  opacity: 0.4;
  cursor: progress;
}
.sna-notify__switch input:checked ~ .sna-notify__switch-track {
  background: linear-gradient(135deg, #ff7b23 0%, #ff9544 100%);
  border-color: rgba(249, 115, 22, 0.7);
}
.sna-notify__switch input:checked ~ .sna-notify__switch-track::after {
  transform: translateX(16px);
  background: #10100f;
}
.sna-notify__switch input:focus-visible ~ .sna-notify__switch-track {
  outline: 2px solid rgba(249, 115, 22, 0.8);
  outline-offset: 2px;
}
.sna-notify__switch--email {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sna-notify__switch-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sna-notify__switch-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #f5f5f6;
}
.sna-notify__switch-hint {
  font-size: 10.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.56);
}
.sna-notify__switch-track {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.sna-notify__switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.2s ease;
}
.sna-notify {
  /* ============ list ============ */
  /* The two list-wide actions.
     Labelled, because the ✓✓ they replace was a bare glyph that also hid
     itself whenever the unread count was zero — so the panel's commonest
     state offered no visible action at all. */
}
.sna-notify__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid #26262b;
  /* Author `display` beats the UA's `[hidden]`, so it has to be restated
     or the row shows even while the attribute is set. */
}
.sna-notify__actions[hidden] {
  display: none;
}
.sna-notify__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: rgba(255, 255, 255, 0.74);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.sna-notify__action i {
  font-size: 13px;
}
.sna-notify__action[hidden] {
  display: none;
}
.sna-notify__action:hover, .sna-notify__action:focus-visible {
  color: #f5f5f6;
  background: rgba(255, 255, 255, 0.045);
}
.sna-notify__action:disabled {
  opacity: 0.55;
  cursor: default;
}
.sna-notify__action {
  /* Pushed to the far end, away from the one that is harmless to press by
     accident. */
}
.sna-notify__action--danger {
  margin-left: auto;
}
.sna-notify__action--danger:hover, .sna-notify__action--danger:focus-visible {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}
.sna-notify__action--danger {
  /* Armed — the next press is the one that empties the list, so it
     has to look like a different button from the one just pressed,
     not a repeat of it. */
}
.sna-notify__action--danger.is-confirming {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.12);
}
.sna-notify__list {
  max-height: 420px;
  overflow-y: auto;
  /* Explicit, and load-bearing. A box with `overflow-y: auto` and
     `overflow-x: visible` has its overflow-x computed to `auto` — so
     anything that overruns by a single pixel grows a scrollbar across
     the foot of the panel. This is a vertical list; there is nothing
     to its right worth scrolling to. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 6px 0;
  /* Slim, unobtrusive scrollbar; the default is a wide grey slab that
     breaks the glass look. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.sna-notify__list::-webkit-scrollbar {
  width: 6px;
}
.sna-notify__list::-webkit-scrollbar-track {
  background: transparent;
}
.sna-notify__list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.sna-notify__list::-webkit-scrollbar-thumb:hover {
  background: rgba(249, 115, 22, 0.45);
}
.sna-notify {
  /* The one child that genuinely needs its own blur: it is `position: sticky`
     INSIDE the scrolling list, so rows really do pass underneath it. A flat
     tint here would have to be near-opaque to hide them, which would punch a
     solid bar across the glass; a frost hides them while staying glass. */
}
.sna-notify__group {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 18px 6px;
  background: rgba(23, 23, 27, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}
/* THE ROW SLAB — one shape, both dropdowns: 6px inset, 9px/10px padding, 12px
   radius, 3px between rows. The bell and the launcher hang off adjacent
   buttons, so a row that is an inset rounded slab in one panel and a full-bleed
   band in the other reads as a bug rather than as two components; the hover
   highlight is the moment the difference shows, because that is when the row's
   box becomes visible. The left offset to the icon is unchanged at 18px from
   the panel edge (6 inset + 2 border + 10 padding, where it used to be 16
   padding + 2 border), so the rows still line up under the sticky group
   headings, which are full-bleed and set their own 18px. */
.sna-notify__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0 6px;
  padding: 9px 10px;
  border-radius: 12px;
  border-left: 2px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Rows are separated by a gap, not a hairline. Both panels have rows that carry
   a background of their own (the launcher on hover, the bell's unread wash all
   the time), and two of those touching merge into one tall shape — the problem
   the hairline was added to solve. Between rounded slabs a few pixels of
   nothing solves it without drawing anything. */
.sna-notify__item + .sna-notify__item {
  margin-top: 3px;
}
.sna-notify__item:hover {
  background: rgba(255, 255, 255, 0.055);
  color: inherit;
  text-decoration: none;
}
/* ---- The shine ----
   One band of light crossing the row, which is the finish the rest of the site
   puts on its cards (`.lp-card__sheen`). Done without JS: the band is a stop in
   a background gradient and the hover just moves the gradient's position, so
   the sweep costs one paintable property and no pointer tracking.
   Above the content rather than behind it — a shine that passes under the text
   is a background colour change, not a shine. */
.sna-notify__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, 0.11) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 150% 0;
  transition: opacity 0.25s ease, background-position 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ---- Hover ----
   The wash is for every row. The MOVEMENT and the SHINE are only for rows that
   go somewhere: rowHtml() in notifications.js renders an <a> when the
   notification carries a route and a <div> when it does not, so `[href]` is the
   test for "this is worth pointing at". */
.sna-notify__item[href]:hover,
.sna-notify__item[href]:focus-visible {
  /* Sideways, not up. A card lift with a shadow inside a narrow dropdown reads
     as the row peeling off the glass; a nudge along the reading direction says
     "follow me" without leaving the surface. */
  transform: translateX(3px);
}
.sna-notify__item[href]:hover::after,
.sna-notify__item[href]:focus-visible::after {
  opacity: 1;
  background-position: -50% 0;
}
/* Depth, not colour. The chip used to throw a glow in `currentColor`, which on
   an info row meant a burst of orange — the thing this panel is deliberately
   out of. A lift and a shadow read as the same "picked up" without tinting. */
.sna-notify__item[href]:hover .sna-notify__item-icon,
.sna-notify__item[href]:focus-visible .sna-notify__item-icon {
  transform: scale(1.06);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.45);
}
.sna-notify__item[href]:hover .sna-notify__item-subject,
.sna-notify__item[href]:focus-visible .sna-notify__item-subject {
  color: #ffffff;
}
/* The timestamp steps back as the subject comes forward. */
.sna-notify__item[href]:hover .sna-notify__item-time,
.sna-notify__item[href]:focus-visible .sna-notify__item-time {
  color: rgba(255, 255, 255, 0.34);
}
/* Unread rows start lifted, so the shared hover tint would be a step DOWN in
   contrast on them. They go one stop further instead. */
.sna-notify__item.is-unread:hover {
  background: rgba(255, 255, 255, 0.075);
}
.sna-notify__item {
  /* Unread: a warm left edge and a background that FADES from it rather
     than washing the whole row. A flat tint made two adjacent unread rows
     into one shape; a gradient anchored to the accent edge keeps each row
     visibly starting somewhere. */
}
/* ---- Unread ----
   NO COLOUR WASH. This used to be an orange gradient anchored to an orange left
   edge, and with two or three unread rows the panel read as a block of orange
   with some text in it — the tint was louder than anything it was marking.
   Unread is carried by a faint neutral lift, a white and slightly heavier
   subject, and the dot in the right-hand gutter. */
.sna-notify__item.is-unread {
  background: rgba(255, 255, 255, 0.042);
  border-left-color: rgba(255, 255, 255, 0.26);
}
.sna-notify__item.is-unread .sna-notify__item-subject {
  color: #ffffff;
  font-weight: 650;
}
.sna-notify__item {
  /* Tone drives the icon chip only. The row itself stays neutral —
     colouring whole rows turns the panel into a traffic light and makes
     the unread/read distinction, which matters more, harder to see. */
}
.sna-notify__item.is-success .sna-notify__item-icon {
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
}
.sna-notify__item.is-warning .sna-notify__item-icon {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
}
.sna-notify__item.is-danger .sna-notify__item-icon {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
}
.sna-notify__item.is-info .sna-notify__item-icon {
  color: #f97316;
  background: rgba(249, 115, 22, 0.12);
}
.sna-notify__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  border-radius: 11px;
  font-size: 16px;
  /* A hairline and a top highlight turn a flat tinted square into a
     chip with an edge — the tone colours below fill it, this gives it
     form. */
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* The row's hover scales and lights this chip. The glow is thrown in
     `currentColor`, which the tone modifiers have already set — so a success
     chip glows green and a warning chip amber without the hover rule needing to
     know which is which. */
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.28s ease;
}
.sna-notify__item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
  /* Break anywhere rather than overflow. Notification copy is written by
     people but routinely carries things no word-breaker will split — a
     re-upload URL, a gateway reference, an email address — and without
     this they are chopped off mid-token by the clamp's `overflow:
     hidden` instead of wrapping onto the next line.
     `anywhere`, not `break-word`: only `anywhere` also shrinks the
     element's min-content width, which is what actually stops a long
     token from forcing the whole row wider than the panel.
     Inherited, so the subject, the message, the kind label and the
     programme chip are all covered by this one declaration. */
  overflow-wrap: anywhere;
}
.sna-notify__item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.sna-notify__item-kind {
  min-width: 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}
.sna-notify__item-time {
  flex-shrink: 0;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.56);
  transition: color 0.2s ease;
}
.sna-notify__item-subject {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.2s ease;
  /* Two lines, like the message under it. A subject is normally one; the
     clamp is here so an unusually long one cannot push the message and
     the timestamp out of the row's shape. The full text is in the modal.
     Same inherited-nowrap defence as the message below. */
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sna-notify__item-message {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
  /* Two lines then an ellipsis: the full text is in the modal, and a long
     message here would push everything below it out of view.

     `white-space: normal` is the load-bearing line, not boilerplate. It
     is INHERITED, and this panel is rendered inside a nav <li> on desktop
     — any ancestor that sets `nowrap` (headers are full of them) forces
     the message onto one endless line, and a single line is precisely the
     case a line-clamp cannot ellipsise. The result is text sheared off
     mid-word at the panel edge with no "…" at all, which is exactly what
     it was doing. Restating it here makes the row immune to whatever the
     header decides.

     `text-overflow` then covers the same case from the other side: if a
     single line ever does overrun, it ends in an ellipsis instead of a
     hard cut. */
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* The standard property, now that engines implement it: the prefixed
     one is what has always worked, this is what keeps working. */
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sna-notify__item-program {
  margin-top: 3px;
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.74);
}
.sna-notify__item-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 13px;
  border-radius: 50%;
  background: #f97316;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.9);
}
/* A READ row keeps the dot's column and loses the dot.
   `visibility`, not `display: none` — the whole point is that the 20px it
   occupies (7px plus the flex gap) stays reserved. It used to be rendered only
   for unread rows, so the gutter down the right of the list changed width row
   by row: a read row's text and timestamp ran 20px closer to the panel edge
   than its unread neighbour's, and reading a row reflowed it wider under the
   cursor. Same padding on every row is what this buys. */
.sna-notify__item:not(.is-unread) .sna-notify__item-dot {
  visibility: hidden;
}
.sna-notify {
  /* ============ states ============ */
}
.sna-notify__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 34px 26px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.74);
}
.sna-notify__state > i {
  font-size: 26px;
  color: rgba(255, 255, 255, 0.22);
}
.sna-notify__state-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.sna-notify__state-body {
  font-size: 11.5px;
  line-height: 1.5;
  max-width: 28ch;
  color: rgba(255, 255, 255, 0.56);
}
.sna-notify__spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: #f97316;
  animation: sna-notify-spin 0.7s linear infinite;
}
.sna-notify {
  /* ============ footer ============ */
  /* Same veil as the settings drawer, and blurless for the same reason. */
}
.sna-notify__foot {
  padding: 10px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
}
.sna-notify__foot-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fb923c;
  text-decoration: none;
  transition: color 0.18s ease, gap 0.18s ease;
}
.sna-notify__foot-link:hover {
  color: #ffd066;
  gap: 8px;
  text-decoration: none;
}

/* ============ animations ============ */
@keyframes sna-notify-pop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes sna-notify-drop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sna-notify-spin {
  to {
    transform: rotate(360deg);
  }
}
/* The persistent "you still have something unread" ring.
   All motion is inside the first 18% of the cycle; everything after is a flat
   rest at 0deg. On a 5s duration that is a ~0.9s swing followed by ~4.1s of
   stillness, so a single infinite animation gives repeating bursts with no JS
   timer to keep alive, and nothing to leak when the element is replaced.
   Damped decay (10deg -> 8 -> 5 -> 3) so it settles like a struck bell rather
   than buzzing. */
@keyframes sna-notify-shake {
  0% {
    transform: rotate(0deg);
  }
  3% {
    transform: rotate(10deg);
  }
  6% {
    transform: rotate(-8deg);
  }
  9% {
    transform: rotate(5deg);
  }
  12% {
    transform: rotate(-3deg);
  }
  15% {
    transform: rotate(1.5deg);
  }
  18%, 100% {
    transform: rotate(0deg);
  }
}
/* ==========================================================================
   Full-message modal

   Everything structural — the fixed overlay, the glass card, the glow edge, the
   close button, the button styles — is inherited from `.sna-modal` in
   _premium.scss. Only what a MESSAGE needs differs from a confirmation dialog,
   which is what these rules are. Nothing here restates an inherited value.
   ========================================================================== */
.sna-notify-modal[hidden] {
  display: none;
}
.sna-notify-modal {
  /* The base card centres its text, which suits a two-line confirmation and
     actively fights a paragraph. Prose reads left-aligned. */
}
.sna-notify-modal .sna-modal__card--notify {
  text-align: left;
  /* Roomy on desktop, but the base 44px would eat a phone's width; and a
     card can never exceed the viewport minus the overlay's own padding. */
  padding: clamp(22px, 5vw, 40px);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px); /* dvh: excludes mobile browser chrome */
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sna-notify-modal {
  /* Left-aligned like the copy, and out of the close button's way. */
}
.sna-notify-modal .sna-modal__icon {
  margin: 0 0 14px;
  align-self: flex-start;
}
.sna-notify-modal .sna-modal__title {
  margin: 2px 0 0;
  /* Long subjects must wrap, never spill out of the card. */
  overflow-wrap: anywhere;
}
.sna-notify-modal .sna-modal__text {
  margin: 0;
  /* No line clamp here — showing the whole message is the entire point of
     this modal. Newlines in the stored copy are honoured. */
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.sna-notify-modal .sna-modal__actions {
  margin-top: 20px;
  /* Wraps to a column on a narrow phone instead of squeezing two buttons
     into an unreadable row. */
  flex-wrap: wrap;
}
.sna-notify-modal .sna-modal__btn {
  flex: 1 1 auto;
  min-width: 140px;
  justify-content: center;
  /* `.sna-modal__btn` sets `display: inline-flex`, and ANY author display
     rule beats the UA stylesheet's `[hidden] { display: none }`. Without
     this, a notification with no route (its action is hidden) rendered an
     empty orange button. */
}
.sna-notify-modal .sna-modal__btn[hidden] {
  display: none;
}

.sna-notify-modal__icon {
  /* Tone-coloured exactly like the row's chip, so the modal is visibly
     the same notification the student just clicked. */
}
.sna-notify-modal__icon.is-success {
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
}
.sna-notify-modal__icon.is-warning {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
}
.sna-notify-modal__icon.is-danger {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
}
.sna-notify-modal__icon.is-info {
  color: #f97316;
  background: rgba(249, 115, 22, 0.12);
}
.sna-notify-modal__kind {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}
.sna-notify-modal {
  /* The one scrollable region: a long message scrolls INSIDE the card, so the
     title and the actions stay put instead of the whole dialog growing past
     the viewport and stranding its buttons off-screen. */
}
.sna-notify-modal__body {
  margin-top: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.sna-notify-modal__body::-webkit-scrollbar {
  width: 6px;
}
.sna-notify-modal__body::-webkit-scrollbar-track {
  background: transparent;
}
.sna-notify-modal__body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.sna-notify-modal__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.56);
}
.sna-notify-modal__program {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}
.sna-notify-modal__program[hidden] {
  display: none;
}

/* ============ receipt table ============ */
/* The invoice block under a money notification's message: what was paid, for
   which course, which instalment.

   Set on its own tinted card rather than run inline under the prose, because
   the two are answering different questions. The message says what happened;
   this says what the numbers were, and a student who opens a payment
   notification a week later is almost always here for the second one. Giving it
   a visible edge means they can find it without reading the sentence again.

   Green by default and green in the overwhelming majority of cases — these are
   receipts, and green is what a receipt looks like. The accent is a variable
   rather than a constant only because the same table has to carry a fee that is
   still owed (amber) and a renewal that failed (red); rendering "Payment
   failed" inside a green success panel would read as reassurance at exactly the
   wrong moment. */
/* Written out per accent rather than looped over a map: the loop needed the
   global `nth()`, which Dart Sass deprecates, and four short blocks read better
   than the `@use "sass:list"` ceremony that avoiding it would cost. */
.sna-notify-receipt {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  /* Tinted glass on glass: a veil rather than a second opaque card, so the
     dialog stays one continuous sheet with a lifted band on it. */
  border: 1px solid rgba(52, 211, 153, 0.28);
  background: rgba(52, 211, 153, 0.09);
}
.sna-notify-receipt[hidden] {
  display: none;
}
.sna-notify-receipt__heading {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #34d399;
}
.sna-notify-receipt__table {
  width: 100%;
  border-collapse: collapse;
  /* Long values (an invoice id, a course title) must wrap inside their
     cell rather than widening the table past the dialog. */
  table-layout: fixed;
}
.sna-notify-receipt__row + .sna-notify-receipt__row .sna-notify-receipt__label, .sna-notify-receipt__row + .sna-notify-receipt__row .sna-notify-receipt__value {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.sna-notify-receipt__label, .sna-notify-receipt__value {
  padding: 6px 0;
  font-size: 12.5px;
  line-height: 1.45;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.sna-notify-receipt__label {
  width: 42%;
  padding-right: 12px;
  text-align: left;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.74);
}
.sna-notify-receipt__value {
  text-align: right;
  font-weight: 600;
  color: #f5f5f6;
  /* Tabular figures so a column of amounts lines up on the decimal
     instead of drifting with the width of each digit. */
  font-variant-numeric: tabular-nums;
}
.sna-notify-receipt {
  /* The one number the student came for — the amount — gets the accent and a
     size bump. Exactly one row per receipt is marked, by the emitter. */
}
.sna-notify-receipt__row.is-emphasis .sna-notify-receipt__value {
  font-size: 15px;
  font-weight: 700;
  color: #34d399;
}
.sna-notify-receipt.is-success {
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(52, 211, 153, 0.09);
}
.sna-notify-receipt.is-success .sna-notify-receipt__heading {
  color: #34d399;
}
.sna-notify-receipt.is-success .sna-notify-receipt__row.is-emphasis .sna-notify-receipt__value {
  color: #34d399;
}
.sna-notify-receipt.is-warning {
  border-color: rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.09);
}
.sna-notify-receipt.is-warning .sna-notify-receipt__heading {
  color: #fbbf24;
}
.sna-notify-receipt.is-warning .sna-notify-receipt__row.is-emphasis .sna-notify-receipt__value {
  color: #fbbf24;
}
.sna-notify-receipt.is-danger {
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(248, 113, 113, 0.09);
}
.sna-notify-receipt.is-danger .sna-notify-receipt__heading {
  color: #f87171;
}
.sna-notify-receipt.is-danger .sna-notify-receipt__row.is-emphasis .sna-notify-receipt__value {
  color: #f87171;
}
.sna-notify-receipt.is-info {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.09);
}
.sna-notify-receipt.is-info .sna-notify-receipt__heading {
  color: #fb923c;
}
.sna-notify-receipt.is-info .sna-notify-receipt__row.is-emphasis .sna-notify-receipt__value {
  color: #fb923c;
}
.sna-notify-receipt {
  /* Below ~380px a 42/58 split leaves the value column too narrow for an
     amount plus its currency symbol, so the pair stacks instead. */
}
@media (max-width: 380px) {
  .sna-notify-receipt__table,
  .sna-notify-receipt tbody, .sna-notify-receipt__row, .sna-notify-receipt__label, .sna-notify-receipt__value {
    display: block;
    width: auto;
  }
  .sna-notify-receipt__label {
    padding: 8px 0 0;
    font-size: 11px;
  }
  .sna-notify-receipt__value {
    padding: 2px 0 8px;
    text-align: left;
  }
  .sna-notify-receipt__row + .sna-notify-receipt__row .sna-notify-receipt__label {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  .sna-notify-receipt__row + .sna-notify-receipt__row .sna-notify-receipt__value {
    border-top: 0;
  }
}

/* Without backdrop-filter there is nothing frosted to see, and a 62%-opaque
   panel over unblurred page content is unreadable — so fall back to a solid
   surface. Same treatment and the same colour the subscribe/enrollment cards
   use in _subscribe.scss, so the family stays consistent even in the fallback.
   The sticky group header goes solid too, or rows would show through it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sna-notify__panel {
    background-color: #17171b;
  }
  .sna-notify__group {
    background: #17171b;
  }
}
/* Motion is decoration here, never information — the badge and the warmed
   glyph read identically without it, and the count itself is the real signal.

   The repeating shake matters most here. A permanent looping animation in fixed
   page furniture is precisely what this setting exists to stop: for a viewer
   with a vestibular disorder it is not merely a preference but the difference
   between a usable page and a nauseating one. The badge and the orange bell
   still say "unread" perfectly well standing still. */
@media (prefers-reduced-motion: reduce) {
  .sna-notify__badge.is-visible,
  .sna-notify__panel.is-open,
  .sna-notify__settings,
  .sna-notify__trigger.has-unread:not([aria-expanded=true]) .sna-notify__bell {
    animation: none;
  }
  /* !important is required, not stylistic: _premium.scss declares the card's
     entry animation with !important, which no amount of specificity beats. */
  .sna-notify-modal .sna-modal__card {
    animation: none !important;
  }
}
/* ============ mobile ============ */
/* On a phone a 400px panel anchored to a 40px button in the corner would hang
   off the right edge and put its scroll area up under the notch. It becomes a
   bottom sheet instead — fixed to the viewport, thumb-reachable, and wide
   enough that the two-line messages stay readable.

   992px, not the 991px the rest of this file could have used, because that is
   $bp-tablet in the header's own stylesheet: the breakpoint has to be the same
   one .main-nav goes off-canvas at, or there is a window where the header has
   reflowed and the panel has not. */
@media (prefers-reduced-motion: reduce) {
  .sna-notify__panel.is-open {
    animation: none;
  }
  /* The row hover keeps its COLOUR — the wash, the accent edge and the
     brightened subject are what tell you which row you are on, and dropping
     those would leave the list with no pointer feedback at all. Only the things
     that move are switched off. */
  .sna-notify__item,
  .sna-notify__item-icon,
  .sna-notify__item-subject,
  .sna-notify__item-time {
    transition: none;
  }
  .sna-notify__item[href]:hover,
  .sna-notify__item[href]:focus-visible {
    transform: none;
  }
  .sna-notify__item[href]:hover .sna-notify__item-icon,
  .sna-notify__item[href]:focus-visible .sna-notify__item-icon {
    transform: none;
  }
}
/* ==========================================================================
   APP LAUNCHER  —  template/layout/_apps.php
   The nine-dot grid beside the bell, and its Selfmade Ninja app menu.
   Lives in this partial rather than its own because it shares the bell's glass
   tokens ($notify-panel-bg / $notify-blur / $notify-veil) and sits in the same
   `.sna-tools` cluster; splitting them would be two files that must be edited
   together to stay looking like one component.
   ========================================================================== */
.sna-apps {
  position: relative;
  display: inline-flex;
  /* ============ trigger ============ */
  /* Same bare treatment as the bell: no disc, no ring. The 40x40 box is the
     touch target only — the dot grid itself is 16px, far under what a thumb
     needs. Slightly narrower than the bell's 42 because a square grid reads
     optically larger than a bell glyph at the same box size. */
}
.sna-apps__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.sna-apps__trigger:hover {
  transform: scale(1.06);
}
.sna-apps__trigger:active {
  transform: scale(0.94);
}
.sna-apps__trigger {
  /* Restated for the same reason the bell restates it: the site-wide
     `a, button, [tabindex]:focus-visible` rule in _premium.scss forces
     `border-radius: 6px`, which would draw a rounded square around a
     round control. */
}
.sna-apps__trigger:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.8);
  outline-offset: 3px;
  border-radius: 50%;
}
.sna-apps__dots {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  grid-auto-rows: 4px;
  gap: 3px;
}
.sna-apps {
  /* Nine independent dots, so the grid can light up in a diagonal sweep on
     hover instead of flipping colour all at once. The delay is keyed off the
     dot's position in the flow, which for a 3-column grid runs top-left to
     bottom-right — the direction the light comes from everywhere else in this
     header. */
}
.sna-apps__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  transition: background 0.2s ease, transform 0.2s ease;
}
.sna-apps__dot:nth-child(1) {
  transition-delay: 0ms;
}
.sna-apps__dot:nth-child(2) {
  transition-delay: 12ms;
}
.sna-apps__dot:nth-child(3) {
  transition-delay: 24ms;
}
.sna-apps__dot:nth-child(4) {
  transition-delay: 36ms;
}
.sna-apps__dot:nth-child(5) {
  transition-delay: 48ms;
}
.sna-apps__dot:nth-child(6) {
  transition-delay: 60ms;
}
.sna-apps__dot:nth-child(7) {
  transition-delay: 72ms;
}
.sna-apps__dot:nth-child(8) {
  transition-delay: 84ms;
}
.sna-apps__dot:nth-child(9) {
  transition-delay: 96ms;
}
.sna-apps__trigger:hover .sna-apps__dot, .sna-apps__trigger[aria-expanded=true] .sna-apps__dot {
  background: #fb923c;
  transform: scale(1.12);
}
.sna-apps__trigger[aria-expanded=true] .sna-apps__dot {
  /* Held, not swept: while the menu is open the state is steady, so the
     per-dot delay would only make closing look laggy. */
  transition-delay: 0ms;
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.55);
}
.sna-apps {
  /* ============ panel ============ */
  /* The bell panel's glass, token for token — same tint, same frost, same
     gradient glow along the top edge — because these two dropdowns hang off
     adjacent buttons and any difference between them reads as a mistake. */
}
.sna-apps__panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 1200;
  /* Sized to the longest description rather than to a number. The rows are
     uniform slabs now, so the panel is the only thing that can make room for
     the copy — at a fixed 272px the widest line ("Learn from industry-ready
     courses") lost its last word to the ellipsis guard, and only in whichever
     font the browser actually resolves, which is not a thing a hard-coded width
     can track. The floor keeps the old width as a minimum; the ceiling stops
     one long string turning the menu into a banner. */
  width: max-content;
  min-width: 272px;
  max-width: min(340px, calc(100vw - 32px));
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid #26262b;
  background-color: rgba(23, 23, 27, 0.72);
  background-image: linear-gradient(90deg, transparent 0%, rgba(249, 115, 22, 0.1) 15%, rgba(249, 115, 22, 0.5) 30%, #f97316 50%, rgba(249, 115, 22, 0.5) 70%, rgba(249, 115, 22, 0.1) 85%, transparent 100%);
  background-size: 42% 2px;
  background-position: 50% 0;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.66), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  color: #f5f5f6;
  animation: sna-notify-drop 0.22s ease-out;
}
.sna-apps__panel[hidden] {
  display: none;
}
.sna-apps__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sna-apps__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f5f5f6;
}
.sna-apps__subtitle {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.74);
}
.sna-apps__list {
  padding: 6px;
}
/* Every row is the same slab: full width of the list, same padding, same
   radius — so the hover highlight is a property of the MENU, not of how long
   the app's name happens to be. `width` and `box-sizing` are stated rather than
   left to `display: flex`, because this panel spends its life re-parented
   (apps.js moves the cluster into the nav's own <li> at >=1280px) and a row
   that sizes itself to its text is exactly the bug that re-parenting caused
   once already: the nav's `.nav-item a` rule turned these into inline-flex
   pills that each hugged their own label. */
.sna-apps__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background 0.16s ease;
}
.sna-apps__item + .sna-apps__item {
  margin-top: 3px;
}
.sna-apps__item:hover, .sna-apps__item:focus-visible {
  background: rgba(255, 255, 255, 0.055);
  text-decoration: none;
  /* The arrow is the affordance that says "this leaves the site", so
     it only needs to appear when the row is the one being acted on. */
}
.sna-apps__item:hover .sna-apps__go, .sna-apps__item:focus-visible .sna-apps__go {
  opacity: 1;
  transform: translate(0, 0);
}
.sna-apps__item:hover .sna-apps__icon, .sna-apps__item:focus-visible .sna-apps__icon {
  color: #fb923c;
  border-color: rgba(249, 115, 22, 0.4);
}
.sna-apps__item:focus-visible {
  outline: 2px solid rgba(249, 115, 22, 0.8);
  outline-offset: -2px;
}
.sna-apps__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
  transition: color 0.16s ease, border-color 0.16s ease;
  /* Git uses its OWN mark, from Font Awesome Brands, rather than Remix's
     generic repository glyph — a product's real logo is the fastest thing
     in the row to recognise. The two icon fonts do not agree on how much
     of the em a glyph fills, though: Font Awesome draws noticeably
     smaller, and at a shared 15px the Git diamond read as a lighter
     weight than the four icons around it. Sized up to match by eye, since
     there is no shared metric to match by. */
}
.sna-apps__icon .fa-brands {
  font-size: 17px;
}
.sna-apps__copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.sna-apps__name {
  font-size: 13px;
  font-weight: 600;
  color: #f5f5f6;
}
.sna-apps {
  /* What the app is FOR, in one line. Body face, not mono — this is a
     sentence about the product, and setting it in a code font would make it
     read as machine output. The clamp is a guard, not a design: the four
     strings are short and parallel by hand, and if one ever grows past the
     row it should be cut rather than allowed to wrap the list into ragged
     two-line items. */
}
.sna-apps__desc {
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.56);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sna-apps__go {
  flex: 0 0 auto;
  font-size: 14px;
  color: #fb923c;
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

/* The launcher's mobile placement is shared with the bell panel — see the
   "hang the panels off the header" block above, which positions both. Keeping
   one rule for the two is the point: they hang off adjacent buttons, and any
   difference in where they land reads as a bug. */
@media (prefers-reduced-motion: reduce) {
  .sna-apps__panel {
    animation: none;
  }
  .sna-apps__dot {
    transition-delay: 0ms !important;
  }
}
/* ============ mobile + tablet: hang the panels off the header ============ */
/* Both dropdowns used to be bottom sheets here — pinned to the foot of the
   viewport, a whole screen away from the button that opened them. A sheet is a
   fine pattern for something the page invokes, and the wrong one for a menu:
   the student taps a control in the header and the answer appears at their
   ankles, with nothing connecting the two.
   .site-header is `position: sticky`, so a panel anchored under it stays under
   it while the page scrolls, exactly as it does on desktop. */
@media (max-width: 992px) {
  /* The panels' containing block, at EVERY width in this band. _header.scss
     already sets this below 768; restating it here stops the 769-992 band
     falling through to the sticky .site-header instead, which would anchor
     the panels edge-to-edge on a tablet and inset on a phone — the same rule
     producing two different layouts. */
  .site-header .header-inner {
    position: relative;
  }
  /* Static, so the panel measures itself against .header-inner rather than
     its own 40px button. Nothing else here depends on it being positioned:
     the badge anchors to the trigger, and the full-message modal has already
     been moved to <body>. */
  .sna-notify,
  .sna-apps {
    position: static;
  }
  .sna-notify__panel,
  .sna-apps__panel {
    position: absolute;
    top: calc(100% + 8px); /* 100% = the header's own height */
    left: 12px;
    right: 12px;
    bottom: auto;
    width: auto;
    /* Clears the launcher's desktop floor. Left standing it would hold the
       panel at 272px on a viewport too narrow to show that much, which is the
       one case the two insets above exist to prevent. */
    min-width: 0;
    max-width: none;
    border-radius: 20px;
    /* vh first as the fallback: dvh excludes the mobile browser chrome,
       which vh famously does not, and getting that wrong hides the last row
       behind the address bar. 96px covers the tallest header in this band
       (80px) plus the 8px gap and a little breathing room at the foot. */
    max-height: 72vh;
    max-height: calc(100dvh - 96px);
    /* Drops from the header now, so it must not animate upward from the
       bottom of the screen. */
    animation: sna-notify-drop 0.22s ease-out;
  }
  .sna-notify__panel.is-open,
  .sna-apps__panel.is-open {
    animation: sna-notify-drop 0.22s ease-out;
  }
  /* Above phone width the pair of 12px insets stops being a measure and
     becomes a stretch: at 992px they produce a 968px-wide dropdown holding
     two lines of 11.5px text, and the message sets on ONE enormous line. That
     is what makes the panel read as a strip across the page rather than a
     panel. Cap it and hang it off the right, under the button that opened it.
     Phones keep the full width, where edge-to-edge is the right answer. */
}
@media (max-width: 992px) and (min-width: 601px) {
  .sna-notify__panel {
    left: auto;
    width: min(420px, 100vw - 24px);
  }
}
@media (max-width: 992px) {
  .sna-notify__list {
    max-height: calc(72vh - 168px);
  }
  /* No padding bump here any more. It existed to grow the touch target on a
     phone, back when the row was a band whose height was its padding; the
     slab's height comes from three lines of copy beside a 34px chip, which
     clears a thumb by a wide margin at the shared padding. Keeping it would
     have made the one row a student sees on the small screen the one row that
     does not match the launcher beside it. */
}

/* SITE SURFACE THEME — appended block, compiled from sass/layout/_site-glass.scss.
   Everything from this comment to EOF belongs to it. */
html[data-glass] {
  /* ---- The backdrop ------------------------------------------------------
     `.lp` brings the roadmap's 1200px column with it; this instance is a
     full-viewport layer, so the column geometry is undone here rather than by
     writing a second copy of the aura and field markup.

     `position: fixed` + `z-index: -1`: negative z paints above the page's own
     background but below every in-flow element, which is exactly the slot a
     backdrop wants. Fixed rather than absolute because there is no page block
     to span site-wide — one screen of canvas covers a 12,000px page as well as
     a short one, and learning-path-fx.js drifts its layers against scrollY, so
     the parallax survives being pinned. */
}
html[data-glass] .lp--backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  /* `.lp` sets `isolation: isolate`, which would trap the negative-z children
     in their own stacking context and hide them behind this element's own
     background rather than the page's. */
  isolation: auto;
  contain: strict;
  /* Inside a viewport-sized fixed box these no longer need the
     escape-the-column trick, and `left: calc(50% - 50vw)` would now push
     them half a viewport off to the left. */
}
html[data-glass] .lp--backdrop .lp__aura,
html[data-glass] .lp--backdrop .lp__field {
  position: absolute;
  inset: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}
html[data-glass] .lp--backdrop {
  /* Taller than the /about copy: there it fades out before the timeline
     starts, but here it is the top of every page and a 620px band ended
     mid-screen on a laptop. */
}
html[data-glass] .lp--backdrop .lp__aura {
  bottom: auto;
  height: min(78vh, 760px);
}
html[data-glass] .lp--backdrop {
  /* Quieter than on /about, and this is a legibility fix rather than taste.
     The field was tuned at 0.5 under a page with a lot of air in it; behind
     /terms it is running circuit traces underneath a wall of body copy, and
     the two compete. Scoped to `.lp--backdrop` so /about, /review and
     /learning-path keep the field exactly as it was — those pages were
     designed around it. */
}
html[data-glass] .lp--backdrop .lp__fx {
  opacity: 0.32;
}
html[data-glass] .lp--backdrop .lp__mesh {
  opacity: 0.34;
}
html[data-glass] {
  /* /about, /review and /learning-path bring their own shell, and a second
     aura over the first doubles the colour. `:has()` rather than a PHP
     condition because the page body renders after the include decides.

     Matched on `.lp` alone, NOT on `.lp[data-lp-page]`: the roadmap carries the
     shell but drives it from an inline script rather than lp-shell.js, so it
     has no `data-lp-page` and the narrower selector let a second field through
     on exactly the page with the busiest one. Bare `.lp` is unambiguous — every
     other class in the family is `.lp-…` or `.lp__…`. */
}
html[data-glass] body:has(main .lp) .lp--backdrop {
  display: none;
}
html[data-glass] {
  /* ---- Letting the backdrop through --------------------------------------
     A backdrop is only visible where the page above it is not painted over it.
     These are the opaque fills between the field and the content: the page
     shell and the section wrappers that carry a flat dark background of their
     own. `.course-idv` is the big one — a single rgb(10,10,10) block 2500px
     tall over the whole course page, which was hiding the field completely. */
}
html[data-glass] body,
html[data-glass] main,
html[data-glass] .section-main,
html[data-glass] .section-main > section,
html[data-glass] .course-idv,
html[data-glass] .about-section,
html[data-glass] .learning-section,
html[data-glass] .skills-section,
html[data-glass] .tech-section,
html[data-glass] .team-section,
html[data-glass] .core-team-sections,
html[data-glass] .certify__section,
html[data-glass] .legal-section,
html[data-glass] .payment-status-section,
html[data-glass] .subscribe-page__trial-section {
  background-color: transparent;
  background-image: none;
}
html[data-glass] {
  /* The page still needs a floor. `body` is cleared above — it has to be, or
     an opaque body would hide a backdrop that paints at `z-index: -1` — so the
     colour moves up to the root, where the fixed layer sits on top of it.

     `$bg`, THE SITE'S OWN COLOUR, not a value invented here. This was `#0b0b0f`
     — borrowed from the .lp theme and a shade off `$bg`'s `#0E0E0E`. Close
     enough to look right in isolation and wrong the moment it met anything
     still painting the real one. Restoring the page background means restoring
     the actual token, not something near it. */
  background-color: #0E0E0E;
  /* THE FOOTER IS NOT PART OF THIS. It keeps the surface it always had: the
     backdrop is `position: fixed`, so a transparent footer does not show the
     field ENDING — it shows the field still running underneath the last thing
     on the page, which reads as the page having no bottom. The footer being
     solid is what gives the field somewhere to stop. */
}
html[data-glass] .footer-section {
  position: relative;
  z-index: 1;
}
html[data-glass] {
  /* ---- The glass ---------------------------------------------------------
     THE SITE ALREADY HAS A GLASS CARD RECIPE. `_premium.scss` defines one over
     forty-odd selectors, with `!important` on its background and border. The
     first version of this file added a SECOND recipe on top of it, and the two
     disagreed: my background won (later, also `!important`) while its border
     won (mine was not), so cards ended up wearing half of each — which is what
     the misaligned outline on the instructor card actually was.

     So this does not re-implement anything. It retunes the tokens that recipe
     already reads. One variable change reaches every card premium covers, with
     no specificity fight and no second border.

     The old value was `rgba(23, 23, 27, 0.6)` — 60% opaque, which is a tinted
     panel rather than glass and is why the cards stayed dark over the new
     backdrop. */
  --sna-glass: rgba(255, 255, 255, 0.042);
  --sna-glass-strong: rgba(255, 255, 255, 0.075);
  --sna-glass-border: rgba(255, 255, 255, 0.13);
  --sna-glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --sna-blur: blur(22px) saturate(165%);
  --sna-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  /* Cards the premium recipe does not cover. Same tokens, so there is still
     exactly one recipe — this list is only about REACH, not about looking
     different.

     Deliberately NOT here: `.sna-notify__panel`, `.sna-modal__card`,
     `.sna-offer-modal__card`, `.sna-apps__panel`. Those are overlays that open
     ON TOP of a page, and an overlay you can read the page through is an
     overlay you cannot read. They stay solid.

     Also deliberately not here: `.info-item`. It sits INSIDE `.instructor-card`
     and is not a surface — giving it a border is what drew a second outline
     inset from the card's own, the one in the screenshot.

     AND NOT `.lp-card`, `.lp__stage` OR `.lp__choice`. Those belong to the .lp
     theme, which already defines its own surface AND its own hover — and that
     hover is declared at `.lp__stage:hover`, specificity (0,2,0), exactly what
     `html[data-glass] .lp__stage` scores. On a tie the later rule wins and this
     file is compiled last, so listing them here replaced the accent ring on
     hover with a flat white hairline that never changed. Measured: a hovered
     roadmap card returned the same border and shadow as an idle one.

     Same trap as `.dashboard__filters-right` above. Anything that guards its
     own interactive states without `!important` must either stay off this list
     or be given a rule that touches the fill only.

     AND NOT THE COURSE BENEFITS GRID. `.course-idv__benefits-grid` is a
     `#121212` panel and `.benefit-card` is explicitly `background-color:
     transparent` above 769px: the cells are meant to be see-through compartments
     inside one solid frame, divided by hairlines, not six cards sitting on a
     surface. Glassing both turned one framed grid into a flat sheet with faint
     boxes drawn on it. It is left entirely alone.

     Worth noting how that was missed: this layer had a rule aimed at
     `.course-idv__benefits-grid .course-idv__benefits-card` meant to stop
     exactly this, and it never matched — the cells are `.benefit-card`, and
     `.course-idv__benefits-card` is a different component elsewhere on the
     page. A nesting guard written against the wrong class is worse than none,
     because it reads as covered. */
  /* NOT here, and both for the same reason — see the note below the list:
     `.benefit-card`, `.course-idv__benefits-grid`. */
}
html[data-glass] .mentor-card,
html[data-glass] .team-card,
html[data-glass] .testimonial-card,
html[data-glass] .stats-card,
html[data-glass] .opp-card,
html[data-glass] .opportunities__cta,
html[data-glass] .glass-card,
html[data-glass] .small-card,
html[data-glass] .enroll-card,
html[data-glass] .enrollment-popup__payment-card,
html[data-glass] .course-popup__item,
html[data-glass] .course-idv__hero-banner-card,
html[data-glass] .orbit-box,
html[data-glass] .trial-banner__card,
html[data-glass] .myaccount__panel,
html[data-glass] .myaccount__cert-card,
html[data-glass] .myaccount__mc-card,
html[data-glass] .myaccount__pay-card,
html[data-glass] .myaccount__subscription-card,
html[data-glass] .subscribe-page__card,
html[data-glass] .subscribe-page__plan-card,
html[data-glass] .subscribe-page__preview-card,
html[data-glass] .legal-section__body {
  background-color: var(--sna-glass);
  background-image: none;
  border: 1px solid var(--sna-glass-border);
  -webkit-backdrop-filter: var(--sna-blur);
  backdrop-filter: var(--sna-blur);
  box-shadow: var(--sna-glass-hi), var(--sna-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-glass] .mentor-card,
  html[data-glass] .team-card,
  html[data-glass] .testimonial-card,
  html[data-glass] .stats-card,
  html[data-glass] .opp-card,
  html[data-glass] .opportunities__cta,
  html[data-glass] .glass-card,
  html[data-glass] .small-card,
  html[data-glass] .enroll-card,
  html[data-glass] .enrollment-popup__payment-card,
  html[data-glass] .course-popup__item,
  html[data-glass] .course-idv__hero-banner-card,
  html[data-glass] .orbit-box,
  html[data-glass] .trial-banner__card,
  html[data-glass] .myaccount__panel,
  html[data-glass] .myaccount__cert-card,
  html[data-glass] .myaccount__mc-card,
  html[data-glass] .myaccount__pay-card,
  html[data-glass] .myaccount__subscription-card,
  html[data-glass] .subscribe-page__card,
  html[data-glass] .subscribe-page__plan-card,
  html[data-glass] .subscribe-page__preview-card,
  html[data-glass] .legal-section__body {
    background-color: rgba(23, 23, 28, 0.55);
  }
}
html[data-glass] {
  /* ---- The course search bar ---------------------------------------------
     Already a glass component — blur, hairline, shadow, the lot — but tuned at
     `rgba(23, 23, 27, 0.75)`, which over the backdrop left it the one solid
     slab on the page.

     THE FILL, AND NOTHING ELSE, and that restraint is the whole rule. The
     component declares its own orange `:focus-within` border and glow at
     `.dashboard__filters-right:focus-within` — specificity (0,2,0), exactly
     what `html[data-glass] .dashboard__filters-right` scores. On a tie the
     later rule wins, and this file is compiled last, so a `border` or
     `box-shadow` here would silently beat the focus state and the field would
     stop responding to being focused. Measured: it did, before this was pulled
     out of the shared list above. */
}
html[data-glass] .dashboard__filters-right {
  background-color: var(--sna-glass);
  background-image: none;
}
html[data-glass] {
  /* ---- The instructor card's inner panel ---------------------------------
     THE MISALIGNED OUTLINE, and it is not new — this layer only made it
     visible. `.info-item` is a 16px-radius panel, and its `::before` gradient
     ring is authored at `border-radius: 24px` with `inset: -1px`, a value
     copied from `.stat-card` (which really is 24px). Two different curves, one
     drawn a pixel outside the other. Against the old `rgba(60, 60, 60, 0.8)`
     slab you could not see the disagreement; against a translucent card both
     curves are visible and they do not meet.

     `inherit` rather than a number, so the ring follows the panel if the panel
     ever changes. It resolves 1px tighter than the -1px inset strictly wants,
     which at a 16px radius is not a difference anyone can see — and is a great
     deal smaller than the 8px one it replaces.

     The long selector is not decoration: the original rule is five classes
     deep (`.about-section .about-right .stat-grid .instructor-card .info-item`)
     and a shorter one here simply loses.

     The panel also drops its own blur. It sits inside a card that is already
     blurring, and a blur inside a blur is what turns glass into grey plastic. */
}
html[data-glass] .about-section .about-right .stat-grid .instructor-card .info-item {
  background: var(--sna-glass-strong);
  border-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-glass] .about-section .about-right .stat-grid .instructor-card .info-item::before {
  border-radius: inherit;
}
html[data-glass] {
  /* A blur inside a blur, again, and a border inside a border. An inner card
     keeps its shape and gives up its surface. */
}
html[data-glass] .lp-card .lp-card,
html[data-glass] .myaccount__panel .myaccount__pay-card,
html[data-glass] .myaccount__panel .myaccount__cert-card,
html[data-glass] .myaccount__panel .myaccount__mc-card {
  background-color: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}