@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --background: 0 0% 100%;
  --foreground: 220 25% 10%;
  --card: 220 30% 97%;
  --card-foreground: 220 25% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 25% 10%;
  --primary: 225 75% 52%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 20% 94%;
  --secondary-foreground: 220 25% 10%;
  --muted: 220 15% 94%;
  --muted-foreground: 220 10% 46%;
  --accent: 225 75% 52%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 13% 90%;
  --input: 220 13% 90%;
  --ring: 225 75% 52%;
  --radius: 0.75rem;
  --hero-gradient: linear-gradient(135deg, hsl(220, 25%, 8%) 0%, hsl(225, 35%, 15%) 50%, hsl(220, 25%, 8%) 100%);
  --card-gradient: linear-gradient(145deg, hsl(0, 0%, 100%) 0%, hsl(220, 25%, 97%) 100%);
  --glow-primary: 0 0 40px hsl(225 75% 52% / 0.2);
  --glow-subtle: 0 0 60px hsl(225 75% 52% / 0.06);
}

.gradient-hero {
  background: var(--hero-gradient);
}

.gradient-card {
  background: var(--card-gradient);
}

.glow-primary {
  box-shadow: var(--glow-primary);
}

.glow-subtle {
  box-shadow: var(--glow-subtle);
}

.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, hsl(225 75% 48%), hsl(200 85% 45%));
}

.font-heading {
  font-family: 'Space Grotesk', sans-serif;
}

.font-body {
  font-family: 'Inter', sans-serif;
}

body {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
}

/* ==========================================================================
   Bypass landing (templates/home/bypass.html) — bypassservice.com
   ========================================================================== */
body.page-bypass-landing {
  margin: 0;
  padding: 0;
}

/* Keep Inter for bypass (custom.css defaults headings to Space Grotesk). */
body.page-bypass-landing h1,
body.page-bypass-landing h2,
body.page-bypass-landing h3,
body.page-bypass-landing h4,
body.page-bypass-landing h5,
body.page-bypass-landing h6 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Hero H1 (home/bypass.html): line 1 is a single non-wrapping line; ? stays with "Verification". */
body.page-bypass-landing .hero-h1 {
  max-width: 100%;
  padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

body.page-bypass-landing .hero-h1-line1 {
  display: block;
  white-space: nowrap;
  word-wrap: normal;
  overflow-wrap: normal;
  word-break: normal;
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
}

body.page-bypass-landing .hero-h1-line2 {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Problem section intro lead (bypass.html: "You've been there…"). */
body.page-bypass-landing #problem .page-wrap > div.max-w-3xl > p {
  text-align: center;
}