.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}
.cta-glow {
  box-shadow: 0 0 20px rgba(185, 26, 36, 0.4);
}
.marker-highlight {
  background: linear-gradient(120deg, #ffd700 0%, #ffd700 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  background-position: 0 88%;
}
.review-card-shadow {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
}

/* Global Responsive Fixes */
* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}

html {
  overflow-x: hidden;
}
@media (max-width: 765px) {
  .header {
    top: 2rem !important;
  }
}
@media (max-width: 735px) {
  .header {
    top: 3rem !important;
  }
}
@media (max-width: 404px) {
  .header {
    top: 4rem !important;
  }
  .off {
    font-size: 20px !important;
  }
  .text-headline-xl {
    margin-top: 40px !important;
  }
}

/* Add this to your existing style block */

/* Fix for 320px screens */
@media (max-width: 400px) {
  /* Header positioning */
  .header {
    top: 1.9rem !important;
    padding-bottom: 12px !important; /* Add this */
    height: auto !important; /* Add this */
    min-height: 56px !important; /* Add this */
  }

  /* Fix alert bar spacing */
  .fixed.top-0 {
    font-size: 10px !important;
    padding: 6px 8px !important;
  }

  /* Smaller text sizes */
  .text-headline-xl {
    font-size: 26px !important;
    line-height: 1.2 !important;
    margin-top: 20px !important;
  }

  .text-headline-lg {
    font-size: 24px !important;
  }

  .text-headline-md {
    font-size: 18px !important;
  }

  .text-body-lg {
    font-size: 16px !important;
  }

  .text-body-md {
    font-size: 14px !important;
  }

  /* Fix CTA buttons */
  .cta-button,
  .bg-tertiary.text-on-tertiary.font-extrabold.text-2xl {
    font-size: 20px !important;
    padding: 12px 20px !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Fix comparison cards */
  .grid.grid-cols-1.md\:grid-cols-2 {
    gap: 12px !important;
  }

  /* Fix review cards */
  .h-64 {
    height: 180px !important;
  }

  /* Fix FAQ padding */
  .p-6 {
    padding: 16px !important;
  }

  .ml-14 {
    margin-left: 0 !important;
  }

  /* Fix sidebar */
  .lg\:block {
    display: none !important;
  }

  /* Fix mobile CTA */
  .fixed.bottom-16 {
    bottom: 10px !important;
  }

  .fixed.bottom-16 a {
    font-size: 14px !important;
    padding: 10px 16px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 340px) {
  .header {
    top: 3.5rem !important;
  }

  .text-headline-xl {
    font-size: 22px !important;
  }

  .text-headline-lg {
    font-size: 20px !important;
  }

  .px-margin-mobile {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Responsive fixes for 320px */
@media (max-width: 400px) {
  .top-alert {
    font-size: 9px !important;
    padding: 4px 6px !important;
    line-height: 1.3 !important;
  }

  .header {
    height: 48px !important;
    top: 32px !important;
  }

  .header .text-headline-md {
    font-size: 16px !important;
  }

  .header .px-6 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .header .py-2 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  main {
    padding-top: 80px !important;
  }

  /* Fix card padding */
  .rounded-2xl.p-8,
  .rounded-3xl.p-8 {
    padding: 16px !important;
  }

  /* Fix grid gaps */
  .gap-8 {
    gap: 16px !important;
  }

  /* Fix review images */
  .h-64 {
    height: 160px !important;
  }

  /* Fix footer */
  footer .gap-6 {
    gap: 12px !important;
  }

  footer .text-xs {
    font-size: 10px !important;
  }
}

/* Hide sidebar on very small screens */
@media (max-width: 1023px) {
  .lg\:block.w-72 {
    display: none !important;
  }
}

@media (max-width: 400px) {
  .header {
    top: 1.9rem !important;
  }
  .fixed.top-0 {
    font-size: 9px !important;
    padding: 4px 8px !important;
  }
  .text-headline-xl {
    font-size: 24px !important;
    margin-top: 30px !important;
  }
  .text-headline-lg {
    font-size: 22px !important;
  }
  .text-2xl {
    font-size: 20px !important;
  }
  .px-16 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .py-6 {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .h-64 {
    height: 160px !important;
  }
  .p-8 {
    padding: 16px !important;
  }
  .gap-8 {
    gap: 16px !important;
  }
  .lg\:block {
    display: none !important;
  }
  .fixed.bottom-16 {
    bottom: 10px !important;
  }
  .fixed.bottom-16 a {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
}