/*
  Local copy of the company website design tokens.
  Source: ../website/src/index.css, copied here to keep this funnel visually
  aligned without loading external company-site assets.
*/
:root {
  --ch-background-hsl: 30 20% 99%;
  --ch-foreground-hsl: 220 15% 15%;
  --ch-card-hsl: 0 0% 100%;
  --ch-primary-hsl: 168 45% 40%;
  --ch-primary-dark-hsl: 168 45% 32%;
  --ch-secondary-hsl: 30 15% 95%;
  --ch-muted-hsl: 30 10% 94%;
  --ch-muted-foreground-hsl: 220 10% 45%;
  --ch-accent-hsl: 15 85% 60%;
  --ch-accent-hover-hsl: 15 82% 54%;
  --ch-highlight-hsl: 25 100% 95%;
  --ch-highlight-foreground-hsl: 15 85% 45%;
  --ch-border-hsl: 30 15% 90%;
  --ch-ring-hsl: 168 45% 40%;

  --background: hsl(var(--ch-background-hsl));
  --foreground: hsl(var(--ch-foreground-hsl));
  --card: hsl(var(--ch-card-hsl));
  --primary: hsl(var(--ch-primary-hsl));
  --primary-dark: hsl(var(--ch-primary-dark-hsl));
  --secondary: hsl(var(--ch-secondary-hsl));
  --muted-surface: hsl(var(--ch-muted-hsl));
  --muted-foreground: hsl(var(--ch-muted-foreground-hsl));
  --accent: hsl(var(--ch-accent-hsl));
  --accent-dark: hsl(var(--ch-accent-hover-hsl));
  --highlight: hsl(var(--ch-highlight-hsl));
  --highlight-ink: hsl(var(--ch-highlight-foreground-hsl));
  --border: hsl(var(--ch-border-hsl));
  --ring: hsl(var(--ch-ring-hsl));

  /* Bridge the existing static funnel variable names to the website theme. */
  --bg: var(--background);
  --ink: var(--foreground);
  --muted: var(--muted-foreground);
  --soft: var(--secondary);
  --line: var(--border);
  --teal-tint: hsl(var(--ch-primary-hsl) / 0.08);

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Newsreader', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.03);
  --shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.05);
  --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.05);
  --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.05);
  --shadow-xl: 0 16px 40px hsl(var(--ch-primary-hsl) / 0.10);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  color: var(--foreground);
  letter-spacing: 0;
}

.hero,
.final,
.page {
  background: linear-gradient(180deg, hsl(var(--ch-primary-hsl) / 0.07), var(--background));
}

.presenter {
  background: var(--secondary);
}

.classbanner,
.offer-strip {
  background: var(--primary);
  color: #fff;
}

.btn,
.submit,
button[type="submit"] {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 10px 24px hsl(var(--ch-accent-hsl) / 0.20);
}

.btn:hover,
.submit:hover,
button[type="submit"]:hover {
  background: var(--accent-dark);
}

input,
textarea,
select {
  color: var(--foreground);
  background: var(--card);
  border-color: var(--border);
  border-radius: var(--radius);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px hsl(var(--ch-ring-hsl) / 0.12);
}

.optin,
.insight,
.step,
.guides,
.guide-card,
.offer,
.deliverable,
.bonus,
.checkout-card,
.order,
.guarantee,
.mock-card,
.guide-tile,
.icon-tile,
.why-tip {
  background-color: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

.optin,
.insight,
.step,
.guides,
.offer,
.deliverable,
.bonus,
.checkout-card,
.order,
.guarantee {
  border-radius: var(--radius-lg);
}

.eyebrow,
.value,
.session-badge,
.step .organs span {
  background: var(--highlight);
  color: var(--highlight-ink);
}

.icon-tile,
.deliverable .icon,
.bonus .icon,
.guarantee .icon,
.guide-card .gc-ico,
.insight .ico {
  background: var(--teal-tint);
  color: var(--primary);
}

.video {
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px hsl(var(--ch-primary-hsl) / 0.18);
}

footer {
  background: hsl(168 20% 18%);
}