/* ─────────────────────────────────────────────
   Convert Design Tokens — Single Source of Truth
   Source: New Home/docs/convert-design-system.md
   Apply to ALL Convert LPs and pages.
   ───────────────────────────────────────────── */

:root {
  /* Brand — Blue */
  --color-blue-600: #0066FF;   /* primary action */
  --color-blue-700: #0052CC;   /* primary hover */
  --color-blue-50:  #EEF4FF;   /* blue card bg tint */
  --color-blue-100: #DBEAFE;
  --color-blue-200: #E0E7FF;

  /* Brand — Violet */
  --color-violet-700: #6D28D9; /* links, icons, accents */
  --color-violet-600: #7C3AED; /* stat gradient top */
  --color-violet-800: #5B21B6; /* stat gradient mid */
  --color-violet-900: #4C1D95; /* stat gradient bottom */
  --color-violet-50:  #EDE9FE;
  --color-violet-100: #F5F0FF;
  --color-violet-200: #C4B5FD;

  /* Brand — Green (compliance / privacy) */
  --color-green-50:  #EDFAF5;
  --color-green-400: #6EE7B7;
  --color-green-500: #10B981;  /* emerald — avatar / accent */
  --color-green-600: #059669;

  /* Accents — avatars, status chips */
  --color-orange-500: #F97316; /* orange — avatar accent */

  /* Brand — Logo wordmark */
  --color-logo:      #2A3341;  /* Convert wordmark on light bg */

  /* Surfaces — cream (card backgrounds) */
  --color-surface-cream:       #FAFAF7;  /* default cream card bg */
  --color-surface-cream-hover: #F5F4EE;  /* cream card hover state */

  /* Neutrals — Ink scale */
  --color-ink-900: #2A3442;    /* primary text, headings */
  --color-ink-800: #3C4659;    /* nav links */
  --color-ink-700: #586478;    /* secondary text, descriptions */
  --color-ink-600: #7E8AA0;    /* muted, uppercase labels */
  --color-ink-500: #A6B1C2;    /* placeholder wordmarks */
  --color-ink-400: #D0D7E1;    /* default card border */
  --color-ink-300: #E7EBF1;    /* section borders, tab bg */
  --color-ink-200: #F4F6F9;    /* subtle navy tint */
  --color-ink-100: #FFFFFF;    /* surface */

  /* Dark (mobile menu only) */
  --color-dark-900: #0D1019;
  --color-dark-800: #1A1A2E;

  /* Semantic aliases */
  --color-bg:               var(--color-ink-100);
  --color-bg-subtle:        var(--color-ink-300);
  --color-surface:          var(--color-ink-100);
  --color-border:           var(--color-ink-400);
  --color-border-subtle:    rgba(207, 217, 230, 0.55);
  --color-text-primary:     var(--color-ink-900);
  --color-text-secondary:   var(--color-ink-700);
  --color-text-muted:       var(--color-ink-600);
  --color-text-placeholder: var(--color-ink-500);
  --color-action-primary:   var(--color-blue-600);
  --color-action-hover:     var(--color-blue-700);
  --color-link:             var(--color-violet-600);  /* brand link/accent — matches usage across all Convert LPs */

  /* Layout */
  --max-width:       1200px;
  --section-px:      24px;
  --section-py:      80px;
  --radius-sm:       8px;     /* small elements — tags, chips, inner blocks */
  --card-radius:     14px;
  --card-radius-lg:  20px;
  --radius-pill:     999px;   /* fully-rounded pills, tabs, chips */
  --card-gap:        20px;
  --navbar-height:   60px;

  /* Prose widths (single source of truth for centered text columns) */
  --prose-narrow:    540px;   /* forms, focused conversion blocks */
  --prose-default:   720px;   /* section subheads, mid-density copy */
  --prose-wide:      880px;   /* long-form: author bios, FAQ, pitch */

  /* Breakpoints (use as design reference — CSS still uses px values) */
  --bp-mobile:       640px;
  --bp-tablet:       960px;
  --bp-desktop:      1200px;

  /* Shadows */
  --shadow-card:        0 8px 24px rgba(0,0,0,0.08);
  --shadow-card-lift:   0 8px 24px rgba(0,0,0,0.08);
  --shadow-stat:        0 16px 48px rgba(99,102,241,0.22), 0 2px 10px rgba(99,102,241,0.10);
  --shadow-stat-hover:  0 24px 60px rgba(99,102,241,0.25), 0 2px 10px rgba(99,102,241,0.10);
  --shadow-logo-card:   0 4px 16px rgba(99,102,241,0.08), 0 1px 4px rgba(99,102,241,0.04);
  --shadow-btn-primary: 0 8px 24px rgba(0,102,255,0.12);

  /* Type — Geist Sans */
  --font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale */
  --text-hero:        clamp(24px, 3.8vw, 52px);
  --text-section:     clamp(26px, 3vw, 36px);
  --text-card-title:  20px;
  --text-body-lg:     18px;
  --text-body:        15px;
  --text-ui:          14px;
  --text-small:       13px;
  --text-label:       11px;
  --text-caption:     11.5px;
}

/* ── Base body styles ── */
body {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  margin: 0;
}

a { color: var(--color-link); text-decoration: none; }
a:hover { opacity: 0.85; }

* { box-sizing: border-box; }
*:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

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

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

/* ── Container ── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--section-px);
}

.section { padding: var(--section-py) 0; }
.section--tight { padding: 48px 0; }

/* ── Kicker / uppercase label ── */
.kicker {
  display: inline-block;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-violet-700);
  margin-bottom: 16px;
}

/* ── Text link with arrow ── */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--color-violet-700);
  transition: opacity 0.2s ease;
}
.text-link .text-link-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.text-link:hover { opacity: 0.85; }
.text-link:hover .text-link-arrow { transform: translateX(3px); }
.text-link--light { color: rgba(255,255,255,0.45); }
.text-link--light:hover { opacity: 0.7; }