/* ────────────────────────────────────────────────────────────────────
   funnel-chrome.css — styles for the universal funnel partials
   ────────────────────────────────────────────────────────────────────
   Loaded on every page via default.hbs. Covers:
     - .funnel-breadcrumb     — "where am I" trail
     - .funnel-stat-strip     — "what world" abundance ticker
     - .funnel-cta            — "where to next" stage-aware CTA
   Project F architecture 2026-05-18.
   ──────────────────────────────────────────────────────────────────── */

/* ═══ BREADCRUMB ══════════════════════════════════════════════════════ */
.funnel-breadcrumb {
  max-width: var(--maxw, 1220px);
  margin: 0 auto;
  /* Project N (2026-05-19) — added 14px bottom padding (was 0) so the
     breadcrumb has its own breathing room and doesn't sit flush against
     the hero edge below. Pairs with the reduced hero top padding to
     close the previously-disconnected vertical gap. */
  padding: 14px var(--pad-x, clamp(20px, 4vw, 32px)) 14px;
}
.funnel-breadcrumb-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0;
  font-family: var(--ff-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.funnel-breadcrumb-item {
  display: inline-flex; align-items: center;
}
.funnel-breadcrumb-link {
  color: var(--ink-3, #8a7e7a);
  text-decoration: none;
  border-bottom: none !important;
  padding: 4px 0;
  transition: color 0.2s var(--ease, ease);
}
.funnel-breadcrumb-link:hover {
  color: var(--gold, #d9b87a);
}
.funnel-breadcrumb-sep {
  color: var(--ink-3, #8a7e7a);
  margin: 0 12px;
  opacity: 0.5;
}
.funnel-breadcrumb-current {
  color: var(--ink, #0c0613);
  font-weight: 500;
}

/* ═══ STAT STRIP (abundance ticker) ═══════════════════════════════════ */
.funnel-stat-strip {
  max-width: var(--maxw, 1220px);
  margin: 0 auto;
  padding: 16px var(--pad-x, clamp(20px, 4vw, 32px));
}
.funnel-stat-strip-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0;
  font-family: var(--ff-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.funnel-stat-strip-item {
  display: inline-flex; align-items: baseline; gap: 8px;
}
.funnel-stat-strip-num {
  font-family: var(--ff-display, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--gold, #d9b87a);
  line-height: 1;
}
.funnel-stat-strip-label {
  color: var(--ink-2, #4a4044);
  font-size: 11px;
}
.funnel-stat-strip-sep {
  color: var(--gold, #d9b87a);
  margin: 0 18px;
  opacity: 0.6;
  font-style: italic;
  font-family: var(--ff-display, "Cormorant Garamond", serif);
  font-size: 18px;
}
.funnel-stat-strip-item--pricing .funnel-stat-strip-num {
  color: var(--ink, #0c0613);
}

/* Variants */
.funnel-stat-strip--hero {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}
.funnel-stat-strip--hero .funnel-stat-strip-list { justify-content: center; }
.funnel-stat-strip--hero .funnel-stat-strip-num {
  font-size: 28px;
}
.funnel-stat-strip--subtle { opacity: 0.7; }
.funnel-stat-strip--subtle .funnel-stat-strip-num { font-size: 16px; }

/* Mobile */
@media (max-width: 700px) {
  .funnel-stat-strip-list { gap: 6px 0; }
  .funnel-stat-strip-num { font-size: 18px; }
  .funnel-stat-strip-label { font-size: 10px; }
  .funnel-stat-strip-sep { margin: 0 10px; font-size: 14px; }
  .funnel-stat-strip--hero .funnel-stat-strip-num { font-size: 22px; }
}

/* ═══ FUNNEL CTA (stage-aware conversion section) ═════════════════════ */
.funnel-cta {
  position: relative;
  padding: clamp(64px, 9vh, 96px) var(--pad-x, clamp(20px, 4vw, 32px));
  background:
    radial-gradient(ellipse at 30% 0%, rgba(217, 184, 122, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 100%, rgba(217, 184, 122, 0.06) 0%, transparent 40%),
    var(--bg-deep, #1a0f2e);
  color: var(--ink-on-deep, #f4ead4);
  text-align: center;
  overflow: hidden;
}
.funnel-cta-inner {
  max-width: 720px;
  margin: 0 auto;
}
.funnel-cta-eyebrow {
  font-family: var(--ff-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold, #d9b87a);
  margin: 0 0 18px;
}
.funnel-cta-h2 {
  font-family: var(--ff-display, "Cormorant Garamond", serif);
  font-weight: 500;
  font-size: clamp(32px, 5.5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink-on-deep, #f4ead4);
  margin: 0 0 20px;
}
.funnel-cta-h2 em.gilt {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(180deg, #f5dca5 0%, var(--gold, #d9b87a) 50%, #b8954a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.funnel-cta-sub {
  font-family: var(--ff-body, "Inter", sans-serif);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--ink-on-deep-2, rgba(244, 234, 212, 0.78));
  margin: 0 0 36px;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.funnel-cta-row {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center;
}
.funnel-cta-primary {
  font-family: var(--ff-body, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 600;
  background: var(--gold, #d9b87a);
  color: var(--ink, #0c0613);
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--gold, #d9b87a);
  min-height: 48px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.2s var(--ease, ease), transform 0.2s var(--ease, ease), box-shadow 0.3s var(--ease, ease);
  box-shadow: 0 4px 16px rgba(217, 184, 122, 0.18);
}
.funnel-cta-primary:hover {
  background: #f5dca5;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(217, 184, 122, 0.32);
}
.funnel-cta-secondary {
  font-family: var(--ff-body, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-on-deep-2, rgba(244, 234, 212, 0.78));
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(244, 234, 212, 0.22);
  background: transparent;
  min-height: 48px;
  display: inline-flex; align-items: center;
  transition: color 0.2s var(--ease, ease), border-color 0.2s var(--ease, ease);
}
.funnel-cta-secondary:hover {
  color: var(--ink-on-deep, #f4ead4);
  border-color: rgba(244, 234, 212, 0.5);
}
.funnel-cta-tertiary {
  font-family: var(--ff-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 234, 212, 0.55);
  text-decoration: none;
  padding: 12px 0;
  display: inline-flex; align-items: center;
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  border-top: 1px solid rgba(244, 234, 212, 0.10);
  padding-top: 20px;
  transition: color 0.2s var(--ease, ease);
}
.funnel-cta-tertiary:hover {
  color: var(--gold, #d9b87a);
}

/* Mid-page variant (inline, smaller, breaks up content sections) */
.funnel-cta--midpage {
  padding: clamp(48px, 7vh, 72px) var(--pad-x, clamp(20px, 4vw, 32px));
  background:
    radial-gradient(ellipse at 50% 50%, rgba(217, 184, 122, 0.08) 0%, transparent 60%),
    var(--bg-alt, #f5ede0);
  color: var(--ink, #0c0613);
  border-top: 1px solid var(--line, rgba(12, 6, 19, 0.08));
  border-bottom: 1px solid var(--line, rgba(12, 6, 19, 0.08));
}
.funnel-cta--midpage .funnel-cta-h2 { color: var(--ink, #0c0613); font-size: clamp(28px, 4vw, 40px); }
.funnel-cta--midpage .funnel-cta-sub { color: var(--ink-2, #4a4044); }
.funnel-cta--midpage .funnel-cta-eyebrow { color: var(--gold-dp, #b8954a); }
.funnel-cta--midpage .funnel-cta-secondary {
  color: var(--ink-2, #4a4044);
  border-color: var(--line-2, rgba(12, 6, 19, 0.18));
}
.funnel-cta--midpage .funnel-cta-secondary:hover {
  color: var(--ink, #0c0613);
  border-color: var(--ink, #0c0613);
}

/* Mobile */
@media (max-width: 700px) {
  .funnel-cta-row { flex-direction: column; align-items: stretch; }
  .funnel-cta-primary, .funnel-cta-secondary {
    width: 100%; justify-content: center;
  }
  .funnel-cta-tertiary { font-size: 10px; }
}

/* ═══ MONOGRAPH PILLAR BADGE ═════════════════════════════════════════ */
/* Subtle badge in the post hero showing "Lives in: {Pillar} library →" */
.gh-article-pillar-badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 14px;
  font-family: var(--ff-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dp, #b8954a);
  background: rgba(217, 184, 122, 0.08);
  border: 1px solid rgba(217, 184, 122, 0.3);
  border-radius: 999px;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.gh-article-pillar-badge:hover {
  background: rgba(217, 184, 122, 0.16);
  border-color: var(--gold, #d9b87a);
}
.gh-article-pillar-badge strong {
  color: var(--ink, #0c0613);
  font-weight: 600;
}

/* Monograph CTA wrapper — gives the in-article CTA a nice top separator */
.gh-monograph-cta {
  margin-top: clamp(48px, 7vh, 80px);
}

/* ═══ ALT-PATH LINK (subtle "Not sure" escape hatches) ════════════════ */
/* Used in hero quiz card + anywhere a "skip the segmentation, browse" link is appropriate. */
.quiz-alt-path,
.funnel-alt-path {
  display: inline-block;
  margin-top: 12px;
  margin-left: 16px;
  font-family: var(--ff-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3, #8a7e7a);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.quiz-alt-path:hover,
.funnel-alt-path:hover {
  color: var(--gold, #d9b87a);
  border-bottom-color: var(--gold, #d9b87a);
}
@media (max-width: 700px) {
  .quiz-alt-path, .funnel-alt-path { display: block; margin-left: 0; margin-top: 14px; }
}