/* Keep the header brand mark readable across navigation states. */
header a[href="index.html"]:first-of-type > span:first-child {
  color: #1A1A1A !important;
}

header a[href="index.html"]:first-of-type > span:first-child > span {
  color: #6a1b9a !important;
}

header a[href="index.html"]:first-of-type > span:first-child > span:first-child {
  color: #1A1A1A !important;
}

header a[href="index.html"]:first-of-type > span:first-child > span:last-child {
  color: #6a1b9a !important;
}

header.hero-nav-readable.bg-transparent a[href="index.html"]:first-of-type > span:first-child,
header[class*="bg-[#1A1A1A]"] a[href="index.html"]:first-of-type > span:first-child,
header.bg-\[\#1A1A1A\] a[href="index.html"]:first-of-type > span:first-child {
  color: #fff !important;
}

header.hero-nav-readable.bg-transparent a[href="index.html"]:first-of-type > span:first-child > span:first-child:nth-last-child(2),
header[class*="bg-[#1A1A1A]"] a[href="index.html"]:first-of-type > span:first-child > span:first-child:nth-last-child(2),
header.bg-\[\#1A1A1A\] a[href="index.html"]:first-of-type > span:first-child > span:first-child:nth-last-child(2) {
  color: #fff !important;
}

.language-flag {
  display: inline-block;
  width: 1.25rem;
  height: 0.875rem;
  flex: 0 0 auto;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.12);
}

[x-cloak] {
  display: none !important;
}

.legal-page-main {
  padding-top: 120px;
}

@media (min-width: 1024px) {
  .legal-page-main {
    padding-top: 144px;
  }
}

/* Header breakpoint: use the hamburger only below tablet/desktop width. */
@media (min-width: 768px) {
  header .md\:hidden {
    display: none !important;
  }

  header .hidden.md\:flex {
    display: flex !important;
  }

  header .hidden.md\:inline-flex {
    display: inline-flex !important;
  }
}

/* Compact the desktop header just before the original CTA begins to overflow. */
@media (min-width: 768px) and (max-width: 1327px) {
  header > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  header a[href="index.html"]:first-of-type {
    gap: 0.125rem !important;
    flex-shrink: 0;
  }

  header a[href="index.html"]:first-of-type > span:first-child {
    font-size: 1.875rem !important;
    letter-spacing: 0.04em !important;
  }

  header a[href="index.html"]:first-of-type > span:nth-child(2),
  header a[href="index.html"]:first-of-type > span:nth-child(3) {
    display: none !important;
  }

  header nav.hidden.md\:flex {
    gap: 0 !important;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }

  header nav.hidden.md\:flex > a,
  header nav.hidden.md\:flex > div > a {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap;
  }

  header div.hidden.md\:flex {
    gap: 0.35rem !important;
    flex: 0 0 auto;
  }

  header div.hidden.md\:flex [x-data="langSelector"] > button {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
    gap: 0.25rem !important;
    font-size: 0.6875rem !important;
  }

  header div.hidden.md\:flex [x-data="langSelector"] > button > svg:first-child,
  header div.hidden.md\:flex [x-data="langSelector"] > button > svg:last-child {
    display: none !important;
  }

  header div.hidden.md\:flex [x-data="langSelector"] .language-flag {
    width: 1rem;
    height: 0.7rem;
  }

  header div.hidden.md\:flex > a,
  header a.hidden.md\:inline-flex {
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap;
  }

  header div.hidden.md\:flex > a svg {
    display: none !important;
  }
}

/* Desktop layout lock: only apply on wide desktop screens. */
@media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
  :root {
    --desktop-min-width: 1200px;
  }

  html {
    min-width: var(--desktop-min-width);
    overflow-x: auto;
  }

  body {
    min-width: var(--desktop-min-width);
  }

  .sm\:block,
  .lg\:block {
    display: block !important;
  }

  .md\:flex,
  .sm\:flex-row,
  .md\:flex-row {
    display: flex !important;
  }

  .sm\:flex-row,
  .md\:flex-row {
    flex-direction: row !important;
  }

  .md\:w-auto {
    width: auto !important;
  }

  .sm\:justify-start {
    justify-content: flex-start !important;
  }

  .sm\:gap-4 {
    gap: 1rem !important;
  }

  .lg\:gap-4 {
    gap: 1rem !important;
  }

  .lg\:gap-8 {
    gap: 2rem !important;
  }

  .lg\:gap-12 {
    gap: 3rem !important;
  }

  .lg\:gap-20 {
    gap: 5rem !important;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .md\:grid-cols-2,
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .md\:grid-cols-3,
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .lg\:col-span-1 {
    grid-column: span 1 / span 1 !important;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2 !important;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3 !important;
  }

  .sm\:p-6 {
    padding: 1.5rem !important;
  }

  .lg\:p-6 {
    padding: 1.5rem !important;
  }

  .lg\:p-8 {
    padding: 2rem !important;
  }

  .lg\:p-10 {
    padding: 2.5rem !important;
  }

  .sm\:px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .lg\:px-10 {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }

  .lg\:py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .lg\:py-20 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  .lg\:py-28 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }

  .lg\:py-32 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }

  .lg\:pt-\[88px\] {
    padding-top: 88px !important;
  }

  .sm\:mb-5 {
    margin-bottom: 1.25rem !important;
  }

  .lg\:mb-6 {
    margin-bottom: 1.5rem !important;
  }

  .lg\:mb-18 {
    margin-bottom: 4.5rem !important;
  }

  .lg\:mb-20 {
    margin-bottom: 5rem !important;
  }

  .lg\:mt-6 {
    margin-top: 1.5rem !important;
  }

  .lg\:mt-8 {
    margin-top: 2rem !important;
  }

  .lg\:mt-10 {
    margin-top: 2.5rem !important;
  }

  .lg\:h-\[88px\] {
    height: 88px !important;
  }

  .lg\:h-\[480px\] {
    height: 480px !important;
  }

  .lg\:min-h-\[92vh\] {
    min-height: 92vh !important;
  }

  .sm\:text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
  }

  .sm\:text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
  }

  .sm\:text-\[13px\] {
    font-size: 13px !important;
  }

  .sm\:text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }

  .md\:text-4xl {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
  }

  .md\:text-5xl {
    font-size: 3rem !important;
    line-height: 1 !important;
  }

  .lg\:text-\[34px\] {
    font-size: 34px !important;
  }

  .lg\:text-\[56px\] {
    font-size: 56px !important;
  }

  .lg\:text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1280px) {
  .xl\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  }
}