/* =========================================================================
   YourKendra — Foundations: Colors + Type
   Single source of truth for tokens used across landing, dashboard, dark.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,400&family=Instrument+Serif:ital@1&family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Syne:wght@800&display=swap');

:root {
  /* ---------- Mercury "Mountain Top" tokens — primary landing palette ---------- */
  --color-deep-space:     #171721;
  --color-midnight-slate: #1E1E2A;
  --color-graphite:       #272735;
  --color-lead:           #70707D;
  --color-silver:         #C3C3CC;
  --color-starlight:      #EDEDF3;
  --color-pure-white:     #FFFFFF;
  --color-accent:         #5266EB;
  --color-accent-ghost:   rgba(205, 221, 255, 0.20);

  /* ---------- Brand accent (Mercury Blue — primary CTA only) ---------- */
  --k:        var(--color-accent);
  --k-dim:    #3F4FBA;
  --k-glow:   rgba(82, 102, 235, 0.18);

  /* ---------- Landing (Mercury dark — was cream editorial) ---------- */
  --bg:            var(--color-deep-space);
  --bg-panel:      var(--color-midnight-slate);
  --bg-card-cream: rgba(255, 255, 255, 0.025);
  --ink:           var(--color-starlight);
  --ink-muted:     var(--color-silver);
  --ink-soft:      var(--color-lead);
  --ink-whisper:   var(--color-graphite);
  --border:        rgba(112, 112, 125, 0.35);
  --border-hi:     var(--color-lead);

  /* ---------- Dark islands ---------- */
  --dark-bg:        #0B0B0F;
  --dark-ink:       #F6F5F2;
  --dark-ink-muted: rgba(246, 245, 242, 0.58);
  --dark-border:    rgba(246, 245, 242, 0.08);

  /* ---------- Dashboard (app) ---------- */
  --bg-page:    #FDFDFF;
  --bg-card:    #FFFFFF;
  --bg-mid:     #F6F6FB;
  --bg-dark:    #0B0B18;
  --ink-app:        #0A0A18;
  --ink-app-muted:  #606078;
  --ink-app-soft:   #8A8A9E;
  --border-light:   rgba(10, 10, 24, 0.07);

  /* ---------- Semantic ---------- */
  --green:       #10B981;
  --green-land:  #00A676;
  --gold:        #F59E0B;
  --red:         #EF4444;
  --red-land:    #B91C1C;

  /* ---------- Employee gradients ---------- */
  --grad-kendra:  linear-gradient(135deg, #00D4E5 0%, #7DD3FC 100%);
  --grad-marcus:  linear-gradient(135deg, #F59E0B 0%, #FDE68A 100%);
  --grad-aria:    linear-gradient(135deg, #A78BFA 0%, #DDD6FE 100%);
  --grad-devon:   linear-gradient(135deg, #10B981 0%, #6EE7B7 100%);
  --grad-jordan:  linear-gradient(135deg, #60A5FA 0%, #BAE6FD 100%);
  --grad-riley:   linear-gradient(135deg, #F472B6 0%, #FBCFE8 100%);

  /* ---------- Type families ---------- */
  --font-display:  'Fraunces', 'Times New Roman', serif;
  --font-italic:   'Instrument Serif', Georgia, serif;
  --font-ui:       'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --font-logo:     'Syne', system-ui, sans-serif;

  /* ---------- Radii ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- Layout widths ---------- */
  --maxw:        1160px;
  --maxw-narrow:  880px;
  --maxw-wide:   1320px;

  /* ---------- Shadows ---------- */
  --shadow-card:    0 2px 12px rgba(10, 10, 24, 0.04), 0 6px 32px rgba(10, 10, 24, 0.05);
  --shadow-pop:     0 8px 24px rgba(10, 10, 24, 0.08), 0 24px 64px rgba(10, 10, 24, 0.10);
  --shadow-glow-k:  0 0 24px rgba(0, 212, 229, 0.35), 0 0 56px rgba(0, 212, 229, 0.12);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-med:  260ms;
  --t-slow: 480ms;
}

/* =========================================================================
   Semantic typography classes
   ========================================================================= */

/* Mercury type — light weights, expansive line-heights, narrow tracking. */
.yk-hero-h1 {
  font-family: var(--font-display);
  font-weight: 300;                                  /* was 400 — Mercury runs light */
  font-size: clamp(42px, 7.2vw, 76px);               /* tightened from clamp(54..156) */
  line-height: 1.1;
  letter-spacing: 0.005em;                           /* slight positive tracking, Mercury-style */
  color: var(--ink);
}
.yk-hero-h1 em,
.yk-hero-h1 .accent {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--color-silver);                         /* italic emphasis via color-shift, not hue */
}

.yk-section-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 5.5vw, 56px);
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.yk-card-h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.yk-ui-h1 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-app);
}

.yk-ui-h2 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-app);
}

.yk-body-landing {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  color: var(--ink-muted);
}

.yk-body-app {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink-app);
}

.yk-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.yk-caption {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.yk-kpi-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-app-muted);
}
.yk-kpi-value {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink-app);
}
.yk-kpi-sub {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-app-soft);
}

/* =========================================================================
   Mercury — buttons, layout, hero atmosphere
   ========================================================================= */

/* Primary CTA — Mercury Blue pill. The single saturated color in the page.
   Used on hero CTA, pricing, and the Stripe checkout buttons. */
.yk-btn-mercury {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  background: var(--color-accent);
  color: var(--color-pure-white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: var(--r-pill);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--ease-out);
}
.yk-btn-mercury:hover { background: #4759DC; }
.yk-btn-mercury[data-half="right"] {
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
}

/* Secondary — Ghost Blue 20%, starlight text. Pills, no shadow. */
.yk-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: var(--color-accent-ghost);
  color: var(--color-starlight);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-pill);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms var(--ease-out);
}
.yk-btn-ghost:hover { background: rgba(205, 221, 255, 0.30); }

/* Hero email input — joined to the Mercury button on its right. */
.yk-input-mercury {
  flex: 1;
  min-width: 0;
  padding: 16px 20px;
  background: transparent;
  color: var(--color-starlight);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  border: 1px solid var(--color-lead);
  border-right: none;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  outline: none;
  transition: border-color 180ms var(--ease-out);
}
.yk-input-mercury::placeholder { color: var(--color-lead); }
.yk-input-mercury:focus { border-color: var(--color-silver); }

/* Hero atmosphere — full-bleed, twilight gradient simulating a mountain
   ridge at dusk. CSS-only, no external image dependency. */
.yk-hero-mercury {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  background:
    /* mountain silhouette layer (dark) */
    linear-gradient(180deg, transparent 55%, rgba(15, 15, 22, 0.92) 75%, var(--color-deep-space) 100%),
    /* sky glow at horizon (warm twilight halo) */
    radial-gradient(900px 400px at 50% 70%, rgba(120, 130, 220, 0.18), transparent 65%),
    /* stars & cool gradient */
    radial-gradient(1200px 600px at 50% 100%, rgba(82, 102, 235, 0.12), transparent 70%),
    linear-gradient(180deg, #0a0a14 0%, #161623 60%, var(--color-deep-space) 100%);
  background-attachment: scroll;
  overflow: hidden;
}
/* Faint ridge silhouettes — pure CSS, layered SVG-style triangles via
   clip-path on a colored band sitting near the horizon line. */
.yk-hero-mercury::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 18%;
  height: 220px;
  background: linear-gradient(180deg, rgba(20, 20, 30, 0.0), rgba(15, 15, 22, 0.95));
  clip-path: polygon(0% 100%, 8% 60%, 18% 78%, 28% 40%, 38% 70%, 48% 30%, 58% 65%, 68% 45%, 78% 72%, 88% 50%, 100% 80%, 100% 100%);
  pointer-events: none;
  z-index: 1;
}
/* Subtle starfield grain on the upper sky — tiny noise SVG. */
.yk-hero-mercury::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.yk-hero-mercury > * { position: relative; z-index: 2; }

.yk-hero-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-silver);
  margin-bottom: 28px;
}
.yk-hero-sub {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-silver);
  max-width: 560px;
  margin: 24px auto 36px;
}
.yk-hero-cta-row {
  display: flex;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

/* Sticky top nav — semi-transparent backdrop blur. */
.yk-nav-mercury {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: rgba(23, 23, 33, 0.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-starlight);
}
.yk-nav-mercury a {
  color: var(--color-silver);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  margin: 0 16px;
  transition: color 160ms var(--ease-out);
}
.yk-nav-mercury a:hover { color: var(--color-starlight); }

/* Generic Mercury page section under the hero. */
.yk-section-mercury {
  background: var(--color-midnight-slate);
  color: var(--color-starlight);
  padding: 96px 24px;
}
.yk-section-mercury .yk-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Six-worker interactive list — single-column, bottom-bordered rows. */
.yk-worker-list { list-style: none; padding: 0; margin: 0; }
.yk-worker-row {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr auto;
  gap: 32px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-lead);
  transition: padding-left 200ms var(--ease-out);
}
.yk-worker-row:hover { padding-left: 8px; }
.yk-worker-row .name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  color: var(--color-starlight);
  letter-spacing: 0.005em;
  transition: color 200ms var(--ease-out);
}
.yk-worker-row:hover .name { color: var(--color-pure-white); }
.yk-worker-row .desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-silver);
}
.yk-worker-row .role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-lead);
  white-space: nowrap;
}

/* Mobile — hero stacks cleanly, headline drops to ~42px. */
@media (max-width: 768px) {
  .yk-hero-h1 { font-size: clamp(36px, 9vw, 48px); }
  .yk-hero-mercury { padding: 96px 20px 72px; }
  .yk-hero-cta-row { flex-direction: column; max-width: 360px; }
  .yk-input-mercury {
    border-right: 1px solid var(--color-lead);
    border-bottom: none;
    border-radius: var(--r-pill) var(--r-pill) 0 0;
  }
  .yk-btn-mercury[data-half="right"] {
    border-radius: 0 0 var(--r-pill) var(--r-pill);
    justify-content: center;
  }
  .yk-worker-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .yk-worker-row .role { order: -1; }
}