@import "tailwindcss";
@import "tw-animate-css";
/* Removed font-optimization.css - fonts are now loaded via Next.js localFont in layouts */
@custom-variant dark (&:is(.dark *));
/* @tailwind utilities removed - included in Tailwind v4 @import */

/* Responsive sprite avatars */
@media (min-width: 640px) {
  .testimonial-user-avatar {
    background-position: var(--desktop-bg-pos) !important;
    background-size: var(--desktop-bg-size) !important;
  }
}

:root {
  /* Font variables are defined by Next.js font loaders in layouts - DO NOT hardcode here */
  /* Hardcoding causes Next.js to bundle all fonts into shared chunks */
  --font-liberation-sans: "liberation_sansregular", sans-serif;
  /* Inter system font - no external requests */
  --font-inter: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --radius: 0.625rem;
  --background: #f2f2f2;
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

@theme inline {
  --breakpoint-2xs: 23rem;
  --breakpoint-xs: 26rem;
  --breakpoint-2lg: 1037px;
  --breakpoint-3lg: 1245px;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* Font variables defined dynamically by Next.js font loaders */
  --color-sky-light: #52bdda;
  --color-sky-mid: #54c4df;
  --color-sky-bright: #9bd8e6;
  --color-sky-dark: #157293;

  --color-ocean-light: #65cee9;
  --color-ocean-mid: #3faed2;
  --color-ocean-dark: #3399cc;

  /* Gradient using them */
  --color-gradient-main: linear-gradient(
    54.08deg,
    var(--color-sky-light) -6.17%,
    var(--color-sky-mid) 20.58%,
    var(--color-sky-light) 48.22%,
    var(--color-sky-bright) 74.07%
  );

  --color-gradient-ocean: radial-gradient(
    382.07% 71.4% at 85.29% 105.09%,
    var(--color-ocean-light) 0%,
    var(--color-ocean-mid) 31%,
    var(--color-ocean-dark) 87%
  );

  --color-gradient-blue-cta: radial-gradient(
    30% 80% at 15% 50%,
    #65cee9 0%,
    #65cee9 30%,
    #48b3da 50%,
    #39c 100%
  );

  --color-gradient-gray: linear-gradient(180deg, #fff 0%, #ececec 100%);

  --color-gradient-shape:
    linear-gradient(
      70.54deg,
      #52bdda -67.18%,
      #54c4df 2.13%,
      #53c2de 10.05%,
      #52bdda 63.52%,
      #9bd8e6 130.85%
    ),
    url("/assets/images/home/background-shape.webp");

  --text-5xl: 3rem;
  --leading-5xl: 1.2;
  --text-8xl: 6rem;
  --leading-8xl: 1.1;
  --text-4xl: 2.25rem;
  --leading-4xl: 1.25;
  --text-2xl: 1.5rem;
  --leading-2xl: 1.3;
  --text-xl: 1.25rem;
  --leading-xl: 1.4;
  --text-l: 1.125rem;
  --leading-l: 1.5;
  --text-m: 1rem;
  --leading-m: 1.6;
  --text-s: 0.875rem;
  --leading-s: 1.6;
  --leading-normal: normal;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --container-lg: 1070px;
  --container-2xl: 1350px;
}

body {
  /* Use system font as fallback - layouts will override with their specific fonts */
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    "Roboto",
    "Helvetica Neue",
    Arial,
    sans-serif;
  background-color: var(--background);
}

@utility bg-gradient-shape {
  background:
    linear-gradient(
      70.54deg,
      #52bdda -67.18%,
      #54c4df 2.13%,
      #53c2de 10.05%,
      #52bdda 63.52%,
      #9bd8e6 130.85%
    ),
    url("/assets/images/home/background-shape.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain, cover;
  background-blend-mode: soft-light;
}
/* Define reusable typography utilities */
@layer utilities {
  /* Headings */
  .heading-3xl {
    @apply text-5xl leading-5xl font-bold lg:text-8xl lg:leading-8xl;
  }

  .bg-hero-shape {
    background:
      url("/assets/images/home/background-shape.webp") left center no-repeat,
      linear-gradient(54.08deg, #52bdda -6.17%, #54c4df 20.58%, #52bdda 48.22%, #9bd8e6 74.07%);
    background-size: contain, cover;
  }
  .bg-radial-darken {
    background:
      radial-gradient(
        102.31% 387.06% at 1.73% 50.7%,
        rgba(101, 206, 233, 0.7) 0%,
        rgba(72, 179, 218, 0.7) 33%,
        rgba(63, 174, 210, 0.7) 57%,
        rgba(51, 121, 204, 0.7) 100%
      ),
      url("/assets/images/home/dr-bg.webp");
    background-blend-mode: darken;
    background-size: cover;
    background-position: center;
  }
  .bg-gradient-shape-1 {
    background:
      linear-gradient(
        70.54deg,
        #52bdda -67.18%,
        #54c4df 2.13%,
        #53c2de 10.05%,
        #52bdda 63.52%,
        #9bd8e6 130.85%
      ),
      url("/assets/images/home/background-shape.webp") no-repeat center;
    background-size: cover;
    background-blend-mode: soft-light; /* try overlay, soft-light, or darken for variants */
  }

  .heading-l {
    @apply text-2xl leading-2xl font-bold lg:text-4xl lg:leading-4xl;
  }

  .heading-m {
    @apply text-xl leading-xl font-bold lg:text-2xl lg:leading-2xl;
  }

  .heading-s {
    @apply text-l leading-l font-bold lg:text-xl lg:leading-xl;
  }

  .heading-xs {
    @apply text-m leading-m font-bold lg:text-l lg:leading-l;
  }

  /* Body */
  .body-xl-bold {
    @apply text-xl leading-xl font-semibold;
  }

  .body-xl-regular {
    @apply text-xl leading-xl font-normal;
  }

  .body-l-bold {
    @apply text-l leading-l font-semibold;
  }

  .body-l-regular {
    @apply text-l leading-l font-normal;
  }

  .body-m-bold {
    @apply text-m leading-m font-semibold;
  }

  .body-m-regular {
    @apply text-m leading-m font-normal;
  }

  .body-s-bold {
    @apply text-s leading-s font-semibold;
  }

  .body-s-regular {
    @apply text-s leading-s font-normal;
  }

  /* Links */
  .link-xl-bold {
    @apply text-xl leading-xl font-semibold underline;
  }

  .link-xl-regular {
    @apply text-xl leading-xl font-normal underline;
  }

  .link-l-bold {
    @apply text-l leading-l font-semibold underline;
  }

  .link-l-regular {
    @apply text-l leading-l font-normal underline;
  }

  .link-m-bold {
    @apply text-m leading-m font-semibold underline;
  }

  .link-m-regular {
    @apply text-m leading-m font-normal underline;
  }

  .link-s-bold {
    @apply text-s leading-s font-semibold underline;
  }

  .link-s-regular {
    @apply text-s leading-s font-normal underline;
  }
  .bg-gradient-hero {
    background: var(--color-gradient-main);
  }
  .bg-gradient-ocean {
    background: var(--color-gradient-ocean);
  }
  .bg-gradient-gray {
    background: var(--color--gradient-gray);
  }
  .bg-gradient-blue-cta {
    background: linear-gradient(95deg, #65c6e7 6%, #37b4e1 22%, #1e9ac8 48%);
  }

  @media (min-width: 768px) {
    .bg-gradient-blue-cta {
      background: linear-gradient(to right, #65c6e7 30%, #37b4e1 60%, #1e9ac8 80%);
    }
  }

  .font-liberation {
    font-family: var(--font-liberation-sans), sans-serif;
  }
  .font-inter {
    font-family: var(--font-inter), sans-serif;
  }
  .font-montserrat {
    font-family: var(--font-montserrat), sans-serif;
  }
  .bg-downsell-message {
    background:
      radial-gradient(circle at center, #fff 0%, #fafafb 30%, #eeeeef 60%, #e6e7e8 100%), #d8d8d9;
  }
  @media (max-width: 767.98px) {
    .bg-downsell-message {
      background: #f2f2f3;
    }
  }
  .bg-feature-box {
    background: linear-gradient(180deg, #fff 0%, #ddd 100%), #e9e9e9;
  }
  @media (max-width: 767.98px) {
    .bg-feature-box {
      background: #f9f9f9;
    }
  }
  .bg-countdown-timer {
    background: linear-gradient(
      262deg,
      #ed1c24 0.17%,
      #a91c24 28.53%,
      #ed1c24 57.97%,
      #a91c24 84.15%,
      #ed1c24 109.23%
    );
  }

  .bg-badge {
    background: linear-gradient(
      270deg,
      #65cee9 -5.23%,
      #48b3da 25.17%,
      #3faed2 55.57%,
      #39c 98.13%
    );
  }

  /* .bg-thankyou-welcome {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 23.02%, rgba(0, 0, 0, 0.2) 107.82%), #20b3da;

    background-blend-mode: multiply, normal;
  } */
  /* .bg-thankyou-features {
    background-image: url("/assets/images/thankyou-features-list-grp.webp");
    background-repeat: no-repeat;
  }
  .bg-thankyou-cards-icons {
    background-image: url("/assets/images/thankyou-welcome-cards-icons-v1.webp");
    background-repeat: no-repeat;
  } */
  .bg-thankyou-grp {
    background-image: url("/assets/images/thankyou-grp.webp");
    background-repeat: no-repeat;
  }
  .bg-silver {
    background: linear-gradient(
      264deg,
      #fff -14.71%,
      #f9f9f9 -11.72%,
      #d1d3d4 9.2%,
      #dedfe0 17.17%,
      #fff 38.09%,
      #f9f9f9 41.08%,
      #d1d3d4 62.99%,
      #dedfe0 68.97%,
      #fff 84.91%
    );
  }
  .bg-contact {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(180deg, #65cee9 0.26%, #48b3da 21.34%, #3faed2 60.86%, #39c 96.8%);
  }
  .bg-contact-grp {
    background-image: url("/assets/images/contact-grp-v1.webp");
    background-repeat: no-repeat;
  }
  .bg-thankyou-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(173, 173, 173, 0.2) 100%);
  }
  .font-poppins {
    /* Policy pages font - loaded via Google Fonts */
    font-family: var(--font-poppins-policy, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  }
  .font-roboto {
    /* Policy pages font - loaded via Google Fonts */
    font-family: var(--font-roboto-policy, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  }
  /* Ensure anchor scroll accounts for header height */
  #pricingContainer {
    scroll-margin-top: 80px;
  }

  /* Homepage sprite utilities - ingredients (preserve exact dimensions) */
  .sprite-ingredients {
    background-repeat: no-repeat, no-repeat; /* sprite, fallback */
    display: inline-block;
  }
  /* i1..i6 use a shared sprite first, then a per-tile fallback image to avoid breakage before sprite is added */
  .sprite-ingredients--i1 {
    width: 118px;
    height: 118px;
    background-image: image-set(
      url("/assets/images/home/ingredients-sprite.webp") 1x,
      url("/assets/images/home/ingredients-sprite@2x.webp") 2x
    );
    background-position: 0 0;
    background-size: 708px 118px; /* 6 * 118 = 708 */
  }
  .sprite-ingredients--i2 {
    width: 118px;
    height: 118px;
    background-image: image-set(
      url("/assets/images/home/ingredients-sprite.webp") 1x,
      url("/assets/images/home/ingredients-sprite@2x.webp") 2x
    );
    background-position: -118px 0;
    background-size: 708px 118px;
  }
  .sprite-ingredients--i3 {
    width: 118px;
    height: 118px;
    background-image: image-set(
      url("/assets/images/home/ingredients-sprite.webp") 1x,
      url("/assets/images/home/ingredients-sprite@2x.webp") 2x
    );
    background-position: -236px 0;
    background-size: 708px 118px;
  }
  .sprite-ingredients--i4 {
    width: 118px;
    height: 118px;
    background-image: image-set(
      url("/assets/images/home/ingredients-sprite.webp") 1x,
      url("/assets/images/home/ingredients-sprite@2x.webp") 2x
    );
    background-position: -354px 0;
    background-size: 708px 118px;
  }
  .sprite-ingredients--i5 {
    width: 118px;
    height: 118px;
    background-image: image-set(
      url("/assets/images/home/ingredients-sprite.webp") 1x,
      url("/assets/images/home/ingredients-sprite@2x.webp") 2x
    );
    background-position: -472px 0;
    background-size: 708px 118px;
  }
  .sprite-ingredients--i6 {
    width: 118px;
    height: 118px;
    background-image: image-set(
      url("/assets/images/home/ingredients-sprite.webp") 1x,
      url("/assets/images/home/ingredients-sprite@2x.webp") 2x
    );
    background-position: -590px 0;
    background-size: 708px 118px;
  }
}
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}
@layer components {
  .container-lg {
    @apply mx-auto w-full max-w-full sm:max-w-[640px] md:max-w-[768px] lg:max-w-[1070px]  px-[10px];
  }
}
.container-2xl {
  max-width: var(--container-2xl);
  margin-left: auto;
  margin-right: auto;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }
}

html {
  scroll-behavior: smooth;
}

@media screen and (min-width: 990px) {
  .faq-shadow {
    transition: all 0.2s ease;
  }
  .faq-shadow:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
    background-color: #f6f6f6;
    border-color: #e5e7eb;
  }
}