/* =========================================================
   Your AI Compass - Stylesheet
   Brand: AI Without the Tech Headache
   WCAG 2.2 AA compliant. Mobile-first responsive.
   ========================================================= */

/* -------- 1. Design Tokens -------- */
:root {
  /* Brand colours */
  --navy-deepest: #0F1F38;
  --navy-dark: #162B4D;
  --navy-light: #2A4870;
  --mint: #ABEDD8;
  --mint-deep: #1A9975;
  --text-grey: #9FB3CC;
  --white: #FFFFFF;

  /* Semantic colours */
  --bg: var(--navy-deepest);
  --bg-elevated: var(--navy-dark);
  --bg-card: rgba(42, 72, 112, 0.35);
  --border-subtle: rgba(171, 237, 216, 0.15);
  --border-strong: rgba(171, 237, 216, 0.4);
  --text-primary: var(--white);
  --text-secondary: var(--text-grey);
  --text-accent: var(--mint);
  --text-cta: var(--mint-deep);

  /* Typography */
  --font-family: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
  --fs-hero: clamp(2.25rem, 6vw, 4rem);
  --fs-h1: clamp(2rem, 5vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 4vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 3vw, 1.625rem);
  --fs-h4: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;
  --lh-tight: 1.2;
  --lh-normal: 1.6;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-medium: 960px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* Surfaces */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Effects */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(171, 237, 216, 0.15);
  --shadow-button: 0 4px 16px rgba(26, 153, 117, 0.3);
  --shadow-glow-mint: 0 0 40px rgba(171, 237, 216, 0.2);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* Header */
  --header-height: 72px;
}

/* -------- 2. Reset and Base -------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Background starfield pattern */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(171, 237, 216, 0.4), transparent 50%),
    radial-gradient(1px 1px at 78% 14%, rgba(171, 237, 216, 0.3), transparent 50%),
    radial-gradient(1px 1px at 45% 68%, rgba(171, 237, 216, 0.35), transparent 50%),
    radial-gradient(1px 1px at 88% 78%, rgba(171, 237, 216, 0.25), transparent 50%),
    radial-gradient(1.5px 1.5px at 25% 92%, rgba(171, 237, 216, 0.3), transparent 50%),
    radial-gradient(1px 1px at 62% 35%, rgba(171, 237, 216, 0.2), transparent 50%),
    radial-gradient(1px 1px at 8% 55%, rgba(171, 237, 216, 0.3), transparent 50%),
    radial-gradient(1px 1px at 95% 45%, rgba(171, 237, 216, 0.2), transparent 50%);
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

a {
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-color: rgba(171, 237, 216, 0.4);
  text-underline-offset: 3px;
  transition: color var(--duration-base) var(--ease), text-decoration-color var(--duration-base) var(--ease);
}

a:hover {
  text-decoration-color: var(--mint);
}

input,
textarea,
select {
  font-family: inherit;
  font-size: var(--fs-body);
}

/* -------- 3. Accessibility -------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  padding: var(--sp-3) var(--sp-5);
  background: var(--mint);
  color: var(--navy-deepest);
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--white);
  outline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------- 4. Typography -------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint-deep);
  margin-bottom: var(--sp-4);
}

.lead {
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 60ch;
}

.accent-line {
  display: block;
  width: 80px;
  height: 3px;
  background: var(--mint-deep);
  border-radius: 2px;
  margin: var(--sp-5) 0;
}

.accent-line--centered {
  margin-left: auto;
  margin-right: auto;
}

.text-mint { color: var(--mint); }
.text-mint-deep { color: var(--mint-deep); }
.text-white { color: var(--white); }
.text-center { text-align: center; }

/* -------- 5. Layout -------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.container--narrow { max-width: var(--container-narrow); }
.container--medium { max-width: var(--container-medium); }

section {
  padding-block: clamp(3rem, 8vw, 6rem);
  position: relative;
  z-index: 1;
}

.section-header {
  margin-bottom: var(--sp-7);
  max-width: 700px;
}

.section-header--centered {
  margin-inline: auto;
  text-align: center;
}

/* -------- 6. Buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-body);
  font-weight: 600;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease), background-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
  white-space: nowrap;
  min-height: 48px;
  border: 2px solid transparent;
}

.btn--primary {
  background: var(--mint);
  color: var(--navy-deepest);
  box-shadow: var(--shadow-button);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--white);
  transform: translateY(-2px);
  text-decoration: none;
}

.btn--secondary {
  background: transparent;
  color: var(--mint);
  border-color: var(--mint);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: rgba(171, 237, 216, 0.1);
  text-decoration: none;
  transform: translateY(-2px);
}

.btn--large {
  padding: var(--sp-4) var(--sp-7);
  font-size: 1.0625rem;
  min-height: 56px;
}

.btn--full {
  width: 100%;
}

.btn .arrow {
  transition: transform var(--duration-base) var(--ease);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

/* -------- 7. Header & Navigation -------- */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(15, 31, 56, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 50;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--sp-5);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--white);
  font-weight: 700;
  font-size: 1.125rem;
}

.nav-brand:hover {
  text-decoration: none;
}

.nav-brand svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
}

.nav-menu a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 500;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  transition: color var(--duration-base) var(--ease), background-color var(--duration-base) var(--ease);
}

.nav-menu a:hover,
.nav-menu a:focus-visible,
.nav-menu a[aria-current="page"] {
  color: var(--mint);
  background: rgba(171, 237, 216, 0.08);
}

.nav-menu a[aria-current="page"] {
  font-weight: 600;
}

.nav-cta {
  margin-left: var(--sp-2);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  min-height: 48px;
  min-width: 48px;
  align-items: center;
  justify-content: center;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 880px) {
  .nav-toggle { display: flex; }

  .nav-menu {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--navy-deepest);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--sp-3) var(--gutter) var(--sp-5);
    transform: translateY(-150%);
    transition: transform var(--duration-base) var(--ease);
    align-items: stretch;
  }

  .nav-menu[data-open="true"] {
    transform: translateY(0);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  }

  .nav-menu li { width: 100%; }

  .nav-menu a {
    display: block;
    padding: var(--sp-4);
    border-radius: var(--radius-sm);
  }

  .nav-cta {
    margin: var(--sp-3) 0 0;
    width: 100%;
  }

  .nav-cta .btn {
    width: 100%;
  }
}

/* -------- 8. Hero -------- */
.hero {
  padding-block: clamp(3rem, 10vw, 7rem);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(400px, 60vw, 700px);
  height: clamp(400px, 60vw, 700px);
  background: radial-gradient(circle, rgba(171, 237, 216, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 880px) {
  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-9);
  }
}

.hero-title {
  font-size: var(--fs-hero);
  line-height: 1.1;
  margin-bottom: var(--sp-5);
}

.hero-title .text-mint {
  display: block;
}

.hero-subtitle {
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  color: var(--text-secondary);
  max-width: 50ch;
  margin-bottom: var(--sp-6);
  line-height: 1.5;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.hero-trust-icon {
  width: 18px;
  height: 18px;
  color: var(--mint);
  flex-shrink: 0;
}

/* Hero compass visual */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  max-width: 480px;
  margin-inline: auto;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(171, 237, 216, 0.25) 0%, transparent 70%);
  filter: blur(40px);
}

.hero-compass {
  position: relative;
  width: 100%;
  height: 100%;
  animation: gentle-rotate 60s linear infinite;
}

@keyframes gentle-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* -------- 9. Cards & Tiles -------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  transition: transform var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card-hover);
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: rgba(171, 237, 216, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
  color: var(--mint);
}

.card-icon svg {
  width: 28px;
  height: 28px;
}

.card h3 {
  color: var(--white);
  margin-bottom: var(--sp-3);
}

.card p {
  margin-bottom: var(--sp-4);
  flex-grow: 1;
}

/* Grid layouts for cards */
.grid-cards {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grid-cards--3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cards--4 { grid-template-columns: repeat(4, 1fr); }
}

/* -------- 10. Product Cards -------- */
.product-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--mint-deep);
  box-shadow: var(--shadow-card-hover);
}

.product-card--featured {
  border-color: var(--mint-deep);
}

.product-card--featured::before {
  content: "Popular";
  position: absolute;
  top: -12px;
  right: var(--sp-5);
  background: var(--mint);
  color: var(--navy-deepest);
  padding: var(--sp-1) var(--sp-4);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}

.product-tier {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint-deep);
  margin-bottom: var(--sp-3);
}

.product-card h3 {
  font-size: 1.375rem;
  color: var(--white);
  margin-bottom: var(--sp-3);
  line-height: 1.3;
}

.product-price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--mint);
  margin-block: var(--sp-3) var(--sp-4);
  line-height: 1;
}

.product-price-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 400;
  margin-left: var(--sp-2);
}

.product-description {
  color: var(--text-secondary);
  margin-bottom: var(--sp-5);
  flex-grow: 1;
}

.product-features {
  list-style: none;
  margin-bottom: var(--sp-5);
}

.product-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.product-features li::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A9975' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 2px;
}

.product-cta {
  margin-top: auto;
}

.product-cta--coming-soon {
  background: transparent;
  color: var(--text-grey);
  border: 2px dashed rgba(159, 179, 204, 0.4);
  cursor: not-allowed;
}

.product-cta--coming-soon:hover {
  transform: none;
  background: transparent;
}

/* -------- 11. Lead magnet form -------- */
.lead-form {
  background: linear-gradient(135deg, rgba(42, 72, 112, 0.5) 0%, rgba(22, 43, 77, 0.6) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-glow-mint);
}

.lead-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (min-width: 640px) {
  .lead-form-fields--inline {
    flex-direction: row;
    align-items: flex-start;
  }

  .lead-form-fields--inline .form-field { flex: 1; }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.form-field label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--white);
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: var(--sp-4);
  background: rgba(15, 31, 56, 0.6);
  border: 2px solid rgba(171, 237, 216, 0.3);
  color: var(--white);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-base) var(--ease), background-color var(--duration-base) var(--ease);
  min-height: 48px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(159, 179, 204, 0.6);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--mint);
  background: rgba(15, 31, 56, 0.9);
}

.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 2px;
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-field-hint {
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

.form-field-error {
  font-size: var(--fs-small);
  color: #FFA8A8;
  margin-top: var(--sp-1);
}

.form-feedback {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
}

.form-feedback--success {
  background: rgba(26, 153, 117, 0.2);
  border: 1px solid var(--mint-deep);
  color: var(--mint);
}

.form-feedback--error {
  background: rgba(255, 100, 100, 0.15);
  border: 1px solid rgba(255, 168, 168, 0.5);
  color: #FFA8A8;
}

.form-privacy {
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
  margin-top: var(--sp-4);
  text-align: center;
}

/* -------- 12. Pain points / Is this you section -------- */
.pain-list {
  list-style: none;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  margin-block: var(--sp-6);
}

@media (min-width: 640px) {
  .pain-list { grid-template-columns: repeat(2, 1fr); }
}

.pain-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: rgba(22, 43, 77, 0.4);
  border-left: 3px solid var(--mint-deep);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.pain-icon {
  width: 24px;
  height: 24px;
  color: var(--mint);
  flex-shrink: 0;
  margin-top: 2px;
}

/* -------- 13. Steps / Journey -------- */
.steps {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  counter-reset: step;
}

@media (min-width: 880px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

.step {
  position: relative;
  padding: var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  counter-increment: step;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--mint-deep);
  opacity: 0.4;
  line-height: 1;
}

.step h3 {
  color: var(--white);
  margin-bottom: var(--sp-3);
  padding-right: 60px;
}

.step p {
  color: var(--text-secondary);
}

/* -------- 14. CTA Section -------- */
.cta-section {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-light) 100%);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 6vw, 4rem);
  text-align: center;
  margin-block: var(--sp-7);
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(171, 237, 216, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.cta-section > * {
  position: relative;
  z-index: 1;
}

.cta-section h2 {
  margin-bottom: var(--sp-4);
}

.cta-section p {
  max-width: 50ch;
  margin-inline: auto;
  margin-bottom: var(--sp-6);
  color: var(--white);
  opacity: 0.85;
}

/* -------- 15. Resources page -------- */
.resource-category {
  margin-bottom: var(--sp-8);
}

.resource-category h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.resource-category h2 svg {
  width: 32px;
  height: 32px;
  color: var(--mint);
}

.coming-soon-tile {
  padding: var(--sp-7);
  text-align: center;
  background: rgba(22, 43, 77, 0.3);
  border: 2px dashed rgba(171, 237, 216, 0.25);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
}

.coming-soon-tile h3 {
  color: var(--white);
  margin-bottom: var(--sp-3);
}

/* -------- 16. Footer -------- */
.site-footer {
  background: var(--navy-dark);
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--sp-8) var(--sp-5);
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--sp-7);
}

@media (min-width: 700px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--sp-7);
  }
}

.footer-brand-block .nav-brand {
  margin-bottom: var(--sp-4);
}

.footer-social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(171, 237, 216, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--mint);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  background: rgba(171, 237, 216, 0.2);
  border-color: var(--mint);
  color: var(--white);
  transform: translateY(-2px);
  text-decoration: none;
}

.footer-social svg {
  width: 20px;
  height: 20px;
}

.footer-qr {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.footer-qr-image {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-sm);
  display: block;
}

.footer-qr-label {
  font-size: var(--fs-tiny);
  color: var(--text-grey);
  line-height: 1.5;
}

.footer-qr-label strong {
  display: block;
  color: var(--mint);
  font-weight: 600;
  font-size: var(--fs-small);
  margin-bottom: 4px;
}

.footer-tagline {
  color: var(--text-secondary);
  font-size: var(--fs-small);
  max-width: 32ch;
}

.footer-col h4 {
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-4);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-col a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: color var(--duration-base) var(--ease);
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--mint);
}

.footer-bottom {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: center;
  color: var(--text-secondary);
  font-size: var(--fs-tiny);
}

.footer-bottom a {
  color: var(--text-secondary);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--mint);
}

/* -------- 17. Page Hero (interior pages) -------- */
.page-hero {
  padding-block: clamp(3rem, 8vw, 5rem) clamp(2rem, 4vw, 3rem);
  text-align: center;
  position: relative;
}

.page-hero h1 {
  margin-bottom: var(--sp-4);
}

.page-hero .lead {
  margin-inline: auto;
}

/* -------- 18. About page -------- */
.story-grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 880px) {
  .story-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.story-content h2 {
  margin-bottom: var(--sp-4);
}

.story-content p {
  margin-bottom: var(--sp-4);
  color: var(--text-secondary);
}

.story-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
  aspect-ratio: 1;
  max-width: 480px;
  margin-inline: auto;
}

.values-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .values-grid { grid-template-columns: repeat(4, 1fr); } }

/* -------- 19. Thank you page -------- */
.thank-you-hero {
  text-align: center;
  padding-block: clamp(4rem, 10vw, 6rem);
}

.success-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--sp-5);
  background: rgba(26, 153, 117, 0.2);
  border: 3px solid var(--mint-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mint);
}

.success-icon svg {
  width: 48px;
  height: 48px;
}

.download-box {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  max-width: 480px;
  margin: var(--sp-7) auto;
  text-align: center;
}

/* -------- 20. Utilities -------- */
.flex {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.flex-center {
  align-items: center;
  justify-content: center;
}

.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }

/* -------- 21. Animations on scroll -------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }

/* -------- 22. Print styles -------- */
@media print {
  body { background: white; color: black; }
  body::before { display: none; }
  .site-header, .site-footer, .nav-toggle, .btn { display: none; }
}
/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--navy-deepest);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 250ms ease, transform 250ms ease, visibility 250ms ease, background-color 200ms ease;
  z-index: 100;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--white);
  transform: translateY(-2px);
}

.back-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
}

/* Ensure nav CTA button text colour matches hero primary button */
.nav-cta .btn--primary,
.nav-cta .btn--primary:hover,
.nav-cta .btn--primary:focus-visible {
  color: var(--navy-deepest);
}

/* Match nav CTA hover state to hero primary button hover */
.nav-cta .btn--primary:hover,
.nav-cta .btn--primary:focus-visible {
  background: var(--white);
  color: var(--navy-deepest);
}

/* Remove nav CTA button hover lift */
.nav-cta .btn--primary:hover,
.nav-cta .btn--primary:focus-visible {
  transform: none;
}

/* Survey CTA callout */
.aic-survey-callout {
  max-width: 640px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(22, 43, 77, 0.85) 0%, rgba(15, 31, 56, 0.95) 100%);
  border: 1px solid rgba(171, 237, 216, 0.2);
  border-radius: 24px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 40px rgba(171, 237, 216, 0.1);
  position: relative;
  overflow: hidden;
}

.aic-survey-callout::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(171, 237, 216, 0.5), transparent);
}

.aic-survey-callout .badge {
  display: inline-block;
  background: rgba(171, 237, 216, 0.12);
  color: var(--mint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(171, 237, 216, 0.2);
  margin-bottom: 18px;
}

.aic-survey-callout h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.aic-survey-callout p {
  font-size: 15px;
  color: var(--text-grey);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 28px;
}

.aic-survey-callout .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--mint);
  color: var(--navy-deepest);
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 0 1px rgba(171, 237, 216, 0.2), 0 8px 24px rgba(171, 237, 216, 0.25);
}

.aic-survey-callout .btn:hover {
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 12px 30px rgba(171, 237, 216, 0.35);
}

.aic-survey-callout .footnote {
  margin-top: 18px;
  font-size: 12px;
  color: var(--text-grey);
  opacity: 0.8;
}

@media (max-width: 600px) {
  .aic-survey-callout {
    padding: 36px 26px;
  }
  .aic-survey-callout h3 {
    font-size: 24px;
  }
}

/* Hide the hero compass visual on mobile */
@media (max-width: 767px) {
  .hero-visual {
    display: none;
  }
}
/* ============================================================
   MOBILE BUTTON FIXES
   - Fixes download button overflow on thank-you page mobile
   - Fixes survey CTA button touching right border on mobile
   - Fixes Get Notified at Launch button touching container edge
   ============================================================ */
@media (max-width: 600px) {
  /* Allow long button labels to wrap on narrow screens */
  .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    max-width: 100%;
  }

  /* Reduce large button padding and font-size on mobile so long labels fit */
  .btn--large {
    padding: var(--sp-3) var(--sp-4);
    font-size: 1rem;
  }

  /* Survey CTA button - smaller padding gives breathing room from callout edges */
  .aic-survey-callout .btn {
    padding: 14px 22px;
    font-size: 15px;
  }

  /* Slightly reduced survey callout side padding on very narrow screens */
  .aic-survey-callout {
    padding: 36px 20px;
  }

  /* Tighter lead-form container padding on mobile so inner buttons have room */
  .lead-form {
    padding: clamp(1rem, 3vw, 1.5rem);
  }
}

/* ============================================================
   HIDE ABOUT PAGE COMPASS ON MOBILE
   Story-visual container holds the compass image on About.
   Same treatment as the homepage hero compass.
   ============================================================ */
@media (max-width: 767px) {
  .story-visual {
    display: none;
  }
}

/* ============================================================
   REDUCE CTA SECTION MARGIN ON MOBILE
   Fixes: excessive gap between Articles section and Final CTA
          on resources.html mobile view.
   Desktop margin (48px top and bottom) stacks with adjacent
   section padding, creating ~144px gap on mobile.
   ============================================================ */
@media (max-width: 600px) {
  .cta-section {
    margin-block: var(--sp-4);
  }
}

/* ============================================================
   MAILERLITE F.E.A.R. GUIDE FORM STYLING
   Overrides MailerLite's default styles so the embedded form
   inherits the site's brand look (dark navy, mint pill button,
   Poppins font). Uses !important because MailerLite's own
   stylesheet has high specificity.
   ============================================================ */

/* Reset MailerLite's card wrapper - our .lead-form is the card */
.lead-form .ml-form-embedContainer,
.lead-form .ml-form-embedWrapper,
.lead-form .ml-form-embedBody {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: 'Poppins', sans-serif !important;
  color: var(--white);
  width: 100% !important;
  max-width: 100% !important;
}

/* Form fields container */
.lead-form .ml-form-formContent {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--sp-4) !important;
}

/* Each field row */
.lead-form .ml-form-fieldRow {
  margin: 0 !important;
  padding: 0 !important;
}

/* Field labels */
.lead-form .ml-form-embedContainer label {
  font-size: var(--fs-small) !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  font-family: 'Poppins', sans-serif !important;
  margin-bottom: var(--sp-2) !important;
  display: block !important;
}

/* Field inputs */
.lead-form .ml-form-embedContainer input[type="text"],
.lead-form .ml-form-embedContainer input[type="email"] {
  width: 100% !important;
  padding: var(--sp-4) !important;
  background: rgba(15, 31, 56, 0.6) !important;
  border: 2px solid rgba(171, 237, 216, 0.3) !important;
  color: var(--white) !important;
  border-radius: var(--radius-sm) !important;
  min-height: 48px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: var(--fs-body) !important;
  transition: border-color var(--duration-base) var(--ease), background-color var(--duration-base) var(--ease) !important;
}

/* Input focus state */
.lead-form .ml-form-embedContainer input[type="text"]:focus,
.lead-form .ml-form-embedContainer input[type="email"]:focus {
  border-color: var(--mint) !important;
  background: rgba(15, 31, 56, 0.9) !important;
  outline: none !important;
}

/* Placeholder text */
.lead-form .ml-form-embedContainer input::placeholder {
  color: rgba(159, 179, 204, 0.6) !important;
}

/* Privacy note text */
.lead-form .ml-form-embedPermissions,
.lead-form .ml-form-embedPermissionsContent {
  margin-top: var(--sp-4) !important;
}

.lead-form .ml-form-embedPermissions p,
.lead-form .ml-form-embedPermissionsContent p {
  font-size: var(--fs-tiny) !important;
  color: var(--text-grey) !important;
  text-align: center !important;
  margin: 0 !important;
  font-family: 'Poppins', sans-serif !important;
}

.lead-form .ml-form-embedPermissions a,
.lead-form .ml-form-embedPermissionsContent a {
  color: var(--mint) !important;
  text-decoration: underline !important;
}

/* Submit button wrapper */
.lead-form .ml-form-embedSubmit {
  margin-top: var(--sp-5) !important;
}

/* Submit button - matches btn--primary btn--large btn--full */
.lead-form .ml-form-embedSubmit button.primary,
.lead-form .ml-form-embedSubmit button[type="submit"] {
  width: 100% !important;
  padding: var(--sp-4) var(--sp-5) !important;
  background: var(--mint) !important;
  color: var(--navy-deepest) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease) !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.35 !important;
}

.lead-form .ml-form-embedSubmit button.primary:hover,
.lead-form .ml-form-embedSubmit button[type="submit"]:hover,
.lead-form .ml-form-embedSubmit button.primary:focus-visible,
.lead-form .ml-form-embedSubmit button[type="submit"]:focus-visible {
  background: var(--white) !important;
  transform: translateY(-2px) !important;
}

/* Loading state on submit */
.lead-form .ml-form-embedSubmit .loadingBar {
  background: var(--mint) !important;
}

/* Hide MailerLite's built-in success message and thank-you states.
   The redirect to /thank-you.html handles the success experience. */
.lead-form .ml-form-successBody,
.lead-form .ml-form-successContent,
.lead-form .ml-form-embedContent .ml-form-successBody,
.lead-form .ml-form-embedContent .ml-form-successContent {
  display: none !important;
}

[id^="mlb2-"].ml-form-embedContainer .ml-form-successBody,
[id^="mlb2-"].ml-form-embedContainer .ml-form-successContent,
[id^="mlb2-"] .ml-form-successBody,
[id^="mlb2-"] .ml-form-successContent {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}