/* Wrapper frames whole pitch (header + demo) with thick malachyte-themed border.
   Uses warm off-white page bg for readability. */

.pitch-shell {
  background: var(--bg-sunken);
  min-height: 100vh;
  padding: 24px 24px 40px;
}

/* ============================================================
   Side-by-side header — compact, logo-forward, on warm paper
   ============================================================ */
.mode-bar {
  padding: 16px 24px 18px;
  font-family: var(--font-sans);
  background: #F0EAD9;
  color: var(--c-charcoal);
  border-bottom: 1px solid var(--border-strong);
}
.mode-bar__eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-subtle);
  text-align: center;
  margin-bottom: 12px;
}

.mode-bar__split {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: stretch;
}
.mode-bar__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--fg-subtle);
  min-width: 30px;
  font-family: var(--font-mono);
}

.mode-half {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 20px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  border: 2px solid var(--border-default);
  background: rgba(255,255,255,0.55);
  transition: all var(--dur-normal);
  position: relative;
  color: var(--fg-muted);
}
.mode-half:hover { border-color: var(--border-strong); }

.mode-half__logo {
  height: 80px;
  max-width: 320px;
  width: auto;
  object-fit: contain;
  opacity: 0.7;
  transition: all var(--dur-normal);
}
.mode-half--alpha .mode-half__logo { filter: grayscale(1) contrast(1.1); }

.mode-half__caption {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.6;
}
.mode-half__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(6,23,31,0.08);
  color: var(--fg-subtle);
  font-family: var(--font-mono);
}

.mode-half.is-active {
  background: #fff;
  color: var(--c-charcoal);
  border-color: var(--c-charcoal);
  box-shadow: 0 4px 14px rgba(6,23,31,0.1);
}
.mode-half--mal.is-active {
  background: #fff;
  border-color: var(--c-malachyte);
  box-shadow: 0 0 0 3px rgba(3,131,98,0.15), 0 4px 14px rgba(3,131,98,0.18);
}

.mode-half.is-active .mode-half__logo { opacity: 1; }
.mode-half.is-active .mode-half__caption { opacity: 1; }
.mode-half--alpha.is-active .mode-half__logo { filter: none; }
.mode-half--mal.is-active .mode-half__caption { color: var(--c-malachyte); font-weight: 600; }

/* Co-branded Malachyte × Zeta lockup — only shown on the email step */
.mode-half__lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
}
.mode-half__logo--pair {
  height: 40px;
  max-width: 180px;
}
.mode-half__logo--zeta {
  height: 40px;
}
.mode-half__x {
  font: 300 20px/1 var(--font-sans, "Helvetica Neue"), Arial, sans-serif;
  color: var(--text-muted, #9A9A93);
  opacity: 0.7;
}

.mode-half--alpha.is-active .mode-half__tag { background: var(--c-charcoal); color: #fff; }
.mode-half--mal.is-active .mode-half__tag { background: var(--c-malachyte); color: #fff; }

/* ============================================================
   Unified framed pitch box — border wraps header + demo
   ============================================================ */
.demo-viewport {
  max-width: 1440px;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 4px solid var(--c-charcoal);
  box-shadow: 0 24px 60px rgba(6,23,31,0.22);
  transition: border-color var(--dur-slow), box-shadow var(--dur-slow);
}
body.mode-malachyte .demo-viewport {
  border-color: var(--c-malachyte);
  box-shadow: 0 0 0 2px rgba(3,131,98,0.1), 0 24px 60px rgba(3,131,98,0.22);
}
body.mode-alpha .demo-viewport {
  border-color: #999;
}

/* Browser URL bar between mode header and demo */
.demo-urlbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #E8E2D3;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: 12px;
  color: #444;
}
.demo-urlbar__dots {
  display: flex;
  gap: 6px;
}
.demo-urlbar__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #CFC7B4;
}
.demo-urlbar__dots span:nth-child(1) { background: #E76F51; }
.demo-urlbar__dots span:nth-child(2) { background: #E9C46A; }
.demo-urlbar__dots span:nth-child(3) { background: #A7C59A; }
.demo-urlbar__url {
  flex: 1;
  background: #fff;
  border: 1px solid var(--border-default);
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  color: #333;
  display: flex;
  align-items: center;
  gap: 6px;
}
.demo-urlbar__url::before {
  content: '🔒';
  font-size: 10px;
  opacity: 0.7;
}
body.mode-malachyte .demo-urlbar__url { color: var(--c-malachyte-dark); }

/* ============================================================
   Shared mode-aware bits
   ============================================================ */
body.mode-alpha .step-hint { display: none; }

body.mode-malachyte .step-title {
  color: var(--c-charcoal);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.brand-grid { transition: all var(--dur-slow); }
.brand-tile { transition: all var(--dur-slow) var(--ease-out); }

body.mode-malachyte .brand-tile.suggested {
  border-color: var(--c-malachyte);
  background: linear-gradient(135deg, #F7FFF2, var(--bg-accent-soft));
  animation: suggestPulse var(--dur-slow) var(--ease-out);
}
@keyframes suggestPulse {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.match-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  background: var(--c-charcoal);
  color: var(--c-lime-hivis);
  font-size: 9px;
  padding: 3px 6px;
  border-radius: 3px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  font-family: var(--font-sans);
}
body.mode-alpha .match-badge { display: none; }

.cat-chip {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.9);
  color: #555;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-sans);
}
body.mode-alpha .cat-chip { display: none; }

.vector-readout {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--c-charcoal);
  color: #fff;
  padding: 14px 20px;
  border-radius: var(--r-lg);
  max-width: 820px;
  margin: 0 auto 20px;
  font-family: var(--font-sans);
}
body.mode-alpha .vector-readout { display: none; }
.vector-readout .num {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--c-lime-hivis);
  font-weight: 500;
}
.vector-readout .small {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}
.vector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
  max-width: 380px;
  justify-content: flex-end;
}
.vector-chip {
  background: rgba(173, 239, 155, 0.14);
  color: var(--c-lime-hivis);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  font-weight: 500;
}
.vector-chip .pct { color: rgba(255,255,255,0.6); margin-left: 4px; }

.alpha-callout {
  max-width: 820px;
  margin: 0 auto 20px;
  padding: 14px 18px;
  background: #FFF5F3;
  border-left: 3px solid #C14545;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: #7A2020;
  font-family: var(--font-sans);
}
body.mode-malachyte .alpha-callout { display: none; }
.alpha-callout strong {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C14545;
  display: block;
  margin-bottom: 4px;
}

.home-toolbar .mode-toggle { display: none; }

.alpha-notice {
  max-width: 1180px;
  margin: 18px auto 8px;
  padding: 14px 18px;
  background: #FFF5F3;
  border: 2px solid #C14545;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-sans);
}
.alpha-notice__tag {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: #C14545;
  padding: 5px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
}
.alpha-notice__body {
  font-size: 13px;
  color: #5A1818;
  line-height: 1.55;
}
.alpha-notice__body b { color: #7A2020; }

.sp-carousel-block { padding: 0; }
.sp-carousel-block--alpha {
  margin: 14px 20px;
  border: 2px solid #C14545;
  border-radius: 10px;
  background: #FFF9F8;
  overflow: hidden;
}
.sp-carousel-block--alpha .sp-carousel-head,
.sp-carousel-block--alpha .sp-carousel { background: #FFF9F8; }

.sp-carousel-alpha-banner {
  background: #C14545;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sp-carousel-alpha-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
}