/* ════════════════════════════════════════
   LAYOUT
════════════════════════════════════════ */
.section { padding:64px 0; position:relative; overflow:hidden; }
.section-white     { background:var(--white); }
.section-slate     { background:var(--surface); }
.section-ink       { background:var(--ink); }
.section-near-black{ background:var(--ink-deep); }

/* Ambient glow */
.glow { position:absolute; pointer-events:none; border-radius:50%; }
.glow-tl { top:-200px; left:-150px; width:600px; height:600px; background:radial-gradient(circle,rgba(85,88,240,0.06) 0%,transparent 65%); }
.glow-br { bottom:-180px; right:-100px; width:500px; height:500px; background:radial-gradient(circle,rgba(85,88,240,0.04) 0%,transparent 65%); }

/* Eyebrow + section headers */
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--indigo); margin-bottom:14px;
}
.eyebrow::before { content:''; display:inline-block; width:24px; height:2px; background:var(--indigo); border-radius:2px; }
.section-h2 {
  font-family:var(--font-brand);
  font-size:clamp(26px,3.2vw,38px); font-weight:700;
  color:var(--ink); line-height:1.15; margin-bottom:12px;
}
.section-h2-lg {
  font-family:var(--font-brand);
  font-size:clamp(28px,3.8vw,44px); font-weight:700;
  color:var(--ink); line-height:1.15; margin-bottom:14px;
}
.section-sub { font-size:17px; color:var(--slate-light); line-height:1.65; max-width:680px; }
.section-header { margin-bottom:48px; }
.section-header.centered { text-align:center; }
.section-header.centered .section-sub { margin:0 auto; }
.section-header.centered .eyebrow { display:flex; justify-content:center; }
.section-header.centered .eyebrow::before { display:none; }
.on-dark .section-h2,
.on-dark .section-h2-lg { color:var(--white); }
.on-dark .section-sub { color:rgba(255,255,255,0.65); }
.on-dark .eyebrow { color:var(--indigo-light); }
.on-dark .eyebrow::before { background:var(--indigo-light); }

/* ════════════════════════════════════════
   BUTTONS
════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  border-radius:var(--radius-sm); font-family:var(--font-ui);
  font-weight:600; font-size:14px; cursor:pointer;
  transition:all 0.18s; border:none; text-decoration:none;
}
.btn-primary { background:var(--indigo); color:var(--white); padding:13px 26px; box-shadow:var(--shadow-indigo); }
.btn-primary:hover { background:var(--indigo-dark); transform:translateY(-1px); box-shadow:var(--shadow-indigo); }
.btn-primary-lg { padding:15px 30px; font-size:15px; }
.btn-secondary { background:transparent; color:var(--indigo); border:1.5px solid rgba(85,88,240,0.4); padding:13px 26px; }
.btn-secondary:hover { background:var(--indigo-pale); border-color:var(--indigo); }
.btn-outline-white { background:transparent; color:rgba(255,255,255,0.85); border:1.5px solid rgba(255,255,255,0.3); padding:13px 26px; }
.btn-outline-white:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.6); color:var(--white); }
.btn-full { width:100%; justify-content:center; }

/* ════════════════════════════════════════
   GLASS CARD — base primitive
════════════════════════════════════════ */
.glass {
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm), var(--glass-inset);
}
.glass:hover { border-color:rgba(85,88,240,0.22); box-shadow:var(--shadow-lg); }

/* ════════════════════════════════════════
   HERO — PRODUCT
════════════════════════════════════════ */
.hero-product {
  background:var(--ink); padding:88px 0 64px;
  position:relative; overflow:hidden;
}
.hero-product::before {
  content:''; position:absolute; top:-200px; left:-100px;
  width:700px; height:700px;
  background:radial-gradient(circle,rgba(85,88,240,0.12) 0%,transparent 65%);
  pointer-events:none;
}
.hero-product::after {
  content:''; position:absolute; bottom:-200px; right:-100px;
  width:600px; height:600px;
  background:radial-gradient(circle,rgba(85,88,240,0.07) 0%,transparent 65%);
  pointer-events:none;
}
.hero-product-inner { max-width:800px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.hero-eyebrow {
  display:inline-block; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.12em;
  color:var(--indigo-light); margin-bottom:24px;
}
.hero-h1 {
  font-family:var(--font-brand);
  font-size:clamp(32px,4.5vw,52px); font-weight:700;
  color:var(--white); line-height:1.1; margin-bottom:20px;
}
.hero-h1 em { color:var(--indigo-light); font-style:normal; }
.hero-sub {
  font-size:18px; color:rgba(255,255,255,0.65);
  line-height:1.7; margin-bottom:36px; max-width:600px; margin-left:auto; margin-right:auto;
}
.hero-ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:52px; }

/* Video — 50% of full width */
.video-wrap {
  max-width:600px; margin:0 auto;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.video-wrap video { width:100%; display:block; }
.video-caption {
  padding:14px 20px;
  font-size:13px; color:rgba(255,255,255,0.5);
  border-top:1px solid rgba(255,255,255,0.08);
  text-align:left;
}
.video-caption strong { color:rgba(255,255,255,0.8); }

/* ════════════════════════════════════════
   PROBLEM SECTION
════════════════════════════════════════ */
.problem-image-wrap {
  border-radius:var(--radius-xl); overflow:hidden;
  margin-bottom:40px; max-height:400px;
}
.problem-image-wrap img { width:100%; height:400px; object-fit:cover; object-position:center; }

.stats-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:32px; }
.stat-card {
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:28px 24px; text-align:center;
  box-shadow:var(--shadow-sm), var(--glass-inset);
  transition:border-color 0.2s, box-shadow 0.2s;
}
.stat-card:hover { border-color:rgba(85,88,240,0.22); box-shadow:var(--shadow-lg); }
.stat-num { font-family:var(--font-brand); font-size:40px; font-weight:700; color:var(--indigo); line-height:1; margin-bottom:10px; }
.stat-label { font-size:14px; font-weight:600; color:var(--ink); margin-bottom:8px; line-height:1.4; }
.stat-sub { font-size:12px; color:var(--slate-light); line-height:1.5; }

.insight-callout {
  background:var(--indigo-pale); border:1px solid rgba(85,88,240,0.2);
  border-radius:var(--radius-lg); padding:32px 36px;
}
.insight-callout h3 { font-family:var(--font-brand); font-size:22px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.insight-callout p  { font-size:15px; color:var(--slate); line-height:1.7; }

/* ════════════════════════════════════════
   INSIGHT — FACTOR PROBE
════════════════════════════════════════ */
.probe-wrap {
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl); padding:40px;
  box-shadow:var(--shadow-md), var(--glass-inset);
  margin-bottom:32px;
}
.probe-intro { margin-bottom:28px; max-width:640px; }
.probe-intro p { font-size:16px; color:var(--slate); line-height:1.7; }

/* The "wrongness is the feature" quote */
.wrongness-quote {
  display:inline-block;
  font-family:var(--font-brand); font-size:20px; font-weight:700;
  color:var(--indigo); margin-bottom:28px;
  padding:16px 24px;
  background:var(--indigo-pale); border:1px solid rgba(85,88,240,0.25);
  border-radius:var(--radius-md);
  border-left:4px solid var(--indigo);
}

.probe-example {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; margin-bottom:24px;
}
.probe-factor-row {
  display:flex; align-items:center; gap:20px;
  padding:20px 24px; border-bottom:1px solid var(--border);
}
.probe-factor-name { font-size:14px; font-weight:700; color:var(--ink); min-width:180px; }
.probe-range-display {
  font-size:16px; font-weight:700; color:var(--indigo);
  background:var(--indigo-pale); border-radius:var(--radius-sm);
  padding:6px 14px;
}
.probe-factor-note { font-size:12px; color:var(--slate-light); font-style:italic; margin-left:auto; }

.probe-correction { padding:20px 24px; background:var(--border-light); }
.correction-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.correction-icon { font-size:18px; }
.correction-author { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--indigo); }
.correction-quote {
  font-size:15px; color:var(--ink); line-height:1.6; margin-bottom:12px;
  font-style:italic; padding-left:4px; border-left:3px solid var(--indigo); padding-left:12px;
}
.correction-intel {
  font-size:13px; color:var(--slate);
  background:rgba(85,88,240,0.05); border-radius:var(--radius-sm);
  padding:10px 14px;
}
.correction-intel strong { color:var(--ink); }

.insight-trio { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.insight-item {
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md); padding:16px 18px;
  display:flex; gap:12px; align-items:center;
  box-shadow:var(--shadow-xs), var(--glass-inset);
}
.insight-check { color:var(--success-muted); font-size:16px; flex-shrink:0; }
.insight-item p { font-size:13px; color:var(--ink); font-weight:500; line-height:1.45; }

/* ════════════════════════════════════════
   THE GAP — TWO STANCE
════════════════════════════════════════ */
.gap-grid { display:grid; grid-template-columns:1fr 80px 1fr; gap:0; align-items:center; margin-bottom:32px; }
.gap-side {
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg); padding:28px 24px;
  box-shadow:var(--shadow-sm), var(--glass-inset);
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.gap-side.reality { border-color:rgba(85,88,240,0.3); background:rgba(85,88,240,0.04); }
.gap-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--slate-light); margin-bottom:16px; }
.gap-arrow-col { display:flex; flex-direction:column; align-items:center; gap:6px; }
.gap-arrow-col .arrow-sym { font-size:24px; color:var(--indigo); }
.gap-arrow-col .arrow-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--indigo); }

.member-row { display:flex; align-items:center; gap:14px; margin-bottom:12px; justify-content:center; }
.member-avatar { width:48px; height:48px; border-radius:50%; overflow:hidden; border:2px solid var(--border); flex-shrink:0; }
.member-avatar img { width:100%; height:100%; object-fit:cover; }
.member-name { font-size:14px; font-weight:700; color:var(--ink); }
.gap-note { font-size:13px; color:var(--slate-light); font-style:italic; }

/* Stance pills */
.stance { display:inline-block; font-size:11px; font-weight:700; border-radius:var(--radius-pill); padding:4px 12px; }
.stance-green  { color:var(--success-muted); background:var(--success-bg); border:1px solid var(--success-border); }
.stance-red    { color:var(--danger-muted); background:var(--danger-bg); border:1px solid var(--danger-border); }
.stance-amber  { color:var(--warn-muted); background:var(--warn-bg); border:1px solid var(--warn-border); }
.stance-gray   { color:var(--slate); background:var(--border-light); border:1px solid var(--border); }
.stance-indigo { color:var(--indigo); background:var(--indigo-pale); border:1px solid rgba(85,88,240,0.25); }

.delta-trio { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.delta-card {
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md); padding:16px 18px;
  box-shadow:var(--shadow-xs), var(--glass-inset);
  text-align:center;
}
.delta-card h5 { font-size:12px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.delta-shift { display:flex; align-items:center; gap:8px; font-size:11px; flex-wrap:wrap; justify-content:center; }
.delta-shift span { color:var(--slate-light); }

/* ════════════════════════════════════════
   DEPENDENCY MAP
════════════════════════════════════════ */
.dep-image-wrap { border-radius:var(--radius-xl); overflow:hidden; margin-bottom:36px; }
.dep-image-wrap img { width:100%; height:280px; object-fit:cover; }

.dep-intro { max-width:700px; margin-bottom:32px; }
.dep-intro p { font-size:16px; color:var(--slate); line-height:1.7; }

.connection-list { display:flex; flex-direction:column; gap:16px; }
.connection-row {
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md); padding:20px 24px;
  box-shadow:var(--shadow-xs), var(--glass-inset);
}
.connection-nodes { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.node-tag {
  font-size:13px; font-weight:600; color:var(--ink);
  background:var(--border-light); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:5px 12px;
}
.node-line { flex:1; height:1px; background:var(--border); }
.connection-bar-row { display:flex; align-items:center; gap:16px; }
.conn-bar-track { flex:1; height:8px; background:var(--border-light); border-radius:var(--radius-pill); overflow:hidden; }
.conn-bar-fill { height:100%; border-radius:var(--radius-pill); transition:width 1s ease; }
.fill-green  { background:var(--success-muted); }
.fill-amber  { background:#D97706; }
.fill-red    { background:var(--danger-muted); }
.conn-label { font-size:12px; color:var(--slate-light); min-width:220px; text-align:right; }

.dep-insight {
  background:var(--indigo-pale); border:1px solid rgba(85,88,240,0.2);
  border-radius:var(--radius-md); padding:16px 20px;
  font-size:14px; color:var(--slate); line-height:1.6; margin-top:24px;
  font-style:italic;
}

/* ════════════════════════════════════════
   WHO USES lucix — use case tiles
════════════════════════════════════════ */
.use-case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.use-case-card {
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl); overflow:hidden;
  box-shadow:var(--shadow-sm), var(--glass-inset);
  transition:border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.use-case-card:hover { border-color:rgba(85,88,240,0.25); box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.use-case-img { width:100%; height:160px; object-fit:cover; display:block; }
.use-case-body { padding:22px 20px; }
.use-case-title { font-family:var(--font-brand); font-size:18px; font-weight:700; color:var(--indigo); margin-bottom:8px; }
.use-case-desc { font-size:13px; color:var(--slate); line-height:1.65; margin-bottom:12px; }
.use-case-ex { font-size:12px; color:var(--slate-light); font-style:italic; }

/* ════════════════════════════════════════
   HOW IT WORKS — 3 STEPS
════════════════════════════════════════ */
.workflow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; margin-bottom:32px; }
.workflow-grid::before {
  content:''; position:absolute; top:44px; left:calc(33.33% + 0px); right:calc(33.33% + 0px);
  height:2px; background:linear-gradient(to right,var(--indigo),var(--indigo-light));
  z-index:0;
}
.workflow-step {
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg); padding:28px 24px;
  text-align:center; margin:0 8px; position:relative; z-index:1;
  box-shadow:var(--shadow-sm), var(--glass-inset);
  transition:border-color 0.2s, box-shadow 0.2s;
}
.workflow-step:hover { border-color:rgba(85,88,240,0.25); box-shadow:var(--shadow-lg); }
.workflow-num {
  width:56px; height:56px; margin:0 auto 16px;
  background:var(--indigo); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-brand); font-size:22px; font-weight:700; color:var(--white);
  box-shadow:var(--shadow-indigo);
}
.workflow-step h3 { font-family:var(--font-brand); font-size:18px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.workflow-step p  { font-size:13px; color:var(--slate); line-height:1.65; }

.workflow-philosophy {
  background: var(--indigo-pale);
  border: 1px solid rgba(85,88,240,0.15);
  border-left: 4px solid var(--indigo);
  border-radius: var(--r-md);
  padding: 20px 28px;
  font-size: 15px; font-style: italic;
  color: var(--slate); text-align: left;
}
.workflow-philosophy strong { color: var(--indigo); font-style: normal; font-weight: 600; }

/* ════════════════════════════════════════
   DIFFERENTIATION
════════════════════════════════════════ */
.diff-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.diff-card {
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm), var(--glass-inset);
}
.diff-label-row {
  background:var(--border-light); border-bottom:1px solid var(--border);
  padding:12px 20px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--slate);
}
.diff-body { padding:20px; }
.diff-row { display:flex; gap:0; }
.diff-col { flex:1; padding:12px 14px; }
.diff-col + .diff-col { border-left:1px solid var(--border); }
.diff-col-head { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px; }
.diff-them-head { color:var(--danger-muted); }
.diff-lucix-head { color:var(--success-muted); }
.diff-them-text { font-size:13px; color:var(--slate); line-height:1.5; font-style:italic; }
.diff-lucix-text { font-size:13px; color:var(--ink); line-height:1.5; font-weight:500; }

/* ════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════ */
.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.testimonial-card {
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg); padding:24px;
  box-shadow:var(--shadow-sm), var(--glass-inset);
  display:flex; flex-direction:column;
}
.testimonial-quote {
  font-size:14px; color:var(--ink); line-height:1.7;
  font-style:italic; flex:1; margin-bottom:20px;
}
.testimonial-quote::before { content:'"'; color:var(--indigo); font-size:28px; font-family:Georgia,serif; line-height:0.8; display:block; margin-bottom:8px; font-style:normal; }
.testimonial-attr { display:flex; align-items:center; gap:12px; }
.testimonial-avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid var(--border); }
.testimonial-avatar img { width:100%; height:100%; object-fit:cover; }
.testimonial-name { font-size:13px; font-weight:700; color:var(--ink); }
.testimonial-co   { font-size:12px; color:var(--slate-light); }

/* ════════════════════════════════════════
   NUMBERS — DARK
════════════════════════════════════════ */
.numbers-row { display:flex; justify-content:center; gap:0; margin:40px 0; }
.number-cell { flex:1; max-width:280px; text-align:center; padding:32px 24px; position:relative; }
.number-cell + .number-cell::before { content:''; position:absolute; left:0; top:20%; height:60%; width:1px; background:rgba(255,255,255,0.1); }
.number-val { font-family:var(--font-brand); font-size:52px; font-weight:700; color:var(--indigo-light); line-height:1; margin-bottom:10px; }
.number-lbl { font-size:14px; color:rgba(255,255,255,0.55); line-height:1.5; }
.numbers-reality {
  text-align:center; font-size:18px; font-style:italic;
  color:rgba(255,255,255,0.55); max-width:560px; margin:0 auto;
}

/* ════════════════════════════════════════
   LEARN MORE ANCHOR (Who Uses lucix on HP)
════════════════════════════════════════ */
.learn-more-strip {
  background:var(--indigo-pale); border:1px solid rgba(85,88,240,0.2);
  border-radius:var(--radius-lg); padding:20px 28px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; margin-top:32px;
}
.learn-more-strip p { font-size:15px; color:var(--indigo); font-weight:600; margin:0; }
.learn-more-strip span { font-size:13px; color:var(--slate); }
/* ═══════════════════════════════════════
   MECHANICS TABS — #mechanics
═══════════════════════════════════════ */
/* Tab nav */
.mech-tab-nav {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mech-tab-nav::-webkit-scrollbar { display: none; }
.mech-tab {
  flex-shrink: 0;
  padding: 14px 24px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--slate);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.mech-tab:hover { color: var(--ink); }
.mech-tab.active {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
  font-weight: 600;
}

/* Tab panels */
.mech-tab-panels {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--white);
}
.mech-panel { display: none; padding: 48px 40px; }
.mech-panel.active { display: block; }
@media(max-width:768px) { .mech-panel { padding: 32px 24px; } }

/* Panel grid */
.mech-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: flex-start;
}
@media(max-width:900px) { .mech-panel-grid { grid-template-columns: 1fr; gap: 32px; } }

.mech-panel-left h3 {
  font-family: var(--font-brand);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.3;
}
.mech-panel-left > p {
  font-size: 0.95rem;
  color: var(--slate);
  line-height: 1.7;
  margin-bottom: 24px;
}
.mech-highlight-box {
  display: flex;
  gap: 14px;
  background: var(--indigo-pale);
  border: 1px solid rgba(85,88,240,0.15);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.mech-highlight-box i {
  color: var(--indigo);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.mech-highlight-box div { font-size: 0.875rem; color: var(--ink); line-height: 1.6; }
.mech-highlight-box strong { color: var(--indigo-dark); }

.mech-checklist { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.mech-checklist li { display: flex; gap: 12px; align-items: flex-start; }
.mech-checklist i { color: var(--indigo); font-size: 0.8rem; margin-top: 3px; flex-shrink: 0; }
.mech-checklist div { font-size: 0.9rem; color: var(--slate); line-height: 1.5; }
.mech-checklist strong { color: var(--ink); }

/* --- Probe comparison box --- */
.mech-comparison-box {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm), var(--glass-inset);
}
.mech-comp-row { padding: 24px 28px; }
.mech-comp-row.bad { background: var(--white); border-bottom: 1px solid var(--border); }
.mech-comp-row.good { background: var(--surface); }
.mech-comp-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 14px;
}
.mech-comp-row.bad .mech-comp-label { color: var(--danger-muted); }
.mech-comp-row.bad .mech-comp-label i { color: var(--danger-muted); }
.mech-comp-row.good .mech-comp-label { color: var(--success-muted); }
.mech-comp-row.good .mech-comp-label i { color: var(--success-muted); }
.mech-comp-quote {
  font-style: italic;
  font-size: 0.975rem;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  margin-bottom: 10px;
  background: var(--white);
}
.mech-comp-result { font-size: 0.82rem; color: var(--slate-light); }

/* --- Two-Stance demo --- */
.mech-stance-demo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm), var(--glass-inset);
}
.mech-stance-row { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 0; align-items: center; margin-bottom: 20px; }
.mech-stance-col-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-light); margin-bottom: 10px; }
.mech-stance-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  background: var(--white);
}
.mech-stance-card.observed { border-color: var(--danger-border); background: var(--danger-bg); }
.mech-stance-name { font-size: 0.82rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.mech-stance-note { font-size: 0.78rem; color: var(--slate); margin-top: 8px; font-style: italic; }
.mech-stance-arrow { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mech-stance-arrow i { color: var(--indigo); font-size: 1rem; }
.mech-stance-arrow span { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--indigo); }
.mech-stance-insight {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.82rem; font-weight: 600; color: var(--danger-muted);
  background: var(--danger-bg); border: 1px solid var(--danger-border);
  border-radius: var(--r-sm); padding: 10px 14px;
}
.mech-stance-insight i { flex-shrink: 0; }

/* --- 8 Factors grid --- */
.mech-factors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mech-factor-card {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.mech-factor-card:hover { border-color: var(--indigo-light); box-shadow: var(--shadow-xs), var(--glass-inset); }
.mf-header { display: flex; align-items: center; gap: 8px; }
.mf-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--indigo-pale); color: var(--indigo);
  font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mf-name { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.mf-desc { font-size: 0.78rem; color: var(--slate); line-height: 1.45; padding-left: 30px; }

/* --- FOMU visual --- */
.mech-fomu-visual { display: flex; flex-direction: column; gap: 0; }
.mech-fomu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mech-fomu-card {
  border-radius: var(--r-md);
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.mech-fomu-card.bad { background: var(--danger-bg); border: 1px solid var(--danger-border); }
.mech-fomu-card.good { background: var(--success-bg); border: 1px solid var(--success-border); }
.mech-fomu-icon { font-size: 1.5rem; }
.mech-fomu-card.bad .mech-fomu-icon { color: var(--danger-muted); }
.mech-fomu-card.good .mech-fomu-icon { color: var(--success-muted); }
.mech-fomu-card h5 { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.mech-fomu-card p { font-size: 0.85rem; color: var(--slate); line-height: 1.6; flex: 1; }
.mech-fomu-tag {
  font-size: 0.75rem; font-weight: 700;
  padding: 5px 12px; border-radius: var(--r-pill);
  display: inline-block; width: fit-content;
}
.mech-fomu-tag.danger { background: var(--danger-muted); color: var(--white); }
.mech-fomu-tag.success { background: var(--success-muted); color: var(--white); }

/* ════════════════════════════════════════
   RESPONSIVE — 900px (tablet)
════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Hero */
  .hero-product { padding: 80px 0 48px; }
  .hero-h1 { font-size: clamp(26px, 7vw, 38px); }
  .hero-sub { font-size: 16px; }
  .hero-ctas { flex-direction: column; align-items: center; gap: 10px; }
  .hero-ctas .btn { width: 100%; max-width: 340px; text-align: center; justify-content: center; }
  .video-wrap { max-width: 100%; }

  /* Grids → single column */
  .stats-grid-3 { grid-template-columns: 1fr; gap: 12px; }
  .insight-trio { grid-template-columns: 1fr; gap: 10px; }
  .gap-grid { grid-template-columns: 1fr; gap: 16px; }
  .gap-arrow-col { transform: rotate(90deg); padding: 8px 0; }
  .delta-trio { grid-template-columns: 1fr; gap: 10px; }
  .use-case-grid { grid-template-columns: 1fr; gap: 16px; }
  .workflow-grid { grid-template-columns: 1fr; gap: 12px; }
  .workflow-grid::before { display: none; }
  .workflow-step { margin: 0; }
  .diff-grid { grid-template-columns: 1fr; gap: 12px; }
  .testimonial-grid { grid-template-columns: 1fr; gap: 12px; }
  .mech-panel-grid { grid-template-columns: 1fr; gap: 32px; }
  .mech-factors-grid { grid-template-columns: 1fr; gap: 8px; }
  .mech-fomu-row { grid-template-columns: 1fr; gap: 12px; }
  .mech-stance-row { grid-template-columns: 1fr; gap: 12px; }
  .mech-stance-arrow { transform: rotate(90deg); padding: 4px 0; }

  /* Numbers row */
  .numbers-row { flex-direction: column; align-items: center; gap: 0; }
  .number-cell + .number-cell::before { display: none; }
  .number-cell { padding: 24px 20px; }
  .number-val { font-size: 40px; }

  /* Probe factor row */
  .probe-factor-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .probe-factor-name { min-width: unset; }
  .probe-factor-note { margin-left: 0; }

  /* Connection bar */
  .connection-bar-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .conn-label { text-align: left; min-width: unset; }

  /* Learn more strip */
  .learn-more-strip { flex-direction: column; text-align: center; gap: 12px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ════════════════════════════════════════
   RESPONSIVE — 480px (phone)
════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-product { padding: 72px 0 36px; }
  .hero-h1 { font-size: clamp(24px, 8vw, 32px); line-height: 1.12; }
  .hero-sub { font-size: 15px; margin-bottom: 28px; }
  .hero-ctas { margin-bottom: 36px; }

  .section { padding: 44px 0; }
  .section-header { margin-bottom: 32px; }
  .section-h2 { font-size: clamp(22px, 6.5vw, 30px); }
  .section-sub { font-size: 14px; }

  .stat-num { font-size: 32px; }
  .stat-card { padding: 20px 18px; }

  .probe-wrap { padding: 24px 20px; }
  .wrongness-quote { font-size: 16px; padding: 12px 18px; }

  .workflow-num { width: 48px; height: 48px; font-size: 20px; }
  .workflow-step { padding: 22px 18px; }

  .testimonial-card { padding: 20px; }

  .insight-callout { padding: 24px 20px; }
  .insight-callout h3 { font-size: 19px; }

  /* Tabs */
  .mech-tab-nav { flex-direction: column; }
  .mech-tab { width: 100%; text-align: left; border-radius: 6px; }
  .mech-panel { padding: 24px 18px; }

  /* Diff card internal layout */
  .diff-row { flex-direction: column; }
  .diff-col + .diff-col { border-left: none; border-top: 1px solid var(--border); }
}