/* ==========================================================================
   K11 Conversion System — page styles
   Hero formula, CTA hierarchy, trust stack, conversion systems, tracking
   demo with live event log, performance budgets and ethics.
   ========================================================================== */

/* ── Shared card surfaces on this page ──────────────────────────────────── */

.card-grid {
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}

/* Mono caption at the top of a card: "FORMS", "11.5 · PERFORMANCE …" */
.system-card__label,
.info-card__label,
.tracking-demo__label,
.cta-level__code,
.trust-item__key {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--graphite-500);
}

/* The CTA samples on this page may wrap on narrow cards (unlike .btn) */
.cta-lg,
.cta-sample,
.tracking-demo__btn,
.overlay-cta { white-space: normal; }

/* Larger static CTA samples (hero formula, trust stack): 52px pill */
.btn.cta-lg { height: 52px; }
.btn--primary.cta-lg { padding: 0 24px; }
.btn--outline.cta-lg { padding: 0 22px; }

/* ── 11.1 Hero formula ──────────────────────────────────────────────────── */

.hero-formula {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}

.hero-formula__example {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hero-formula__part { position: relative; }
.hero-formula__part--proof {
  padding-top: 4px;
  border-top: 1px dashed rgba(10, 122, 95, .5);
}

.hero-formula__headline {
  font: 500 clamp(40px, 1.4rem + 3vw, 72px)/.96 'Geist', sans-serif;
  letter-spacing: -.045em;
}
.hero-formula__headline em { font: italic 400 1.1em 'Instrument Serif', serif; }

/* Numbered annotation tags ①–④ */
.hero-formula__tag {
  font: 500 11px/1 'Geist Mono', monospace;
  color: var(--scrub-600);
}
.hero-formula__tag--corner {
  position: absolute;
  right: 0;
  top: -18px;
}
.hero-formula__tag--below {
  display: block;
  margin-top: 6px;
}

.hero-formula__proof { font: 400 18px/1.5 'Geist', sans-serif; }

/* Citation chip */
.hero-formula__cite {
  margin-left: 4px;
  padding: 1px 4px;
  border: 1px solid var(--ink-a30);
  border-radius: 3px;
  font: 500 10px 'Geist Mono', monospace;
}

.hero-formula__stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-formula__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-formula__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font: 400 12px/1 'Geist Mono', monospace;
  color: var(--graphite-600);
}

.formula-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.formula-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.formula-step__num {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--scrub-600);
  border-radius: 50%;
  color: var(--scrub-600);
  font: 500 12px/1 'Geist Mono', monospace;
}

.formula-step__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.formula-step__title { font: 500 15px/1.3 'Geist', sans-serif; }

.formula-step__text {
  font: 400 14px/1.45 'Geist', sans-serif;
  color: var(--graphite-600);
}

/* ── 11.2 CTA hierarchy ─────────────────────────────────────────────────── */

.cta-levels {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
  overflow: hidden;
}

.cta-level {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ink-a08);
}

.cta-level__name {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cta-level__title { font: 500 17px/1.2 'Geist', sans-serif; }

.cta-level__text {
  font: 400 14px/1.5 'Geist', sans-serif;
  color: var(--graphite-600);
}

/* Static CTA samples, one per level (44px, always a 1px border) */
.cta-sample {
  align-self: center;
  justify-self: start;
  height: 44px;
  padding: 0 18px;
  border-width: 1px;
  border-style: solid;
  font-size: 15px;
  text-underline-offset: 3px;
}
.btn--primary.cta-sample { border-color: var(--scrub-600); }
.btn--outline.cta-sample,
.btn--ink-outline.cta-sample { background: var(--graphite-0); }
.cta-sample--link {
  color: var(--scrub-600);
  text-decoration: underline;
}

.rule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

.rule-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: var(--radius-l);
  background: var(--graphite-900);
  color: var(--graphite-mist);
}

.rule-card__label {
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--scrub-300);
}

.rule-card__title { font: 500 20px/1.3 'Geist', sans-serif; }

.rule-card__text {
  font: 400 14px/1.5 'Geist', sans-serif;
  color: var(--mist-300);
}

/* ── 11.3 Trust stack ───────────────────────────────────────────────────── */

.trust-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}

.trust-stack__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.trust-stack__microcopy {
  font: 400 14px/1.4 'Geist', sans-serif;
  color: var(--graphite-600);
}

.trust-stack__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  border-top: 1px solid var(--color-hairline);
}

.trust-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 0 0;
}

.trust-item__value { font: 500 15px/1.3 'Geist', sans-serif; }

.trust-item__why {
  font: 400 12px/1.4 'Geist', sans-serif;
  color: var(--graphite-500);
}

/* ── Conversion systems ─────────────────────────────────────────────────── */

.system-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}

.system-card__title {
  font: 500 22px/1.2 'Geist', sans-serif;
  letter-spacing: -.01em;
}

.system-card__item {
  display: flex;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(10, 18, 22, .06);
  font: 400 14px/1.5 'Geist', sans-serif;
  color: var(--graphite-750);
}
.system-card__item::before {
  content: '—';
  flex: none;
  font: 500 11px/1.9 'Geist Mono', monospace;
  color: var(--graphite-500);
}

/* ── 11.4 Tracking-ready ────────────────────────────────────────────────── */

.tracking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 20px;
}

.tracking-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}

.tracking-demo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tracking-demo__btn { font-size: 15px; }
.tracking-demo__btn--outline { background: var(--graphite-0); }
.tracking-demo__btn--link {
  padding: 0 12px;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Live dataLayer log — newest entry first, max 8 */
.event-log {
  min-height: 140px;
  padding: 14px 16px;
  border-radius: var(--radius-m);
  background: var(--graphite-950);
  color: var(--graphite-mist);
  font: 400 12px/1.7 'Geist Mono', monospace;
  overflow: auto;
}

.event-log__muted { color: var(--mist-400); }
.event-log__event { color: var(--scrub-300); }

.code-block {
  margin: 0;
  padding: 24px;
  border-radius: var(--radius-l);
  background: var(--graphite-950);
  color: var(--graphite-mist);
  font: 400 13px/1.7 'Geist Mono', monospace;
  overflow-x: auto;
}

.code-block__comment { color: var(--mist-400); }

/* ── 11.5 Performance · 11.6 Ethics · overlay card ──────────────────────── */

.info-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-l);
  background: var(--graphite-0);
}
.info-card--ethics { gap: 12px; }
.info-card--dark {
  gap: 12px;
  border: 0;
  background: var(--graphite-900);
  color: var(--graphite-mist);
}
.info-card--dark .info-card__label { color: var(--scrub-300); }

.info-card__note {
  font: 400 13px/1.45 'Geist', sans-serif;
  color: var(--graphite-600);
}

.info-card__lead { font: 400 15px/1.55 'Geist', sans-serif; }

/* Budget bar: style="--value: 80%" */
.perf-budget {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.perf-budget__head {
  display: flex;
  justify-content: space-between;
  font: 500 14px/1 'Geist', sans-serif;
}

.perf-budget__value {
  font-family: 'Geist Mono', monospace;
  font-variant-numeric: tabular-nums;
}

.perf-budget__track {
  height: 6px;
  border-radius: 3px;
  background: var(--ink-a10);
  overflow: hidden;
}

.perf-budget__bar {
  display: block;
  width: var(--value);
  height: 100%;
  background: var(--graphite-900);
}

.ethics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-a07);
  font: 400 13px/1.45 'Geist', sans-serif;
}

.ethics-row__cell {
  display: flex;
  gap: 6px;
}

.ethics-row__mark { flex: none; }
.ethics-row__mark--no { color: var(--red-600); }
.ethics-row__mark--ok { color: var(--leaf-700); }

.ethics-row__no {
  color: var(--graphite-600);
  text-decoration: line-through;
  text-decoration-color: rgba(184, 38, 28, .5);
}

/* Scrub-glow CTA on the dark overlay card */
.overlay-cta {
  align-self: flex-start;
  height: 44px;
  padding: 0 18px;
  border: 0;
  background: var(--scrub-300);
  color: var(--graphite-900);
  font-size: 15px;
}
.overlay-cta:hover {
  background: #7BEBC0;
  color: var(--graphite-900);
}

/* ── Pager ──────────────────────────────────────────────────────────────── */

.k11-pager { max-width: 1120px; }