/* These Leads Suck funnel (sc-110335): the base the Manus app's index.css gave every page.
 * Loaded only by layouts/tls_funnel, and every selector sits under the funnel's .tls-funnel body
 * class, so none of it can reach uphex.com. It lives in the base layer so the Tailwind utilities
 * the pages use still win, exactly as they did in the Manus app. */
@layer base {
  .tls-funnel {
    --tls-primary: oklch(0.50 0.15 145);
    --tls-lime: #bfff00;
    background: #fff;
    color: oklch(0.20 0 0);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .tls-funnel :where(h1, h2, h3, h4, h5, h6) {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .tls-funnel :where(button:not(:disabled), [role="button"]:not([aria-disabled="true"]), a[href], label[for]) {
    cursor: pointer;
  }
}

@layer components {
  /* The Manus app let every flex box shrink below its content. */
  :where(.tls-funnel) .flex {
    min-height: 0;
    min-width: 0;
  }

  /* The Manus app's .container: its padding plus Tailwind's container widths (40rem at sm,
   * 48rem at md, 64rem at lg, 80rem at xl, 96rem at 2xl), as the two combined there. */
  .tls-funnel .tls-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
  }

  @media (min-width: 40rem) {
    .tls-funnel .tls-container {
      max-width: 40rem;
      padding-inline: 1.5rem;
    }
  }

  @media (min-width: 48rem) {
    .tls-funnel .tls-container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .tls-funnel .tls-container {
      max-width: 64rem;
      padding-inline: 2rem;
    }
  }

  @media (min-width: 80rem) {
    .tls-funnel .tls-container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .tls-funnel .tls-container {
      max-width: 96rem;
    }
  }

  /* The AI Prompt Vault order bump on /checkout: dashed until chosen, lime once it is. */
  .tls-funnel .tls-bump {
    border: 2px dashed #d1d5db;
    background-color: #fffde7;
    box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
  }

  .tls-funnel .tls-bump[aria-checked="true"] {
    border: 2px solid #ceff00;
    box-shadow: 0 0 0 3px rgb(206 255 0 / 20%), 0 4px 12px rgb(0 0 0 / 8%);
  }

  .tls-funnel .tls-bump__box {
    border-color: #9ca3af;
    background-color: #fff;
  }

  .tls-funnel .tls-bump[aria-checked="true"] .tls-bump__box {
    border-color: #ceff00;
    background-color: #ceff00;
  }

  .tls-funnel .tls-bump__tick {
    visibility: hidden;
  }

  .tls-funnel .tls-bump[aria-checked="true"] .tls-bump__tick {
    visibility: visible;
  }
}