:root {
  /* Font sizes with line-heights */
  --text-8xl: 8rem;
  --text-8xl-line-height: 100%;
  --text-7xl: 5rem;
  --text-7xl-line-height: 105%;
  --text-6xl: 4rem;
  --text-6xl-line-height: 110%;
  --text-5xl: 2.5rem;
  --text-5xl-line-height: 120%;
  --text-4xl: 2.25rem;
  --text-4xl-line-height: 120%;
  --text-3xl: 2rem;
  --text-3xl-line-height: 130%;
  --text-2xl: 1.5rem;
  --text-2xl-line-height: 140%;
  --text-xl: 1.25rem;
  --text-xl-line-height: 150%;
  --text-base: 1rem;
  --text-base-line-height: 150%;
  --text-s: 0.875rem;
  --text-s-line-height: 150%;
  --text-caps: 1rem;
  --text-caps-line-height: 100%;
  
  /* Font family */
  --font-gilroy: 'gilroy', Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Colors */
  --midnight: #081E2C;
  --cyan-950: #053D51;
  --cyan-900: #164E62;
  --cyan-700: #0E738F;
  --cyan-600: #0890B0;
  --cyan-400: #22D2ED;
  --blue-700: #1D4ED6;
  --blue-600: #2563EA;
  --gray-950: #070D12;
  --gray-600: #4A5763;
  --gray-400: #9CA5AF;
  --gray-200: #DCE0E5;
  --gray-100: #EDEFF2;
  --gray-50: #F5F7FA;
  --white: #FFFFFF;
}

/* Button reset utilities */
.btn-reset {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}

.btn-reset:focus {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

/* Font size utility classes */
.text-8xl { font-size: var(--text-8xl); line-height: var(--text-8xl-line-height); }
.text-7xl { font-size: var(--text-7xl); line-height: var(--text-7xl-line-height); }
.text-6xl { font-size: var(--text-6xl); line-height: var(--text-6xl-line-height); }
.text-5xl { font-size: var(--text-5xl); line-height: var(--text-5xl-line-height); }
.text-4xl { font-size: var(--text-4xl); line-height: var(--text-4xl-line-height); }
.text-3xl { font-size: var(--text-3xl); line-height: var(--text-3xl-line-height); }
.text-2xl { font-size: var(--text-2xl); line-height: var(--text-2xl-line-height); }
.text-xl { font-size: var(--text-xl); line-height: var(--text-xl-line-height); }
.text-base { font-size: var(--text-base); line-height: var(--text-base-line-height); }
.text-s { font-size: var(--text-s); line-height: var(--text-s-line-height); }
.text-caps { 
  font-size: var(--text-s); 
  line-height: var(--text-s-line-height); 
  text-transform: uppercase;
    letter-spacing: 0.8px;
}
.text-super {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
}

.text-super-hanging {
  margin-right: -.5em;
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
}

/* Responsive breakpoint: sm (640px) */
@media (min-width: 640px) {
  .sm\:text-8xl { font-size: var(--text-8xl); line-height: var(--text-8xl-line-height); }
  .sm\:text-7xl { font-size: var(--text-7xl); line-height: var(--text-7xl-line-height); }
  .sm\:text-6xl { font-size: var(--text-6xl); line-height: var(--text-6xl-line-height); }
  .sm\:text-5xl { font-size: var(--text-5xl); line-height: var(--text-5xl-line-height); }
  .sm\:text-4xl { font-size: var(--text-4xl); line-height: var(--text-4xl-line-height); }
  .sm\:text-3xl { font-size: var(--text-3xl); line-height: var(--text-3xl-line-height); }
  .sm\:text-2xl { font-size: var(--text-2xl); line-height: var(--text-2xl-line-height); }
  .sm\:text-xl { font-size: var(--text-xl); line-height: var(--text-xl-line-height); }
  .sm\:text-base { font-size: var(--text-base); line-height: var(--text-base-line-height); }
  .sm\:text-s { font-size: var(--text-s); line-height: var(--text-s-line-height); }
  .sm\:text-caps { 
    font-size: var(--text-base); 
    line-height: var(--text-base-line-height); 
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
}

/* Responsive breakpoint: md (768px) */
@media (min-width: 768px) {
  .md\:text-8xl { font-size: var(--text-8xl); line-height: var(--text-8xl-line-height); }
  .md\:text-7xl { font-size: var(--text-7xl); line-height: var(--text-7xl-line-height); }
  .md\:text-6xl { font-size: var(--text-6xl); line-height: var(--text-6xl-line-height); }
  .md\:text-5xl { font-size: var(--text-5xl); line-height: var(--text-5xl-line-height); }
  .md\:text-4xl { font-size: var(--text-4xl); line-height: var(--text-4xl-line-height); }
  .md\:text-3xl { font-size: var(--text-3xl); line-height: var(--text-3xl-line-height); }
  .md\:text-2xl { font-size: var(--text-2xl); line-height: var(--text-2xl-line-height); }
  .md\:text-xl { font-size: var(--text-xl); line-height: var(--text-xl-line-height); }
  .md\:text-base { font-size: var(--text-base); line-height: var(--text-base-line-height); }
  .md\:text-s { font-size: var(--text-s); line-height: var(--text-s-line-height); }
  .md\:text-caps { 
    font-size: var(--text-base); 
    line-height: var(--text-base-line-height); 
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
}

/* Responsive breakpoint: lg (1024px) */
@media (min-width: 1024px) {
  .lg\:text-8xl { font-size: var(--text-8xl); line-height: var(--text-8xl-line-height); }
  .lg\:text-7xl { font-size: var(--text-7xl); line-height: var(--text-7xl-line-height); }
  .lg\:text-6xl { font-size: var(--text-6xl); line-height: var(--text-6xl-line-height); }
  .lg\:text-5xl { font-size: var(--text-5xl); line-height: var(--text-5xl-line-height); }
  .lg\:text-4xl { font-size: var(--text-4xl); line-height: var(--text-4xl-line-height); }
  .lg\:text-3xl { font-size: var(--text-3xl); line-height: var(--text-3xl-line-height); }
  .lg\:text-2xl { font-size: var(--text-2xl); line-height: var(--text-2xl-line-height); }
  .lg\:text-xl { font-size: var(--text-xl); line-height: var(--text-xl-line-height); }
  .lg\:text-base { font-size: var(--text-base); line-height: var(--text-base-line-height); }
  .lg\:text-s { font-size: var(--text-s); line-height: var(--text-s-line-height); }
  .lg\:text-caps { 
    font-size: var(--text-base); 
    line-height: var(--text-base-line-height); 
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
}

/* Responsive breakpoint: xl (1280px) */
@media (min-width: 1280px) {
  .xl\:text-8xl { font-size: var(--text-8xl); line-height: var(--text-8xl-line-height); }
  .xl\:text-7xl { font-size: var(--text-7xl); line-height: var(--text-7xl-line-height); }
  .xl\:text-6xl { font-size: var(--text-6xl); line-height: var(--text-6xl-line-height); }
  .xl\:text-5xl { font-size: var(--text-5xl); line-height: var(--text-5xl-line-height); }
  .xl\:text-4xl { font-size: var(--text-4xl); line-height: var(--text-4xl-line-height); }
  .xl\:text-3xl { font-size: var(--text-3xl); line-height: var(--text-3xl-line-height); }
  .xl\:text-2xl { font-size: var(--text-2xl); line-height: var(--text-2xl-line-height); }
  .xl\:text-xl { font-size: var(--text-xl); line-height: var(--text-xl-line-height); }
  .xl\:text-base { font-size: var(--text-base); line-height: var(--text-base-line-height); }
  .xl\:text-s { font-size: var(--text-s); line-height: var(--text-s-line-height); }
  .xl\:text-caps { 
    font-size: var(--text-base);
    line-height: var(--text-base-line-height); 
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
}

/* Responsive breakpoint: 2xl (1536px) */
@media (min-width: 1536px) {
  .\32xl\:text-8xl { font-size: var(--text-8xl); line-height: var(--text-8xl-line-height); }
  .\32xl\:text-7xl { font-size: var(--text-7xl); line-height: var(--text-7xl-line-height); }
  .\32xl\:text-6xl { font-size: var(--text-6xl); line-height: var(--text-6xl-line-height); }
  .\32xl\:text-5xl { font-size: var(--text-5xl); line-height: var(--text-5xl-line-height); }
  .\32xl\:text-4xl { font-size: var(--text-4xl); line-height: var(--text-4xl-line-height); }
  .\32xl\:text-3xl { font-size: var(--text-3xl); line-height: var(--text-3xl-line-height); }
  .\32xl\:text-2xl { font-size: var(--text-2xl); line-height: var(--text-2xl-line-height); }
  .\32xl\:text-xl { font-size: var(--text-xl); line-height: var(--text-xl-line-height); }
  .\32xl\:text-base { font-size: var(--text-base); line-height: var(--text-base-line-height); }
  .\32xl\:text-s { font-size: var(--text-s); line-height: var(--text-s-line-height); }
  .\32xl\:text-caps { 
    font-size: var(--text-base); 
    line-height: var(--text-base-line-height); 
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
}

/* Background color utilities */
.bg-midnight { background-color: var(--midnight); }
.bg-cyan-950 { background-color: var(--cyan-950); }
.bg-cyan-900 { background-color: var(--cyan-900); }
.bg-cyan-700 { background-color: var(--cyan-700); }
.bg-cyan-600 { background-color: var(--cyan-600); }
.bg-cyan-400 { background-color: var(--cyan-400); }
.bg-blue-600 { background-color: var(--blue-600); }
.bg-gray-950 { background-color: var(--gray-950); }
.bg-gray-600 { background-color: var(--gray-600); }
.bg-gray-400 { background-color: var(--gray-400); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-50 { background-color: var(--gray-50); }
.bg-white { background-color: var(--white); }
.bg-transparent { background-color: transparent; }

/* Split background utilities */
.bg-split-midnight-white {
  background: linear-gradient(to bottom, var(--midnight) 0%, var(--midnight) 50%, var(--white) 50%, var(--white) 100%);
}

/* Responsive breakpoint: md (768px) */
@media (min-width: 768px) {
  .md\:bg-midnight { background-color: var(--midnight); }
  .md\:bg-cyan-950 { background-color: var(--cyan-950); }
  .md\:bg-cyan-900 { background-color: var(--cyan-900); }
  .md\:bg-cyan-700 { background-color: var(--cyan-700); }
  .md\:bg-cyan-600 { background-color: var(--cyan-600); }
  .md\:bg-cyan-400 { background-color: var(--cyan-400); }
  .md\:bg-blue-600 { background-color: var(--blue-600); }
  .md\:bg-gray-950 { background-color: var(--gray-950); }
  .md\:bg-gray-600 { background-color: var(--gray-600); }
  .md\:bg-gray-400 { background-color: var(--gray-400); }
  .md\:bg-gray-200 { background-color: var(--gray-200); }
  .md\:bg-gray-50 { background-color: var(--gray-50); }
  .md\:bg-white { background-color: var(--white); }
  .md\:bg-transparent { background-color: transparent; }
}

/* Responsive breakpoint: sm (640px) */
@media (min-width: 640px) {
  .sm\:bg-transparent { background-color: transparent; }
}

/* Responsive breakpoint: lg (1024px) */
@media (min-width: 1024px) {
  .lg\:bg-transparent { background-color: transparent; }
}

/* Responsive breakpoint: xl (1280px) */
@media (min-width: 1280px) {
  .xl\:bg-transparent { background-color: transparent; }
}

/* Responsive breakpoint: 2xl (1536px) */
@media (min-width: 1536px) {
  .\32xl\:bg-transparent { background-color: transparent; }
}

/* Text color utilities */
.text-cyan-700 { color: var(--cyan-700); }
.text-cyan-600 { color: var(--cyan-600); }
.text-cyan-400 { color: var(--cyan-400); }
.text-blue-600 { color: var(--blue-600); }
.text-gray-950 { color: var(--gray-950); }
.text-gray-600 { color: var(--gray-600); }
.text-white { color: var(--white); }

/* Fill color utilities */
.fill-gray-400 { fill: var(--gray-400); }
.fill-gray-600 { fill: var(--gray-600); }

/* Responsive breakpoint: md (768px) */
@media (min-width: 768px) {
  .md\:text-cyan-700 { color: var(--cyan-700); }
  .md\:text-cyan-600 { color: var(--cyan-600); }
  .md\:text-cyan-400 { color: var(--cyan-400); }
  .md\:text-blue-600 { color: var(--blue-600); }
  .md\:text-gray-950 { color: var(--gray-950); }
  .md\:text-gray-600 { color: var(--gray-600); }
  .md\:text-white { color: var(--white); }
}

/* Responsive breakpoint: xl (1280px) */
@media (min-width: 1280px) {
  .xl\:text-white { color: var(--white); }
}

/* Font family utilities */
.font-gilroy { font-family: var(--font-gilroy); }
.font-gilroy-light { 
  font-family: var(--font-gilroy); 
  font-weight: var(--font-weight-light); 
}
.font-gilroy-medium { 
  font-family: var(--font-gilroy); 
  font-weight: var(--font-weight-medium); 
}
.font-gilroy-semibold { 
  font-family: var(--font-gilroy); 
  font-weight: var(--font-weight-semibold); 
}
.font-gilroy-bold { 
  font-family: var(--font-gilroy); 
  font-weight: var(--font-weight-bold); 
}
.font-gilroy-extrabold { 
  font-family: var(--font-gilroy); 
  font-weight: var(--font-weight-extrabold); 
}

/* Responsive breakpoint: md (768px) */
@media (min-width: 768px) {
  .md\:font-gilroy-light { font-family: var(--font-gilroy); font-weight: var(--font-weight-light); }
  .md\:font-gilroy-medium { font-family: var(--font-gilroy); font-weight: var(--font-weight-medium); }
  .md\:font-gilroy-semibold { font-family: var(--font-gilroy); font-weight: var(--font-weight-semibold); }
  .md\:font-gilroy-bold { font-family: var(--font-gilroy); font-weight: var(--font-weight-bold); }
  .md\:font-gilroy-extrabold { font-family: var(--font-gilroy); font-weight: var(--font-weight-extrabold); }
}

/* Layout utilities */
.block { display: block; }
.hidden { display: none; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.justify-evenly { justify-content: space-evenly; }
.justify-items-center { justify-items: center; }
.items-center { align-items: center; }
.items-stretch { align-items: stretch; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Responsive grid: md */
@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
  .md\:flex-row-reverse { flex-direction: row-reverse; }
  .md\:flex-1 { flex: 1; }
  .md\:grid { display: grid; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-\[1fr_1px_1fr\] { grid-template-columns: 1fr 1px 1fr; }
  .md\:grid-cols-\[1fr_1px_1fr_1px_1fr\] { grid-template-columns: 1fr 1px 1fr 1px 1fr; }
  .md\:items-stretch { align-items: stretch; }
  .md\:justify-items-center { justify-items: center; }
}

/* Responsive breakpoint: lg (1024px) */
@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:block { display: block; }
  .lg\:grid { display: grid; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-\[62fr_38fr\] { grid-template-columns: 62fr 38fr; }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:aspect-square { aspect-ratio: 1 / 1; }
}

/* Responsive grid: xl */
@media (min-width: 1280px) {
  .xl\:flex-row { flex-direction: row; }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Grid column span utilities */
.col-span-2 { grid-column: span 2 / span 2; }

@media (min-width: 768px) {
  .md\:col-span-2 { grid-column: span 2 / span 2; }
}

/* Spacing utilities */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }
.gap-15 { gap: 3.75rem; }
.gap-18 { gap: 4.5rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-x-16 { column-gap: 4rem; }
.gap-y-6 { row-gap: 1.5rem; }
.gap-y-8 { row-gap: 2rem; }
.gap-y-10 { row-gap: 2.5rem; }
.gap-y-16 { row-gap: 4rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-auto { margin-top: auto; }

/* Responsive grid: md */
@media (min-width: 768px) {
  .md\:gap-0 { gap: 0; }
  .md\:gap-2 { gap: 0.5rem; }
  .md\:gap-4 { gap: 1rem; }
  .md\:gap-6 { gap: 1.5rem; }
  .md\:gap-8 { gap: 2rem; }
  .md\:gap-12 { gap: 3rem; }
  .md\:gap-15 { gap: 3.75rem; }
  .md\:gap-18 { gap: 4.5rem; }
  .md\:gap-x-4 { column-gap: 1rem; }
  .md\:gap-y-10 { row-gap: 2.5rem; }
}

/* Responsive breakpoint: lg (1024px) */
@media (min-width: 1024px) {
  .lg\:gap-8 { gap: 2rem; }
  .lg\:gap-12 { gap: 3rem; }
  .lg\:gap-15 { gap: 3.75rem; }
  .lg\:gap-16 { gap: 4rem; }
}

/* Responsive spacing: 2xl */
@media (min-width: 1536px) {
  .\32xl\:gap-0 { gap: 0; }
  .\32xl\:gap-15 { gap: 3.75rem; }
  .\32xl\:gap-16 { gap: 4rem; }
  .\32xl\:gap-x-16 { column-gap: 4rem; }
  .\32xl\:gap-y-10 { row-gap: 2.5rem; }
  .\32xl\:gap-y-16 { row-gap: 4rem; }
}

/* Padding utilities */
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-7 { padding-top: 1.875rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-15 { padding-top: 3.75rem; }
.pt-16 { padding-top: 4rem; }
.pt-20 { padding-top: 5rem; }
.pt-24 { padding-top: 6rem; }
.pt-30 { padding-top: 7.5rem; }
.pt-36 { padding-top: 9rem; }
.pt-\[318px\] { padding-top: 318px; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-7 { padding-bottom: 1.875rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-15 { padding-bottom: 3.75rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-24 { padding-bottom: 6rem; }
.pb-30 { padding-bottom: 7.5rem; }
.pb-36 { padding-bottom: 9rem; }
.pl-0 { padding-left: 0; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-7 { padding-left: 1.875rem; }
.pl-8 { padding-left: 2rem; }
.pl-10 { padding-left: 2.5rem; }
.pl-15 { padding-left: 3.75rem; }
.pl-16 { padding-left: 4rem; }
.pl-20 { padding-left: 5rem; }
.pl-30 { padding-left: 7.5rem; }
.pr-0 { padding-right: 0; }
.pr-4 { padding-right: 1rem; }
.pr-5 { padding-right: 1.25rem; }
.pr-7 { padding-right: 1.875rem; }
.pr-8 { padding-right: 2rem; }
.pr-10 { padding-right: 2.5rem; }
.pr-15 { padding-right: 3.75rem; }
.pr-20 { padding-right: 5rem; }
.pr-30 { padding-right: 7.5rem; }

/* Responsive padding: sm (640px) */
@media (min-width: 640px) {
  .sm\:pt-5 { padding-top: 1.25rem; }
  .sm\:pt-7 { padding-top: 1.875rem; }
  .sm\:pt-10 { padding-top: 2.5rem; }
  .sm\:pt-15 { padding-top: 3.75rem; }
  .sm\:pt-16 { padding-top: 4rem; }
  .sm\:pt-20 { padding-top: 5rem; }
  .sm\:pt-24 { padding-top: 6rem; }
  .sm\:pt-30 { padding-top: 7.5rem; }
  .sm\:pt-36 { padding-top: 9rem; }
  .sm\:pb-5 { padding-bottom: 1.25rem; }
  .sm\:pb-7 { padding-bottom: 1.875rem; }
  .sm\:pb-10 { padding-bottom: 2.5rem; }
  .sm\:pb-15 { padding-bottom: 3.75rem; }
  .sm\:pb-16 { padding-bottom: 4rem; }
  .sm\:pb-20 { padding-bottom: 5rem; }
  .sm\:pb-24 { padding-bottom: 6rem; }
  .sm\:pb-30 { padding-bottom: 7.5rem; }
  .sm\:pb-36 { padding-bottom: 9rem; }
  .sm\:pl-5 { padding-left: 1.25rem; }
  .sm\:pl-7 { padding-left: 1.875rem; }
  .sm\:pl-10 { padding-left: 2.5rem; }
  .sm\:pl-15 { padding-left: 3.75rem; }
  .sm\:pl-16 { padding-left: 4rem; }
  .sm\:pl-20 { padding-left: 5rem; }
  .sm\:pl-30 { padding-left: 7.5rem; }
  .sm\:pr-5 { padding-right: 1.25rem; }
  .sm\:pr-7 { padding-right: 1.875rem; }
  .sm\:pr-10 { padding-right: 2.5rem; }
  .sm\:pr-15 { padding-right: 3.75rem; }
  .sm\:pr-16 { padding-right: 4rem; }
  .sm\:pr-20 { padding-right: 5rem; }
  .sm\:pr-30 { padding-right: 7.5rem; }
}

/* Responsive padding: md (768px) */
@media (min-width: 768px) {
  .md\:pt-0 { padding-top: 0; }
  .md\:pt-5 { padding-top: 1.25rem; }
  .md\:pt-7 { padding-top: 1.875rem; }
  .md\:pt-10 { padding-top: 2.5rem; }
  .md\:pt-15 { padding-top: 3.75rem; }
  .md\:pt-16 { padding-top: 4rem; }
  .md\:pt-20 { padding-top: 5rem; }
  .md\:pt-24 { padding-top: 6rem; }
  .md\:pt-30 { padding-top: 7.5rem; }
  .md\:pt-36 { padding-top: 9rem; }
  .md\:pb-0 { padding-bottom: 0; }
  .md\:pb-5 { padding-bottom: 1.25rem; }
  .md\:pb-7 { padding-bottom: 1.875rem; }
  .md\:pb-10 { padding-bottom: 2.5rem; }
  .md\:pb-15 { padding-bottom: 3.75rem; }
  .md\:pb-16 { padding-bottom: 4rem; }
  .md\:pb-20 { padding-bottom: 5rem; }
  .md\:pb-24 { padding-bottom: 6rem; }
  .md\:pb-30 { padding-bottom: 7.5rem; }
  .md\:pb-36 { padding-bottom: 9rem; }
  .md\:pl-5 { padding-left: 1.25rem; }
  .md\:pl-7 { padding-left: 1.875rem; }
  .md\:pl-10 { padding-left: 2.5rem; }
  .md\:pl-15 { padding-left: 3.75rem; }
  .md\:pl-16 { padding-left: 4rem; }
  .md\:pl-20 { padding-left: 5rem; }
  .md\:pl-30 { padding-left: 7.5rem; }
  .md\:pr-5 { padding-right: 1.25rem; }
  .md\:pr-7 { padding-right: 1.875rem; }
  .md\:pr-10 { padding-right: 2.5rem; }
  .md\:pr-15 { padding-right: 3.75rem; }
  .md\:pr-16 { padding-right: 4rem; }
  .md\:pr-20 { padding-right: 5rem; }
  .md\:pr-30 { padding-right: 7.5rem; }
}

/* Responsive padding: lg (1024px) */
@media (min-width: 1024px) {
  .lg\:pt-0 { padding-top: 0; }
  .lg\:pt-5 { padding-top: 1.25rem; }
  .lg\:pt-7 { padding-top: 1.875rem; }
  .lg\:pt-8 { padding-top: 2rem; }
  .lg\:pt-10 { padding-top: 2.5rem; }
  .lg\:pt-15 { padding-top: 3.75rem; }
  .lg\:pt-16 { padding-top: 4rem; }
  .lg\:pt-20 { padding-top: 5rem; }
  .lg\:pt-30 { padding-top: 7.5rem; }
  .lg\:pt-36 { padding-top: 9rem; }
  .lg\:pb-0 { padding-bottom: 0; }
  .lg\:pb-5 { padding-bottom: 1.25rem; }
  .lg\:pb-7 { padding-bottom: 1.875rem; }
  .lg\:pb-8 { padding-bottom: 2rem; }
  .lg\:pb-10 { padding-bottom: 2.5rem; }
  .lg\:pb-15 { padding-bottom: 3.75rem; }
  .lg\:pb-16 { padding-bottom: 4rem; }
  .lg\:pb-20 { padding-bottom: 5rem; }
  .lg\:pb-30 { padding-bottom: 7.5rem; }
  .lg\:pb-36 { padding-bottom: 9rem; }
  .lg\:pl-0 { padding-left: 0; }
  .lg\:pl-5 { padding-left: 1.25rem; }
  .lg\:pl-7 { padding-left: 1.875rem; }
  .lg\:pl-10 { padding-left: 2.5rem; }
  .lg\:pl-15 { padding-left: 3.75rem; }
  .lg\:pl-16 { padding-left: 4rem; }
  .lg\:pl-20 { padding-left: 5rem; }
  .lg\:pl-30 { padding-left: 7.5rem; }
  .lg\:pr-0 { padding-right: 0; }
  .lg\:pr-5 { padding-right: 1.25rem; }
  .lg\:pr-7 { padding-right: 1.875rem; }
  .lg\:pr-10 { padding-right: 2.5rem; }
  .lg\:pr-15 { padding-right: 3.75rem; }
  .lg\:pr-16 { padding-right: 4rem; }
  .lg\:pr-20 { padding-right: 5rem; }
  .lg\:pr-30 { padding-right: 7.5rem; }
  .lg\:w-px { width: 1px; }
  .lg\:w-full { width: 100%; }
}

/* Responsive padding: xl (1280px) */
@media (min-width: 1280px) {
  .xl\:pt-5 { padding-top: 1.25rem; }
  .xl\:pt-7 { padding-top: 1.875rem; }
  .xl\:pt-10 { padding-top: 2.5rem; }
  .xl\:pt-15 { padding-top: 3.75rem; }
  .xl\:pt-20 { padding-top: 5rem; }
  .xl\:pt-30 { padding-top: 7.5rem; }
  .xl\:pb-5 { padding-bottom: 1.25rem; }
  .xl\:pb-7 { padding-bottom: 1.875rem; }
  .xl\:pb-10 { padding-bottom: 2.5rem; }
  .xl\:pb-15 { padding-bottom: 3.75rem; }
  .xl\:pb-20 { padding-bottom: 5rem; }
  .xl\:pb-30 { padding-bottom: 7.5rem; }
  .xl\:pl-5 { padding-left: 1.25rem; }
  .xl\:pl-7 { padding-left: 1.875rem; }
  .xl\:pl-10 { padding-left: 2.5rem; }
  .xl\:pl-15 { padding-left: 3.75rem; }
  .xl\:pl-20 { padding-left: 5rem; }
  .xl\:pl-30 { padding-left: 7.5rem; }
  .xl\:pr-5 { padding-right: 1.25rem; }
  .xl\:pr-7 { padding-right: 1.875rem; }
  .xl\:pr-10 { padding-right: 2.5rem; }
  .xl\:pr-15 { padding-right: 3.75rem; }
  .xl\:pr-20 { padding-right: 5rem; }
  .xl\:pr-30 { padding-right: 7.5rem; }
}

/* Responsive padding: 2xl (1536px) */
@media (min-width: 1536px) {
  .\32xl\:pt-5 { padding-top: 1.25rem; }
  .\32xl\:pt-7 { padding-top: 1.875rem; }
  .\32xl\:pt-10 { padding-top: 2.5rem; }
  .\32xl\:pt-15 { padding-top: 3.75rem; }
  .\32xl\:pt-20 { padding-top: 5rem; }
  .\32xl\:pt-30 { padding-top: 7.5rem; }
  .\32xl\:pb-5 { padding-bottom: 1.25rem; }
  .\32xl\:pb-7 { padding-bottom: 1.875rem; }
  .\32xl\:pb-10 { padding-bottom: 2.5rem; }
  .\32xl\:pb-15 { padding-bottom: 3.75rem; }
  .\32xl\:pb-20 { padding-bottom: 5rem; }
  .\32xl\:pb-30 { padding-bottom: 7.5rem; }
  .\32xl\:pl-5 { padding-left: 1.25rem; }
  .\32xl\:pl-7 { padding-left: 1.875rem; }
  .\32xl\:pl-10 { padding-left: 2.5rem; }
  .\32xl\:pl-15 { padding-left: 3.75rem; }
  .\32xl\:pl-20 { padding-left: 5rem; }
  .\32xl\:pl-30 { padding-left: 7.5rem; }
  .\32xl\:pr-5 { padding-right: 1.25rem; }
  .\32xl\:pr-7 { padding-right: 1.875rem; }
  .\32xl\:pr-10 { padding-right: 2.5rem; }
  .\32xl\:pr-15 { padding-right: 3.75rem; }
  .\32xl\:pr-20 { padding-right: 5rem; }
  .\32xl\:pr-30 { padding-right: 7.5rem; }
}


/* Size utilities */
.max-w-screen-xl { max-width: 1280px; }
.max-w-\[1216px\] { max-width: 1216px; }
.max-w-\[1184px\] { max-width: 1184px; }
.max-w-\[840px\] { max-width: 840px; }
.max-w-\[600px\] { max-width: 600px; }
.max-w-\[292px\] { max-width: 292px; }

/* Responsive padding: md (768px) */
@media (min-width: 768px) {
  .md\:max-w-\[1216px\] { max-width: 1216px; }
  .md\:max-w-\[840px\] { max-width: 840px; }
  .md\:max-w-\[600px\] { max-width: 600px; }
  .md\:max-w-\[292px\] { max-width: 292px; }
}

/* Responsive padding: xl (1280px) */
@media (min-width: 1280px) {
  .xl\:max-w-\[1216px\] { max-width: 1216px; }
  .xl\:max-w-\[840px\] { max-width: 840px; }
  .xl\:max-w-\[600px\] { max-width: 600px; }
  .xl\:max-w-\[292px\] { max-width: 292px; }
}

/* Text utilities */
.text-right { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-wrap-balance { text-wrap: balance; }
.text-wrap-pretty { text-wrap: pretty; }

/* Responsive padding: md (768px) */
@media (min-width: 768px) {
  .md\:text-left { text-align: left; }
  .md\:text-right { text-align: right; }
  .md\:text-center { text-align: center; }
}

/* FAQ/Definition list utilities */
dl { margin: 0; }
dt, dd { margin: 0; }

/* Border utilities */
.border-none { border: none; }
.border { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-gray-200 { border-color: var(--gray-200); }
.border-gray-100 { border-color: var(--gray-100); }
.border-white { border-color: var(--white); }
.border-solid { border-style: solid; }
.border-\[1px\] { border-width: 1px; }

/* Mix blend mode utilities */
.mix-blend-multiply { mix-blend-mode: multiply; }

/* Border radius utilities */
.rounded { border-radius: 0.75rem; }
.rounded-lg { border-radius: 1.25rem; }
.rounded-full { border-radius: 9999px; }

@media (min-width: 768px) {
  .md\:rounded { border-radius: 0.75rem; }
}

@media (min-width: 1024px) {
  .lg\:rounded { border-radius: 0.75rem; }
}

/* Shadow utilities */
.shadow-lg { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2); }

/* Cursor utilities */
.cursor-pointer { cursor: pointer; }

/* Position utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.pointer-events-none { pointer-events: none; }
.object-fill { object-fit: fill; }

/* 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-width: 0;
}

/* Transition utilities */
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: 200ms; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-duration: 200ms; }

/* Stroke utilities */
.stroke-gray-400 { stroke: var(--gray-400); }
.stroke-gray-600 { stroke: var(--gray-600); }

/* Transform utilities */
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }
.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.translate-center { transform: translate(-50%, -50%); }

/* Positioning utilities */
.top-1\/2 { top: 50%; }
.left-1\/2 { left: 50%; }
.bottom-\[calc\(100\%_\+_16px\)\] { bottom: calc(100% + 16px); }

/* Hover utilities */
.hover\:bg-cyan-700:hover { background-color: #0E738F; }
.hover\:bg-blue-700:hover { background-color: #1D4ED8; }
.hover\:fill-gray-600:hover { fill: var(--gray-600); }
.hover\:stroke-gray-600:hover { stroke: var(--gray-600); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.1); }

/* Focus utilities */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--white); }

/* Padding x and y utilities */
.p-4 { padding: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

/* Responsive padding reset */
@media (min-width: 768px) {
  .md\:p-0 { padding: 0; }
}

/* Font weight utilities */
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; } 

/* Border width utilities */
.border { border-width: 1px; }
.border-2 { border-width: 2px; }

/* Base link style */
main a {
  color: var(--cyan-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-underline-offset 200ms ease;
}

main a:hover {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Button components */
.btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: max-content;
  padding: 1.125rem 1.5rem;
  font-family: 'guardian-text-oreilly', Helvetica, sans-serif;
  font-weight: 400;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition-property: color, background-color, border-color, transform, box-shadow;
  transition-duration: 200ms;
  text-decoration: none;
  text-align: center;
}

.btn svg {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  transition: transform 200ms;
}

.btn:hover {
  text-decoration: none;
}

.btn:hover svg {
  transform: scale(1.05);
}

.btn-primary {
  background-color: var(--cyan-700);
  color: var(--white);
}

.btn-primary svg path {
  fill: currentColor;
}

.btn-primary-light {
  background-color: var(--gray-50);
  color: var(--cyan-700);
}

.btn-primary-light svg path {
  fill: currentColor;
}

.btn-secondary {
  background-color: var(--white);
  color: var(--cyan-700);
  border: 1px solid var(--cyan-700);
}

.btn-secondary svg path {
  fill: currentColor;
}

/* Button hover effects */    
.btn-primary:hover {
  background-color: var(--cyan-700);
}

.btn-secondary:hover {
  color: var(--cyan-700);
  border: 1px solid var(--cyan-700);
}

.btn-primary-light:hover {
  background-color: var(--white);
}

#explore-arcade-wrap:hover .btn-primary-light {
  background-color: var(--white);
}

#explore-arcade-wrap:hover .btn svg {
  transform: scale(1.05);
}

/* Responsive button variants */
@media (min-width: 640px) {
  .sm\:btn-primary {
    background-color: var(--cyan-700);
    color: var(--white);
  }
  .sm\:btn-primary-light {
    background-color: var(--gray-50);
    color: var(--cyan-700);
  }
}

@media (min-width: 768px) {
  .md\:btn-primary {
    background-color: var(--cyan-700);
    color: var(--white);
  }
  .md\:btn-primary-light {
    background-color: var(--gray-50);
    color: var(--cyan-700);
  }
}

@media (min-width: 1024px) {
  .lg\:btn-primary {
    background-color: var(--cyan-700);
    color: var(--white);
  }
  .lg\:btn-primary-light {
    background-color: var(--gray-50);
    color: var(--cyan-700);
  }
}

@media (min-width: 1280px) {
  .xl\:btn-primary {
    background-color: var(--cyan-700);
    color: var(--white);
  }
  .xl\:btn-primary-light {
    background-color: var(--gray-50);
    color: var(--cyan-700);
  }
}

@media (min-width: 1536px) {
  .\32xl\:btn-primary {
    background-color: var(--cyan-700);
    color: var(--white);
  }
  .\32xl\:btn-primary-light {
    background-color: var(--gray-50);
    color: var(--cyan-700);
  }
}

/* Responsive button hover effects */
@media (min-width: 640px) {
  .sm\:btn-primary:hover {
    background-color: var(--cyan-700);
  }
  .sm\:btn-primary-light:hover {
    background-color: var(--white);
  }
}

@media (min-width: 768px) {
  .md\:btn-primary:hover {
    background-color: var(--cyan-700);
  }
  .md\:btn-primary-light:hover {
    background-color: var(--white);
  }
}

@media (min-width: 1024px) {
  .lg\:btn-primary:hover {
    background-color: var(--cyan-700);
  }
  .lg\:btn-primary-light:hover {
    background-color: var(--white);
  }
}

@media (min-width: 1280px) {
  .xl\:btn-primary:hover {
    background-color: var(--cyan-700);
  }
  .xl\:btn-primary-light:hover {
    background-color: var(--white);
  }
}

@media (min-width: 1536px) {
  .\32xl\:btn-primary:hover {
    background-color: var(--cyan-700);
  }
  .\32xl\:btn-primary-light:hover {
    background-color: var(--white);
  }
}

/* Pricing badge component */
.pricing-badge {
  text-transform: uppercase;
  font-size: var(--text-s);
  line-height: var(--text-s-line-height);
  letter-spacing: 2px;
  text-wrap: pretty;
  color: var(--cyan-700);
}

  @media (min-width: 768px) {
  .pricing-badge {
    position: absolute;
    bottom: calc(100% + 16px);
    font-size: var(--text-base);
    line-height: var(--text-base-line-height);
  }
  }

/* Join section background */
@media (min-width: 1280px) {
  .join-section-bg {
    position: relative;
    background-image: url('data:image/svg+xml,%3Csvg width=%221700%22 height=%221094%22 viewBox=%220 0 101 65%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M50.6341 0C41.9165 0.00145505 33.7214 3.38251 27.5587 9.52039C21.3965 15.6578 18.0015 23.8192 18 32.5015C18.0015 41.1823 21.3965 49.3427 27.5587 55.4796C33.7214 61.617 41.916 64.9981 50.6336 65H50.6341C59.3517 64.9981 67.5463 61.6165 73.7085 55.4796C79.8702 49.3427 83.2652 41.1823 83.2682 32.501C83.2652 23.8192 79.8707 15.6578 73.7085 9.52039C67.5463 3.38251 59.3517 0.00145505 50.6341 0ZM71.1346 32.501C71.1346 37.9487 69.0024 43.0753 65.1316 46.9356C61.252 50.7905 56.1028 52.9153 50.6346 52.9182C45.1624 52.9153 40.0127 50.7905 36.1356 46.937C32.2657 43.0748 30.1331 37.9477 30.1302 32.5015C30.1331 27.0547 32.2662 21.9247 36.1336 18.0591C40.0113 14.2081 45.161 12.0856 50.6336 12.0827C56.1038 12.0861 61.253 14.2086 65.1297 18.0572C69.002 21.9242 71.1341 27.0537 71.1341 32.501H71.1346ZM101 11.2359C101 15.8814 97.2066 19.6606 92.5444 19.6606C87.8822 19.6606 84.0868 15.8814 84.0868 11.2359C84.0868 6.59041 87.8812 2.81649 92.5444 2.81649C97.2076 2.81649 101 6.59332 101 11.2359Z%22 fill=%22%23164e63%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center -112px;
    background-size: auto 1094px;
  }
}

/* Custom bullet list */
.check-list-light {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.check-list-light li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.check-list-light li::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1.4em;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 24C5.3724 24 0 18.6276 0 12C0 5.3724 5.3724 0 12 0C18.6276 0 24 5.3724 24 12C24 18.6276 18.6276 24 12 24ZM10.8036 16.8L19.2876 8.3148L17.5908 6.618L10.8036 13.4064L7.4088 10.0116L5.712 11.7084L10.8036 16.8Z' fill='%2322D2ED'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Responsive padding reset */
@media (min-width: 768px) {
  .check-list-light { gap: 1.25rem; }
}

/* Logo grid item */
.logo-grid-item {
  height: 1.25rem;
  width: auto;
  object-fit: contain;
  object-position: center;
}

  @media (min-width: 1536px) {
  .logo-grid-item {
    height: 1.5rem;
  }
  }

/* Horizontal carousel utilities */
.overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.snap-x {
  scroll-snap-type: x mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

.snap-center {
  scroll-snap-align: center;
}

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

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

.w-full {
  width: 100%;
}

.w-\[273px\] {
  width: 273px;
}

.w-\[120px\] {
  width: 120px;
}

.w-px {
  width: 1px;
}

.w-6 {
  width: 1.5rem; /* 24px */
}

.h-\[204px\] {
  height: 204px;
}

.h-\[120px\] {
  height: 120px;
}

.h-\[48px\] {
  height: 48px;
}

.h-px {
  height: 1px;
}

.h-6 {
  height: 1.5rem; /* 24px */
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.aspect-\[292\/368\] {
  aspect-ratio: 292 / 368;
}

.aspect-\[419\/313\] {
  aspect-ratio: 419 / 313;
}

.aspect-\[1126\/645\] {
  aspect-ratio: 1126 / 645;
}

.min-w-\[280px\] {
  min-width: 280px;
}

.min-w-\[320px\] {
  min-width: 320px;
}

.shrink-0 {
  flex-shrink: 0;
}

/* Responsive carousel behavior */
@media (min-width: 768px) {
  .md\:overflow-x-visible {
    overflow-x: visible;
  }

  .md\:snap-none {
    scroll-snap-type: none;
  }

  .md\:min-w-0 {
    min-width: 0;
  }

  .md\:w-full {
    width: 100%;
  }

  .md\:w-\[419px\] {
    width: 419px;
  }

  .md\:w-px {
    width: 1px;
  }

  .md\:h-auto {
    height: auto;
  }

  .md\:h-\[313px\] {
    height: 313px;
  }

  .md\:h-\[65px\] {
    height: 65px;
  }

  .md\:aspect-\[292\/368\] {
    aspect-ratio: 292 / 368;
  }

  .md\:aspect-\[584\/594\] {
    aspect-ratio: 584 / 594;
  }
}

/* Responsive padding: lg (1024px) */
@media (min-width: 1024px) {
  .lg\:h-auto { height: auto; }
}

/* Carousel indicators */
.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.carousel-indicator {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  transition: all 200ms;
  padding: 0;
}

.carousel-indicator:hover {
  background-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

.carousel-indicator.active {
  background-color: var(--cyan-400);
  transform: scale(1.2);
}

.carousel-indicator:focus {
  outline: 2px solid var(--cyan-400);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .carousel-indicators {
    display: none;
  }
}

/* Section divider */
.section-divider .content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.section-divider .content::before,
.section-divider .content::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--gray-200);
}

.section-divider svg {
  margin: 0;
  flex-shrink: 0;
}

/* absolutely positioned images */
.abs-dragonfly {
  margin-top: -108px;
  margin-left: -44px;
  margin-bottom: -22px;
}

@media (min-width: 768px) {
  .abs-dragonfly {
    margin-top: -216px;
    margin-left: 0;
    margin-bottom: -22px;
  }
}

@media (min-width: 1280px) {
  .abs-dragonfly {
    margin-bottom: -78px;
  }
}

/* Accordion styles */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease-in-out;
}

/* Only apply collapsed state on mobile, not on lg+ */
@media (max-width: 1023px) {
  .accordion-content:not(.is-expanded) {
    max-height: 0;
  }
}

/* On lg and above, always show content */
@media (min-width: 1024px) {
  .accordion-content {
    max-height: none !important;
    overflow: visible;
    transition: none;
  }

  /* Disable accordion buttons at lg+ */
  [aria-controls*="accordion-content-"] {
    pointer-events: none;
    cursor: default;
    padding-right: 0;
  }

  /* Hide plus icon at lg+ */
  [aria-controls*="accordion-content-"]::after {
    display: none;
  }

  /* ROI accordion: keep buttons interactive and content hidden in cards at lg+; content is rendered into #roi-accordion-details */
  [aria-controls^="roi-accordion-content-"] {
    pointer-events: auto;
    cursor: pointer;
  }

  [id^="roi-accordion-content-"] {
    max-height: 0 !important;
    overflow: hidden;
  }
}

/* Hide focus state for mouse/touch, keep for keyboard navigation */
[aria-controls*="accordion-content-"]:focus:not(:focus-visible) {
  outline: none;
}

/* Accordion button positioning and padding for icon */
[aria-controls*="accordion-content-"] {
  position: relative;
  padding-right: 48px;
}

/* Plus icon as pseudo element */
[aria-controls*="accordion-content-"]::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"%3E%3Cg clip-path="url(%23clip0_1222_849)"%3E%3Cpath d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C1.93277e-07 4.02944 4.02944 1.93283e-07 9 0ZM9 1.7998C5.02355 1.7998 1.7998 5.02355 1.7998 9C1.7998 12.9764 5.02355 16.2002 9 16.2002C12.9764 16.2002 16.2002 12.9764 16.2002 9C16.2002 5.02355 12.9764 1.7998 9 1.7998ZM9.4502 8.5498H12.5996V9.4502H9.4502V12.5996H8.5498V9.4502H5.40039V8.5498H8.5498V5.40039H9.4502V8.5498Z" fill="black"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_1222_849"%3E%3Crect width="18" height="18" rx="9" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"%3E%3Cg clip-path="url(%23clip0_1222_849)"%3E%3Cpath d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C1.93277e-07 4.02944 4.02944 1.93283e-07 9 0ZM9 1.7998C5.02355 1.7998 1.7998 5.02355 1.7998 9C1.7998 12.9764 5.02355 16.2002 9 16.2002C12.9764 16.2002 16.2002 12.9764 16.2002 9C16.2002 5.02355 12.9764 1.7998 9 1.7998ZM9.4502 8.5498H12.5996V9.4502H9.4502V12.5996H8.5498V9.4502H5.40039V8.5498H8.5498V5.40039H9.4502V8.5498Z" fill="black"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_1222_849"%3E%3Crect width="18" height="18" rx="9" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transition: transform 200ms ease-in-out;
}

/* Rotate icon when expanded */
[aria-expanded="true"]::after {
  transform: rotate(45deg);
  color: var(--cyan-700);
}

/* Accordion card styling */
.accordion-card {
  background-color: transparent;
  color: white;
  box-shadow: inset 0 0 100px rgba(255, 255, 255, 0);
  transition: box-shadow 400ms;
}

.accordion-card:hover {
  box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.1);
}

/* Change background and text color when expanded */
.accordion-card:has([aria-expanded="true"]) {
  background-color: white;
  color: var(--gray-950);
}

/* Span color styling based on expanded state - cyan variant */
.accordion-btn-cyan[aria-expanded="false"] span:first-child {
  color: var(--cyan-400);
}

.accordion-btn-cyan[aria-expanded="true"] span {
  color: var(--cyan-700);
}

/* Enterprise demo form overlay */
.enterprise-form-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background-color: rgb(8, 30, 44);
  background-color: rgba(8, 30, 44, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.enterprise-form-overlay.is-open {
  display: flex;
}

.enterprise-form-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 2rem;
  background-color: var(--white);
}

.enterprise-form-close {
  position: absolute;
  top: 14px;
  right: 14px;
  cursor: pointer;
  z-index: 1;
  width: 24px;
  height: 24px;
  padding: 0;
  box-sizing: border-box;
  color: var(--cyan-700);
  background-color: currentColor;
  mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"%3E%3Cg clip-path="url(%23clip0_1222_849)"%3E%3Cpath d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C1.93277e-07 4.02944 4.02944 1.93283e-07 9 0ZM9 1.7998C5.02355 1.7998 1.7998 5.02355 1.7998 9C1.7998 12.9764 5.02355 16.2002 9 16.2002C12.9764 16.2002 16.2002 12.9764 16.2002 9C16.2002 5.02355 12.9764 1.7998 9 1.7998ZM9.4502 8.5498H12.5996V9.4502H9.4502V12.5996H8.5498V9.4502H5.40039V8.5498H8.5498V5.40039H9.4502V8.5498Z" fill="black"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_1222_849"%3E%3Crect width="18" height="18" rx="9" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
  mask-size: 18px 18px;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"%3E%3Cg clip-path="url(%23clip0_1222_849)"%3E%3Cpath d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C1.93277e-07 4.02944 4.02944 1.93283e-07 9 0ZM9 1.7998C5.02355 1.7998 1.7998 5.02355 1.7998 9C1.7998 12.9764 5.02355 16.2002 9 16.2002C12.9764 16.2002 16.2002 12.9764 16.2002 9C16.2002 5.02355 12.9764 1.7998 9 1.7998ZM9.4502 8.5498H12.5996V9.4502H9.4502V12.5996H8.5498V9.4502H5.40039V8.5498H8.5498V5.40039H9.4502V8.5498Z" fill="black"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_1222_849"%3E%3Crect width="18" height="18" rx="9" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
  -webkit-mask-size: 18px 18px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transform: rotate(45deg);
  transition: transform 200ms;
}

.enterprise-form-close:hover,
.enterprise-form-close:focus-visible {
  transform: rotate(45deg) scale(1.05);
}

@media (min-width: 768px) {
  .enterprise-form-overlay {
    padding: 1rem;
  }
  .enterprise-form-container {
    border-radius: 0.75rem;
    max-width: 40rem;
    max-height: 100%;
    height: auto;
  }
}

/* Hero fish figure */
.hero-fish-figure {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  max-width: 330px;
  height: 306px;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: auto 98%;
  background-image: url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-352x299.png');
  background-image: -webkit-image-set(
    url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-352x299.webp') 1x,
    url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-352x299.png') 1x
  );
  background-image: image-set(
    url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-352x299.webp') type('image/webp'),
    url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-352x299.png') type('image/png')
  );
}

.alt-hero-fish-figure {
  position: absolute;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  background-position: right bottom;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .hero-blur-bg {
    overflow: hidden;
  }

  .hero-blur-bg::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 25%;
    left: -25%;
    width: 1204px;
    height: 1440px;
    transform: rotate(-50deg);
    border-radius: 1440px;
    opacity: 0.17;
    background: var(--Cyan-700, #0E738F);
    mix-blend-mode: plus-lighter;
    filter: blur(150px);
  }
  
  .hero-fish-figure {
    top: 4%;
    height: 90%;
    width: calc(50% - 20px);
    max-width: unset;
    background-size: auto 100%;
    background-image: url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-813x685.png');
    background-image: -webkit-image-set(
      url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-813x685.webp') 1x,
      url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-813x685.png') 1x
    );
    background-image: image-set(
      url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-813x685.webp') type('image/webp'),
      url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-813x685.png') type('image/png')
    );
  }
}

@media (min-width: 1024px) {
  .alt-hero-blur-bg {
    overflow: hidden;
  }

  .alt-hero-blur-bg::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 25%;
    left: -25%;
    width: 1204px;
    height: 1440px;
    transform: rotate(-50deg);
    border-radius: 1440px;
    opacity: 0.17;
    background: var(--Cyan-700, #0E738F);
    mix-blend-mode: plus-lighter;
    filter: blur(150px);
  }

  .alt-hero-fish-figure {
    top: 4%;
    height: 90%;
    width: calc(50% - 20px);
    max-width: unset;
    background-size: auto 100%;
    background-image: url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-813x685.png');
    background-image: -webkit-image-set(
      url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-813x685.webp') 1x,
      url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-813x685.png') 1x
    );
    background-image: image-set(
      url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-813x685.webp') type('image/webp'),
      url('https://cdn.oreillystatic.com/oreilly/images/enterprise-hero-fish-813x685.png') type('image/png')
    );
  }
}

/* Blurred gradient background */