/* ============== Reattend Landing v2 — Sections aligned to reference ============== */

/* ============ Hero v2 ============ */
.hero-v2 {
  padding: clamp(60px, 8vw, 120px) var(--pad) clamp(48px, 6vw, 80px);
  position: relative;
  z-index: 2;
}
.amnesia-section,
.cof-section,
.integrations-v2,
.chrome-v2,
.rabbit-v2,
.ambient-v2,
.thesis-v2,
.loop-v2,
.howit-v2,
.sandbox-v2,
.trust-v2,
.quote-v2,
.pricing-v2,
.faq-v2,
.finalcta-v2 {
  padding-top: clamp(60px, 7vw, 100px) !important;
  padding-bottom: clamp(60px, 7vw, 100px) !important;
}
.hero-v2-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 1000px) {
  .hero-v2-grid { grid-template-columns: 1fr; gap: 60px; }
}
.hv2-eye {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hv2-eye::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px oklch(0.45 0.18 280 / 0.18);
}
.hv2-h1 {
  font-family: var(--serif);
  font-size: clamp(56px, 8vw, 104px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 44px;
  font-weight: 400;
  padding-bottom: 0.1em;
}
.hv2-h1 em {
  font-style: italic;
  color: var(--accent);
  display: block;
  padding-bottom: 0.12em;
}
.hv2-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 50ch;
  margin: 0 0 36px;
}
.hv2-cta {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px;
}
.hv2-pilot {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.hv2-pilot span::before {
  content: "✓"; color: oklch(0.6 0.13 145); margin-right: 6px; font-weight: 500;
}

/* Memory orb stage */
.orb-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.05 / 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
@media (max-width: 760px) {
  .orb-stage { grid-template-columns: 1fr; gap: 24px; }
}

/* Apps grid (left) */
.orb-apps {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  gap: 8px;
  align-content: center;
}
.orb-apps-label {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.orb-app {
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-paper);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: appPulse 4s ease-in-out infinite;
}
.orb-app:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px oklch(0.18 0.012 270 / 0.18);
}
.orb-app img { width: 22px; height: 22px; object-fit: contain; }
.orb-app-more {
  width: 44px; height: 44px;
  border: 1px dashed var(--rule);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  background: transparent;
}
@keyframes appPulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.45 0.18 280 / 0); }
  50% { box-shadow: 0 0 0 4px oklch(0.45 0.18 280 / 0.05); }
}
.orb-app:nth-child(2) { animation-delay: 0.2s; }
.orb-app:nth-child(3) { animation-delay: 0.4s; }
.orb-app:nth-child(4) { animation-delay: 0.6s; }
.orb-app:nth-child(5) { animation-delay: 0.8s; }
.orb-app:nth-child(6) { animation-delay: 1.0s; }
.orb-app:nth-child(7) { animation-delay: 1.2s; }
.orb-app:nth-child(8) { animation-delay: 1.4s; }
.orb-app:nth-child(9) { animation-delay: 1.6s; }
.orb-app:nth-child(10) { animation-delay: 1.8s; }
.orb-app:nth-child(11) { animation-delay: 2.0s; }

/* Connecting lines from apps to orb */
.orb-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.orb-lines path {
  fill: none;
  stroke: oklch(0.45 0.18 280 / 0.25);
  stroke-width: 1;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: orbDraw 3s ease-out forwards;
}
.orb-lines path:nth-child(2) { animation-delay: 0.3s; }
.orb-lines path:nth-child(3) { animation-delay: 0.6s; }
.orb-lines path:nth-child(4) { animation-delay: 0.9s; }
.orb-lines path:nth-child(5) { animation-delay: 1.2s; }
.orb-lines path:nth-child(6) { animation-delay: 1.5s; }
@keyframes orbDraw {
  to { stroke-dashoffset: 0; }
}

/* The orb itself */
.orb-core {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 280px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, oklch(0.28 0.025 270), oklch(0.13 0.012 270) 70%);
  color: oklch(0.98 0.005 80);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow:
    0 30px 60px -20px oklch(0.18 0.012 270 / 0.4),
    0 0 0 1px oklch(0.18 0.012 270 / 0.1),
    inset 0 0 80px oklch(0.45 0.18 280 / 0.15);
  z-index: 2;
}
.orb-core::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1px solid oklch(0.45 0.18 280 / 0.15);
  animation: orbRing 4s ease-in-out infinite;
}
.orb-core::after {
  content: "";
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  border: 1px solid oklch(0.45 0.18 280 / 0.08);
  animation: orbRing 4s ease-in-out infinite 1s;
}
@keyframes orbRing {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.05); opacity: 1; }
}
.orb-num {
  font-family: var(--serif);
  font-size: 44px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.orb-num-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: oklch(0.7 0.005 80);
  margin-top: 6px;
}
.orb-stats {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid oklch(1 0 0 / 0.1);
  width: 80%;
  justify-content: center;
}
.orb-stat {
  text-align: center;
}
.orb-stat-num {
  font-family: var(--serif);
  font-size: 16px;
  color: oklch(0.78 0.16 65);
}
.orb-stat-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: oklch(0.55 0.005 80);
  margin-top: 4px;
}
.orb-bottom {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Callouts (right side) */
.orb-callouts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-content: center;
}
.orb-callout {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  box-shadow: 0 12px 28px -16px oklch(0.18 0.012 270 / 0.18);
  animation: calloutFloat 0.8s ease-out backwards;
  max-width: 240px;
  font-family: var(--mono);
  letter-spacing: -0.005em;
}
.orb-callout:nth-child(1) { animation-delay: 0.4s; }
.orb-callout:nth-child(2) { animation-delay: 0.7s; }
.orb-callout:nth-child(3) { animation-delay: 1.0s; }
@keyframes calloutFloat {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.orb-callout-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.orb-callout-head .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.orb-callout-head.amber .dot { background: var(--amber-deep); }
.orb-callout-head .avatar {
  width: 18px; height: 18px; border-radius: 4px;
  background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600;
}
.orb-callout-q {
  font-style: italic;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.orb-callout-body strong {
  color: var(--accent);
  font-weight: 500;
  font-style: normal;
}
.orb-callout-body em {
  background: oklch(0.92 0.07 80);
  font-style: normal;
  padding: 0 3px;
  border-radius: 2px;
  color: var(--ink);
  font-weight: 500;
}
.orb-callout-tags {
  display: flex; gap: 4px; margin-top: 8px;
}
.orb-callout-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink-3);
}

.orb-bottom-tags {
  position: absolute;
  bottom: -56px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============ Section eye + heading shared ============ */
.sec-eye {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.sec-eye::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px currentColor;
  opacity: 1;
}
.sec-eye::before {
  box-shadow: 0 0 0 4px oklch(0.45 0.18 280 / 0.18);
}
.sec-eye.amber { color: var(--amber-deep); }
.sec-eye.amber::before { box-shadow: 0 0 0 4px oklch(0.78 0.16 65 / 0.18); }

.sec-h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 400;
}
.sec-h2 em {
  font-style: italic;
  color: var(--accent);
}
.sec-h2.amber em { color: var(--amber-deep); }

.sec-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: 24px;
}

/* ============ Problem / Amnesia ============ */
.amnesia-section {
  padding: clamp(80px, 10vw, 140px) var(--pad);
  position: relative;
  z-index: 2;
}
.amnesia-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 60px;
}
@media (max-width: 900px) {
  .amnesia-grid { grid-template-columns: 1fr; gap: 24px; }
}
.amnesia-stats {
  max-width: var(--maxw);
  margin: 80px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-top: 48px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 900px) {
  .amnesia-stats { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 540px) {
  .amnesia-stats { grid-template-columns: 1fr; }
}
.amnesia-stat-num {
  font-family: var(--serif);
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.amnesia-stat-num em {
  font-style: italic;
  color: var(--accent);
  font-size: 0.6em;
  vertical-align: 0.15em;
  margin-left: 2px;
}
.amnesia-stat-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 12px;
  max-width: 30ch;
}
.amnesia-stat-cite {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 12px;
}
.amnesia-stat-cite::before { content: "— "; }

/* ============ Cost of Forgetting Calculator ============ */
.cof-section {
  padding: clamp(60px, 8vw, 100px) var(--pad);
  position: relative;
  z-index: 2;
}
.cof-frame {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 48px);
}
.cof-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  margin-bottom: 40px;
}
@media (max-width: 760px) {
  .cof-head { grid-template-columns: 1fr; }
}
.cof-eye {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-deep);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.cof-eye::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber-deep);
  box-shadow: 0 0 0 4px oklch(0.78 0.16 65 / 0.18);
}
.cof-h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: var(--ink);
}
.cof-h2 em { font-style: italic; color: var(--accent); }
.cof-aside {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.5;
  max-width: 18ch;
}
.cof-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) {
  .cof-body { grid-template-columns: 1fr; gap: 40px; }
}
.cof-controls {
  display: flex; flex-direction: column; gap: 28px;
}
.cof-control {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
}
.cof-label {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cof-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--rule);
  border-radius: 999px;
  outline: none;
}
.cof-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--bg-paper);
  box-shadow: 0 0 0 1px var(--ink), 0 4px 8px -2px oklch(0.18 0.012 270 / 0.3);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.cof-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.cof-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--bg-paper);
  box-shadow: 0 0 0 1px var(--ink);
  cursor: pointer;
}
.cof-value {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  min-width: 60px;
  text-align: right;
}
.cof-results {
  border-left: 1px solid var(--rule);
  padding-left: clamp(20px, 3vw, 40px);
}
@media (max-width: 900px) {
  .cof-results { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 32px; }
}
.cof-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--rule);
  align-items: baseline;
}
.cof-line-label { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.cof-line-val {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cof-total {
  margin-top: 24px;
  padding-top: 24px;
}
.cof-total-eye {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.cof-total-val {
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cof-total-bar {
  margin-top: 18px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--amber-deep) 0%, var(--accent) 100%);
}
.cof-total-foot {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-2);
}
.cof-total-foot em { color: var(--accent); font-style: italic; }
.cof-total-foot strong { color: var(--ink); font-weight: 500; }

/* ============ Integrations v2 (pill chips, 3 rows) ============ */
.integrations-v2 {
  background: var(--bg-2);
  padding: clamp(80px, 10vw, 140px) var(--pad);
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.integrations-v2 .wrap {
  max-width: 1100px;
  margin: 0 auto;
}
.integrations-v2 .sec-eye { margin-bottom: 24px; }
.integrations-v2 .sec-h2 {
  max-width: 22ch;
}
.integrations-v2 .sec-lede { margin-bottom: 56px; }
.int-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-left: calc(var(--pad) * -1);
  margin-right: calc(var(--pad) * -1);
}
.int-row {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  width: max-content;
  animation: scrollLeft 60s linear infinite;
}
.int-row.r2 { animation-duration: 70s; animation-direction: reverse; }
.int-row.r3 { animation-duration: 80s; }
@keyframes scrollLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.int-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  font-weight: 450;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.int-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px -4px oklch(0.18 0.012 270 / 0.12);
}
.int-pill img {
  width: 18px; height: 18px;
  display: block;
  flex-shrink: 0;
  background: var(--bg-2);
  border-radius: 50%;
  padding: 2px;
}
.int-foot {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
  margin-top: 56px;
  flex-wrap: wrap;
}
.int-foot-item {
  display: flex; align-items: baseline; gap: 8px;
}
.int-foot-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
}
.int-foot-text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============ Chrome Extension v2 ============ */
.chrome-v2 {
  padding: clamp(80px, 10vw, 140px) var(--pad);
  position: relative;
  z-index: 2;
}
.chrome-v2-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 1000px) {
  .chrome-v2-grid { grid-template-columns: 1fr; }
}
.chrome-v2-h2 { max-width: 14ch; }
.chrome-v2-body { color: var(--ink-2); font-size: 15px; line-height: 1.65; max-width: 50ch; }
.chrome-v2-body p { margin-top: 18px; }
.chrome-v2-body em { font-style: italic; }
.chrome-v2-body code {
  font-family: var(--mono); font-size: 12px;
  background: var(--bg-2); padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--rule);
}

.chrome-features {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}
.chrome-feature {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.chrome-feature:last-child { border-bottom: 1px solid var(--rule); }
.chrome-feature-mark {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  background: var(--bg-paper);
  position: relative;
}
.chrome-feature:nth-child(1) .chrome-feature-mark { background: var(--accent); border-color: var(--accent); }
.chrome-feature:nth-child(1) .chrome-feature-mark::after {
  content: ""; position: absolute; inset: 4px;
  border-radius: 50%; background: var(--bg-paper);
}
.chrome-feature h4 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 4px;
}
.chrome-feature p {
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
}

/* Browser mock v2 */
.browser-v2 {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 48px -16px oklch(0.18 0.012 270 / 0.18);
}
.browser-v2-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
}
.browser-v2-dots {
  display: flex; gap: 6px;
}
.browser-v2-dots span {
  width: 11px; height: 11px; border-radius: 50%;
}
.browser-v2-dots span:nth-child(1) { background: oklch(0.74 0.18 27); }
.browser-v2-dots span:nth-child(2) { background: oklch(0.85 0.15 90); }
.browser-v2-dots span:nth-child(3) { background: oklch(0.74 0.13 145); }
.browser-v2-url {
  flex: 1;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}
.browser-v2-pin {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--bg-paper);
  font-size: 10px;
}
.browser-v2-content {
  position: relative;
  padding: 24px;
  min-height: 380px;
  background: var(--bg-paper);
}
.browser-v2-doc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bv2-line {
  height: 8px;
  background: var(--bg-2);
  border-radius: 2px;
}
.bv2-line.short { width: 60%; }
.bv2-line.long { width: 95%; }
.bv2-search {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.bv2-search-kbd {
  font-family: var(--mono);
  font-size: 9px;
  padding: 2px 5px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink-2);
  background: var(--bg-paper);
}

/* Observing popover (top-right) */
.observ-pop {
  position: absolute;
  top: 14px; right: 14px;
  width: 220px;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 12px 24px -8px oklch(0.18 0.012 270 / 0.18);
  font-size: 12px;
  overflow: hidden;
}
.observ-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.observ-head .dot { width: 5px; height: 5px; border-radius: 50%; background: oklch(0.6 0.13 145); animation: pulse 2s ease-in-out infinite; }
.observ-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-2);
}
.observ-row:last-child { border-bottom: 0; }
.observ-toggle {
  width: 26px; height: 14px;
  border-radius: 999px;
  background: var(--accent);
  position: relative;
  flex-shrink: 0;
}
.observ-toggle::after {
  content: "";
  position: absolute;
  top: 2px; right: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bg-paper);
}
.observ-toggle.off { background: var(--rule); }
.observ-toggle.off::after { right: auto; left: 2px; }
.observ-foot {
  padding: 8px 10px;
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  background: var(--bg-2);
}

/* Answer card (bottom-left) */
.answer-pop {
  position: absolute;
  bottom: 14px; left: 14px;
  width: 280px;
  background: var(--bg-paper);
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 12px 24px -8px oklch(0.45 0.18 280 / 0.2);
  overflow: hidden;
}
.answer-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 6px;
}
.answer-head .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.answer-body {
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.answer-body em {
  background: oklch(0.92 0.04 285);
  font-style: normal;
  padding: 0 3px;
  border-radius: 2px;
  color: var(--accent);
  font-weight: 500;
}
.answer-tags {
  display: flex; gap: 6px;
  padding: 0 12px 12px;
  flex-wrap: wrap;
}
.answer-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink-3);
}

/* ============ Rabbit LLM dark section ============ */
.rabbit-v2 {
  background: oklch(0.13 0.012 270);
  color: oklch(0.98 0.005 80);
  padding: clamp(80px, 10vw, 140px) var(--pad);
  position: relative;
  z-index: 2;
}
.rabbit-v2 .wrap { max-width: var(--maxw); margin: 0 auto; }
.rabbit-v2-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 60px;
}
@media (max-width: 900px) {
  .rabbit-v2-grid { grid-template-columns: 1fr; gap: 24px; }
}
.rabbit-v2 .sec-eye {
  color: var(--amber-deep);
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.rabbit-v2 .sec-eye::before {
  background: var(--amber-deep);
  box-shadow: 0 0 0 4px oklch(0.78 0.16 65 / 0.18);
}
.rabbit-v2 .sec-h2 {
  color: oklch(0.98 0.005 80);
  font-size: clamp(40px, 5vw, 72px);
}
.rabbit-v2 .sec-h2 em {
  color: oklch(0.78 0.16 65);
  display: inline;
}
.rabbit-v2 .sec-lede {
  color: oklch(0.75 0.005 80);
  font-size: 15px;
  margin-top: 32px;
  margin-bottom: 56px;
}

.rabbit-spec {
  border-top: 1px solid oklch(1 0 0 / 0.12);
}
.rabbit-spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  padding: 18px 0;
  border-bottom: 1px solid oklch(1 0 0 / 0.12);
  align-items: baseline;
}
@media (max-width: 760px) {
  .rabbit-spec-row { grid-template-columns: 1fr; gap: 6px; }
}
.rabbit-spec-key {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.55 0.005 80);
}
.rabbit-spec-val {
  font-family: var(--serif);
  font-size: 22px;
  color: oklch(0.98 0.005 80);
  letter-spacing: -0.01em;
}
.rabbit-spec-val em {
  font-style: italic;
  color: oklch(0.78 0.16 65);
}

.rabbit-bottom {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .rabbit-bottom { grid-template-columns: 1fr; }
}
.rabbit-signals {
  background: oklch(0.18 0.012 270);
  border: 1px solid oklch(1 0 0 / 0.12);
  border-radius: 12px;
  padding: 24px;
}
.rabbit-signals-eye {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.55 0.005 80);
  margin-bottom: 16px;
}
.rabbit-signals-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.rabbit-chip {
  font-family: var(--mono);
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: 999px;
  color: oklch(0.85 0.005 80);
  background: oklch(0.16 0.012 270);
}

.rabbit-log {
  background: oklch(0.10 0.012 270);
  border: 1px solid oklch(1 0 0 / 0.12);
  border-radius: 12px;
  padding: 18px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: oklch(0.78 0.005 80);
  overflow: hidden;
}
.rabbit-log-line {
  display: flex; gap: 10px; align-items: baseline;
}
.rabbit-log-time { color: oklch(0.5 0.005 80); flex-shrink: 0; }
.rabbit-log-tag {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: oklch(0.78 0.16 65);
  color: oklch(0.13 0.012 270);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  font-weight: 500;
}
.rabbit-log-tag.in { background: oklch(0.6 0.13 145); }
.rabbit-log-tag.idx { background: oklch(0.6 0.18 280); color: oklch(0.98 0.005 80); }
.rabbit-log-tag.out { background: oklch(0.78 0.16 65); }
.rabbit-log-msg { flex: 1; }
.rabbit-log-msg em { color: oklch(0.78 0.16 65); font-style: normal; }

/* ============ Ambient memory v2 (4-quadrant) ============ */
.ambient-v2 {
  padding: clamp(80px, 10vw, 140px) var(--pad);
  position: relative;
  z-index: 2;
}
.ambient-v2-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 60px;
}
@media (max-width: 900px) {
  .ambient-v2-grid { grid-template-columns: 1fr; gap: 24px; }
}
.ambient-v2-h2 { max-width: 18ch; }
.ambient-v2 .sec-lede { margin-bottom: 56px; }

.ambient-quads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 40px;
}
@media (max-width: 760px) {
  .ambient-quads { grid-template-columns: 1fr; }
}
.ambient-quad {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}
.ambient-quad-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink-3);
  align-self: flex-start;
  margin-bottom: 10px;
}
.ambient-quad h4 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 4px;
}
.ambient-quad p.sub {
  font-size: 12px; color: var(--ink-2); line-height: 1.5;
  margin-bottom: 18px;
}

/* Quad mini diagrams */
.qd-stage { flex: 1; position: relative; min-height: 100px; display: flex; align-items: center; }

/* Q1: contradiction */
.qd-doc {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 8px;
  width: 60%;
  height: 60px;
  position: relative;
}
.qd-doc-line { height: 4px; background: var(--rule); border-radius: 2px; margin-bottom: 4px; }
.qd-doc-highlight {
  height: 18px;
  background: oklch(0.92 0.07 65);
  border-radius: 2px;
  margin-top: 6px;
  display: flex; align-items: center; padding: 0 6px;
  font-family: var(--mono); font-size: 9px; color: oklch(0.4 0.1 65);
}
.qd-conflict {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  background: oklch(0.96 0.04 285);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 10px;
  width: 38%;
  color: var(--accent);
}
.qd-conflict-head { letter-spacing: 0.08em; margin-bottom: 4px; }
.qd-conflict-body { color: var(--ink); font-size: 11px; line-height: 1.4; font-family: var(--sans); }
.qd-conflict-body em { color: var(--ink); font-weight: 500; font-style: normal; }
.qd-conflict-arrow {
  position: absolute;
  left: 60%;
  top: 50%;
  width: calc(40% - 38%);
  height: 0;
  border-top: 1px dashed var(--accent);
}

/* Q2: duplicate work timeline */
.qd-timeline {
  width: 100%;
  position: relative;
  height: 80px;
}
.qd-timeline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  border-top: 1px dashed var(--rule);
}
.qd-event {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.qd-event .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.qd-event .lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap;
}
.qd-event:nth-child(1) { left: 10%; }
.qd-event:nth-child(1) .lbl { position: absolute; bottom: 16px; }
.qd-event:nth-child(2) { left: 38%; }
.qd-event:nth-child(2) .lbl { position: absolute; top: 16px; }
.qd-event:nth-child(3) { left: 64%; }
.qd-event:nth-child(3) .lbl { position: absolute; bottom: 16px; }
.qd-event:nth-child(4) { left: 90%; }
.qd-event:nth-child(4) .dot { background: var(--accent); }
.qd-event:nth-child(4) .lbl { position: absolute; top: 16px; color: var(--accent); }

/* Q3: policy guardrails */
.qd-policy {
  width: 100%; position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center;
}
.qd-policy-doc {
  position: relative;
  width: 80%;
  height: 60px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--bg-paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--ink);
}
.qd-policy-list {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.7;
}
.qd-policy-list div::before { content: "● "; color: var(--accent); }

/* Q4: owner suggestions */
.qd-owners {
  width: 100%;
  position: relative;
  height: 100px;
}
.qd-owner {
  position: absolute;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 11px;
  color: var(--ink);
}
.qd-owner.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg-paper);
  left: 10%; top: 50%; transform: translateY(-50%);
}
.qd-owner img {
  width: 18px; height: 18px;
  border-radius: 50%;
}
.qd-owner-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
}
.qd-owner.s1 { right: 10%; top: 18%; opacity: 0.7; }
.qd-owner.s2 { right: 14%; top: 50%; transform: translateY(-50%); opacity: 0.6; }
.qd-owner.s3 { right: 10%; bottom: 18%; opacity: 0.5; }
.qd-owner.s1, .qd-owner.s2, .qd-owner.s3 { background: var(--bg-2); }
.qd-owner.s1 .qd-owner-avatar, .qd-owner.s2 .qd-owner-avatar, .qd-owner.s3 .qd-owner-avatar {
  background: oklch(0.78 0.16 65);
}
.qd-owner-line {
  position: absolute;
  height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
}

/* ============ Thesis v2 ============ */
.thesis-v2 {
  background: var(--bg-2);
  padding: clamp(80px, 10vw, 140px) var(--pad);
  position: relative;
  z-index: 2;
}
.thesis-v2-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 900px) {
  .thesis-v2-grid { grid-template-columns: 1fr; }
}
.thesis-v2-h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink-3);
  font-weight: 400;
}
.thesis-v2-h2 em { font-style: italic; color: var(--accent); }
.thesis-v2-h2 .strong { color: var(--ink); }
.thesis-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.thesis-stat {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px;
}
.thesis-stat-num {
  font-family: var(--serif);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.thesis-stat-num em {
  font-style: italic;
  color: var(--accent);
  font-size: 0.55em;
  margin-left: 2px;
  vertical-align: 0.18em;
}
.thesis-stat-key {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 12px;
}
.thesis-stat-body {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: 12px;
}

/* ============ Loop v2 ============ */
.loop-v2 {
  padding: clamp(80px, 10vw, 140px) var(--pad);
  position: relative;
  z-index: 2;
}
.loop-v2-head {
  max-width: var(--maxw);
  margin: 0 auto 60px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 60px;
}
@media (max-width: 900px) {
  .loop-v2-head { grid-template-columns: 1fr; gap: 24px; }
}
.loop-v2-h2 {
  max-width: 14ch;
}
.loop-v2-cards {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .loop-v2-cards { grid-template-columns: 1fr; }
}
.loop-v2-card {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.loop-v2-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.loop-v2-card-dots {
  display: flex; gap: 4px;
}
.loop-v2-card-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--rule);
}
.loop-v2-card-dots span.active { background: var(--accent); }

.loop-v2-stage {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  height: 180px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Stage: Capture (papers) */
.lvs-papers {
  position: relative;
  width: 60%;
  height: 70%;
}
.lvs-paper {
  position: absolute;
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 4px 8px -4px oklch(0.18 0.012 270 / 0.15);
}
.lvs-paper:nth-child(1) { left: 0; top: 8px; width: 70%; height: 75%; transform: rotate(-3deg); }
.lvs-paper:nth-child(2) { left: 20%; top: 0; width: 70%; height: 80%; transform: rotate(2deg); }
.lvs-paper-line {
  height: 3px; background: var(--rule); border-radius: 2px; margin-bottom: 4px;
}
.lvs-paper-line.short { width: 60%; }

/* Stage: Connect (graph) */
.lvs-graph {
  width: 100%; height: 100%;
}
.lvs-graph svg { width: 100%; height: 100%; }
.lvs-graph circle { fill: var(--accent); }
.lvs-graph circle.alt { fill: var(--ink); r: 3; }
.lvs-graph line { stroke: var(--accent); stroke-width: 1; opacity: 0.4; }

/* Stage: Recall (search + results) */
.lvs-recall {
  width: 100%; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.lvs-search {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}
.lvs-result {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 8px 10px;
}
.lvs-result-meta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.lvs-result-body {
  font-size: 11px;
  color: var(--ink);
  line-height: 1.4;
}

.loop-v2-card h3 {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 12px;
}
.loop-v2-card p {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* ============ Reveal helper ============ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}


/* ============ How It Works ============ */
.howit-v2 { padding: 0 var(--pad); position: relative; z-index: 2; }
.howit-v2 .wrap { max-width: var(--maxw); margin: 0 auto; }
.howit-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
@media (max-width: 900px) { .howit-head { grid-template-columns: 1fr; gap: 24px; } }
.howit-row {
  display: grid;
  grid-template-columns: 60px 1fr 1.4fr;
  gap: 32px;
  padding: 40px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
@media (max-width: 900px) {
  .howit-row { grid-template-columns: 60px 1fr; }
  .howit-row > .howit-stage { grid-column: 1 / -1; }
}
.howit-row:last-child { border-bottom: 1px solid var(--rule); }
.howit-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  color: var(--accent);
  line-height: 1;
}
.howit-text h3 {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  font-weight: 400;
}
.howit-text p { font-size: 14px; color: var(--ink-2); line-height: 1.6; max-width: 38ch; }
.howit-stage {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 20px;
  min-height: 140px;
}

/* Step 1: pills + drop zone */
.hi-pills {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.hi-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg-paper);
}
.hi-pill::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.hi-pill.amber::before { background: var(--amber-deep); }
.hi-pill.green::before { background: oklch(0.6 0.13 145); }
.hi-pill.blue::before { background: oklch(0.6 0.16 240); }
.hi-drop {
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 14px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  background: oklch(0.96 0.04 285);
}
.hi-drop-file {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--ink-2);
}

/* Step 2: classify rows */
.hi-class {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--mono); font-size: 12px;
}
.hi-class-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  align-items: center;
}
.hi-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 4px;
  background: oklch(0.92 0.04 285);
  color: var(--accent);
}
.hi-tag.amber { background: oklch(0.92 0.07 65); color: oklch(0.4 0.13 65); }
.hi-tag.green { background: oklch(0.92 0.07 145); color: oklch(0.35 0.1 145); }

/* Step 3: timeline */
.hi-time {
  display: flex; flex-direction: column; gap: 16px;
  width: 100%;
}
.hi-query {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
}
.hi-query em { color: var(--accent); font-style: normal; text-decoration: underline; }
.hi-axis {
  position: relative; height: 60px;
}
.hi-axis::before {
  content: "";
  position: absolute; top: 50%; left: 0; right: 0;
  border-top: 1px dashed var(--rule);
}
.hi-axis-mark {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.hi-axis-mark.amber { background: var(--amber-deep); }
.hi-axis-cursor {
  position: absolute;
  top: -10px; bottom: -10px;
  width: 1px;
  background: var(--ink);
}
.hi-axis-cursor::after {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink);
}
.hi-axis-labels {
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 6px;
}

/* ============ Live Sandbox ============ */
.sandbox-v2 { padding: 0 var(--pad); position: relative; z-index: 2; }
.sandbox-v2 .wrap { max-width: var(--maxw); margin: 0 auto; }
.sandbox-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 60px;
  margin-bottom: 40px;
}
@media (max-width: 900px) { .sandbox-head { grid-template-columns: 1fr; gap: 24px; } }
.sandbox-frame {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 320px;
}
@media (max-width: 760px) { .sandbox-frame { grid-template-columns: 1fr; } }
.sandbox-list {
  border-right: 1px solid var(--rule);
  padding: 20px;
}
@media (max-width: 760px) { .sandbox-list { border-right: 0; border-bottom: 1px solid var(--rule); } }
.sandbox-list-eye {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.sandbox-q {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  margin-bottom: 8px;
  cursor: pointer;
  line-height: 1.45;
  transition: all 0.15s ease;
}
.sandbox-q:hover { border-color: var(--accent); color: var(--ink); }
.sandbox-q.active {
  background: oklch(0.96 0.04 285);
  border-color: var(--accent);
  color: var(--accent);
}
.sandbox-body { padding: 24px; }
.sandbox-prompt {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.sandbox-prompt em { color: var(--ink); font-style: normal; }
.sandbox-answer-h {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  font-weight: 400;
}
.sandbox-answer-p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 14px;
}
.sandbox-cites {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.sandbox-cite {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}
.sandbox-cite::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.sandbox-cite.amber::before { background: var(--amber-deep); }

/* ============ Trust (dark) ============ */
.trust-v2 { padding: 0 var(--pad); position: relative; z-index: 2; }
.trust-v2 .wrap { max-width: var(--maxw); margin: 0 auto; }
.trust-card {
  background: oklch(0.13 0.012 270);
  color: oklch(0.98 0.005 80);
  border-radius: 16px;
  padding: clamp(40px, 5vw, 64px);
}
.trust-card .sec-eye { color: var(--amber-deep); margin-bottom: 24px; }
.trust-card .sec-eye::before { background: var(--amber-deep); box-shadow: 0 0 0 4px oklch(0.78 0.16 65 / 0.18); }
.trust-card h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 400;
  color: oklch(0.98 0.005 80);
  max-width: 18ch;
}
.trust-card h2 em { font-style: italic; color: oklch(0.78 0.16 65); }
.trust-card p {
  margin-top: 24px;
  font-size: 15px;
  color: oklch(0.75 0.005 80);
  max-width: 60ch;
}
.trust-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 760px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
.trust-cell {
  border: 1px solid oklch(1 0 0 / 0.12);
  border-radius: 10px;
  padding: 20px;
}
.trust-cell-h {
  font-family: var(--serif);
  font-size: 22px;
  color: oklch(0.98 0.005 80);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.trust-cell-s {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.6 0.005 80);
}

/* ============ Quote ============ */
.quote-v2 { padding: 0 var(--pad); position: relative; z-index: 2; }
.quote-v2 .wrap { max-width: var(--maxw); margin: 0 auto; }
.quote-card {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
@media (max-width: 760px) {
  .quote-card { grid-template-columns: 1fr; }
  .quote-stats { display: flex; gap: 32px; }
}
.quote-mark {
  font-family: var(--serif);
  font-size: 80px;
  color: oklch(0.7 0.13 285);
  line-height: 1;
  font-style: italic;
}
.quote-body {
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 400;
}
.quote-body em { font-style: italic; color: var(--accent); }
.quote-attrib {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.quote-attrib::before {
  content: "—  "; color: var(--ink-3);
}
.quote-stats {
  display: flex; flex-direction: column; gap: 18px;
}
.quote-stat-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.quote-stat-key {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}

/* ============ Pricing ============ */
.pricing-v2 { padding: 0 var(--pad); position: relative; z-index: 2; }
.pricing-v2 .wrap { max-width: var(--maxw); margin: 0 auto; }
.pricing-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 60px;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .pricing-head { grid-template-columns: 1fr; gap: 24px; } }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1000px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pricing-grid { grid-template-columns: 1fr; } }
.pri-card {
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px;
  min-height: 220px;
  display: flex; flex-direction: column;
}
.pri-card.dark {
  background: oklch(0.13 0.012 270);
  color: oklch(0.98 0.005 80);
  border-color: oklch(0.13 0.012 270);
}
.pri-key {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.pri-card.dark .pri-key { color: oklch(0.6 0.005 80); }
.pri-price {
  font-family: var(--serif);
  font-size: 40px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}
.pri-card.dark .pri-price { color: oklch(0.98 0.005 80); }
.pri-price em { font-style: italic; }
.pri-price .unit {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-left: 2px;
}
.pri-card.dark .pri-price .unit { color: oklch(0.6 0.005 80); }
.pri-body {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: 18px;
}
.pri-card.dark .pri-body { color: oklch(0.7 0.005 80); }
.pri-foot {
  margin-top: 32px;
  font-size: 13px;
  color: var(--accent);
  font-family: var(--mono);
  letter-spacing: -0.005em;
}

/* ============ FAQ ============ */
.faq-v2 { padding: 0 var(--pad); position: relative; z-index: 2; }
.faq-v2 .wrap { max-width: var(--maxw); margin: 0 auto; }
.faq-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 60px;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .faq-head { grid-template-columns: 1fr; gap: 24px; } }
.faq-list { border-top: 1px solid var(--rule); }
.faq-row {
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  cursor: pointer;
}
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.faq-q .icon {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ink-3);
  transition: transform 0.2s ease;
}
.faq-row.open .faq-q .icon { transform: rotate(45deg); }
.faq-a {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 80ch;
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease, margin 0.3s ease;
}
.faq-row.open .faq-a {
  max-height: 200px;
  margin-top: 14px;
}

/* ============ Final CTA ============ */
.finalcta-v2 {
  padding: clamp(80px, 10vw, 160px) var(--pad);
  text-align: center;
  position: relative;
  z-index: 2;
  background: radial-gradient(ellipse at top, oklch(0.96 0.04 285 / 0.5), transparent 60%);
}
.finalcta-v2 h2 {
  font-family: var(--serif);
  font-size: clamp(56px, 8vw, 112px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--ink);
  max-width: 14ch;
  margin: 0 auto;
}
.finalcta-v2 h2 em { font-style: italic; color: var(--accent); display: block; }
.finalcta-v2 p {
  margin-top: 28px;
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 56ch;
  margin-left: auto; margin-right: auto;
}
.finalcta-v2 .actions {
  margin-top: 36px;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}