:root {
  color-scheme: dark;
  --color-surface: #0e1511;
  --color-surface-grid: rgba(255, 255, 255, 0.02);
  --color-surface-lowest: #08100c;
  --color-surface-low: #161d19;
  --color-surface-container: #1a211d;
  --color-surface-high: #242c27;
  --color-surface-highest: #2f3731;
  --color-surface-variant: #2f3731;
  --color-surface-bright: #333b36;
  --color-surface-mobile-glass: rgba(26, 33, 29, 0.8);
  --color-glass: rgba(22, 29, 25, 0.7);
  --color-glass-border: rgba(60, 74, 65, 0.3);
  --color-primary: #8affc5;
  --color-primary-strong: #45e6a3;
  --color-primary-soft: rgba(69, 230, 163, 0.2);
  --color-primary-grid: rgba(69, 230, 163, 0.03);
  --color-primary-shadow: rgba(69, 230, 163, 0.15);
  --color-primary-shadow-strong: rgba(69, 230, 163, 0.3);
  --color-primary-gradient-start: rgba(138, 255, 197, 0.3);
  --color-primary-gradient-end: rgba(69, 230, 163, 0.85);
  --color-on-surface: #dce5dd;
  --color-on-surface-variant: #bbcabf;
  --color-outline: #85948a;
  --color-outline-variant: #3c4a41;
  --color-outline-muted: #2a362f;
  --color-on-primary: #003823;
  --font-body: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-headline: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --space-grid: 64px;
  --space-grid-mobile: 32px;
  --radius-xl: 16px;
  --blur-glass: 12px;
  --blur-glass-mobile: 16px;
  --blur-live: 18px;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

.site-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.site-logo-header-desktop {
  height: 50px;
}

.site-logo-header-mobile {
  height: 36px;
}

.site-logo-footer-desktop {
  height: 70px;
}

.site-logo-footer-mobile {
  height: 70px;
}

.site-logo-mobile-drawer {
  height: 55px;
}

.site-logo-login-desktop {
  height: 56px;
}

.site-logo-login-mobile {
  height: 40px;
}

.page-shell {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.page-section {
  margin-bottom: 100px;
}

body {
  background-color: var(--color-surface);
  background-image: linear-gradient(var(--color-surface-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-surface-grid) 1px, transparent 1px);
  background-size: var(--space-grid) var(--space-grid);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  overflow-x: hidden;
  min-height: max(884px, 100dvh);
}

.font-headline {
  font-family: var(--font-headline);
}

.glass-panel {
  background: var(--color-glass);
  backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--color-glass-border);
}

.emerald-shadow {
  box-shadow: 0 0 30px 0 var(--color-primary-shadow);
}

.emerald-shadow-strong {
  box-shadow: 0 0 40px -5px var(--color-primary-shadow-strong);
}

.technical-grid {
  background-image: linear-gradient(var(--color-primary-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-primary-grid) 1px, transparent 1px);
  background-size: var(--space-grid-mobile) var(--space-grid-mobile);
}

.grid-bg {
  background-image: linear-gradient(var(--color-surface-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-surface-grid) 1px, transparent 1px);
  background-size: var(--space-grid) var(--space-grid);
}

.radial-gradient-bg {
  background: radial-gradient(circle at 50% 0%, rgba(69, 230, 163, 0.12) 0%, transparent 75%);
}

.nav-item-enter {
  animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateX(-20px);
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hide-scrollbar::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar,
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.desktop-view .glass-panel {
  background: var(--color-glass);
  backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--color-glass-border);
}

.desktop-view .hero-image-fade {
  opacity: 0.4;
  transition: opacity 500ms ease;
}

.desktop-view .group:hover .hero-image-fade {
  opacity: 1;
}

.desktop-view .page-shell {
  padding-left: 24px;
  padding-right: 24px;
}

.desktop-view .plan-option-badge {
  position: absolute;
  top: 17px;
  left: 16px;
  z-index: 10;
  display: block;
  max-width: calc(100% - 32px);
  padding: 2px 8px;
  overflow: hidden;
  background-color: var(--color-primary);
  color: var(--color-surface-obsidian, #07110d);
  border-radius: 9999px;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.15em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
}

.desktop-view .plan-option-badge.hidden {
  display: none;
}

.desktop-view .text-primary,
.desktop-view .hover\:text-primary:hover,
.desktop-view .group:hover .group-hover\:text-primary {
  color: var(--color-primary);
}

.desktop-view .bg-primary,
.desktop-view .group:hover .group-hover\:bg-primary {
  background-color: var(--color-primary);
}

.desktop-view .bg-primary-container {
  background-color: var(--color-primary-strong);
}

.desktop-view .text-on-primary {
  color: var(--color-on-primary);
}

.desktop-view .border-primary,
.desktop-view .group:hover .group-hover\:border-primary {
  border-color: var(--color-primary);
}

.desktop-view .bg-surface-container-lowest {
  background-color: var(--color-surface-lowest);
}

.desktop-view .bg-surface-container-low {
  background-color: var(--color-surface-low);
}

.desktop-view .bg-surface-container-high {
  background-color: var(--color-surface-high);
}

.desktop-view .bg-surface-container {
  background-color: var(--color-surface-container);
}

.desktop-view .border-outline-variant {
  border-color: var(--color-outline-variant);
}

.desktop-view .text-outline-variant {
  color: var(--color-outline-variant);
}

.desktop-view .text-body-lg {
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}

.desktop-view .text-body-md {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.desktop-view .text-body-sm {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.desktop-view .text-label-md {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.desktop-view .text-headline-md {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}

.desktop-view .text-headline-lg {
  font-size: 30px;
  line-height: 38px;
  font-weight: 600;
}

.mobile-view {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
}

.mobile-view .font-headline {
  font-family: var(--font-headline);
}

.mobile-view .glass-panel {
  background: var(--color-surface-mobile-glass);
  backdrop-filter: blur(var(--blur-glass-mobile));
  border: 1px solid rgba(69, 230, 163, 0.15);
}

.mobile-view .page-shell {
  padding-left: 20px;
  padding-right: 20px;
}

.mobile-view .plan-option-badge {
  position: absolute;
  top: 16px;
  left: 12px;
  z-index: 10;
  display: block;
  max-width: calc(100% - 24px);
  padding: 2px 8px;
  overflow: hidden;
  color: var(--color-surface-obsidian, #07110d);
  background-color: var(--color-primary);
  border-radius: 9999px;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
}

.mobile-view .plan-option-badge.hidden {
  display: none;
}

.mobile-view .text-primary,
.mobile-view .hover\:text-primary:hover,
.mobile-view .group:hover .group-hover\:text-primary {
  color: var(--color-primary-strong);
}

.mobile-view .bg-primary,
.mobile-view .group:hover .group-hover\:bg-primary {
  background-color: var(--color-primary-strong);
}

.mobile-view .border-primary,
.mobile-view .group:hover .group-hover\:border-primary {
  border-color: var(--color-primary-strong);
}

.mobile-view .bg-primary-container {
  background-color: var(--color-primary-strong);
}

.mobile-view .text-on-primary-container,
.mobile-view .text-on-primary {
  color: var(--color-on-primary);
}

.mobile-view .bg-surface-container {
  background-color: var(--color-surface-low);
}

.mobile-view .bg-surface-container-low {
  background-color: #111814;
}

.mobile-view .bg-surface-container-lowest {
  background-color: #070c09;
}

.mobile-view .border-outline-variant {
  border-color: var(--color-primary-soft);
}

.mobile-view .text-outline-muted {
  color: var(--color-outline-muted);
}

.mobile-view .emerald-glow {
  box-shadow: 0 0 25px var(--color-primary-shadow-strong);
}

.mobile-view .text-body-md {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.mobile-view .text-body-sm {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.mobile-view .text-label-md {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.mobile-view .text-headline-md {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}

.mobile-view .text-headline-lg {
  font-size: 30px;
  line-height: 38px;
  font-weight: 600;
}

.mobile-view .text-display-sm {
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.live-activity-shell {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 24px rgba(255, 255, 255, 0.05),
    0 10px 30px rgba(2, 6, 23, 0.14);
}

.live-activity-icon {
  background: linear-gradient(135deg, var(--color-primary-gradient-start), var(--color-primary-gradient-end));
}

.is-live-activity-visible {
  display: block;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease;
}

.accordion-item.active .accordion-content {
  max-height: 500px;
  padding-bottom: 24px;
}

.accordion-item.active .chevron {
  transform: rotate(180deg);
}