/* ============================================================
   Kybercel — homepage components
   ============================================================ */

/* ---------- NAV WAITLIST BTN ---------- */
.nav-waitlist-btn {
  padding: 10px 16px; min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.14s ease;
}
.nav-waitlist-btn:hover {
  border-color: var(--acc);
  background: var(--acc-dim);
  color: var(--acc);
}
.nav-waitlist-btn:active {
  transform: scale(0.98);
}

/* ---------- HERO ---------- */
.hero { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 110px); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.hero-copy .eyebrow { margin-bottom: 28px; }
.hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  letter-spacing: -0.03em;
  line-height: 1.0;
}
.hero h1 .accent {
  color: var(--acc);
  -webkit-text-fill-color: transparent;
  background-image:
    repeating-linear-gradient(0deg, oklch(0 0 0 / 0.30) 0 1px, transparent 1px 3px),
    linear-gradient(var(--acc), var(--acc));
  -webkit-background-clip: text;
  background-clip: text;
}
.hero .sub {
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  color: var(--ink-mid);
  margin-top: 28px;
  max-width: 52ch;
  line-height: 1.5;
}
.hero-actions { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }
.hero-meta {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line-soft);
  display: flex; gap: 28px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-low);
  letter-spacing: 0.03em;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before { content: ""; width: 5px; height: 5px; background: var(--acc); border-radius: 50%; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ---------- CODEX / ENFORCEMENT PANEL ---------- */
.codex {
  border: 1px solid var(--acc-line);
  border-radius: var(--r-lg);
  position: relative;
  background:
    radial-gradient(120% 90% at 90% -10%, color-mix(in oklch, var(--acc) 14%, transparent), transparent 55%),
    oklch(0.17 0.016 262);
  overflow: hidden;
  box-shadow:
    0 1px 0 0 color-mix(in oklch, var(--acc) 28%, transparent) inset,
    0 40px 90px -40px color-mix(in oklch, var(--acc) 38%, transparent),
    0 60px 120px -60px oklch(0 0 0 / 0.75);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.codex-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--ink-low);
  font-size: 0.74rem; letter-spacing: 0.04em;
}
.codex-bar .dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line); }
.codex-bar .path { margin-left: 4px; color: var(--ink-mid); }
.codex-bar .path b { color: var(--ink); font-weight: 500; }
.codex-bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--acc); }
.codex-bar .live::before { content:""; width: 6px; height: 6px; border-radius:50%; background: var(--acc); box-shadow: 0 0 0 0 var(--acc-line); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 var(--acc-line);} 70%{box-shadow:0 0 0 6px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

.codex-body { padding: 18px 18px 20px; line-height: 1.95; }
.cx-meta { color: var(--ink-low); }
.cx-meta b { color: var(--ink-mid); font-weight: 500; }
.cx-rule { display: flex; gap: 11px; align-items: baseline; flex-wrap: nowrap; }
.cx-rule .sig { flex: none; width: 1.1em; font-weight: 700; }
.cx-rule.pass .sig { color: var(--acc); }
.cx-rule.block .sig { color: var(--warn); }
.cx-rule .txt { color: var(--ink-mid); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-rule.block .txt { color: var(--ink); }
.cx-rule .ref { color: var(--ink-faint); white-space: nowrap; margin-left: auto; flex: none; }
.cx-rule.block .badge { color: var(--warn); border:1px solid var(--warn-dim); background: var(--warn-dim); border-radius:3px; padding:0 6px; font-size:0.68rem; letter-spacing:0.08em; flex: none; white-space: nowrap; }
.cx-sep { height:1px; background: var(--line-soft); margin: 12px 0; }
.cx-verdict { color: var(--ink-low); display:flex; gap:8px; align-items:baseline; }
.cx-verdict .held { color: var(--warn); }
.cx-cursor { display:inline-block; width:8px; height:1.1em; background: var(--acc); transform: translateY(2px); animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* enforcement scan beam — reads rules top-to-bottom as they resolve */
.cx-scan {
  position: absolute; left: 1px; right: 1px; top: 0; height: 1px;
  pointer-events: none; z-index: 4; opacity: 0;
  background: linear-gradient(90deg, transparent 0%, var(--acc) 22%, var(--acc) 78%, transparent 100%);
  box-shadow: 0 0 12px 1px color-mix(in oklch, var(--acc) 50%, transparent);
}
.cx-scan::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38px;
  background: linear-gradient(to top, color-mix(in oklch, var(--acc) 12%, transparent), transparent);
}

/* ---------- PROBLEM ---------- */
.problem { border-top: 1px solid var(--line-soft); }
.drift {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); overflow: hidden;
  margin-top: 8px;
}
.drift-cell { background: var(--bg); padding: clamp(28px, 3.5vw, 44px); }
.drift-cell .lbl { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; }
.drift-cell.bad .lbl { color: var(--warn); }
.drift-cell.good .lbl { color: var(--acc); }
.drift-cell h3 { font-size: 1.5rem; margin-bottom: 14px; }
.drift-cell p { color: var(--ink-mid); font-size: 1rem; }
@media (max-width: 760px){ .drift { grid-template-columns: 1fr; } }

.stat-row { display:flex; flex-wrap:wrap; gap: 1px; background: var(--line-soft); border:1px solid var(--line-soft); border-radius: var(--r-lg); overflow:hidden; margin-top: 32px; }
.stat { background: var(--bg); flex: 1 1 200px; padding: 30px clamp(20px,2.5vw,34px); }
.stat .num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.stat .num .u { color: var(--acc); }
.stat .cap { color: var(--ink-low); font-size: 0.92rem; margin-top: 6px; }

/* ---------- HOW IT WORKS ---------- */
.pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 8px; border:1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stage { padding: clamp(26px, 3vw, 38px); position: relative; border-right: 1px solid var(--line); background: var(--bg); }
.stage:last-child { border-right: none; }
.stage .step { font-family: var(--font-mono); font-size: 0.74rem; color: var(--acc); letter-spacing: 0.1em; margin-bottom: 18px; display:flex; align-items:center; gap:10px;}
.stage .step .n { border:1px solid var(--acc-line); border-radius: 4px; padding: 2px 7px; color: var(--acc); }
.stage h3 { font-size: 1.45rem; margin-bottom: 12px; }
.stage p { color: var(--ink-mid); font-size: 0.98rem; margin-bottom: 20px; }
.stage .arrow-link { position:absolute; right:-11px; top: 50%; transform: translateY(-50%); z-index: 2; width: 22px; height: 22px; background: var(--bg-1); border:1px solid var(--line); border-radius: 50%; display:grid; place-items:center; color: var(--ink-low); font-family: var(--font-mono); }
.stage:last-child .arrow-link { display:none; }
.src-tags { display:flex; flex-wrap:wrap; gap: 7px; }
.codex-tree { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-low); line-height: 1.9; }
.codex-tree b { color: var(--ink-mid); font-weight: 500; }
.codex-tree .ok { color: var(--acc); }
.gate { font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.9; }
.gate .pass { color: var(--acc); }
.gate .blk { color: var(--warn); }
@media (max-width: 820px){ .pipeline { grid-template-columns: 1fr; } .stage { border-right:none; border-bottom: 1px solid var(--line);} .stage:last-child{border-bottom:none;} .stage .arrow-link{ display:none;} }

/* ---------- USE CASES ---------- */
.uc-tabs { display:flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.uc-tab {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em;
  padding: 10px 16px; min-height: 44px; border:1px solid var(--line); border-radius: var(--r);
  background: transparent; color: var(--ink-low); cursor: pointer;
  transition: all 0.14s ease; display: inline-flex; align-items: center;
}
.uc-tab:hover { color: var(--ink); border-color: var(--ink-faint); }
.uc-tab.active { color: var(--acc); border-color: var(--acc-line); background: var(--acc-dim); }
.uc-panel { display:none; }
.uc-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border:1px solid var(--line-soft); border-radius: var(--r-lg); overflow:hidden; }
.uc-text { background: var(--bg); padding: clamp(28px,3.5vw,44px); }
.uc-text h3 { font-size: 1.7rem; margin-bottom: 16px; }
.uc-text p { color: var(--ink-mid); margin-bottom: 22px; }
.uc-text ul { list-style: none; display: grid; gap: 12px; }
.uc-text li { display:flex; gap: 11px; align-items: baseline; font-size: 0.97rem; color: var(--ink-mid); }
.uc-text li::before { content: "→"; color: var(--acc); font-family: var(--font-mono); flex:none; }
.uc-visual { background: oklch(0.165 0.015 262); padding: clamp(24px,3vw,38px); display:flex; flex-direction: column; justify-content: center; font-family: var(--font-mono); font-size: 0.78rem; }
.uc-visual .vh { color: var(--ink-faint); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.68rem; margin-bottom: 18px; }
.uc-line { display:flex; gap:10px; align-items: baseline; line-height: 2; }
.uc-line .s { flex:none; font-weight:700; }
.uc-line.p .s { color: var(--acc); }
.uc-line.b .s { color: var(--warn); }
.uc-line .t { color: var(--ink-mid); }
.uc-line.b .t { color: var(--ink); }
.uc-line .r { color: var(--ink-faint); margin-left: auto; }
@media (max-width: 760px){ .uc-panel.active { grid-template-columns: 1fr; } }

/* mobile: disable scanlines on accent text to prevent jitter */
@media (max-width: 820px) {
  .hero h1 .accent {
    background-image: linear-gradient(var(--acc), var(--acc));
  }
}

/* ---------- VS ALTERNATIVES ---------- */
.cmp { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 1.08rem; }
.cmp th, .cmp td { text-align: left; padding: 20px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.cmp thead th { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-low); font-weight: 500; }
.cmp tbody th { font-weight: 500; color: var(--ink-mid); font-family: var(--font-body); }
.cmp .approach { color: var(--ink); font-weight: 600; font-size: 1.18rem; }
.cmp .approach small { display:block; color: var(--ink-faint); font-weight: 400; font-size: 0.92rem; margin-top: 4px; font-family: var(--font-body); }
.cmp .ky { background: var(--acc-dim); }
.cmp .ky .approach { color: var(--acc); }
.cmp .mk { font-family: var(--font-mono); }
.cmp .mk.y { color: var(--acc); }
.cmp .mk.n { color: var(--ink-faint); }
.cmp .mk.p { color: var(--ink-low); }
.cmp-wrap { overflow-x: auto; border:1px solid var(--line); border-radius: var(--r-lg); }
.cmp thead th:first-child { width: 30%; }

/* ---------- SOCIAL PROOF ---------- */
.proof { text-align: center; }
.proof .eyebrow { justify-content: center; }
.proof .eyebrow::before { display:none; }
.logo-row { display:flex; justify-content:center; background: var(--bg); border:1px solid var(--line-soft); border-radius: var(--r-lg); overflow:hidden; margin-top: 40px; }
.logo-cell { background: var(--bg); padding: 38px 48px; display:grid; place-items:center; }
.partner-logo { height: 28px; width: auto; opacity: 0.9; }
.logo-ph { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-faint); letter-spacing: 0.06em; display:flex; align-items:center; gap: 9px; }
.logo-ph .sq { width: 16px; height: 16px; border:1px solid var(--ink-faint); border-radius: 3px; }
.pull { max-width: 800px; margin: 56px auto 0; text-align: center; }
.pull blockquote { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ink); line-height: 1.3; letter-spacing: -0.02em; }
.pull .cite { margin-top: 22px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-low); letter-spacing: 0.04em; }
@media (max-width: 760px){ .logo-row { justify-content: center; } }

/* ---------- QUIZ CTA ---------- */
.quiz-cta { border-top: 1px solid var(--line-soft); }
.quiz-card {
  border:1px solid var(--acc-line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in oklch, var(--acc) 18%, transparent), transparent 55%),
    oklch(0.165 0.015 262);
  box-shadow:
    0 1px 0 0 color-mix(in oklch, var(--acc) 26%, transparent) inset,
    0 40px 100px -50px color-mix(in oklch, var(--acc) 42%, transparent);
  padding: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center;
}
.quiz-card .eyebrow .idx { color: var(--acc); }
.quiz-card h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 22px 0 18px; }
.quiz-card p { color: var(--ink-mid); font-size: 1.1rem; max-width: 48ch; }
.quiz-card .cta-actions { margin-top: 32px; display:flex; gap:14px; flex-wrap: wrap; }
.quiz-aside { font-family: var(--font-mono); font-size: 0.82rem; }
.quiz-aside .qa-row { display:flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-low); }
.quiz-aside .qa-row:last-child { border-bottom:none; }
.quiz-aside .qa-row b { color: var(--ink); font-weight: 500; }
@media (max-width: 820px){ .quiz-card { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   MOBILE — 390px fixes
   ============================================================ */

/* ---- Comparison table → stacked approach cards ---- */
@media (max-width: 760px) {
  .cmp-wrap { border: none; overflow: hidden; background: transparent; border-radius: 0; max-width: 100%; }
  .cmp, .cmp tbody { display: block; }
  .cmp thead { display: none; }
  .cmp tbody tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--bg);
  }
  .cmp tbody tr.ky { border-color: var(--acc-line); }
  .cmp tbody th.approach {
    display: block;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg-1);
    font-size: 1.12rem;
  }
  .cmp tbody tr.ky th.approach { background: var(--acc-dim); color: var(--acc); }
  .cmp, .cmp tbody, .cmp tbody tr, .cmp tbody td, .cmp tbody th { box-sizing: border-box; }
  .cmp tbody tr { width: 100%; }
  .cmp tbody td {
    display: block;
    width: 100%;
    padding: 11px 18px 13px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1rem;
    color: var(--ink);
  }
  .cmp tbody td:last-child { border-bottom: none; }
  .cmp tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-low);
    margin-bottom: 4px;
  }
  .cmp tbody tr.ky td { background: oklch(0.795 0.142 67 / 0.07); color: var(--ink); }
  .cmp tbody tr.ky td::before { color: var(--ink-mid); }
  .cmp .mk.y { color: var(--acc); }
  .cmp .mk.n { color: var(--ink-mid); }
  .cmp .mk.p { color: var(--ink-mid); }
}

/* ---- Nav: stay in bounds on narrow screens ---- */
@media (max-width: 480px) {
  .nav-inner { padding-inline: 16px; }
  .nav-cta .btn { padding: 8px 13px; font-size: 0.82rem; }
}

/* ---- Hero: ensure grid stacks below 900px ---- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr !important; }
}

/* ---- Pipeline: ensure stages stack ---- */
@media (max-width: 820px) {
  .pipeline { grid-template-columns: 1fr !important; }
  .stage { border-right: none !important; border-bottom: 1px solid var(--line); }
  .stage:last-child { border-bottom: none; }
  .stage .arrow-link { display: none !important; }
}

/* ---- Logo row: center on mobile ---- */
@media (max-width: 760px) {
  .logo-row { justify-content: center !important; }
}

/* ---- Quiz CTA card: stack on mobile ---- */
@media (max-width: 820px) {
  .quiz-card { grid-template-columns: 1fr !important; gap: 28px !important; }
}