/* ═══════════════════════════════════════════════════════════════════
   KOPPD — SHARED DESIGN SYSTEM
   One CSS file, used by every page. Edit here, it updates everywhere.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0B0B0B;
  --bg-2: #080808;
  --surface: #141414;
  --surface-2: #1A1A1A;
  --surface-3: #1F1F1F;
  --border: #232323;
  --border-strong: #2E2E2E;
  --text: #F5F5F5;
  --text-dim: #C8C8C8;
  --muted: #8A8A8A;
  --muted-soft: #5E5E5E;
  --accent: #FF6B35;
  --accent-hover: #FF7D4D;
  --accent-deep: #E8501A;
  --accent-soft: rgba(255,107,53,0.10);
  --accent-glow: rgba(255,107,53,0.22);
  --success: #22C55E;
  --danger: #EF4444;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 180ms;
  --t-base: 360ms;
  --t-slow: 560ms;
  --stagger: 70ms;
  --ty: 20px;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --container: 1200px;
  --container-narrow: 900px;
  --gutter: clamp(20px, 4vw, 36px);
}
@media (max-width: 768px) { :root { --ty: 12px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  background: var(--bg); color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font-family: inherit; }
::selection { background: var(--accent); color: #0B0B0B; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }
.container.narrow { max-width: var(--container-narrow); }

/* ═══════ NAV ═══════ */
nav.top {
  position: sticky; top: 0; z-index: 50;
  padding: 18px 0;
  background: rgba(11,11,11,0.78);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease), padding var(--t-base) var(--ease);
}
nav.top.scrolled { border-bottom-color: var(--border); padding: 12px 0; }
nav.top .inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; }

.logo {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: clamp(26px, 2.8vw, 32px);
  letter-spacing: -1.8px; line-height: 1;
  color: var(--text);
}
.logo .d { color: var(--accent); }

.nav-links {
  display: flex; align-items: center; gap: 30px;
  font-size: 14px; font-weight: 500; color: var(--text-dim);
}
.nav-links a { transition: color var(--t-fast) var(--ease); position: relative; padding: 4px 0; }
.nav-links a:hover { color: var(--text); }
.nav-links a.current { color: var(--text); }
.nav-links a.current::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.nav-right { display: flex; align-items: center; gap: 14px; }

/* Mobile nav */
.nav-burger {
  display: none;
  width: 40px; height: 40px; border: 1px solid var(--border-strong);
  border-radius: 10px; background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-burger:hover { border-color: var(--accent); background: var(--accent-soft); }
.nav-burger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 49;
  background: rgba(11,11,11,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none;
  flex-direction: column;
  padding: 100px var(--gutter) 40px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 18px 0;
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 28px; letter-spacing: -1px;
  border-bottom: 1px solid var(--border);
  transition: color var(--t-fast) var(--ease);
}
.mobile-menu a:hover, .mobile-menu a.current { color: var(--accent); }
.mobile-menu .mm-cta { margin-top: 32px; }

/* ═══════ BUTTONS ═══════ */
.k-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  font-family: 'DM Sans'; font-weight: 600; font-size: 15px;
  border: 1px solid var(--border-strong); border-radius: 100px;
  background: transparent; color: var(--text); cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.k-btn:hover { transform: translateY(-1px); border-color: #555; background: var(--surface-2); }
.k-btn:active { transform: translateY(0); }
.k-btn.primary {
  background: var(--accent); border-color: var(--accent); color: #0B0B0B; font-weight: 700;
}
.k-btn.primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); color: #0B0B0B;
  box-shadow: 0 14px 32px rgba(255,107,53,0.30);
}
.k-btn.sm { padding: 11px 18px; font-size: 13px; }
.k-btn.lg { padding: 18px 30px; font-size: 16px; }
.k-btn.full { width: 100%; justify-content: center; }
.k-btn .k-arrow {
  font-family: 'Cabinet Grotesk'; font-weight: 700; font-size: 18px; line-height: 1;
  transition: transform var(--t-fast) var(--ease);
}
.k-btn:hover .k-arrow { transform: translateX(4px); }

/* ═══════ SECTIONS & TYPE ═══════ */
section { padding: clamp(52px, 7vh, 88px) 0; position: relative; z-index: 1; }
section.tight { padding: clamp(36px, 5vh, 56px) 0; }

.eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  padding: 5px 12px; background: var(--accent-soft);
  border: 1px solid rgba(255,107,53,0.18);
  border-radius: 100px;
}
.section-head {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: clamp(32px, 4.8vw, 52px);
  line-height: 0.98; letter-spacing: -1.8px;
  margin-bottom: 18px; max-width: 900px;
}
.section-head .accent { color: var(--accent); }
.section-lede {
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--text-dim); max-width: 680px;
  margin-bottom: 40px; line-height: 1.55;
}

/* ═══════ HERO (shared across pages) ═══════ */
.hero {
  padding: clamp(52px, 7vh, 88px) 0 clamp(44px, 6vh, 72px);
  text-align: left; position: relative; overflow: hidden;
}
.hero-glow {
  position: absolute; top: -12%; right: -8%;
  width: 60vw; height: 60vw; max-width: 820px; max-height: 820px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 55%);
  filter: blur(40px); pointer-events: none; z-index: 0; opacity: 0.5;
}
.hero .inner { max-width: 1040px; position: relative; z-index: 1; }
.hero h1 {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: clamp(42px, 6.8vw, 84px);
  line-height: 0.94; letter-spacing: -3px;
  margin-bottom: 14px;
}
.hero h1 .accent { color: var(--accent); }
.hero h1.medium {
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: -2.8px;
}
.hero-sub {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.1; letter-spacing: -1.1px;
  color: var(--text); margin-bottom: 22px;
  max-width: 820px;
}
.hero-sub .muted { color: var(--muted); font-weight: 500; }
.hero-lede {
  font-size: clamp(16px, 1.2vw, 18px);
  color: var(--text-dim); max-width: 640px; margin-bottom: 32px;
  line-height: 1.55;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ═══════ CARDS (shared) ═══════ */
.k-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 30px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.k-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(255,107,53,0) 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.k-card:hover { transform: translateY(-3px); border-color: rgba(255,107,53,0.38); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.k-card:hover::before { transform: scaleX(1); }
.k-card-link-row { margin-top: 22px; }
.pillar-index {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 3px; color: var(--accent); margin-bottom: 18px;
}
.pillar-title {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 26px; line-height: 1.05; letter-spacing: -0.8px;
  margin-bottom: 12px;
}
.pillar-desc { color: var(--muted); font-size: 14.5px; line-height: 1.6; flex-grow: 1; }
.pillar-link {
  font-family: 'DM Sans'; font-weight: 600; font-size: 13.5px;
  color: var(--accent); display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: 0.2px; align-self: flex-start;
}
.pillar-link .k-arrow { font-family: 'Cabinet Grotesk'; font-weight: 800; font-size: 17px; line-height: 1; transition: transform var(--t-fast) var(--ease); }
.k-card:hover .pillar-link .k-arrow { transform: translateX(5px); }

.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .three-col { grid-template-columns: 1fr; } }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

/* ═══════ BELIEFS (home) ═══════ */
.beliefs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 36px; margin-top: 28px;
}
@media (max-width: 820px) { .beliefs { grid-template-columns: 1fr; gap: 28px; } }
.belief h3 {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.5px;
  margin-bottom: 10px;
}
.belief h3 .accent { color: var(--accent); }
.belief p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* ═══════ FORMS (shared) ═══════ */
.form-block {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
}
.form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-row:last-of-type { margin-bottom: 0; }
.form-row label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
}
.form-row input, .form-row textarea, .form-row select {
  padding: 14px 16px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 15px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,107,53,0.12);
}
.form-row textarea { min-height: 110px; resize: vertical; line-height: 1.55; font-family: 'DM Sans'; }
.form-row .hint { font-size: 12.5px; color: var(--muted-soft); }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; gap: 0; } }

/* Slider */
.slider-row { margin-bottom: 20px; }
.slider-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 10px;
}
.slider-head label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}
.slider-value {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 20px; letter-spacing: -0.4px;
  color: var(--accent);
}
input[type="range"] {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 6px; background: var(--surface-2); border-radius: 10px;
  outline: none; border: 1px solid var(--border);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255,107,53,0.4);
  transition: transform var(--t-fast) var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg);
  cursor: pointer;
}

/* Form feedback */
.form-msg {
  margin-top: 18px; font-size: 14px; min-height: 20px;
  font-family: 'DM Sans'; font-weight: 500;
}
.form-msg.ok { color: var(--success); }
.form-msg.err { color: var(--danger); }

/* Success state block (post-submit follow-insta nudge) */
.form-success {
  display: none;
  background: var(--accent-soft);
  border: 1px solid rgba(255,107,53,0.3);
  border-radius: var(--radius); padding: 28px 26px;
  margin-top: 24px;
  text-align: center;
}
.form-success.shown { display: block; }
.form-success h4 {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 22px; letter-spacing: -0.5px; margin-bottom: 10px;
}
.form-success p { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }

/* Inline email pill form */
.pill-form {
  max-width: 540px; margin: 0;
  display: flex; gap: 8px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 100px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pill-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,107,53,0.10); }
.pill-form input {
  flex: 1; background: transparent; border: none;
  padding: 15px 22px; color: var(--text);
  font-family: 'DM Sans'; font-size: 15px;
}
.pill-form input:focus { outline: none; }
.pill-form input::placeholder { color: var(--muted-soft); }
.pill-form button {
  padding: 15px 28px; border-radius: 100px;
  background: var(--accent); color: #0B0B0B;
  font-family: 'DM Sans'; font-weight: 700; font-size: 14px;
  border: none; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pill-form button:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255,107,53,0.35); }
.pill-form button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
@media (max-width: 560px) {
  .pill-form { flex-direction: column; border-radius: var(--radius); padding: 10px; }
  .pill-form input { padding: 14px 16px; }
  .pill-form button { padding: 15px 24px; width: 100%; }
}

/* ═══════ LIST (bullets) ═══════ */
.k-list { list-style: none; margin: 0; padding: 0; }
.k-list li {
  padding: 14px 0 14px 28px; font-size: 15px; color: var(--text-dim);
  position: relative; border-bottom: 1px solid var(--border); line-height: 1.55;
}
.k-list li:last-child { border-bottom: none; }
.k-list li::before {
  content: '+'; position: absolute; left: 0; top: 12px;
  color: var(--accent); font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 18px; line-height: 1;
}
.k-list li strong { color: var(--text); font-weight: 700; }

.k-list-neg li::before { content: '×'; font-weight: 500; color: var(--muted); }

/* ═══════ TOOL CARDS (learn) ═══════ */
.tools-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.tool-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none;
  transition: transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              opacity var(--t-base) var(--ease),
              filter var(--t-base) var(--ease);
}
.tool-card:hover { transform: translateY(-3px); border-color: rgba(255,107,53,0.4); box-shadow: 0 16px 32px rgba(0,0,0,0.35); }
.tool-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: 2.2px; text-transform: uppercase; color: var(--accent);
}
.tool-name {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 20px; letter-spacing: -0.5px; line-height: 1;
}
.tool-desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; flex-grow: 1; }
.tool-arrow {
  font-family: 'Cabinet Grotesk'; font-weight: 800; font-size: 18px;
  color: var(--accent); margin-top: auto;
  transition: transform var(--t-fast) var(--ease);
}
.tool-card:hover .tool-arrow { transform: translateX(5px); }

/* ═══════ TIMELINE (course agenda) ═══════ */
.timeline {
  position: relative;
  padding: 8px 0 8px 40px;
  border-left: 2px solid var(--border);
  margin-top: 28px;
}
.timeline-item { position: relative; padding: 0 0 32px 0; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ''; position: absolute; top: 10px; left: -48px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
  transition: background var(--t-base) var(--ease);
}
.timeline-item:hover::before,
.timeline-item.open::before { background: var(--accent); }
.timeline-time {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 2.5px; color: var(--accent); margin-bottom: 4px;
}
.timeline-head {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 20px; letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 6px;
}
.timeline-desc { color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 720px; }

/* Interactive-timeline extensions */
.timeline-item[data-timeline-toggle] { cursor: pointer; }
.timeline-head-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px;
}
.timeline-toggle {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-family: 'Cabinet Grotesk'; font-weight: 800; font-size: 14px;
  transition: transform var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
  margin-top: 4px;
}
.timeline-item.open .timeline-toggle {
  transform: rotate(45deg); color: var(--accent); border-color: var(--accent);
}
.timeline-outcome {
  margin-top: 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--t-slow) var(--ease),
              opacity var(--t-slow) var(--ease),
              margin-top var(--t-base) var(--ease);
}
.timeline-item.open .timeline-outcome {
  max-height: 500px; opacity: 1; margin-top: 14px;
}
.timeline-outcome-inner {
  padding: 16px 18px;
  background: var(--accent-soft);
  border: 1px solid rgba(255,107,53,0.22);
  border-radius: var(--radius-sm);
  max-width: 720px;
}
.timeline-outcome-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.timeline-outcome-body { font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.timeline-outcome-body strong { color: var(--text); font-weight: 700; }

/* ═══════ FAQ ═══════ */
.faq-grid {
  display: grid; grid-template-columns: 1fr; gap: 0;
  max-width: 880px;
  border-top: 1px solid var(--border);
}
details.faq {
  border-bottom: 1px solid var(--border); padding: 4px 0;
}
details.faq summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 4px; cursor: pointer;
  font-family: 'Cabinet Grotesk'; font-weight: 700;
  font-size: clamp(17px, 1.6vw, 20px); letter-spacing: -0.3px;
  list-style: none; transition: color var(--t-fast) var(--ease);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary:hover { color: var(--accent); }
details.faq .faq-toggle {
  width: 28px; height: 28px; border: 1px solid var(--border-strong);
  border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cabinet Grotesk'; font-weight: 800; font-size: 16px;
  color: var(--muted);
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
details.faq[open] .faq-toggle { transform: rotate(45deg); color: var(--accent); border-color: var(--accent); }
details.faq .faq-body {
  padding: 0 4px 26px 4px;
  color: var(--text-dim); font-size: 15px; line-height: 1.65; max-width: 720px;
}
details.faq .faq-body p { margin-bottom: 12px; }
details.faq .faq-body p:last-child { margin-bottom: 0; }

/* ═══════ COURSE CARD (booking area) ═══════ */
.course-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4.5vw, 52px);
  overflow: hidden;
  margin-bottom: 28px;
}
.course-card::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,53,0.14) 0%, transparent 60%);
  pointer-events: none;
}
.course-specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  padding: 22px 0; margin-top: 24px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: relative; z-index: 1;
}
@media (max-width: 640px) { .course-specs { grid-template-columns: 1fr; gap: 16px; } }
.spec-label {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.spec-value {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 22px; letter-spacing: -0.4px; line-height: 1.1;
}
.spec-value .muted { color: var(--muted); font-size: 15px; font-weight: 500; }

.calendar-placeholder {
  background: var(--bg-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 36px);
  text-align: center;
  margin-top: 16px;
}
.calendar-placeholder h4 {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 20px; letter-spacing: -0.4px; margin-bottom: 8px;
}
.calendar-placeholder p { color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 480px; margin: 0 auto 20px; }

/* Split layout: calendar + price breakdown */
.booking-split {
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: 20px; align-items: stretch;
}
@media (max-width: 980px) { .booking-split { grid-template-columns: 1fr; } }

/* ═══════ MARKETPLACE TRACKS ═══════ */
.market-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .market-split { grid-template-columns: 1fr; } }
.market-panel {
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.5vw, 40px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.market-panel::before {
  content: ''; position: absolute; top: 0; left: 0; width: 3px; bottom: 0;
  background: var(--accent);
}
.market-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.market-head {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 26px; line-height: 1.12; letter-spacing: -0.8px;
  margin-bottom: 14px;
}
.market-desc { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin-bottom: 20px; }

.standards-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-top: 24px;
}
@media (max-width: 760px) { .standards-grid { grid-template-columns: 1fr; } }
.standard-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.standard-item .std-head {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 16px; letter-spacing: -0.3px; margin-bottom: 6px;
}
.standard-item .std-body { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* ═══════ ABOUT PAGE ═══════ */
.about-hero {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 40px; align-items: center;
}
@media (max-width: 820px) { .about-hero { grid-template-columns: 1fr; } }
.about-copy p { font-size: 16px; color: var(--text-dim); line-height: 1.7; margin-bottom: 18px; }
.about-copy p:last-child { margin-bottom: 0; }
.about-stats {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px 28px;
}
.about-stat { padding: 16px 0; border-bottom: 1px solid var(--border); }
.about-stat:first-child { padding-top: 0; }
.about-stat:last-child { padding-bottom: 0; border-bottom: none; }
.about-stat-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.about-stat-value {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 20px; letter-spacing: -0.4px; line-height: 1.15;
}

/* ═══════ INLINE NUDGE (bottom of interior pages) ═══════ */
.nudge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .nudge-grid { grid-template-columns: 1fr; } }
.nudge-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nudge-item:hover { border-color: rgba(255,107,53,0.4); transform: translateY(-2px); }
.nudge-head {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 17px; letter-spacing: -0.3px;
}
.nudge-body { font-size: 13.5px; color: var(--muted); line-height: 1.55; flex-grow: 1; }
.nudge-link {
  font-family: 'DM Sans'; font-weight: 600; font-size: 13.5px;
  color: var(--accent); display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
}

/* ═══════ FOUNDER QUOTE ═══════ */
.founder {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 52px);
  max-width: 880px; margin: 0 auto;
  text-align: center; position: relative; overflow: hidden;
}
.founder::before {
  content: '"';
  position: absolute; top: 0; left: 24px;
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 200px; line-height: 1; color: var(--accent-soft);
  pointer-events: none; z-index: 0;
}
.founder-quote {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.25; letter-spacing: -0.6px;
  margin-bottom: 24px; position: relative; z-index: 1;
}
.founder-quote .accent { color: var(--accent); }
.founder-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--muted); position: relative; z-index: 1;
}

/* ═══════ FOOTER ═══════ */
footer {
  padding: 56px 0 32px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  position: relative; z-index: 1;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 40px;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .logo { margin-bottom: 14px; display: inline-block; }
.footer-tagline { font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 320px; }
.footer-col-title {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--text-dim); font-weight: 500; transition: color var(--t-fast) var(--ease); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 20px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  letter-spacing: 1px; color: var(--muted);
}
.footer-bottom a { color: var(--muted); transition: color var(--t-fast) var(--ease); }
.footer-bottom a:hover { color: var(--text); }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* ═══════ ANIMATIONS (base) ═══════ */
.k-reveal {
  opacity: 0; transform: translateY(var(--ty));
  animation: k-fade-up var(--t-slow) var(--ease) forwards;
}
@keyframes k-fade-up { to { opacity: 1; transform: translateY(0); } }
.k-reveal:nth-child(1) { animation-delay: 40ms; }
.k-reveal:nth-child(2) { animation-delay: 120ms; }
.k-reveal:nth-child(3) { animation-delay: 200ms; }
.k-reveal:nth-child(4) { animation-delay: 280ms; }
.k-reveal:nth-child(5) { animation-delay: 360ms; }
.k-reveal:nth-child(6) { animation-delay: 440ms; }

.k-scroll-reveal {
  opacity: 0; transform: translateY(var(--ty));
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.k-scroll-reveal.k-visible { opacity: 1; transform: translateY(0); }
.k-stagger > * {
  opacity: 0; transform: translateY(var(--ty));
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.k-visible.k-stagger > *,
.k-stagger.k-visible > * { opacity: 1; transform: translateY(0); }
.k-stagger.k-visible > *:nth-child(1) { transition-delay: 0ms; }
.k-stagger.k-visible > *:nth-child(2) { transition-delay: calc(var(--stagger) * 1); }
.k-stagger.k-visible > *:nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
.k-stagger.k-visible > *:nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
.k-stagger.k-visible > *:nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
.k-stagger.k-visible > *:nth-child(6) { transition-delay: calc(var(--stagger) * 5); }
.k-stagger.k-visible > *:nth-child(7) { transition-delay: calc(var(--stagger) * 6); }
.k-stagger.k-visible > *:nth-child(8) { transition-delay: calc(var(--stagger) * 7); }
.k-stagger.k-visible > *:nth-child(9) { transition-delay: calc(var(--stagger) * 8); }
.k-stagger.k-visible > *:nth-child(10) { transition-delay: calc(var(--stagger) * 9); }

/* ═══════════════════════════════════════════════════════════════════
   INTERACTIVE COMPONENTS — quiz, comparison, counter, prompt demo,
   tool filter, price card, process steps, refusals
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Quiz (door quiz + is-this-you) ─── */
.k-quiz {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
}
.k-quiz::before {
  content: '';
  position: absolute; top: 0; left: 0; width: 3px; bottom: 0;
  background: var(--accent);
}
.k-quiz-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.k-quiz-question {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15; letter-spacing: -0.8px;
  margin-bottom: 22px;
}
.k-quiz-progress {
  display: flex; gap: 4px; margin-bottom: 24px;
}
.k-quiz-progress-dot {
  flex: 1; height: 3px; background: var(--border);
  border-radius: 2px;
  transition: background var(--t-base) var(--ease);
}
.k-quiz-progress-dot.done { background: var(--accent); }
.k-quiz-options {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}
.k-quiz-option {
  width: 100%; text-align: left;
  padding: 18px 22px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: 'DM Sans'; font-size: 15px; font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.k-quiz-option:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateX(4px);
}
.k-quiz-option-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 2px; color: var(--accent);
  min-width: 20px;
}
.k-quiz-step {
  display: none;
  animation: k-quiz-slide var(--t-base) var(--ease) forwards;
}
.k-quiz-step.active { display: block; }
@keyframes k-quiz-slide {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.k-quiz-result {
  display: none;
  padding: 26px; background: var(--accent-soft);
  border: 1px solid rgba(255,107,53,0.3);
  border-radius: var(--radius);
}
.k-quiz-result.active {
  display: block;
  animation: k-quiz-reveal var(--t-slow) var(--ease) forwards;
}
@keyframes k-quiz-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.k-quiz-result-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.k-quiz-result-head {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15; letter-spacing: -0.8px;
  margin-bottom: 12px;
}
.k-quiz-result-body {
  font-size: 15px; color: var(--text-dim);
  line-height: 1.6; margin-bottom: 20px;
}
.k-quiz-restart {
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--muted); cursor: pointer;
  font-family: 'DM Sans'; font-weight: 500; font-size: 13px;
  padding: 10px 18px; border-radius: 100px;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  margin-top: 14px;
  margin-left: 10px;
}
.k-quiz-restart:hover { border-color: var(--accent); color: var(--accent); }

/* ─── Comparison cards (home "What We Believe") ─── */
.compare-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 28px;
}
@media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 26px;
  display: flex; flex-direction: column; gap: 16px;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.compare-card:hover { border-color: rgba(255,107,53,0.4); transform: translateY(-3px); }
.compare-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent);
}
.compare-head {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 22px; letter-spacing: -0.5px; line-height: 1.15;
}
.compare-head .accent { color: var(--accent); }
.compare-swap {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  border-top: 1px solid var(--border); padding-top: 16px;
}
.compare-side {
  padding: 14px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.5;
}
.compare-side.bad {
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.2);
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(239,68,68,0.5);
}
.compare-side.good {
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.22);
  color: var(--text);
}
.compare-side-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 6px; opacity: 0.85;
  text-decoration: none;
  display: block;
}
.compare-side.bad .compare-side-label { color: var(--danger); }
.compare-side.good .compare-side-label { color: var(--success); }
.compare-foot {
  font-size: 13.5px; color: var(--muted); line-height: 1.55;
  border-top: 1px solid var(--border); padding-top: 16px;
  margin-top: 4px;
}

/* ─── Counter strip (home) ─── */
.counter-strip {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  margin-top: 28px;
}
.counter-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 820px) { .counter-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.counter-item { text-align: left; padding: 4px 0; }
.counter-num {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: clamp(42px, 5.2vw, 64px);
  letter-spacing: -3px; line-height: 1;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 4px;
}
.counter-num-unit {
  font-size: 0.55em; color: var(--muted); letter-spacing: -1px;
}
.counter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim);
  line-height: 1.35;
}

/* ─── Prompt demo (learn) ─── */
.demo-block {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  margin-bottom: 28px;
  margin-top: 28px;
}
.demo-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.demo-title {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.6px; margin-bottom: 8px;
}
.demo-title .accent { color: var(--accent); }
.demo-lede {
  font-size: 14.5px; color: var(--muted); line-height: 1.55;
  margin-bottom: 20px; max-width: 640px;
}
.demo-tabs {
  display: flex; gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.demo-tabs::-webkit-scrollbar { display: none; }
.demo-tab {
  padding: 12px 18px; background: transparent; color: var(--text-dim);
  border: none; cursor: pointer;
  font-family: 'DM Sans'; font-weight: 600; font-size: 14px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.demo-tab:hover { color: var(--text); }
.demo-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.demo-pane { display: none; }
.demo-pane.active {
  display: block;
  animation: k-fade-up var(--t-base) var(--ease) forwards;
}
.demo-pane-col-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted);
  margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.demo-code {
  background: #050505; border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; line-height: 1.65; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  margin-bottom: 18px;
  max-height: 340px; overflow-y: auto;
}
.demo-output {
  background: var(--bg-2); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-size: 14px; line-height: 1.6; color: var(--text-dim);
  white-space: pre-wrap;
}
.demo-output strong { color: var(--text); font-weight: 700; }
.demo-copy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
  background: transparent; border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 14px; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.demo-copy:hover { border-color: var(--accent); background: var(--accent-soft); }
.demo-copy.copied { background: var(--accent); color: #0B0B0B; border-color: var(--accent); }

/* ─── Tool filter (learn) ─── */
.tool-filter {
  display: flex; gap: 8px;
  flex-wrap: wrap; margin-bottom: 24px;
}
.tool-filter-chip {
  padding: 9px 18px;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border-strong); border-radius: 100px;
  font-family: 'DM Sans'; font-weight: 500; font-size: 13px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.tool-filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.tool-filter-chip.active {
  background: var(--accent); border-color: var(--accent); color: #0B0B0B;
  font-weight: 700;
}
.tools-grid.filtering .tool-card:not(.match) {
  opacity: 0.22; pointer-events: none;
  filter: grayscale(0.7);
}

/* ─── Price breakdown (course) ─── */
.value-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3.5vw, 36px);
  display: flex; flex-direction: column;
  height: 100%;
}
.value-card-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.value-card-head {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 22px; letter-spacing: -0.5px; line-height: 1.2;
  margin-bottom: 8px;
}
.value-card-head .accent { color: var(--accent); }
.value-card-lede {
  font-size: 14px; color: var(--muted); line-height: 1.55;
  margin-bottom: 22px;
}
.value-list {
  border-top: 1px solid var(--border);
  margin-bottom: 6px;
}
.value-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border);
}
.value-row-label {
  font-size: 14px; color: var(--text-dim); flex: 1; line-height: 1.45;
}
.value-row-label strong { color: var(--text); font-weight: 700; }
.value-row-value {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 15px; letter-spacing: -0.2px;
  color: var(--muted); white-space: nowrap;
}
.value-total-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 2px 6px;
  margin-top: 4px;
  border-top: 2px solid var(--accent);
}
.value-total-row .value-row-label {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 16px; letter-spacing: -0.3px; color: var(--muted);
}
.value-total-row .value-row-value {
  font-size: 22px; color: var(--muted); text-decoration: line-through;
  text-decoration-color: var(--muted);
}
.value-price-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 8px 2px 0;
}
.value-price-row .value-row-label {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 20px; letter-spacing: -0.5px; color: var(--text);
}
.value-price-row .value-row-value {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: clamp(28px, 3.6vw, 38px); letter-spacing: -1px;
  color: var(--accent); text-decoration: none;
}
.value-price-row .value-row-value.tbc {
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.4px;
}
.value-savings {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--success);
  text-align: right;
}
.value-card-note {
  margin-top: 16px;
  font-size: 12.5px; color: var(--muted-soft); line-height: 1.5;
  font-style: italic;
}

/* ─── Process steps (marketplace) ─── */
.process-strip { margin: 16px 0 0; }
.process-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 1040px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .process-grid { grid-template-columns: 1fr; } }
.process-step {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  min-height: 220px;
}
.process-step:hover { border-color: rgba(255,107,53,0.4); transform: translateY(-2px); }
.process-num {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 44px; letter-spacing: -2px; line-height: 0.9;
  color: var(--accent);
  margin-bottom: 4px;
}
.process-name {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: -2px;
}
.process-head {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 18px; letter-spacing: -0.4px; line-height: 1.1;
}
.process-desc { font-size: 13px; color: var(--muted); line-height: 1.55; flex-grow: 1; }
.process-time {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
  padding-top: 10px; border-top: 1px solid var(--border);
}

/* ─── Refusals (about) ─── */
.refusals {
  display: grid; grid-template-columns: 1fr;
  gap: 14px; margin-top: 28px;
}
.refusal-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
  display: grid; grid-template-columns: auto 1fr;
  gap: 22px; align-items: start;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.refusal-item:hover { border-color: rgba(255,107,53,0.4); transform: translateX(3px); }
.refusal-mark {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: 56px; line-height: 0.8;
  color: var(--accent);
  width: 56px; text-align: center;
}
.refusal-head {
  font-family: 'Cabinet Grotesk'; font-weight: 800;
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: -0.5px; line-height: 1.15;
  margin-bottom: 8px;
}
.refusal-head .accent { color: var(--accent); }
.refusal-body { font-size: 14px; color: var(--muted); line-height: 1.55; }
@media (max-width: 600px) {
  .refusal-item { grid-template-columns: 1fr; gap: 12px; padding: 22px 22px; }
  .refusal-mark { font-size: 42px; text-align: left; width: auto; }
}

/* ═══════ REDUCED MOTION ═══════ */
@media (prefers-reduced-motion: reduce) {
  .k-reveal, .k-scroll-reveal, .k-stagger > *,
  .k-quiz-step, .k-quiz-result, .demo-pane {
    opacity: 1 !important; transform: none !important;
    animation: none !important; transition: none !important;
  }
}

/* ═══════ PARTICLE BACKGROUND ═══════
   Canvas is fixed-position and sits at z-index: 0 in the root stacking context.
   The sibling <section> and <footer> blocks are static by default — which paints
   them BELOW any positioned z-index: 0 element. So we lift them to z-index: 1
   with position: relative, which gives each one its own stacking context that
   sits cleanly above the canvas. Nav already has z-index: 50 so it's fine. */
#particle-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
}
body > section,
body > footer {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  #particle-canvas { display: none; }
}

/* ═══════ GLASSMORPHISM ═══════
   Every text-bearing panel gets a glass treatment so it sits cleanly
   above the particle canvas. Existing cards are overridden here (these
   rules come last so they win the cascade). Section heading groups are
   wrapped at runtime by koppd.js into .k-glass-head so no HTML changes. */
.k-card,
.compare-card,
.k-quiz,
.counter-strip,
.founder,
.k-glass,
.k-glass-head,
.hero .inner {
  background: rgba(18, 18, 18, 0.5) !important;
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Hero: turn .inner into a proper glass panel (it was unstyled before) */
.hero .inner {
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-lg);
  max-width: 900px;
}

/* Section heading groups (wrapped by JS at load) */
.k-glass-head {
  display: block;
  padding: 26px clamp(22px, 3vw, 34px) 30px;
  border-radius: var(--radius-lg);
  max-width: 920px;
  margin-bottom: 36px;
}
.k-glass-head > .eyebrow { margin-bottom: 14px; }
.k-glass-head > .section-head { margin-bottom: 14px; }
.k-glass-head > .section-lede { margin-bottom: 0; }

/* Nav background already has its own blur — leave it alone. */
/* Keep accent-bordered hover states working: they override our default border. */
.k-card:hover,
.compare-card:hover {
  border-color: rgba(255, 107, 53, 0.45) !important;
}

/* ═══════ SPACING TIGHTEN + EYEBROW HIDE + BUTTON ATTITUDE ═══════
   Applied last so they override earlier declarations. */

/* Hide the orange pill eyebrows across the whole site */
.eyebrow { display: none !important; }

/* Tighter section rhythm so we don't get big black gaps between sections */
section { padding: clamp(24px, 3vh, 44px) 0 !important; }
section.tight { padding: clamp(16px, 2vh, 32px) 0 !important; }
.k-glass-head { margin-bottom: 16px !important; }
.k-quiz { margin-bottom: 16px !important; }
.compare-grid { margin-top: 12px !important; }
.three-col { margin-top: 12px !important; }
.counter-strip { margin-top: 12px !important; }

/* DEFENSIVE: make stagger children visible whenever an ancestor scroll-reveal
   is visible. Without this, cards can sit at opacity:0 forever if the stagger
   element itself isn't caught by the IntersectionObserver (which was the bug
   that caused "hint at content then gap"). Transition delays still apply
   via the existing .k-stagger.k-visible > *:nth-child(N) rules when the
   stagger element is independently observed. */
.k-scroll-reveal.k-visible .k-stagger > * {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Button attitude — gradients, inset highlights, stronger shadows, lift on hover */
.k-btn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, rgba(36, 36, 36, 0.9) 0%, rgba(18, 18, 18, 0.9) 100%);
  letter-spacing: 0.01em;
}
.k-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 24px rgba(0, 0, 0, 0.5);
}
.k-btn:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,0.35); }

.k-btn.primary {
  background: linear-gradient(180deg, #FF8B5A 0%, var(--accent) 50%, var(--accent-deep) 100%);
  border-color: var(--accent-deep);
  color: #0B0B0B;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 10px 24px rgba(255, 107, 53, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}
.k-btn.primary:hover {
  background: linear-gradient(180deg, #FFA07A 0%, var(--accent-hover) 50%, var(--accent) 100%);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 16px 36px rgba(255, 107, 53, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.3);
}
.k-btn.primary:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.25),
    0 4px 10px rgba(255, 107, 53, 0.3);
}