/* ========== CUSTOM FONTS ========== */
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Light.otf') format('opentype');
  font-display: swap;
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-LightItalic.otf') format('opentype');
  font-display: swap;
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Regular.otf') format('opentype');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Italic.otf') format('opentype');
  font-display: swap;
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Medium.otf') format('opentype');
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-MediumItalic.otf') format('opentype');
  font-display: swap;
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Bold.otf') format('opentype');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-BoldItalic.otf') format('opentype');
  font-display: swap;
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Black.otf') format('opentype');
  font-display: swap;
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-BlackItalic.otf') format('opentype');
  font-display: swap;
  font-weight: 900;
  font-style: italic;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #FBFBFD;
  --accent-color: #127ca6;
  --button-hover: #162d59;
  --title-color: #07112B;
  --title-secondary: #08080A;
  --text-color: #545963;
  --text-white: #ffffff;
  --border-color: rgba(8, 8, 10, 0.08);

  /* Max Width Variables */
  --max-width: 100%;
  --max-width-tablet-portrait: 100%;
  --max-width-tablet: 992px;
  --max-width-laptop: 1140px;
  --max-width-desktop: 1240px;
  --max-width-wide: 1340px;
  --spacing-padding-inline: 0.25rem;

  /* Typography Scale */
  --h1-size: clamp(2rem, 1.4718rem + 1.6901vw, 3.5rem);
  --h2-size: clamp(1.75rem, 1.3979rem + 1.1268vw, 2.75rem);
  --h3-size: clamp(1.5rem, 1.2799rem + 0.7042vw, 2.125rem);
  --h4-size: clamp(1.25rem, 1.0739rem + 0.5634vw, 1.75rem);
  --body-large: clamp(1.125rem, 0.993rem + 0.4225vw, 1.5rem);
  --body: clamp(1rem, 0.956rem + 0.1408vw, 1.125rem);

  /* Alpha Typography Scale */
  --alpha-heading-h0: clamp(32px, calc(20px + 4vw), 96px);
  --alpha-heading-h1: clamp(28px, calc(18px + 2.25vw), 64px);
  --alpha-heading-h2: clamp(24px, calc(16px + 1.75vw), 48px);
  --alpha-heading-h3: 40px;
  --alpha-heading-h4: 32px;
  --alpha-heading-h5: 24px;
  --alpha-body-large: 32px;
  --alpha-body-medium: 24px;
  --alpha-body-small: 20px;
  --alpha-body-xs: 16px;
  --alpha-button-large: 32px;
  --alpha-button-medium: 24px;
  --alpha-button-small: 20px;

  /* Font Weights */
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-light: 300;
}

/* Alpha Typography - Responsive Variables */
/* 1800-1919px */
@media (max-width: 1919px) {
  :root {
    --alpha-heading-h0: clamp(84px, calc(60px + 1.25vw), 96px);
    --alpha-heading-h1: clamp(58px, calc(40px + 1vw), 64px);
    --alpha-heading-h2: clamp(44px, calc(32px + 0.75vw), 48px);
    --alpha-heading-h3: 38px;
    --alpha-heading-h4: 30px;
    --alpha-heading-h5: 24px;
    --alpha-body-large: 30px;
    --alpha-body-medium: 24px;
    --alpha-body-small: 20px;
    --alpha-body-xs: 16px;
    --alpha-button-large: 30px;
    --alpha-button-medium: 24px;
    --alpha-button-small: 20px;
  }
}

/* 1400-1799px */
@media (max-width: 1799px) {
  :root {
    --alpha-heading-h0: clamp(72px, calc(48px + 1.5vw), 84px);
    --alpha-heading-h1: clamp(52px, calc(32px + 1.5vw), 58px);
    --alpha-heading-h2: clamp(40px, calc(28px + 0.75vw), 44px);
    --alpha-heading-h3: 36px;
    --alpha-heading-h4: 28px;
    --alpha-heading-h5: 22px;
    --alpha-body-large: 28px;
    --alpha-body-medium: 22px;
    --alpha-body-small: 18px;
    --alpha-body-xs: 15px;
    --alpha-button-large: 28px;
    --alpha-button-medium: 22px;
    --alpha-button-small: 18px;
  }
}

/* 1025-1399px */
@media (max-width: 1399px) {
  :root {
    --alpha-heading-h0: clamp(60px, calc(36px + 2vw), 72px);
    --alpha-heading-h1: clamp(44px, calc(24px + 2vw), 52px);
    --alpha-heading-h2: clamp(36px, calc(24px + 1vw), 40px);
    --alpha-heading-h3: 32px;
    --alpha-heading-h4: 26px;
    --alpha-heading-h5: 20px;
    --alpha-body-large: 24px;
    --alpha-body-medium: 20px;
    --alpha-body-small: 18px;
    --alpha-body-xs: 15px;
    --alpha-button-large: 24px;
    --alpha-button-medium: 20px;
    --alpha-button-small: 18px;
  }
}

/* 768-1024px */
@media (max-width: 1024px) {
  :root {
    --alpha-heading-h0: clamp(48px, calc(24px + 3vw), 60px);
    --alpha-heading-h1: clamp(36px, calc(20px + 2vw), 44px);
    --alpha-heading-h2: clamp(32px, calc(20px + 1.5vw), 36px);
    --alpha-heading-h3: 28px;
    --alpha-heading-h4: 24px;
    --alpha-heading-h5: 20px;
    --alpha-body-large: 22px;
    --alpha-body-medium: 18px;
    --alpha-body-small: 18px;
    --alpha-body-xs: 14px;
    --alpha-button-large: 22px;
    --alpha-button-medium: 18px;
    --alpha-button-small: 16px;
  }
}

/* 480-767px */
@media (max-width: 767px) {
  :root {
    --alpha-heading-h0: clamp(40px, calc(28px + 2.5vw), 48px);
    --alpha-heading-h1: clamp(32px, calc(24px + 1.5vw), 36px);
    --alpha-heading-h2: clamp(28px, calc(20px + 1.5vw), 32px);
    --alpha-heading-h3: 24px;
    --alpha-heading-h4: 22px;
    --alpha-heading-h5: 18px;
    --alpha-body-large: 20px;
    --alpha-body-medium: 18px;
    --alpha-body-small: 16px;
    --alpha-body-xs: 14px;
    --alpha-button-large: 20px;
    --alpha-button-medium: 18px;
    --alpha-button-small: 16px;
  }
}

/* <480px */
@media (max-width: 479px) {
  :root {
    --alpha-heading-h0: 32px;
    --alpha-heading-h1: 28px;
    --alpha-heading-h2: 24px;
    --alpha-heading-h3: 22px;
    --alpha-heading-h4: 20px;
    --alpha-heading-h5: 16px;
    --alpha-body-large: 18px;
    --alpha-body-medium: 16px;
    --alpha-body-small: 15px;
    --alpha-body-xs: 13px;
    --alpha-button-large: 18px;
    --alpha-button-medium: 16px;
    --alpha-button-small: 15px;
  }
}

body {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: #fff;
  color: var(--text-color);
  min-height: 100vh;
  overflow-x: hidden;
}

a[href] {
  cursor: pointer;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* ========== ACCESSIBILITY UTILITIES ========== */
.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;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 200;
  background: var(--title-color);
  color: var(--text-white);
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 500;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 8px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

/* Container */
.container {
  margin: 0 auto;
  max-width: var(--max-width);
  position: relative;
}

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

/* @media (max-width: 1024px) {
  .container {
    max-width: var(--max-width-tablet-portrait);
  }
} */

/* @media (max-width: 1190px) {
  .container {
    max-width: var(--max-width-tablet);
  }
} */

@media (min-width: 1191px) {
  .container {
    max-width: var(--max-width-laptop);
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: var(--max-width-desktop);
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: var(--max-width-wide);
  }
}

/* ========== ANNOUNCEMENT BAR ========== */
.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  background: linear-gradient(90deg, #0a5574 0%, #0e6a91 50%, #0a5574 100%);
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.5px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.announcement-bar p {
  margin: 0;
}

.announcement-bar strong {
  font-weight: var(--font-weight-bold);
}

/* ========== HEADER ========== */
header {
  padding: 24px 60px;
  min-height: 70px;
  position: fixed;
  /* top: 36px; */
  left: 0;
  right: 0;
  z-index: 100;
  animation: slideDown 0.8s ease-out;
  background: transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header scrolled state */
header.scrolled {
  padding: 16px 60px;
  background: rgba(251, 251, 253, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo {
  display: flex;
  align-items: center;
  /* transition: transform 0.3s ease; */
}

/* .logo:hover {
  transform: scale(1.05);
} */

.logo img {
  max-width: 200px;
  height: auto;
}

nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(8, 8, 10, 0.04);
  padding: 6px;
  border-radius: 50px;
  border: 1px solid var(--border-color);
}

nav a {
  color: var(--title-color);
  text-decoration: none;
  font-size: var(--alpha-heading-h5);
  font-weight: var(--font-weight-medium);
  padding: 10px 20px;
  border-radius: 50px;
  transition: all 0.3s ease;
  position: relative;
}

nav a::after {
  display: none;
}

nav a:hover {
  background: rgba(8, 8, 10, 0.06);
}

nav a.active {
  background: var(--accent-color);
  color: var(--text-white);
}

.cta-button {
  background: var(--accent-color);
  color: var(--text-white);
  padding: 16px 22px;
  border-radius: 50px;
  text-decoration: none;
  font-size: var(--alpha-heading-h5);
  font-weight: var(--font-weight-semibold);
  transition: all 0.3s ease;
}

.cta-button:hover {
  background: var(--button-hover);
  color: var(--text-white);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  position: relative;
  z-index: 101;
}

.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--title-color);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Mobile Menu Active State (hamburger to X) */
.mobile-menu-btn.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* When menu is open, hamburger should change color for overlay */
.mobile-menu-btn.active span {
  background: var(--accent-color);
}

/* Mobile Navigation Menu */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 99;
  padding: 180px 1.5rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.mobile-nav.active {
  opacity: 1;
  pointer-events: auto;
}

div.mobile-nav a {
  color: var(--accent-color) !important;
  text-decoration: none;
  font-size: var(--alpha-heading-h3);
  font-weight: var(--font-weight-semibold);
  padding: 20px 0;
  width: 100%;
  text-align: left;
  transition: color 0.3s ease;
  background: transparent !important;
  border-bottom: 1px solid rgba(18, 124, 166, 0.7);
}

div.mobile-nav a:last-child {
  border-bottom: none;
}

div.mobile-nav a:nth-last-child(2) {
  border-bottom: none;
}

div.mobile-nav a:hover {
  color: var(--button-hover) !important;
}

div.mobile-nav a.cta-button {
  margin-top: 24px;
  font-size: var(--alpha-body-medium);
  padding: 18px 36px;
  background: var(--accent-color) !important;
  color: #ffffff !important;
  border-radius: 50px;
  width: auto;
}

div.mobile-nav a.cta-button:hover {
  background: var(--button-hover) !important;
  color: #ffffff !important;
}

/* ========== RESPONSIVE - Large screens ========== */
@media (min-width: 1800px) {
  header {
    padding: 28px 100px;
  }

  header.scrolled {
    padding: 18px 100px;
  }

  nav {
    gap: 10px;
    padding: 8px;
  }

  nav a {
    padding: 12px 24px;
  }

  .cta-button {
    padding: 18px 36px;
  }
}

/* Responsive - Large screens */
@media (min-width: 1400px) and (max-width: 1799px) {
  header {
    padding: 26px 80px;
  }

  header.scrolled {
    padding: 16px 80px;
  }
    .cta-button {
    padding: 16px 36px;
  }
}

@media (max-width: 1140px) {
    .mobile-menu-btn {
    display: flex;
    gap: 5px;
    padding: 10px;
  }
    nav {
    display: none;
  }
}

/* Responsive - Tablets */
@media (max-width: 1024px) {
  header {
    padding: 20px 40px;
  }

  header.scrolled {
    padding: 14px 40px;
  }

  .logo img {
    max-width: 185px;
  }

  nav {
    gap: 4px;
    padding: 5px;
  }

  nav a {
    padding: 8px 16px;
  }

  .cta-button {
    padding: 12px 24px;
  }
  .cta-marquee-item .star-icon {
    width: 42px;
    height: 42px;
}
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  header {
    padding: 16px 20px;
    /* top: 50px; */
  }

  .announcement-bar{
    height: 50px;
  }

  header.scrolled {
    padding: 12px 20px;
  }

  nav {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
    gap: 7px;
    padding: 10px;
  }

  .mobile-menu-btn span {
    width: 32px;
    height: 3px;
  }

  .mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }

  .mobile-menu-btn.active span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  .cta-button {
    padding: 14px 28px;
  }
  .cta-marquee-item .star-icon {
    width: 38px;
    height: 38px;
}
}

/* Responsive - Small Mobile */
@media (max-width: 480px) {
  header {
    padding: 14px 16px;
    min-height: auto;
  }

  header.scrolled {
    padding: 12px 16px;
  }

  .mobile-menu-btn {
    gap: 6px;
    padding: 8px;
  }

  .mobile-menu-btn span {
    width: 28px;
    height: 3px;
  }

  .mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .mobile-menu-btn.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* Hide header CTA button on small mobile */
  .header-right .cta-button {
    display: none;
  }
    .cta-marquee-item .star-icon {
    width: 36px;
    height: 36px;
}
}

/* ========== HERO SECTION ========== */
.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  padding: 200px 60px 60px;
  text-align: center;
  border-radius: 0 0 50px 50px;
  background-color: var(--bg-secondary);
}

.hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--max-width-desktop);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem 0.375rem 0.375rem;
  background-color: #f5f5f5;
  border: 1px solid var(--border-color);
  border-radius: 80px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.hero-badge:hover {
  background-color: #ebebeb;
}

.badge-new {
  background: var(--accent-color);
  color: var(--text-white);
  padding: 0.25rem 0.75rem;
  border-radius: 80px;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
}

.badge-text {
  color: var(--title-color);
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-medium);
}

.hero-badge svg {
  color: var(--title-color);
}

.hero-title {
  font-size: var(--alpha-heading-h0);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  line-height: 1.1;
  max-width: 780px;
}

.hero-description {
  font-size: var(--alpha-body-medium);
  color: var(--text-color);
  max-width: 720px;
  line-height: 1.4;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-image {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.hero-image video {
  width: 100% !important;
  height: auto;
  border-radius: 16px;
}

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent-color);
  color: var(--text-white);
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--accent-color);
}

.btn-primary:hover {
  background: var(--button-hover);
  border-color: var(--button-hover);
}

.btn-primary .btn-text {
  color: var(--text-white);
}

.btn-primary .btn-icon svg {
  stroke: var(--text-white);
}

.btn-lg {
  padding: 1rem 1.5rem;
  height: auto;
  font-size: var(--alpha-body-small);
  gap: 0.5rem;
}

.btn-outline {
  background-color: transparent;
  color: var(--title-color);
  border: 1px solid var(--border-color);
}

.btn-outline:hover {
  background-color: #f5f5f5;
}

.btn-with-icon {
  position: relative;
}

.btn-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.btn-icon svg {
  position: absolute;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-icon .icon-default {
  opacity: 1;
  transform: translateX(0);
}

.btn-icon .icon-hover {
  opacity: 0;
  transform: translateX(-4px);
}

.btn-with-icon:hover .icon-default {
  opacity: 0;
  transform: translateX(4px);
}

.btn-with-icon:hover .icon-hover {
  opacity: 1;
  transform: translateX(0);
}

/* Hero Section Responsive */
@media (min-width: 1921px) {
  .hero-section {
    min-height: 100vh;
    padding: 200px 80px 80px;
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  .hero-section {
    padding: 190px 40px 80px;
    min-height: 100vh;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 180px 20px 70px;
    min-height: 100vh;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 150px 20px 70px;
    gap: 1.5rem;
  }

  .hero-actions {
    width: 100%;
    padding: 0;
  }

  .hero-actions .btn-lg {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  .hero-badge {
    font-size: 0.875rem;
  }
}

/* ========== DIVIDER ========== */
.divider {
  padding-top: 40px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 40px;
  width: 100%;
  max-width: var(--max-width-desktop);
}

@media (max-width: 767px) {
  .divider {
    padding-top: 60px;
    margin-bottom: 60px;
  }
}

@media (max-width: 480px) {
      .divider {
        padding-top: 20px;
        margin-bottom: 20px;
    }
  }

/* ========== BRAND SLIDER ========== */
.brand-slider-title {
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
}

.brand-slider-title p {
  font-size: var(--alpha-body-medium);
  color: var(--text-color);
  font-weight: var(--font-weight-regular);
  max-width: 600px;
  margin: 0 auto;
}

.brand-slider-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.brand-slider-wrapper .container {
  max-width: var(--max-width-desktop);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.brand-slider-wrapper .container::before,
.brand-slider-wrapper .container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

.brand-slider-wrapper .container::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-secondary), transparent);
}

.brand-slider-wrapper .container::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-secondary), transparent);
}

.brand-slider-track {
  display: flex;
  align-items: center;
}

.brand-slider-track .slick-slide {
  padding: 0 40px;
}

.brand-slider-track .slick-track {
  display: flex;
  align-items: center;
}

.brand-logo-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.brand-logo-item img {
  width: 170px;
  height: 82px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease;
}

#about > div.brand-slider-wrapper > div > div > div > div > div:nth-child(14) > img{
  background-color: #536372;
  padding: 0px 10px;
}

.brand-logo-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Brand Slider Responsive */
@media (max-width: 1024px) {
  .brand-slider-track .slick-slide {
    padding: 0 30px;
  }

  .brand-logo-item img {
    width: 165px;
    height: 58px;
  }
}

@media (max-width: 768px) {
  .brand-slider-title {
    margin-bottom: 36px;
  }

  .brand-slider-track .slick-slide {
    padding: 0 25px;
  }

  .brand-logo-item img {
    width: 115px;
    height: 58px;
  }

  .brand-slider-wrapper .container::before,
  .brand-slider-wrapper .container::after {
    width: 60px;
  }
}

@media (max-width: 480px) {
  .brand-slider-title {
    margin-bottom: 28px;
  }

  .brand-slider-track .slick-slide {
    padding: 0 20px;
  }

  .brand-logo-item img {
    width: 100px;
    height: 52px;
  }

  .brand-slider-wrapper .container::before,
  .brand-slider-wrapper .container::after {
    width: 40px;
  }
}

/* ========== COMMITMENT SECTION ========== */
.commitment-section {
  min-height: 100vh;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 60px 0px 60px;
}

.commitment-section .container {
  max-width: var(--max-width-laptop);
  margin: 0 auto;
}

.commitment-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.commitment-heading {
  font-size: var(--alpha-heading-h1);
  font-weight: var(--font-weight-medium);
  line-height: 130%;
  color: #d1d1d1;
  margin: 0;
}

.commitment-heading .about-word {
  display: inline-block;
  transition: color 0.3s ease;
}

.commitment-heading .about-word-gradient {
  background: linear-gradient(110deg, #127CA6 0%, #10182F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.commitment-section .btn-lg {
  font-size: var(--alpha-body-medium);
}

/* Commitment Section - Responsive */
@media (min-width: 1921px) {
  .commitment-section {
    padding: 120px 80px 0px 80px;
  }
}

@media (max-width: 1024px) {
  .commitment-section {
    padding: 100px 40px 20px 40px;
  }

  .commitment-content {
    gap: 60px;
  }
}

@media (max-width: 768px) {
  .commitment-section {
    padding: 80px 20px 0px 20px;
  }

  .commitment-content {
    gap: 40px;
  }
}

@media (max-width: 480px) {
  .commitment-section {
    padding: 60px 20px 0px 20px;
  }
}

/* ========== FEATURES SECTION ========== */
.features-section {
  background-color: var(--bg-primary);
  padding: 60px 80px;
}

.features-section .container {
  max-width: var(--max-width-desktop);
}

.features-title {
  font-size: var(--alpha-heading-h1);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  line-height: 1.1;
  max-width: 750px;
  margin-bottom: 20px;
}

.features-title span{
  background: linear-gradient(110deg, rgb(18, 124, 166) 0%, rgb(16, 24, 47) 100%) text;
  -webkit-text-fill-color: transparent;
}

.features-description {
  font-size: var(--alpha-body-medium);
  color: var(--text-color);
  line-height: 1.5;
  margin: 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  padding: 40px 30px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  transition: background-color 0.3s ease;
}

/* .feature-card:hover {
  background-color: var(--title-color);
}

.feature-card:hover .feature-icon {
  color: var(--accent-color);
}

.feature-card:hover .feature-card-title {
  color: var(--text-white);
}

.feature-card:hover .feature-card-description {
  color: rgba(255, 255, 255, 0.7);
}

.feature-card:hover .feature-arrow {
  color: var(--accent-color);
} */

.feature-icon {
  margin-bottom: 32px;
  color: var(--accent-color);
  transition: color 0.3s ease;
}

.feature-icon svg {
  width: 42px;
  height: 42px;
}

.feature-card-title {
  font-size: var(--alpha-heading-h5);
  font-weight: var(--font-weight-semibold);
  color: var(--title-color);
  margin-bottom: 16px;
  line-height: 1.2;
  transition: color 0.3s ease;
}

.feature-card-description {
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  line-height: 1.5;
  flex-grow: 1;
  transition: color 0.3s ease;
}

.feature-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--title-color);
  transition: transform 0.3s ease, color 0.3s ease;
  margin-top: 40px;
}

.feature-arrow svg {
  width: 24px;
  height: 20px;
}

.feature-card:hover .feature-arrow {
  transform: translateX(6px);
}

/* Features Section Responsive */
@media (min-width: 1800px) {
  .features-section {
    padding: 160px 120px;
  }

  .features-description {
    margin-bottom: 60px;
  }

  /* .feature-icon svg {
    width: 50px;
    height: 50px;
  } */
}

@media (min-width: 1400px) and (max-width: 1799px) {
  .features-section {
    padding: 160px 120px;
  }

  .features-description {
    margin-bottom: 60px;
  }

  /* .feature-icon svg {
    width: 50px;
    height: 50px;
  } */
}

@media (max-width: 1024px) {
  .features-section {
    padding: 100px 48px;
  }

  .features-title {
    margin-bottom: 48px;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .feature-icon {
    margin-bottom: 24px;
  }

  .feature-arrow {
    margin-top: 32px;
  }
    .features-description {
    margin-bottom: 50px;
  }
}

@media (max-width: 768px) {
  .features-section {
    padding: 80px 28px;
  }

  .features-title {
    margin-bottom: 40px;
  }
    .features-description {
    margin-bottom: 40px;
  }

  .feature-card {
    padding: 25px;
  }

  .feature-icon svg {
    width: 38px;
    height: 38px;
  }

  .feature-arrow svg {
    width: 22px;
    height: 18px;
  }
    .feature-arrow {
  margin-top: 28px;
  }
}

@media (max-width: 480px) {
  .features-section {
    padding: 60px 20px;
  }

  .features-title {
    margin-bottom: 32px;
  }

    .features-description {
    margin-bottom: 32px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .feature-card:last-child {
    border-bottom: none;
  }

  .feature-icon svg {
    width: 36px;
    height: 36px;
  }

  .feature-icon {
    margin-bottom: 20px;
  }

}

/* ========== CTA MARQUEE SECTION ========== */
.cta-marquee-section {
  background-color: #fff;
  overflow: hidden;
}

.cta-marquee-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: marqueeScroll 60s linear infinite;
  width: max-content;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.cta-marquee-item {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 20px;
}

.cta-marquee-item img {
  /* width: 24px;
  height: 24px; */
  flex-shrink: 0;
}

.cta-marquee-item .star-icon {
  flex-shrink: 0;
  color: var(--accent-color);
  animation: spinStar 9s linear infinite;
}

@keyframes spinStar {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cta-marquee-item span {
  font-size: var(--alpha-heading-h0);
  font-weight: var(--font-weight-semibold);
  color: var(--title-color);
}

/* CTA Marquee Responsive */
@media (min-width: 1800px) {
  /* .cta-marquee-section {
    padding: 32px 0;
  } */

  .cta-marquee-item {
    gap: 40px;
    padding: 0 20px;
  }

  /* .cta-marquee-item img {
    width: 28px;
    height: 28px;
  } */
}

@media (max-width: 1024px) {
  /* .cta-marquee-section {
    padding: 20px 0;
  } */

  .cta-marquee-item {
    gap: 28px;
    padding: 0 14px;
  }

  /* .cta-marquee-item img {
    width: 22px;
    height: 22px;
  } */
}

@media (max-width: 768px) {
  /* .cta-marquee-section {
    padding: 18px 0;
  } */

  .cta-marquee-item {
    gap: 20px;
    padding: 0 10px;
  }

  .cta-marquee-item img {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  /* .cta-marquee-section {
    padding: 16px 0;
  } */

  .cta-marquee-item {
    gap: 20px;
    padding: 0 10px;
  }

  /* .cta-marquee-item img {
    width: 18px;
    height: 18px;
  } */
}

/* ========== STATS SECTION ========== */
.stats-section {
  background-color: var(--bg-secondary);
  padding: 60px 30px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: var(--max-width-desktop);
  margin: 0 auto;
}

.stat-box {
  text-align: center;
  padding: 40px 20px;
}

.stat-number {
  font-size: 3.5rem;
  font-weight: var(--font-weight-semibold);
  color: var(--accent-color);
  line-height: 1;
  display: inline;
}

.stat-suffix {
  font-size: 3.5rem;
  font-weight: var(--font-weight-semibold);
  color: var(--accent-color);
  line-height: 1;
}

.stat-label {
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  margin-top: 12px;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .stat-number,
  .stat-suffix {
    font-size: 3rem;
  }
}

@media (max-width: 600px) {
  .stats-section {
    padding: 60px 20px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .stat-box {
    padding: 30px 0px;
  }

  .stat-number,
  .stat-suffix {
    font-size: 2.25rem;
  }

}

@media (max-width: 400px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .stat-number,
  .stat-suffix {
    font-size: 2rem;
  }
}

/* ========== TOOLKIT SECTION ========== */
.toolkit-section {
  background-color: var(--bg-primary);
  padding: 60px 80px;
}

.toolkit-section .container {
  max-width: var(--max-width-desktop);
}

.toolkit-header {
  text-align: center;
  margin-bottom: 60px;
}

.toolkit-title {
  font-size: var(--alpha-heading-h1);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  line-height: 1.1;
  margin-bottom: 20px;
}

.toolkit-title span{ 
    background: linear-gradient(110deg, rgb(18, 124, 166) 0%, rgb(16, 24, 47) 100%) text;
    -webkit-text-fill-color: transparent;
}

.toolkit-description {
  font-size: var(--alpha-body-medium);
  color: var(--text-color);
  line-height: 1.4;
  max-width: 600px;
  margin: 0 auto;
}

.toolkit-item {
  display: flex;
  align-items: center;
  gap: 90px;
  margin-bottom: 100px;
}

.toolkit-item:last-child {
  margin-bottom: 0;
}

.toolkit-item-reverse {
  flex-direction: row-reverse;
}

.toolkit-image {
  flex: 1;
  min-width: 0;
}

.toolkit-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.toolkit-content {
  flex: 1;
  min-width: 0;
}

.toolkit-item-title {
  font-size: var(--alpha-heading-h3);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  line-height: 1.1;
  margin-bottom: 20px;
}

.toolkit-item-text {
  font-size: var(--alpha-body-medium);
  color: var(--text-color);
  line-height: 1.5;
}

/* Toolkit Section Responsive */
@media (min-width: 1800px) {
  .toolkit-section {
    padding: 160px 120px;
  }

  .toolkit-header {
    margin-bottom: 60px;
  }

  .toolkit-item {
    gap: 90px;
    margin-bottom: 120px;
  }
}

@media (min-width: 1400px) and (max-width: 1799px) {
  .toolkit-section {
    padding: 160px 120px;
  }

  .toolkit-header {
    margin-bottom: 60px;
  }

  .toolkit-item {
    gap: 90px;
    margin-bottom: 100px;
  }
}

@media (max-width: 1024px) {
  .toolkit-section {
    padding: 100px 48px;
  }

  .toolkit-header {
    margin-bottom: 48px;
  }

  .toolkit-item {
    gap: 60px;
    margin-bottom: 80px;
  }
}

@media (max-width: 768px) {
  .toolkit-section {
    padding: 80px 28px;
  }

  .toolkit-header {
    margin-bottom: 40px;
  }

  .toolkit-item {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 60px;
  }

  .toolkit-item-reverse {
    flex-direction: column;
  }

  .toolkit-item-title {
    margin-bottom: 16px;
  }
}

@media (max-width: 480px) {
  .toolkit-section {
    padding: 60px 20px;
  }

  .toolkit-header {
    margin-bottom: 32px;
  }

  .toolkit-item {
    gap: 24px;
    margin-bottom: 48px;
  }

  .toolkit-item-title {
    margin-bottom: 12px;
  }

  .toolkit-image img {
    border-radius: 12px;
  }
}

/* ========== CAPABILITIES SECTION ========== */
.capabilities-section {
  width: 100%;
  background-color: var(--bg-secondary);
  padding: 100px 60px;
}

.capabilities-section .container {
  max-width: var(--max-width-desktop);
  margin: 0 auto;
}

.capabilities-header {
  margin-bottom: 60px;
}

.capabilities-title {
  font-size: var(--alpha-heading-h1);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  line-height: 1.2;
  /* margin-bottom: 20px; */
  max-width: 890px;
}

.capabilities-title span {
    background: linear-gradient(110deg, rgb(18, 124, 166) 0%, rgb(16, 24, 47) 100%) text;
    -webkit-text-fill-color: transparent;
}

.capabilities-description {
  font-size: var(--alpha-body-medium);
  color: var(--text-color);
  line-height: 1.5;
  margin: 0;
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.capability-card:nth-child(1) {
  grid-column: span 3;
}

.capability-card:nth-child(2) {
  grid-column: span 2;
}

.capability-card:nth-child(3) {
  grid-column: span 2;
}

.capability-card:nth-child(4) {
  grid-column: span 3;
}

.capability-card {
  background-color: var(--bg-primary);
  border-radius: 16px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.capability-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.capability-icon svg {
  width: 100%;
  height: 100%;
}

.capability-heading {
  font-size: var(--alpha-heading-h4);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  margin: 0;
  line-height: 1.3;
}

.capability-text {
  font-size: var(--alpha-body-small);
  color: var(--text-color);
  line-height: 1.5;
  margin: 0;
}

/* Capabilities Section - Responsive */
@media (min-width: 1800px) {
  .capabilities-section {
    padding: 160px 120px;
  }
}

@media (min-width: 1400px) and (max-width: 1799px) {
  .capabilities-section {
    padding: 160px 120px;
  }
}

@media (max-width: 1024px) {
  .capabilities-section {
    padding: 100px 48px;
  }

  .capabilities-header {
    margin-bottom: 50px;
  }

  .capability-card {
    padding: 32px;
  }
}

@media (max-width: 768px) {
  .capabilities-section {
    padding: 80px 28px;
  }

  .capabilities-header {
    margin-bottom: 40px;
  }

  .capabilities-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .capability-card,
  .capability-card:nth-child(1),
  .capability-card:nth-child(2),
  .capability-card:nth-child(3),
  .capability-card:nth-child(4) {
    grid-column: span 1;
    padding: 28px;
    gap: 20px;
  }

  .capability-icon {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .capabilities-section {
    padding: 60px 20px;
  }

  .capabilities-header {
    margin-bottom: 32px;
  }

  .capability-card {
    padding: 24px;
    gap: 16px;
  }

  .capability-icon {
    width: 34px;
    height: 34px;
  }
}

/* ========== PRICING SECTION ========== */
.pricing-section {
  width: 100%;
  background-color: var(--bg-primary);
  padding: 100px 60px;
}

.pricing-section .container {
  max-width: var(--max-width-desktop);
  margin: 0 auto;
}

.pricing-header {
  text-align: center;
  margin-bottom: 50px;
}

.pricing-title {
  font-size: var(--alpha-heading-h1);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  line-height: 1.2;
  margin-bottom: 20px;
}

.pricing-title span {
      background: linear-gradient(110deg, rgb(18, 124, 166) 0%, rgb(16, 24, 47) 100%) text;
    -webkit-text-fill-color: transparent;
}

.pricing-description {
  font-size: var(--alpha-body-medium);
  color: var(--text-color);
  line-height: 1.5;
  margin: 0;
}

/* Pricing Tabs */
.pricing-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(8, 8, 10, 0.04);
  padding: 5px;
  border-radius: 50px;
  border: 1px solid var(--border-color);
  width: fit-content;
  margin: 0 auto 50px;
}

.pricing-tab {
  color: var(--title-color);
  font-family: inherit;
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-medium);
  padding: 10px 24px;
  border-radius: 50px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pricing-tab:hover {
  background: rgba(8, 8, 10, 0.06);
}

.pricing-tab.active {
  background: var(--accent-color);
  color: var(--text-white);
}

/* Pricing Content */
.pricing-content {
  position: relative;
}

.pricing-panel {
  display: none;
  opacity: 0;
}

.pricing-panel.active {
  display: block;
  opacity: 1;
}

.pricing-panel.fade-out {
  display: block;
  animation: fadeOut 0.3s ease forwards;
}

.pricing-panel.fade-in {
  display: block;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pricing Cards Grid */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.pricing-cards-center {
  justify-content: center;
}

.pricing-panel[data-panel="expand"] .pricing-cards {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  margin: 0 auto;
}

.pricing-panel[data-panel="enterprise"] .pricing-cards {
  grid-template-columns: 1fr;
  max-width: 450px;
  margin: 0 auto;
}

/* Pricing Card */
.pricing-card {
  background-color: var(--bg-secondary);
  border-radius: 20px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.pricing-card:hover {
  border-color: var(--border-color);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.pricing-card.popular {
  border: 2px solid var(--accent-color);
  background: linear-gradient(180deg, rgba(18, 124, 166, 0.03) 0%, var(--bg-secondary) 100%);
}

.pricing-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #0d5e85;
  background: rgba(18, 124, 166, 0.1);
  padding: 6px 12px;
  border-radius: 50px;
  margin-bottom: 20px;
  width: fit-content;
}

.pricing-plan-name {
  font-size: var(--alpha-heading-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--title-color);
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 12px;
}

.price-amount {
  font-size: var(--alpha-heading-h2);
  font-weight: var(--font-weight-bold);
  color: var(--title-color);
  line-height: 1;
}

.price-period {
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  font-weight: var(--font-weight-regular);
}

.pricing-billing-note {
  font-size: 13px;
  color: var(--accent-color);
  margin: 0 0 12px 0;
  font-weight: var(--font-weight-medium);
}

.pricing-plan-description {
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  line-height: 1.5;
  margin: 0 0 24px 0;
}

.btn-pricing {
  width: 100%;
  padding: 14px 24px;
  font-size: var(--alpha-body-xs);
  margin-bottom: 28px;
}

.pricing-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  line-height: 1.4;
}

.pricing-features li svg {
  flex-shrink: 0;
  color: var(--accent-color);
  margin-top: 2px;
}

/* Enterprise card specific */
.enterprise-card {
  text-align: center;
}

.enterprise-card .pricing-badge {
  margin-left: auto;
  margin-right: auto;
}

.enterprise-card .pricing-price {
  justify-content: center;
}

.enterprise-card .pricing-features {
  align-items: flex-start;
  text-align: left;
}


/* Pricing Section - Responsive */
@media (min-width: 1800px) {
  .pricing-section {
    padding: 160px 120px;
  }

  .pricing-header {
    margin-bottom: 60px;
  }

  .pricing-tabs {
    margin-bottom: 60px;
  }

  .pricing-card {
    padding: 44px 40px;
  }
}

@media (min-width: 1400px) and (max-width: 1799px) {
  .pricing-section {
    padding: 160px 120px;
  }
}

@media (max-width: 1024px) {
  .pricing-section {
    padding: 100px 48px;
  }

  .pricing-header {
    margin-bottom: 40px;
  }

  .pricing-tabs {
    margin-bottom: 40px;
  }

  .pricing-card {
    padding: 32px 28px;
  }

  .pricing-cards {
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .pricing-cards {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 30px;
    margin: 0;
  }

  .pricing-cards::-webkit-scrollbar {
    height: 6px;
  }

  .pricing-cards::-webkit-scrollbar-track {
    background: var(--border-color);
    border-radius: 10px;
  }

  .pricing-cards::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 10px;
  }

  .pricing-card {
    flex: 0 0 320px;
    min-width: 320px;
    scroll-snap-align: start;
    height: auto;
    align-self: stretch;
  }

  .pricing-panel[data-panel="expand"] .pricing-cards {
    display: flex;
    max-width: none;
    /* margin: 0 -28px;
    padding-left: 28px;
    padding-right: 28px; */
  }

  /* .pricing-panel[data-panel="expand"] .pricing-card {
    flex: 0 0 300px;
    min-width: 300px;
  } */

  /* .pricing-panel[data-panel="enterprise"] .pricing-cards {
    display: flex;
    justify-content: center;
    overflow-x: visible;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  } */

  .pricing-panel[data-panel="enterprise"] .pricing-card {
    flex: 0 0 100%;
    min-width: auto;
    max-width: 320px;
  }
}

@media (max-width: 768px) {
  .pricing-section {
    padding: 80px 28px;
  }

  .pricing-header {
    margin-bottom: 36px;
  }

  .pricing-tabs {
    /* flex-wrap: wrap; */
    width: 100%;
    margin-bottom: 36px;
    padding: 6px;
    gap: 4px;
  }

  .pricing-tab {
    flex: 1 1 calc(50% - 4px);
    padding: 10px 16px;
    text-align: center;
  }

  .pricing-card {
    padding: 28px 24px;
    flex: 0 0 300px;
    min-width: 300px;
  }

    .pricing-panel[data-panel="enterprise"] .pricing-card {
    flex: 0 0 100%;
    min-width: auto;
    max-width: 300px;
  }

  /* .pricing-panel[data-panel="expand"] .pricing-card {
    flex: 0 0 280px;
    min-width: 280px;
  } */
}

@media (max-width: 670px) {
  .pricing-panel[data-panel="expand"] .pricing-cards {
    justify-content: flex-start;
  }
}


@media (max-width: 480px) {
  .pricing-section {
    padding: 60px 20px;
  }

  .pricing-header {
    margin-bottom: 30px;
  }

  .pricing-tabs {
    margin-bottom: 30px;
    gap: 4px;
    padding: 5px;
  }

  .pricing-tab {
    padding: 8px 12px;
    font-size: 14px;
  }

  .pricing-cards {
    /* margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px; */
    gap: 12px;
  }

  .pricing-card {
    padding: 28px 24px;
    border-radius: 16px;
    flex: 0 0 280px;
    min-width: 280px;
  }

    .pricing-panel[data-panel="enterprise"] .pricing-card {
    flex: 0 0 100%;
    min-width: auto;
    max-width: 280px;
  }

  .pricing-plan-name {
    margin-bottom: 12px;
  }

  .pricing-price {
    margin-bottom: 10px;
  }

  .btn-pricing {
    padding: 12px 20px;
    margin-bottom: 24px;
  }

  .pricing-features {
    gap: 12px;
  }

  /* .pricing-panel[data-panel="expand"] .pricing-cards {
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .pricing-panel[data-panel="expand"] .pricing-card {
    flex: 0 0 260px;
    min-width: 260px;
  } */
}

/* ========== TOOLS SLIDER SECTION ========== */
.tools-slider-section {
  padding: 0px 60px 100px 60px;
}

.tools-slider-section .container {
  max-width: var(--max-width-desktop);
  margin: 0 auto;
}

.tools-slider-title {
  text-align: center;
  margin-bottom: 60px;
  width: 100%;
}

.tools-slider-title span {
    background: linear-gradient(110deg, rgb(18, 124, 166) 0%, rgb(16, 24, 47) 100%) text;
    -webkit-text-fill-color: transparent;
}

.tools-slider-title p {
  font-size: var(--alpha-heading-h1);
  color: var(--title-color);
  font-weight: var(--font-weight-medium);
  margin: 0 auto;
}

.tools-slider-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.tools-slider-wrapper::before,
.tools-slider-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

.tools-slider-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-primary), transparent);
}

.tools-slider-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-primary), transparent);
}

.tools-slider-track {
  display: flex;
  align-items: center;
}

.tools-slider-track .slick-slide {
  padding: 0 80px;
}

.tools-slider-track .slick-track {
  display: flex;
  align-items: center;
}

/* Tools Slider Responsive */
@media (min-width: 1800px) {
  .tools-slider-section {
    padding: 0px 120px 160px 120px;
  }
}

@media (min-width: 1400px) and (max-width: 1799px) {
  .tools-slider-section {
    padding: 0px 120px 160px 120px;
  }
}

@media (max-width: 1024px) {
  .tools-slider-section {
    padding: 0px 40px 100px 48px;
  }

  .tools-slider-track .slick-slide {
    padding: 0 30px;
  }
}

@media (max-width: 768px) {
  .tools-slider-section {
    padding: 0px 28px 80px 28px;
  }

  .tools-slider-title {
    margin-bottom: 40px;
  }

  .tools-slider-track .slick-slide {
    padding: 0 25px;
  }

  .tools-slider-wrapper::before,
  .tools-slider-wrapper::after {
    width: 60px;
  }
}

@media (max-width: 480px) {
  .tools-slider-section {
    padding: 0px 20px 60px 20px;
  }

  .tools-slider-title {
    margin-bottom: 30px;
  }

  .tools-slider-track .slick-slide {
    padding: 0 20px;
  }

  .tools-slider-wrapper::before,
  .tools-slider-wrapper::after {
    width: 40px;
  }
}

/* ========== FAQ SECTION ========== */
.faq-section {
  width: 100%;
  background-color: var(--bg-primary);
  padding: 0px 60px 100px 60px;
}

.faq-section .container {
  max-width: var(--max-width-desktop);
  margin: 0 auto;
}

.faq-header {
  text-align: center;
  margin-bottom: 60px;
}

.faq-title {
  font-size: var(--alpha-heading-h1);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  line-height: 1.3;
  margin: 0;
}

.faq-title span {
  background: linear-gradient(110deg, #127CA6 0%, #10182F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.faq-column {
  display: flex;
  flex-direction: column;
}

.faq-item-wrapper {
  border-bottom: 1px solid var(--border-color);
}

.faq-item-wrapper:last-child {
  border-bottom: none;
}

.faq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Reset for .faq-item rendered as <button> */
button.faq-item {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
}

.faq-question {
  font-size: var(--body-small);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  line-height: 1.4;
  flex: 1;
  padding-right: 16px;
}

.faq-icon {
  color: var(--text-color);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0;
}

.faq-item-wrapper.active .faq-answer {
  max-height: 300px;
  padding-bottom: 24px;
}

.faq-answer p {
  font-size: var(--body-small);
  font-weight: var(--font-weight-regular);
  color: var(--text-color);
  line-height: 1.6;
  margin: 0;
}

/* FAQ Section - Mobile Responsive */
@media (min-width: 1921px) {
  .faq-section {
    padding: 0px 80px 120px 80px;
  }
}

@media (max-width: 1024px) {
  .faq-section {
    padding: 0px 40px 100px 40px;
  }

  .faq-header {
    margin-bottom: 50px;
  }

  .faq-item {
    padding: 20px 0;
  }
}

@media (max-width: 768px) {
  .faq-section {
    padding: 0px 20px 80px 20px;
  }

  .faq-header {
    margin-bottom: 40px;
  }

  .faq-content {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .faq-item {
    padding: 20px 0;
  }

  .faq-item-wrapper.active .faq-answer {
    padding-bottom: 20px;
  }

  .faq-column-left .faq-item-wrapper:last-child {
    border-bottom: 1px solid var(--border-color);
  }

  .faq-column-right .faq-item-wrapper:last-child {
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .faq-section {
    padding: 0px 20px 60px 20px;
  }

  .faq-header {
    margin-bottom: 32px;
  }

  .faq-item {
    padding: 16px 0;
  }

  .faq-item-wrapper.active .faq-answer {
    padding-bottom: 16px;
  }
}

/* ========== CTA SECTION ========== */
.cta-wrapper {
  padding: 0px 30px;
  background-color: var(--bg-primary);
}

.cta-section {
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(110deg, #127CA6 0%, #10182F 100%);
  border-radius: 40px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

.cta-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 60px 30px 30px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.cta-title {
  font-size: var(--alpha-heading-h1);
  font-weight: var(--font-weight-medium);
  color: white;
  line-height: 1.15;
  margin-bottom: 20px;
}

.cta-description {
  font-size: var(--alpha-body-medium);
  font-weight: var(--font-weight-regular);
  color: #fff;
  line-height: 1.6;
  margin: 0 auto 20px;
}

.cta-calendly-embed {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
}

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.cta-actions .btn {
  height: auto;
}

.cta-actions .btn-primary {
  background: #ffffff;
  color: #000000;
  border: 2px solid #ffffff;
}

.cta-actions .btn-primary .btn-text {
  color: #000000;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

.cta-actions .btn-primary .btn-icon svg {
  stroke: #000000;
}

.cta-actions .btn-primary:hover {
  background: transparent;
  border-color: #ffffff;
}

.cta-actions .btn-primary:hover .btn-text {
  color: #ffffff;
  background: none;
}

.cta-actions .btn-primary:hover .btn-icon svg {
  stroke: #ffffff;
}

.cta-actions .btn-cta-outline {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.cta-actions .btn-cta-outline:hover {
  background-color: #ffffff;
  color: #000000;
}

/* CTA Section - Mobile Responsive */
@media (max-width: 1024px) {
  .cta-wrapper {
    padding: 0 20px;
  }

  .cta-section {
    height: 90vh;
  }

  .cta-title {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .cta-wrapper {
    padding: 0 20px;
  }

  .cta-section {
    height: 85vh;
    border-radius: 24px;
  }

  .cta-content {
    padding: 40px 20px 20px;
  }

  .cta-title {
    margin-bottom: 16px;
  }
}

@media (max-width: 480px) {
  .cta-section {
    height: 80vh;
  }

  .cta-content {
    padding: 30px 16px 16px;
  }

  .cta-title {
    margin-bottom: 12px;
  }

  .cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .cta-actions .btn {
    padding: 0.75rem 1rem !important;
    width: 100%;
  }
}

/* ========== FOOTER SECTION ========== */
.footer {
  position: relative;
  width: 100%;
  background-color: var(--bg-primary);
  padding: 100px 30px 40px;
  overflow: hidden;
}

.footer-container {
  position: relative;
  z-index: 10;
  max-width: var(--max-width-desktop);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.footer-logo img {
  height: 40px;
  width: auto;
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-link {
  font-size: var(--alpha-body-small);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--accent-color);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer-contact-label {
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.footer-contact-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-email {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--alpha-body-small);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-email svg {
  stroke: var(--accent-color);
  flex-shrink: 0;
}

.footer-email:hover {
  color: var(--accent-color);
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--bg-secondary);
  border-radius: 50%;
  color: var(--title-color);
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.social-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(110deg, #127CA6 0%, #10182F 100%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.social-box:hover {
  color: #ffffff;
}

.social-box:hover::before {
  opacity: 1;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--body-xs);
  color: var(--text-color);
}

.footer-bottom a {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-bottom a:hover {
  color: var(--accent-color);
}

.footer-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: linear-gradient(110deg, #127CA6 0%, #10182F 100%);
}

/* Footer - Tablet Responsive */
@media (max-width: 1024px) {
  .footer {
    padding: 80px 48px 40px;
  }

  .footer-nav {
    gap: 32px;
  }
}

/* Footer - Mobile Responsive */
@media (max-width: 768px) {
  .footer {
    padding: 80px 20px 32px;
  }

  .footer-container {
    gap: 32px;
  }

  .footer-nav {
    gap: 24px;
  }

  .footer-socials {
    gap: 10px;
  }

  .social-box {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 600px) {
  .footer-nav {
    flex-direction: column;
    gap: 20px;
  }

  .footer-contact-links {
    flex-direction: column;
    gap: 12px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .footer-dot {
    display: none;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 60px 20px 24px;
  }

  .footer-logo img {
    height: 32px;
  }

  .social-box {
    width: 36px;
    height: 36px;
  }

  .social-box svg {
    width: 16px;
    height: 16px;
  }
}

/* ========== CONTACT MODAL ========== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 20px;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  background: #ffffff;
  border-radius: 24px;
  width: 100%;
  max-width: 800px;
  max-height: calc(100vh - 40px);
  height: auto;
  overflow-y: auto;
  position: relative;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s ease;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-container::-webkit-scrollbar {
  width: 12px;
}

.modal-container::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 9999px;
  border: 3px solid transparent;
  background-color: rgba(18, 124, 166, 0.2);
  background-clip: padding-box;
}

.modal-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-color);
}

.modal-container::-webkit-scrollbar-track {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
  cursor: pointer;
  background-color: transparent;
}

.modal-overlay.active .modal-container {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  background: #f5f5f5;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.modal-close:hover {
  background: #e5e5e5;
  transform: rotate(90deg);
}

.modal-close svg {
  stroke: var(--title-color);
}

.modal-content {
  padding: 48px 40px;
  transition: opacity 0.3s ease;
}

.modal-content.fade-out {
  opacity: 0;
}

.modal-header {
  text-align: center;
  margin-bottom: 32px;
}

.modal-title {
  font-size: var(--h4-size);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  margin-bottom: 8px;
}

.modal-description {
  font-size: var(--body-small);
  color: var(--text-color);
  line-height: 1.5;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: var(--body-xs);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  font-family: 'Satoshi', sans-serif;
  font-size: var(--body-small);
  color: var(--title-color);
  background: #f9fafb;
  border: 2px solid transparent;
  border-radius: 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.form-input::placeholder {
  color: #757575;
}

.form-input:focus {
  background: #ffffff;
  border-color: var(--accent-color);
}

.form-input.error {
  border-color: #ef4444;
  background: #fef2f2;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-textarea::-webkit-scrollbar {
  width: 10px;
}

.form-textarea::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 9999px;
  border: 2px solid transparent;
  background-color: rgba(18, 124, 166, 0.2);
  background-clip: padding-box;
}

.form-textarea::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-color);
}

.form-textarea::-webkit-scrollbar-track {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
  cursor: pointer;
  background-color: transparent;
}

.form-error {
  font-size: 0.8125rem;
  color: #ef4444;
  min-height: 18px;
  display: block;
}

.btn-submit {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  position: relative;
}

.btn-submit:disabled {
  pointer-events: none;
  opacity: 0.8;
  background: linear-gradient(110deg, #127CA6 0%, #10182F 100%);
  cursor: not-allowed;
}

.btn-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.btn-submit.loading .btn-text {
  opacity: 0;
}

.btn-submit.loading .btn-spinner {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Success State */
.modal-success {
  display: none;
  padding: 60px 40px;
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.modal-success.active {
  display: flex;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.success-icon {
  width: 80px;
  height: 80px;
  background: rgba(18, 124, 166, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-icon svg {
  color: var(--accent-color);
}

.success-title {
  font-size: var(--h4-size);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
}

.success-description {
  font-size: var(--body-small);
  color: var(--text-color);
  line-height: 1.6;
  max-width: 360px;
}

/* Modal Responsive */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 16px;
  }

  .modal-container {
    max-width: 100%;
    border-radius: 24px;
  }

  .modal-content {
    padding: 60px 24px;
  }

  .modal-success {
    padding: 48px 24px;
  }

  .modal-close {
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
  }

  .modal-close svg {
    width: 20px;
    height: 20px;
  }

  .modal-header {
    margin-bottom: 35px;
  }

  .form-input {
    padding: 12px 14px;
  }
}

@media (max-width: 480px) {
  .modal-content {
    padding: 42px 20px;
    max-height: 90vh;
  }

  .modal-success {
    padding: 40px 20px;
  }

  .modal-header {
    margin-bottom: 20px;
  }

  .modal-form {
    gap: 16px;
  }

  .success-icon {
    width: 64px;
    height: 64px;
  }

  .success-icon svg {
    width: 48px;
    height: 48px;
  }
}

/* Body scroll lock when modal is open */
body.modal-open {
  overflow: hidden;
}

/* ========== LEGAL PAGES (Privacy Policy & Terms) ========== */
.legal-page {
  padding: 240px 60px 100px;
  min-height: 100vh;
  background-color: var(--bg-primary);
}

.legal-container {
  max-width: var(--max-width-laptop);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.legal-title {
  font-size: var(--alpha-heading-h1);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  line-height: 1.3;
  margin-bottom: -32px;
}

.legal-updated {
  font-size: var(--alpha-body-small);
  color: var(--text-color);
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border-color);
}

.legal-section h2 {
  font-size: var(--alpha-heading-h4);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  line-height: 1.4;
  margin-bottom: 16px;
}

.legal-section p {
  font-size: var(--alpha-body-small);
  font-weight: var(--font-weight-regular);
  color: var(--text-color);
  line-height: 1.7;
  margin-bottom: 16px;
}

.legal-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.legal-section ul li {
  font-size: var(--alpha-body-small);
  font-weight: var(--font-weight-regular);
  color: var(--text-color);
  line-height: 1.7;
  padding-left: 24px;
  margin-bottom: 12px;
  position: relative;
}

.legal-section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: linear-gradient(110deg, #127CA6 0%, #10182F 100%);
  border-radius: 50%;
}

.legal-section ul li strong {
  color: var(--title-color);
  font-weight: var(--font-weight-medium);
}

.legal-section p a {
  text-decoration: none;
  color: var(--accent-color);
  font-weight: var(--font-weight-medium);
}

.legal-section p a:hover {
  text-decoration: underline;
}

/* Legal Pages Responsive */
@media (max-width: 1024px) {
  .legal-page {
    padding: 200px 40px 80px;
  }
}

@media (max-width: 768px) {
  .legal-page {
    padding: 160px 20px 60px;
  }

  .legal-container {
    gap: 36px;
  }

  .legal-updated {
    padding-bottom: 30px;
  }
}

@media (max-width: 480px) {
  .legal-page {
    padding: 140px 20px 50px;
  }

  .legal-container {
    gap: 32px;
  }

  .legal-updated {
    padding-bottom: 24px;
  }

  .legal-section ul li {
    padding-left: 20px;
  }
}

/* ============================================================
   GET STARTED WIZARD
   Used by get-started.html. 4-step subscription signup.
   Reuses index header (.announcement-bar, header, .mobile-nav)
   and onboarding-style form fields (.field-group, .field-label,
   .field-input). All sizes use typography vars from :root.
   ============================================================ */

.get-started-body {
  font-family: 'Satoshi', sans-serif;
  background: var(--bg-secondary);
  color: var(--title-color);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Top clearance for fixed announcement bar + header is folded into
     .gs-main padding-top below (mirrors the index hero pattern). */
}

/* Onboarding-style field error text */
.field-error {
  display: block;
  min-height: 0;
  font-size: var(--alpha-body-xs);
  color: #DC2626;
  font-weight: var(--font-weight-medium);
}

.field-error:empty {
  display: none;
}

/* ========== MAIN CONTAINER ========== */
/* Match index hero/pricing-section padding pattern across breakpoints.
   Top padding matches index .hero-section so content clears the fixed
   announcement bar + header. Horizontal/bottom padding follow the same
   step-down used by index sections. */
.gs-main {
  padding: 200px 60px 100px;
  width: 100%;
}

.gs-container {
  max-width: var(--max-width-laptop);
  margin: 0 auto;
}

/* ========== PROGRESS TIMELINE ==========
   Capped narrower than the page container so the connector lines don't
   stretch into thin rails on wide screens. */
.gs-progress {
  max-width: var(--max-width-tablet);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: clamp(32px, 5vw, 56px);
  gap: 8px;
  padding: 0 8px;
}

.gs-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
}

.gs-progress-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-semibold);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.gs-progress-num {
  display: inline-block;
  line-height: 1;
}

.gs-progress-step.active .gs-progress-circle {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--text-white);
  box-shadow: 0 0 0 4px rgba(18, 124, 166, 0.15);
}

.gs-progress-step.completed .gs-progress-circle {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--text-white);
}

/* Replace number with checkmark on completed steps */
.gs-progress-step.completed .gs-progress-num {
  display: none;
}

.gs-progress-step.completed .gs-progress-circle::before {
  content: "";
  width: 14px;
  height: 8px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg) translateY(-2px);
}

.gs-progress-label {
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-color);
  white-space: nowrap;
  text-align: center;
}

.gs-progress-step.active .gs-progress-label {
  color: var(--title-color);
  font-weight: var(--font-weight-semibold);
}

/* The connecting line sits at the same vertical level as the circles (20px = half of 40px) */
.gs-progress-line {
  flex: 1 1 auto;
  height: 2px;
  background: var(--border-color);
  align-self: flex-start;
  margin-top: 19px;
  min-width: 16px;
}

/* Filled connector behind completed steps */
.gs-progress-step.completed + .gs-progress-line,
.gs-progress-step.active ~ .gs-progress-line:first-of-type {
  background: var(--accent-color);
}

/* ========== STEP CONTAINER ========== */
.gs-step {
  display: none;
  animation: gsFadeIn 0.35s ease;
}

.gs-step.active {
  display: block;
}

@keyframes gsFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


.gs-step-header {
  text-align: center;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.gs-step-title {
  font-size: var(--alpha-heading-h2);
  font-weight: var(--font-weight-bold);
  color: var(--title-color);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.gs-step-description {
  font-size: var(--body);
  color: var(--text-color);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ========== FORMS (onboarding-style fields) ========== */
.gs-form {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: clamp(20px, 4vw, 40px);
  box-shadow: 0 1px 3px rgba(8, 8, 10, 0.04);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Onboarding-pattern field group */
.get-started-body .field-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.get-started-body .field-label {
  font-size: var(--alpha-body-small);
  font-weight: var(--font-weight-medium);
  color: var(--title-secondary);
}

.get-started-body .required-mark {
  color: #DC2626;
  margin-left: 2px;
}

.get-started-body .field-hint {
  font-size: var(--alpha-body-xs);
  color: #aaa;
  font-weight: var(--font-weight-regular);
  margin-top: -0.2rem;
}

.get-started-body .field-input,
.get-started-body .field-textarea,
.get-started-body .field-select {
  width: 100%;
  background: transparent;
  color: var(--title-secondary);
  font-family: 'Satoshi', sans-serif;
  font-size: var(--alpha-body-small);
  font-weight: var(--font-weight-regular);
  transition: border-color 0.2s, background 0.2s;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 0.85rem 1.05rem;
}

.get-started-body .field-input::placeholder,
.get-started-body .field-textarea::placeholder { color: #757575; }

.get-started-body .field-input:focus,
.get-started-body .field-textarea:focus,
.get-started-body .field-select:focus {
  border-color: var(--accent-color);
  background: var(--bg-primary);
}

.get-started-body .field-input.has-error,
.get-started-body .field-textarea.has-error,
.get-started-body .field-select.has-error,
.get-started-body .field-input.error {
  border-color: #DC2626;
}

/* ========== ACTIONS ========== */
.gs-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: clamp(20px, 3vw, 32px);
  flex-wrap: wrap;
}

.gs-actions .btn {
  min-width: 140px;
}

.gs-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--text-white);
  border-radius: 50%;
  animation: gsSpin 0.8s linear infinite;
  margin-left: 8px;
}

.btn.loading .gs-spinner { display: inline-block; }
.btn.loading .btn-text { opacity: 0.85; }

@keyframes gsSpin { to { transform: rotate(360deg); } }

/* ========== STEP 1: TWO-COLUMN LAYOUT ==========
   LEFT  = form card (eyebrow + heading + lead + 3 fields + Continue)
   RIGHT = unified aside card (selected-plan pill + add-ons section)
   Both columns are independent cards (white bg, border, shadow) at desktop.
   Stacks vertically on mobile with a specific reorder. */
.gs-step1-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}

/* Right column - now a unified card containing plan summary + add-ons */
.gs-step1-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 28px);
  box-shadow: 0 1px 3px rgba(8, 8, 10, 0.04);
}

.gs-step1-eyebrow {
  display: inline-block;
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0d5e85;
  background: rgba(18, 124, 166, 0.08);
  padding: 6px 12px;
  border-radius: 999px;
  width: fit-content;
}

.gs-step1-title {
  font-size: var(--alpha-heading-h2);
  font-weight: var(--font-weight-bold);
  color: var(--title-color);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
}

.gs-step1-lead {
  font-size: var(--body);
  color: var(--text-color);
  line-height: 1.6;
  max-width: 460px;
  margin: 0;
}

/* Selected-plan pill — compact, accent-tinted. Inside the right-column
   aside card so we drop the standalone margin and let the aside gap do
   the spacing. */
.gs-plan-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(18, 124, 166, 0.06) 0%, rgba(18, 124, 166, 0.02) 100%);
  border: 1.5px solid rgba(18, 124, 166, 0.2);
  border-radius: 14px;
  flex-wrap: wrap;
}

/* Divider + section headings inside the aside card */
.gs-addons-group {
  border-top: 1px solid var(--border-color);
  padding-top: 20px;
}

.gs-addons-heading {
  font-size: var(--alpha-heading-h5);
  font-weight: var(--font-weight-bold);
  color: var(--title-color);
  margin: 0 0 4px;
  line-height: 1.2;
}

.gs-addons-sub {
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  margin: 0 0 16px;
}

.gs-plan-preview-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.gs-plan-preview-change {
  flex-shrink: 0;
  background: transparent;
  border: 1.5px solid rgba(18, 124, 166, 0.4);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--accent-color);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.gs-plan-preview-change:hover {
  background: var(--accent-color);
  color: var(--text-white);
  border-color: var(--accent-color);
}

@media (max-width: 480px) {
  .gs-plan-preview-change {
    width: 100%;
    text-align: center;
  }
}

.gs-plan-preview-label {
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gs-plan-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gs-plan-preview-row strong {
  font-size: var(--body-large);
  font-weight: var(--font-weight-bold);
  color: var(--title-color);
  letter-spacing: -0.01em;
}

.gs-plan-preview-billing {
  font-size: var(--alpha-body-xs);
  color: var(--accent-color);
  background: rgba(18, 124, 166, 0.12);
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: var(--font-weight-semibold);
}

.gs-plan-preview-price {
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  font-weight: var(--font-weight-medium);
}

/* Left column - the form card. Holds the eyebrow + headline + lead + form. */
.gs-step1-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 1px 3px rgba(8, 8, 10, 0.04);
}

/* The form inside no longer needs its own card chrome - the wrapper has it. */
.gs-step1-form-wrap .gs-form {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin-top: 4px;
}

/* Full-width Continue button on step 1 - it's the primary action and the
   form card is wide, so a stretched button reads as deliberate and final. */
.gs-step1-form-wrap .gs-actions {
  justify-content: stretch;
}

.gs-step1-form-wrap .gs-actions .btn {
  width: 100%;
  min-width: 0;
}

/* Step 1 hides the generic .gs-step-header - we use the custom layout above */
.gs-step[data-step="1"] .gs-step-header {
  display: none;
}

/* Default: hide the mobile-only bottom-sheet UI on desktop */
.gs-sheet-grabber,
.gs-sheet-close,
.gs-sheet-handle,
.gs-sheet-backdrop {
  display: none;
}

/* The accordion trigger only exists on mobile - hidden on desktop. The
   matching mobile @media block below flips this back to flex. */
.gs-plan-accordion {
  display: none;
}

/* ===== MOBILE PLAN ACCORDION =====
   At ≤900px the right-column aside is hidden by default. Tapping the
   accordion trigger at the top of the form expands the aside inline
   above the form fields. JS handles moving the aside element into the
   form-wrap on mobile and back to the grid on desktop. */
@media (max-width: 900px) {
  .gs-step1-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .gs-step1-title {
    font-size: var(--alpha-heading-h3);
  }

  /* Hide the desktop aside container on mobile - we move the plan + add-ons
     INSIDE the form-wrap (above the eyebrow) and reveal them via the
     accordion trigger above. */
  /* Drawer is always rendered (not display:none) so it can animate. We
     control visibility purely through max-height + opacity transitions. */
  .gs-step1-aside {
    display: flex;
    flex-direction: column;
    margin: 0 0 16px;
    padding: 0 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    gap: 16px;
    /* Closed state */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: 0.5s;
  }

  .gs-step1-aside.is-open {
    /* max-height is set inline by JS to scrollHeight + buffer */
    opacity: 1;
    padding: 16px;
    margin: 0 0 16px;
  }

  /* Position the open aside between the accordion trigger and the eyebrow.
     Order: trigger (1) -> aside-when-open (2) -> eyebrow (3) -> rest. */
  .gs-step1-form-wrap { display: flex; flex-direction: column; }
  .gs-plan-accordion       { order: 1; }
  .gs-step1-eyebrow        { order: 3; margin-top: 4px; }
  .gs-step1-title          { order: 4; }
  .gs-step1-lead           { order: 5; }
  .gs-step1-form-wrap form { order: 6; }

  /* The aside lives in a different element on desktop - reroute it into
     the form-wrap on mobile via JS class flip + flex order. */
  .gs-step1-form-wrap .gs-step1-aside { order: 2; }

  /* Inline-accordion variant of the plan-preview pill - no inner styling
     conflict; just a clean white card on top of the sheet's gray bg. */
  .gs-step1-aside .gs-plan-preview {
    background: var(--bg-primary);
    margin: 0;
  }

  /* Tighter spacing for addons heading inside the inline aside */
  .gs-step1-aside .gs-addons-group { padding-top: 16px; }
  .gs-step1-aside .gs-addons-sub   { margin-bottom: 12px; }

  /* Hide the leftover bottom-sheet chrome (we don't use it on mobile now) */
  .gs-sheet-grabber,
  .gs-sheet-close,
  .gs-sheet-handle,
  .gs-sheet-backdrop {
    display: none !important;
  }

  /* ===== Accordion trigger - the new mobile entry point =====
     Sits outside the white form card. Uses an accent-tinted gradient and
     a leading checkmark icon to feel like a confirmed selection rather
     than a passive header. */
  .gs-plan-accordion {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0 0 20px;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--accent-color) 0%, #0e6a91 100%);
    color: var(--text-white);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .gs-plan-accordion:hover {
    transform: translateY(-1px);
  }

  .gs-plan-accordion[aria-expanded="true"] {
    border-radius: 14px 14px 0 0;
    margin-bottom: 0;
  }

  /* Leading icon tile (white circle with check) */
  .gs-plan-accordion-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
  }

  .gs-plan-accordion-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    z-index: 1;
  }

  .gs-plan-accordion-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .gs-plan-accordion-row strong {
    font-size: var(--alpha-body-xs);
    font-weight: var(--font-weight-bold);
    color: var(--text-white);
    letter-spacing: -0.01em;
  }

  .gs-plan-accordion-billing {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.22);
    color: var(--text-white);
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--font-weight-semibold);
  }

  .gs-plan-accordion-meta {
    font-size: var(--alpha-body-xs);
    color: rgba(255, 255, 255, 0.85);
  }

  .gs-plan-accordion-chevron {
    color: var(--text-white);
    flex-shrink: 0;
    display: flex;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
    z-index: 1;
  }

  .gs-plan-accordion[aria-expanded="true"] .gs-plan-accordion-chevron {
    transform: rotate(180deg);
  }

  /* When the accordion is open, the inline aside attaches seamlessly below */
  .gs-step1-aside.is-open {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
    box-shadow: 0 6px 18px rgba(18, 124, 166, 0.12);
  }
}

@media (max-width: 480px) {
  .gs-step1-grid {
    gap: 16px;
  }
}

/* ========== STEP 2: SELECTED PLAN SUMMARY ========== */
.gs-selected-plan {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  transition: border-color 0.2s, background 0.2s;
}

.gs-selected-plan:hover {
  border-color: rgba(18, 124, 166, 0.3);
}

.gs-selected-plan-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.gs-selected-plan-description {
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  line-height: 1.55;
  margin-top: 6px;
  max-width: 540px;
}

.gs-selected-plan-badge {
  flex-shrink: 0;
  display: inline-block;
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--accent-color);
  background: rgba(18, 124, 166, 0.08);
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Right-side stack: badge on top, Change-plan link below */
.gs-selected-plan-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.gs-change-plan-btn {
  background: transparent;
  border: 1.5px solid var(--border-color);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--accent-color);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.gs-change-plan-btn:hover {
  border-color: var(--accent-color);
  background: rgba(18, 124, 166, 0.05);
}

.gs-change-plan-btn[aria-expanded="true"] {
  background: var(--accent-color);
  color: var(--text-white);
  border-color: var(--accent-color);
}

/* Collapsible plan picker - reuses .pricing-card / .pricing-features from the
   marketing site. We just style the container + selected-state highlight. */
/* ========== CHANGE-PLAN MODAL ========== */
.gs-plan-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: gsFadeIn 0.25s ease;
}

.gs-plan-modal[hidden] {
  display: none;
}

.gs-plan-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.gs-plan-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 1400px;
  max-height: 90vh;
  background: var(--bg-primary);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(8, 8, 10, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: gsModalIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes gsModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.gs-plan-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 1;
}

.gs-plan-modal-close:hover {
  background: var(--title-color);
  color: var(--text-white);
  border-color: var(--title-color);
}

.gs-plan-modal-header {
  padding: 32px 32px 0;
  text-align: center;
}

.gs-plan-modal-title {
  font-size: var(--alpha-heading-h3);
  font-weight: var(--font-weight-bold);
  color: var(--title-color);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}

.gs-plan-modal-subtitle {
  font-size: var(--body);
  color: var(--text-color);
  margin-bottom: 24px;
}

.gs-plan-billing-tabs {
  margin: 0 auto 8px;
}

.gs-plan-modal-body {
  padding: 24px 32px 32px;
  overflow-y: auto;
  /* Hide scrollbar but keep scroll behaviour */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE 10+ */
}

.gs-plan-modal-body::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari/Edge */
}

/* Contract modal: narrower than the plan modal (1200px max), with a
   prominent visible scrollbar so the user knows there's more to read. */
.gs-contract-modal .gs-plan-modal-dialog {
  max-width: 1200px;
}

.gs-contract-modal .gs-plan-modal-body {
  /* Slight inner padding-right so the scrollbar sits comfortably away from
     the content edge instead of hugging the modal corner. */
  padding-right: 12px;
  scrollbar-width: auto;                          /* Firefox: full-width */
  scrollbar-color: var(--accent-color) #e2e8f0;
  -ms-overflow-style: auto;
}

.gs-contract-modal .gs-plan-modal-body::-webkit-scrollbar {
  display: block;
  width: 14px;
}

.gs-contract-modal .gs-plan-modal-body::-webkit-scrollbar-track {
  background: #e2e8f0;
  border-radius: 999px;
  margin: 12px 4px;
}

.gs-contract-modal .gs-plan-modal-body::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 999px;
  /* Inner border creates the inset/padding look so the thumb feels solid
     but doesn't visually merge with the track. */
  border: 3px solid #e2e8f0;
  background-clip: padding-box;
}

.gs-contract-modal .gs-plan-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--button-hover);
  background-clip: padding-box;
}

/* Body wrapper for the contract body + custom scroll indicator. The track
   is a sibling element overlaid on the right edge of the body. */
.gs-contract-body-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.gs-contract-body-wrap .gs-plan-modal-body {
  flex: 1 1 auto;
}

/* Custom scroll indicator - desktop has the native ::-webkit-scrollbar so
   we hide this. Mobile reveals it (always visible, won't fade on scroll). */
.gs-contract-scroll-track {
  display: none;
}

@media (max-width: 768px) {
  .gs-contract-modal .gs-plan-modal-body {
    /* Hide the native scrollbar entirely on mobile - the indicator below
       takes its place. We keep the modal body scrollable; the JS reads
       scrollTop and positions the thumb. */
    padding-right: 18px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .gs-contract-modal .gs-plan-modal-body::-webkit-scrollbar {
    display: none;
  }

  .gs-contract-scroll-track {
    display: block;
    position: absolute;
    top: 12px;
    bottom: 12px;
    right: 6px;
    width: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    pointer-events: none;
    z-index: 2;
  }

  .gs-contract-scroll-thumb {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--accent-color);
    border-radius: 999px;
    /* JS sets height + transform:translateY based on scroll position.
       Min-height is enforced server-side too via JS clamp. */
    min-height: 60px;
    transition: opacity 0.15s ease;
  }
}

/* Selected state on a plan card inside the modal.
   Mirrors index .pricing-card.popular so any selected card looks like a
   featured one. */
/* .gs-plan-modal .pricing-card.gs-plan-selected {
  border: 2px solid var(--accent-color);
  background: linear-gradient(180deg, rgba(18, 124, 166, 0.03) 0%, var(--bg-secondary) 100%);
  box-shadow: 0 10px 40px rgba(18, 124, 166, 0.12);
} */

.gs-plan-modal .pricing-card.gs-plan-selected .gs-pick-plan {
  background: var(--title-color);
  border-color: var(--title-color);
  pointer-events: none;
}

.gs-plan-modal .pricing-card.gs-plan-selected .gs-pick-plan::before {
  content: "\2713 ";
  margin-right: 4px;
}

/* Lock body scroll when modal is open */
body.gs-modal-open {
  overflow: hidden;
}

/* ===== Modal mobile responsiveness =====
   At ≤900px the modal takes the full screen. Cards use the same horizontal
   scroll strip as the index pricing section (a peek of the next card hints
   at swipeability, plus an accent-color scrollbar). */
@media (max-width: 900px) {
  .gs-plan-modal {
    padding: 16px;
  }
  .gs-plan-modal-dialog {
    max-width: 100%;
    max-height: calc(100vh - 80px);
    border-radius: 16px;
  }
  /* Stack the pricing cards vertically inside the modal on small screens
     instead of the horizontal-scroll strip the marketing index uses. */
  .gs-plan-modal .pricing-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding-bottom: 0;
    overflow: visible;
  }
  .gs-plan-modal .pricing-card {
    flex: none;
    min-width: 0;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 768px) {
  .gs-plan-modal-header {
    padding: 56px 20px 0;
  }
  .gs-plan-modal-body {
    padding: 16px 20px 24px;
  }
  .gs-plan-modal-close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }
  .gs-plan-modal-title {
    font-size: var(--alpha-heading-h4);
  }
}

@media (max-width: 480px) {
  .gs-plan-modal-header {
    padding: 56px 16px 0;
  }
  .gs-plan-modal-body {
    padding: 16px 16px 24px;
  }
  .gs-plan-modal .pricing-card {
    padding: 24px 20px;
  }
}

@media (max-width: 480px) {
  .gs-selected-plan-side {
    align-items: flex-start;
    width: 100%;
  }
  .gs-change-plan-btn {
    width: 100%;
    text-align: center;
  }
}

.gs-selected-plan-label {
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-medium);
}

.gs-selected-plan-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gs-selected-plan-name {
  font-size: var(--alpha-heading-h5);
  font-weight: var(--font-weight-bold);
  color: var(--title-color);
  line-height: 1.2;
}

.gs-selected-plan-billing {
  font-size: var(--alpha-body-xs);
  color: var(--accent-color);
  background: rgba(18, 124, 166, 0.1);
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: var(--font-weight-semibold);
  text-transform: capitalize;
}

.gs-selected-plan-price {
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 480px) {
  .gs-selected-plan {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ========== STEP 2: ADD-ONS ========== */
.gs-section-heading {
  font-size: var(--alpha-heading-h5);
  font-weight: var(--font-weight-bold);
  color: var(--title-color);
  margin-bottom: 6px;
}

.gs-section-description {
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  margin-bottom: 16px;
}

.gs-addons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.gs-addon-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.gs-addon-card:hover { border-color: rgba(18, 124, 166, 0.3); }

.gs-addon-card.selected {
  border-color: var(--accent-color);
  background: rgba(18, 124, 166, 0.04);
}

.gs-addon-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gs-addon-content { flex: 1; min-width: 0; }

.gs-addon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.gs-addon-name {
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--title-color);
}

.gs-addon-price {
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-bold);
  color: var(--accent-color);
  white-space: nowrap;
}

.gs-addon-price span {
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  font-weight: var(--font-weight-regular);
  margin-left: 2px;
}

.gs-addon-description {
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  line-height: 1.5;
  margin-bottom: 4px;
}

.gs-addon-meta {
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  opacity: 0.8;
}

/* Quantity stepper inside add-on cards. Hidden until the card is selected;
   reveals when the user picks the add-on so they can pick how many accounts. */
.gs-addon-qty {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  /* Negative right margin pulls the divider all the way under the
     checkbox-circle column so the border-top spans the entire card. */
  margin-right: calc(-1 * (24px + 12px));
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.gs-addon-card.selected .gs-addon-qty {
  display: flex;
}

.gs-addon-qty-label {
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-medium);
  color: var(--title-color);
  margin-right: auto;
}

.gs-addon-qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--title-color);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
}

.gs-addon-qty-btn:hover:not(:disabled) {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.gs-addon-qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.gs-addon-qty-value {
  min-width: 24px;
  text-align: center;
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--title-color);
  font-variant-numeric: tabular-nums;
}

.gs-addon-toggle {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.2s;
}

.gs-addon-card.selected .gs-addon-toggle {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--text-white);
}

/* ========== STEP 3: REVIEW & PAY ========== */
.gs-pay-state[hidden] {
  display: none;
}

/* Loading spinner shown while verify-checkout.php call is in flight after
   Stripe redirects back. Keeps the post-payment screen from looking blank. */
.gs-verify-spinner {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border: 4px solid var(--border-color);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: gsSpin 0.9s linear infinite;
}

.gs-actions-center {
  justify-content: center;
}

.gs-summary {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
}

/* The wide variant takes the full step width since the payment form is gone. */
.gs-summary-wide {
  max-width: 640px;
  margin: 0 auto 24px;
  padding: clamp(20px, 4vw, 32px);
}

/* Actions + secure note live INSIDE the summary card now. Right-align the
   buttons and tighten the spacing so they read as part of the same unit. */
.gs-summary-actions {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
}

/* ========== PROMO CODE (step 2) ==========
   Three sequential states (only one visible at a time):
     1. .gs-promo-link             - "Have a promo code?" text link
     2. .gs-promo-input-row        - input + Apply button (revealed by clicking link)
     3. .gs-promo-pill             - confirmation chip with X remove button */
.gs-promo {
  margin: 16px 0 8px;
}

/* State 1: idle text link */
.gs-promo-link {
  background: none;
  border: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--accent-color);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.gs-promo-link:hover {
  color: var(--button-hover);
}

.gs-promo-link[hidden],
.gs-promo-input-row[hidden],
.gs-promo-pill[hidden] {
  display: none;
}

/* State 2: input row */
.gs-promo-input-row {
  display: flex;
  gap: 8px;
}

.gs-promo-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--alpha-body-xs);
  background: var(--bg-primary);
  color: var(--title-color);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: border-color 0.15s;
}

.gs-promo-input:focus {
  border-color: var(--accent-color);
}

.gs-promo-input::placeholder {
  text-transform: none;
  letter-spacing: 0;
  color: #757575;
}

.gs-promo-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  background: var(--title-color);
  color: var(--text-white);
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.15s;
}

.gs-promo-btn:hover {
  background: var(--button-hover);
}

.gs-promo-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* State 3: applied pill */
.gs-promo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  background: rgba(22, 163, 74, 0.1);
  border: 1.5px solid rgba(22, 163, 74, 0.35);
  border-radius: 999px;
  color: #15803D;
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-semibold);
}

.gs-promo-pill svg {
  flex-shrink: 0;
}

.gs-promo-pill-code {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.gs-promo-pill-discount {
  background: rgba(22, 163, 74, 0.18);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
}

.gs-promo-pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(22, 163, 74, 0.18);
  color: #15803D;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

.gs-promo-pill-remove:hover {
  background: #DC2626;
  color: #fff;
}

/* Status line under all states */
.gs-promo-status {
  margin: 8px 0 0;
  font-size: var(--alpha-body-xs);
  min-height: 18px;
}

.gs-promo-status.is-ok    { color: #16A34A; }
.gs-promo-status.is-error { color: #DC2626; }
.gs-promo-status:empty    { display: none; }

.gs-summary-discount .gs-summary-value { color: #16A34A; }
.gs-summary-discount[hidden] { display: none; }

/* ========== TERMS ACCEPTANCE CHECKBOX (step 2) ========== */
.gs-terms-accept {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--alpha-body-xs);
  color: var(--title-color);
  line-height: 1.5;
}

.gs-terms-accept input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--accent-color);
  cursor: pointer;
}

.gs-terms-text {
  flex: 1;
}

.gs-terms-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent-color);
  text-decoration: underline;
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
}

.gs-terms-link:hover {
  color: var(--button-hover);
}

.gs-btn-pay:disabled,
#gsContractAcceptBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========== CONTRACT MODAL ========== */
.gs-contract-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 32px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-primary);
}

@media (max-width: 768px) {
  .gs-contract-modal-footer {
    padding: 12px 20px;
    flex-direction: column-reverse;
  }
  .gs-contract-modal-footer .btn {
    width: 100%;
  }

  /* Smaller body font + aggressive wrapping so long emails don't overflow. */
  .gs-contract {
    font-size: 13px;
  }

  .gs-contract p,
  .gs-contract td,
  .gs-contract th {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Cover sheet table - keep as a real table but force fixed layout so
     columns share width evenly. Tighter padding so values fit. */
  .gs-contract-cover {
    table-layout: fixed;
  }
  .gs-contract-cover-cell {
    padding: 10px;
  }

  /* Fee schedule - allow the table itself to scroll horizontally if the
     5 columns can't fit. The table stays a real table; we just put it
     inside a scrolling block. */
  .gs-contract-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 12px 0 20px;
  }
  .gs-contract-table {
    margin: 0;
    min-width: 520px;
    font-size: 12px;
  }
  .gs-contract-table th,
  .gs-contract-table td {
    padding: 6px 8px;
  }

  /* Signature table - same fixed layout treatment as cover sheet */
  .gs-contract-sigtable {
    table-layout: fixed;
  }
  .gs-contract-sigtable th,
  .gs-contract-sigtable td {
    padding: 8px 10px;
  }

  .gs-contract-ol {
    padding-left: 22px;
  }
  .gs-contract-ol ol {
    padding-left: 18px;
  }
}

/* ========== CONTRACT BODY (rendered inside modal + saved with admin email) ========== */
.gs-contract {
  font-family: 'Satoshi', system-ui, sans-serif;
  color: var(--title-color);
  font-size: 14px;
  line-height: 1.55;
  max-width: 880px;
  margin: 0 auto;
}

/* Outer bordered Cover Sheet table - mirrors docx layout */
.gs-contract-cover {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
}

.gs-contract-cover-cell {
  border: 1px solid #475569;
  padding: 12px 14px;
  vertical-align: top;
}

.gs-contract-cover-cell p {
  margin: 0 0 8px;
}

.gs-contract-cover-cell p:last-child {
  margin-bottom: 0;
}

.gs-contract p {
  margin: 0 0 12px;
}

.gs-contract-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #07112B;
}

.gs-contract-subtitle {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 24px;
  color: #07112B;
}

.gs-contract-h3 {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 24px 0 12px;
  letter-spacing: 0.04em;
  text-align: center;
}

.gs-contract-table,
.gs-contract-sigtable {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 13px;
}

.gs-contract-table th,
.gs-contract-table td,
.gs-contract-sigtable th,
.gs-contract-sigtable td {
  border: 1px solid #475569;
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}

.gs-contract-table th,
.gs-contract-sigtable th {
  background: #f1f5f9;
  font-weight: 700;
}

.gs-contract-cell-meta {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.gs-contract-sigtable td p {
  margin: 0 0 6px;
  min-height: 18px;
}

.gs-contract-ol {
  padding-left: 28px;
  margin: 0 0 16px;
}

.gs-contract-ol > li {
  margin-bottom: 14px;
}

.gs-contract-ol ol {
  list-style: lower-alpha;
  padding-left: 24px;
  margin: 8px 0;
}

.gs-contract-ol ol > li {
  margin-bottom: 8px;
}

.gs-contract-end {
  text-align: center;
  font-style: italic;
  color: #64748b;
  margin-top: 32px;
}

.gs-pay-state-review .gs-secure-note {
  margin-top: 14px;
  margin-bottom: 0;
}

/* Cancel/error banner inside the order summary card */
.gs-pay-error {
  display: none;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #B91C1C;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.45;
  margin-bottom: 20px;
}

.gs-pay-error:not(:empty) {
  display: block;
}

.gs-summary-title {
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-bold);
  color: var(--title-color);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gs-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gs-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gs-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
}

.gs-summary-row .gs-summary-label-strong {
  color: var(--title-color);
  font-weight: var(--font-weight-medium);
}

.gs-summary-detail {
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  opacity: 0.65;
}

.gs-summary-divider {
  height: 1px;
  background: var(--border-color);
  margin: 16px 0;
}

.gs-summary-total {
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-bold);
  color: var(--title-color);
}

.gs-summary-total .gs-summary-value {
  font-size: var(--alpha-heading-h5);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.gs-summary-original {
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-medium);
  color: var(--body-color);
  opacity: 0.55;
  text-decoration: line-through;
}
.gs-summary-original[hidden] { display: none; }

.gs-summary-recurring {
  font-size: var(--alpha-body-xs);
  margin-top: 4px;
}

.gs-summary-note {
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  line-height: 1.5;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.gs-secure-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--alpha-body-xs);
  color: var(--text-color);
  margin-top: 8px;
  justify-content: center;
}

/* ========== STEP 4: INVITE TEAM ========== */
.gs-success-icon {
  width: 64px;
  height: 64px;
  background: rgba(18, 124, 166, 0.1);
  color: var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.gs-success-icon-large {
  width: 88px;
  height: 88px;
}

.gs-invite-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.gs-invite-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.gs-invite-input {
  flex: 1;
}

.gs-invite-remove {
  flex-shrink: 0;
  width: 44px;
  background: transparent;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.gs-invite-remove:hover {
  border-color: #DC2626;
  color: #DC2626;
  background: rgba(220, 38, 38, 0.05);
}

.gs-invite-row:only-child .gs-invite-remove {
  display: none;
}

.gs-invite-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: 1.5px dashed var(--border-color);
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  min-height: 44px;
  font-family: inherit;
  font-size: var(--alpha-body-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--accent-color);
  cursor: pointer;
  transition: all 0.2s;
}

.gs-invite-add:hover {
  border-color: var(--accent-color);
  background: rgba(18, 124, 166, 0.04);
}

.gs-invite-add:disabled,
.gs-invite-add.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========== STEP 5: DONE ========== */
.gs-done {
  text-align: center;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: clamp(32px, 6vw, 64px) 24px;
}

.gs-done .btn {
  margin-top: 24px;
}

/* ========== RESPONSIVE LAYOUT (no font-size overrides) ==========
   Padding values mirror the index hero/pricing-section breakpoints so the
   Get Started page sits flush with the rest of the marketing site. */

/* ≥1921px (extra-wide desktops) */
@media (min-width: 1921px) {
  .gs-main {
    padding: 200px 80px 120px;
  }
}

/* ≤1024px (small laptop / tablet landscape) */
@media (max-width: 1024px) {
  .gs-main {
    padding: 190px 40px 80px;
  }
}

/* ≤768px (tablet portrait) */
@media (max-width: 768px) {
  .gs-main {
    padding: 180px 20px 70px;
  }
}

@media (max-width: 767px) {
  .gs-actions {
    flex-direction: column-reverse;
  }
  .gs-actions .btn {
    width: 100%;
  }
  .gs-progress-circle {
    width: 32px;
    height: 32px;
  }
  .gs-progress-line {
    margin-top: 15px;
  }
}

/* ≤480px (mobile) */
@media (max-width: 480px) {
  .gs-main {
    padding: 150px 20px 70px;
  }
  .gs-progress-label {
    display: none;
  }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  header {
    animation: none;
  }

  .cta-marquee-track,
  .cta-marquee-item .star-icon {
    animation: none !important;
  }

  /* Keep loading spinners (they communicate ongoing activity),
     stop everything else. */
  *:not(.btn-spinner):not(.gs-spinner):not(.gs-verify-spinner) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}