/* ==========================================================================
   Kairo Design System — kairo.css
   ==========================================================================
   Canonical tokens + component styles, extracted from index.html,
   pricing.html, and waitlist.html (which each carried their own copy).

   Layers:
     1. Tokens        — primitives (color, type, radius, motion) + semantic aliases
     2. Reset & base  — box model, body, media, links
     3. Typography    — heading scale, text utilities
     4. Layout        — container, section rhythm
     5. Components    — nav, buttons, cards, icon wells, badges, chips,
                        inputs, section headers, dividers, footer, skip link
     6. Effects       — orbs, cursor glow, reveal animations, reduced motion

   Drift resolved during extraction (previously inconsistent across pages):
     - Error reds were hardcoded (#F87171 / #FCA5A5)      → --red-400 / --red-300
     - --green-400 existed only on waitlist.html           → promoted to core token
     - Hairline borders used 4 ad-hoc alphas (.06–.10)     → --border-subtle/-soft/-strong
     - Blue/teal tint fills used 9 ad-hoc rgba() values    → --tint-* tokens
     - .pipe-stage used a one-off 12px radius              → use --radius-md (10px)
     - Three easing curves were repeated inline            → --ease-* tokens
   ========================================================================== */

/* Brand fonts — Inter (body) and Plus Jakarta Sans (display).
   Kept here so the stylesheet is self-contained; pages that already
   <link> these fonts simply hit the cache. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color primitives — navy ground scale */
  --navy-950: #0A1628;   /* page background */
  --navy-900: #0F1D32;   /* card surface base */
  --navy-800: #162742;   /* solid hairlines (footer, section dividers) */
  --navy-700: #1E3A5F;   /* input & ghost-button borders, inbound SMS bubble */

  /* Color primitives — action blue */
  --blue-600: #1D4ED8;
  --blue-500: #2563EB;   /* primary action */
  --blue-400: #3B82F6;   /* hover, links, section labels, blue icon wells */

  /* Color primitives — accent teal */
  --teal-400: #2DD4BF;   /* teal icon wells, industry labels, live dot */
  --teal-300: #5EEAD4;   /* text on teal-tinted chips & badges */

  /* Color primitives — neutrals */
  --gray-100: #F1F5F9;   /* strong body text, input text */
  --gray-300: #CBD5E1;   /* default body text */
  --gray-500: #64748B;   /* muted text, placeholders, captions */
  --white:    #FFFFFF;   /* headings, text on primary buttons */

  /* Color primitives — feedback */
  --green-400: #4ADE80;  /* success (confirmation icon) */
  --red-400:   #F87171;  /* error borders */
  --red-300:   #FCA5A5;  /* error message text */

  /* Semantic aliases */
  --bg:            var(--navy-950);
  --text-heading:  var(--white);
  --text-body:     var(--gray-300);
  --text-strong:   var(--gray-100);
  --text-muted:    var(--gray-500);

  /* Translucent hairlines (on dark ground) */
  --border-subtle: rgba(255, 255, 255, 0.06);  /* cards, nav bottom, dividers */
  --border-soft:   rgba(255, 255, 255, 0.08);  /* phones/panels, inner dividers */
  --border-strong: rgba(255, 255, 255, 0.10);  /* card hover */

  /* Translucent surfaces */
  --surface-card:   rgba(15, 29, 50, 0.6);     /* .card (over blur) */
  --surface-panel:  rgba(15, 29, 50, 0.7);     /* sms phone frame */
  --surface-solid:  rgba(15, 29, 50, 0.95);    /* enrichment card */
  --surface-deep:   rgba(10, 22, 40, 0.75);    /* pipeline stages */
  --surface-nav:    rgba(10, 22, 40, 0.85);    /* scrolled nav (over blur) */

  /* Brand tints — blue */
  --tint-blue-ghost:    rgba(37, 99, 235, 0.08);  /* ghost button hover */
  --tint-blue:          rgba(37, 99, 235, 0.10);  /* icon wells */
  --tint-blue-badge:    rgba(37, 99, 235, 0.12);  /* small icon chips */
  --tint-blue-step:     rgba(37, 99, 235, 0.15);  /* step numbers, focus ring */
  --tint-blue-selected: rgba(37, 99, 235, 0.18);  /* pressed chips */

  /* Brand tints — teal */
  --tint-teal-wash:  rgba(45, 212, 191, 0.05);    /* human pipeline stage */
  --tint-teal-ghost: rgba(45, 212, 191, 0.08);    /* live badge fill */
  --tint-teal:       rgba(45, 212, 191, 0.10);    /* teal icon wells, status chips */
  --tint-teal-badge: rgba(45, 212, 191, 0.12);    /* boost badge, done icon */
  --border-teal:     rgba(45, 212, 191, 0.25);    /* teal badge/featured borders */
  --border-teal-strong: rgba(45, 212, 191, 0.30); /* boost badge border */

  /* Feedback tints */
  --tint-green: rgba(74, 222, 128, 0.10);         /* success icon well */
  --ring-error: rgba(248, 113, 113, 0.15);        /* error focus ring */

  /* Shadows & rings */
  --ring-focus:        rgba(37, 99, 235, 0.15);   /* input focus ring color */
  --shadow-btn-hover:  0 4px 16px rgba(37, 99, 235, 0.4);
  --shadow-btn-active: 0 2px 8px rgba(37, 99, 235, 0.3);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--blue-400), var(--teal-400));
  --gradient-accent-bar: linear-gradient(90deg, var(--teal-400), var(--blue-500));

  /* Typography */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;  /* 600 / 700 / 800 */
  --font-body:    'Inter', system-ui, sans-serif;              /* 400 / 500 / 600 */

  /* Fluid display scale (page-level headings) */
  --fs-display-1: clamp(2.25rem, 5vw, 3.75rem);   /* home hero h1 */
  --fs-display-2: clamp(2rem, 4vw, 3rem);         /* subpage h1, prices */
  --fs-display-3: clamp(1.75rem, 3.5vw, 2.75rem); /* section h2 */
  --fs-heading:   clamp(1.125rem, 2vw, 1.5rem);   /* card h3 */
  --fs-lead:      clamp(1rem, 1.5vw, 1.25rem);    /* hero subline */
  --fs-sub:       clamp(1rem, 1.5vw, 1.125rem);   /* section subline */

  /* Static type scale */
  --fs-md:    1rem;        /* 16px — inputs, base */
  --fs-body:  0.9375rem;   /* 15px — buttons, card copy */
  --fs-sm:    0.875rem;    /* 14px — small buttons, labels, notes */
  --fs-label: 0.8125rem;   /* 13px — section labels, badges, footer */
  --fs-xs:    0.75rem;     /* 12px — status chips, timestamps */
  --fs-2xs:   0.6875rem;   /* 11px — SMS times */

  /* Radii */
  --radius-sm:   8px;      /* icon wells, small inputs */
  --radius-md:   10px;     /* buttons, inputs */
  --radius-lg:   16px;     /* cards */
  --radius-xl:   24px;     /* feature cards, panels */
  --radius-full: 9999px;   /* pills, chips, badges */

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);      /* hover, state changes */
  --ease-reveal:   cubic-bezier(0.16, 1, 0.3, 1);     /* scroll-in reveals */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* playful bumps */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-reveal: 500ms;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-strong);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--text-heading);
}
h1 { font-size: var(--fs-display-1); font-weight: 800; }
h2 { font-size: var(--fs-display-3); font-weight: 700; }
h3 { font-size: var(--fs-heading);   font-weight: 700; }
p  { color: var(--text-body); }

.text-muted { color: var(--text-muted); }
.text-teal  { color: var(--teal-400); }
.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
section { padding: clamp(4rem, 8vw, 8rem) 0; }
section.compact { padding: clamp(3rem, 6vw, 5rem) 0; }  /* subpages */

@media (min-width: 768px) {
  .container { padding: 0 2rem; }
}

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* Skip link ---------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--blue-500);
  color: var(--white);
  border-radius: var(--radius-md);
  font-weight: 600;
  z-index: 1000;
  transition: top var(--duration-base);
}
.skip-link:focus { top: 1rem; }

/* Nav ---------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1rem 0;
  transition: background-color var(--duration-slow) ease,
              backdrop-filter var(--duration-slow) ease;
}
.nav.scrolled,
.nav.solid {
  background: var(--surface-nav);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand { display: flex; flex-direction: column; line-height: 1.2; }
.nav-brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--white);
  letter-spacing: -0.02em;
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-standard);
  min-height: 44px;   /* touch target floor */
  min-width: 44px;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
}
.btn-primary { background: var(--blue-500); color: var(--white); }
.btn-primary:hover {
  background: var(--blue-400);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-btn-active);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
  box-shadow: none;
}
.btn-ghost {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--navy-700);
}
.btn-ghost:hover {
  border-color: var(--blue-500);
  background: var(--tint-blue-ghost);
}
.btn-sm { padding: 0.5rem 1.25rem;  font-size: var(--fs-sm); }
.btn-lg { padding: 1rem 2.25rem;    font-size: 1.0625rem; }

/* Cards ---------------------------------------------------------------------
   .card           translucent glass card
   .card.featured  teal border + gradient accent bar across the top
*/
.card {
  background: var(--surface-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: border-color var(--duration-slow) ease,
              box-shadow var(--duration-slow) ease;
}
.card:hover { border-color: var(--border-strong); }
.card.featured {
  position: relative;
  border-color: var(--border-teal);
  overflow: hidden;
}
.card.featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-accent-bar);
}

/* Icon wells -----------------------------------------------------------------
   Square tinted container for a stroke icon. Blue by default; add .teal or
   .success to recolor. Sizes: default 48, .icon-wrap-md 40, .icon-wrap-sm 34.
*/
.icon-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--tint-blue);
  color: var(--blue-400);
}
.icon-wrap.teal    { background: var(--tint-teal);  color: var(--teal-400); }
.icon-wrap.success { background: var(--tint-green); color: var(--green-400); }
.icon-wrap-md { width: 40px; height: 40px; }
.icon-wrap-sm { width: 34px; height: 34px; background: var(--tint-blue-badge); }

/* Step numbers (numbered circles; alternate blue/teal by position) */
.step-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  background: var(--tint-blue-step);
  color: var(--blue-400);
}
.step-number.teal { background: var(--tint-teal-badge); color: var(--teal-400); }

/* Section headers ------------------------------------------------------------ */
.section-label {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue-400);
  margin-bottom: 1rem;
}
.section-heading { margin-bottom: 1rem; }
.section-sub {
  font-size: var(--fs-sub);
  color: var(--text-body);
  max-width: 600px;
  line-height: 1.7;
}
.section-header-center { text-align: center; }
.section-header-center .section-sub { margin: 0 auto; }

/* Kicker label above card titles (e.g. industry tags) */
.industry {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-400);
  margin-bottom: 0.35rem;
}

/* Badges ---------------------------------------------------------------------
   .live         pulsing status pill ("In production")
   .boost-badge  live-updating counter pill (springs on change via .bump)
   .sms-chip     static status pill
*/
.live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-300);
  background: var(--tint-teal-ghost);
  border: 1px solid var(--border-teal);
  border-radius: var(--radius-full);
  padding: 0.28rem 0.75rem;
  white-space: nowrap;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-400);
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(45, 212, 191, 0); }
}
.boost-badge {
  flex-shrink: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--tint-teal-badge);
  border: 1px solid var(--border-teal-strong);
  color: var(--teal-300);
  transition: transform var(--duration-base) var(--ease-spring);
}
.boost-badge.bump { transform: scale(1.15); }
.sms-chip {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--teal-300);
  background: var(--tint-teal);
  border: 1px solid var(--border-teal);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.75rem;
}

/* Selectable chips (toggle buttons; state via aria-pressed) ------------------- */
.chip {
  padding: 0.5rem 0.875rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-body);
  background: var(--navy-950);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-full);
  cursor: pointer;
  min-height: 40px;
  transition: border-color var(--duration-fast),
              background-color var(--duration-fast),
              color var(--duration-fast);
}
.chip:hover { border-color: var(--blue-400); color: var(--text-strong); }
.chip:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.chip[aria-pressed="true"] {
  background: var(--tint-blue-selected);
  border-color: var(--blue-500);
  color: var(--white);
}
.chip[aria-pressed="true"]::before { content: "✓ "; color: var(--teal-300); }
.chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Inputs ---------------------------------------------------------------------- */
.input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--text-strong);
  background: var(--navy-950);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-md);
  min-height: 48px;
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.input-sm {
  padding: 0.75rem 0.875rem;
  font-size: var(--fs-body);
  border-radius: var(--radius-sm);
  min-height: 44px;
}
.input::placeholder { color: var(--text-muted); }
.input:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--ring-focus);
}
.input.has-error {
  border-color: var(--red-400);
  box-shadow: 0 0 0 3px var(--ring-error);
}
.field-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-strong);
  margin-bottom: 0.5rem;
}
.error-msg {
  font-size: var(--fs-label);
  color: var(--red-300);
  margin-top: 0.375rem;
}

/* Labeled horizontal divider ("Not ready to talk?") ---------------------------- */
.cta-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 480px;
  margin: 1.75rem auto 1rem;
  color: var(--text-muted);
  font-size: var(--fs-label);
}
.cta-divider::before,
.cta-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}
.cta-divider span { white-space: nowrap; }

/* Footer ------------------------------------------------------------------------ */
.footer {
  border-top: 1px solid var(--navy-800);
  padding: 2rem 0;
  text-align: center;
}
.footer p { font-size: var(--fs-label); color: var(--text-muted); }
.footer a { color: var(--text-body); transition: color var(--duration-base); }
.footer a:hover { color: var(--blue-400); }
.footer a:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   6. Effects
   -------------------------------------------------------------------------- */

/* Ambient gradient orbs (position per page; keep behind content) */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 1;
  pointer-events: none;
}
.orb-teal { width: 500px; height: 500px; background: rgba(45, 212, 191, 0.12); }
.orb-blue { width: 600px; height: 600px; background: rgba(37, 99, 235, 0.15); }
@keyframes drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(30px, -20px); }
}

/* Cursor glow (desktop pointer only; activated via JS) */
.cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(37, 99, 235, 0.10) 0%,
    rgba(45, 212, 191, 0.05) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--duration-slow) ease;
}
.cursor-glow.is-active { opacity: 1; }

/* Scroll-in reveal: elements start hidden, JS adds .is-visible on intersect.
   Stagger siblings with [data-stagger] on the parent. */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-reveal) var(--ease-reveal),
              transform var(--duration-reveal) var(--ease-reveal);
}
[data-stagger] > [data-animate]:nth-child(1) { transition-delay: 0ms; }
[data-stagger] > [data-animate]:nth-child(2) { transition-delay: 100ms; }
[data-stagger] > [data-animate]:nth-child(3) { transition-delay: 200ms; }
[data-stagger] > [data-animate]:nth-child(4) { transition-delay: 300ms; }

@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: live-pulse 2.2s ease-in-out infinite; }
  .orb-teal { animation: drift 20s ease-in-out infinite alternate; }
  .orb-blue { animation: drift 25s ease-in-out infinite alternate-reverse; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
}