/* ===================================================================
   Variation D: Merged
   B's product-forward structure + C's Canela editorial typography
   + A's copy restraint.
   "Show the product, command with type, say less."
   Scoped under `.variation-merged` body class.
   =================================================================== */

/* --- Accessibility --- */

.variation-merged .skip-link {
  position: absolute;
  top: -100%;
  left: max(1rem, calc(1rem + env(safe-area-inset-left, 0px)));
  z-index: 1000;
  padding: 0.6rem 1.2rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--color-navy);
  color: var(--color-ivory);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
}

.variation-merged .skip-link:focus {
  top: env(safe-area-inset-top, 0px);
}

.variation-merged :focus-visible {
  outline: 2px solid var(--color-saffron);
  outline-offset: 2px;
}

.variation-merged .cta-button:focus-visible,
.variation-merged .nav-link:focus-visible {
  outline-color: var(--color-navy);
}

/* --- Scope & Tokens --- */

.variation-merged {
  --content-width: 960px;
  --editorial-body-width: 640px;
}

/* --- Navigation: Always visible on subpages --- */

.variation-merged .nav {
  transform: translateY(0);
  opacity: 1;
}

.js .variation-merged .nav {
  transform: translateY(0);
  opacity: 1;
}

/* Homepage: nav hidden until scenes, controlled by JS */
/* On homepage, nav is ALWAYS hidden unless nav-scene-visible is set.
   This overrides .is-visible from styles.css which Safari/iPad may
   add via IntersectionObserver before the explicit JS removal runs. */
.home-page.variation-merged .nav,
.home-page.variation-merged .nav.is-visible {
  transform: translateY(-100%);
  opacity: 0;
}

.home-page.variation-merged .nav.nav-scene-visible {
  transform: translateY(0);
  opacity: 1;
}

.variation-merged .nav.is-scrolled {
  background: rgba(248, 245, 239, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(20, 42, 64, 0.06);
}

.variation-merged .nav.nav-over-scene.is-scrolled,
.variation-merged .nav.nav-scene-visible.is-scrolled {
  background: rgba(20, 42, 64, 0.72);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

/* Mobile: dark dropdown when nav is over a scene */
@media (max-width: 720px) {
  .variation-merged .nav.nav-over-scene .nav-links,
  .variation-merged .nav.nav-scene-visible .nav-links {
    background: rgba(20, 42, 64, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .variation-merged .nav.nav-over-scene .nav-links .nav-link,
  .variation-merged .nav.nav-scene-visible .nav-links .nav-link {
    color: rgba(248, 245, 239, 0.85);
  }

  .variation-merged .nav.nav-over-scene .nav-links .nav-link:hover,
  .variation-merged .nav.nav-scene-visible .nav-links .nav-link:hover {
    color: rgba(248, 245, 239, 1);
  }

  /* Smaller CTA in mobile menu */
  .variation-merged .nav .nav-links .nav-cta {
    font-size: 0.75rem;
    padding: 0.65rem 1.5rem;
    align-self: flex-start;
    margin-left: 2rem;
  }
}

/* --- Typography Scale (Canela editorial) --- */

.variation-merged .section-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  line-height: 1.2;
  margin-bottom: 2rem;
}

.variation-merged .eyebrow {
  margin-bottom: 1.5rem;
  letter-spacing: 0.36em;
}

.variation-merged .section-body p {
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.7;
}

.variation-merged .section-intro {
  font-family: var(--font-sans);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0 0 2rem;
  max-width: var(--editorial-body-width);
}

.variation-merged .section-intro-dark {
  color: rgba(248, 245, 239, 0.8);
}

/* --- Hero --- */

.variation-merged .stage {
  padding: 14vh 6vw 6vh;
}

.variation-merged .tagline {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--color-text-primary);
  margin-top: 2.5rem;
  max-width: var(--content-width);
  line-height: 1.35;
}

.variation-merged .subline {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text-secondary);
  margin-top: 1rem;
  max-width: var(--editorial-body-width);
  line-height: 1.6;
}

.variation-merged .hero-actions {
  margin-top: 2rem;
}

.variation-merged .hero-cta-note {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-top: 0.6rem;
  letter-spacing: 0.01em;
}

/* --- Trust Bar --- */

.variation-merged .trust-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 2rem;
  border-top: 1px solid rgba(20, 42, 64, 0.06);
  border-bottom: 1px solid rgba(20, 42, 64, 0.06);
  background: rgba(20, 42, 64, 0.02);
}

.variation-merged .trust-bar-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.variation-merged .trust-bar-badge strong {
  color: var(--color-text-primary);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* --- Hero Mockup — App-like interface --- */

.variation-merged .hero-mockup {
  margin: 3rem auto 0;
  width: 100%;
  max-width: 680px;
  opacity: 1;
  transition: opacity 1.4s ease;
}

.js .variation-merged .hero-mockup {
  opacity: 0;
  animation: mockup-fade-in 1.4s ease 1.8s forwards;
}

@keyframes mockup-fade-in {
  to {
    opacity: 1;
  }
}

.variation-merged .mockup-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(20, 42, 64, 0.1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 12px 56px rgba(20, 42, 64, 0.1),
    0 2px 8px rgba(20, 42, 64, 0.04);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.variation-merged .mockup-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 16px 64px rgba(20, 42, 64, 0.12),
    0 4px 14px rgba(20, 42, 64, 0.06);
}

.variation-merged .mockup-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  background: rgba(20, 42, 64, 0.04);
  border-bottom: 1px solid rgba(20, 42, 64, 0.06);
}

.variation-merged .mockup-dots {
  display: inline-flex;
  gap: 5px;
  margin-right: 0.4rem;
}

.variation-merged .mockup-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(20, 42, 64, 0.12);
  display: block;
}

.variation-merged .mockup-title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
}

.variation-merged .mockup-header-tabs {
  display: flex;
  gap: 0;
  margin-left: 0.5rem;
  flex: 1;
  min-width: 0;
}

.variation-merged .mockup-header-tab {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  color: var(--color-text-secondary);
  opacity: 0.5;
  border-bottom: 1.5px solid transparent;
}

.variation-merged .mockup-header-tab-active {
  color: var(--color-navy);
  opacity: 1;
  border-bottom-color: var(--color-navy);
}

.variation-merged .mockup-id {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--color-text-secondary);
  opacity: 0.5;
}

/* Mockup layout: sidebar + main */

.variation-merged .mockup-layout {
  display: grid;
  grid-template-columns: 120px 1fr;
}

.variation-merged .mockup-sidebar {
  background: rgba(20, 42, 64, 0.025);
  border-right: 1px solid rgba(20, 42, 64, 0.06);
  padding: 0.6rem 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.variation-merged .mockup-sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  color: var(--color-text-secondary);
  opacity: 0.6;
  cursor: default;
}

.variation-merged .mockup-sidebar-active {
  opacity: 1;
  color: var(--color-navy);
  background: rgba(20, 42, 64, 0.04);
  border-left: 2px solid var(--color-navy);
  font-weight: 500;
}

.variation-merged .mockup-sidebar-alert {
  color: var(--color-saffron);
  opacity: 0.9;
}

.variation-merged .mockup-sidebar-icon {
  font-size: 0.5rem;
  width: 0.9rem;
  text-align: center;
  flex-shrink: 0;
}

/* Mockup main body */

.variation-merged .mockup-body {
  padding: 0.8rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.variation-merged .mockup-record-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.variation-merged .mockup-record-label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.variation-merged .mockup-status {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
}

.variation-merged .mockup-status-active {
  background: rgba(34, 139, 34, 0.08);
  color: var(--color-success);
}

.variation-merged .mockup-row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.45rem 0.65rem;
  border-radius: 5px;
  flex-wrap: wrap;
}

.variation-merged .mockup-row-claim {
  background: rgba(20, 42, 64, 0.025);
}

.variation-merged .mockup-row-conflict {
  background: rgba(231, 107, 0, 0.04);
  border-left: 2px solid var(--color-saffron);
}

.variation-merged .mockup-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.12rem 0.35rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.variation-merged .mockup-tag-claim {
  background: rgba(20, 42, 64, 0.08);
  color: var(--color-navy);
}

.variation-merged .mockup-tag-conflict {
  background: rgba(231, 107, 0, 0.12);
  color: var(--color-saffron);
}

.variation-merged .mockup-text {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.variation-merged .mockup-row-claim .mockup-text {
  color: var(--color-text-primary);
}

.variation-merged .mockup-timestamp {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  color: var(--color-text-secondary);
  opacity: 0.4;
  margin-left: auto;
}

/* Evidence list */

.variation-merged .mockup-evidence-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0.2rem 0;
  padding: 0 0.3rem;
}

.variation-merged .mockup-evidence-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.5rem;
  border-left: 1px solid rgba(20, 42, 64, 0.08);
  margin-left: 0.5rem;
}

.variation-merged .mockup-evidence-conflict {
  border-left-color: var(--color-saffron);
}

.variation-merged .mockup-doc-icon {
  font-size: 0.65rem;
  opacity: 0.5;
  flex-shrink: 0;
}

.variation-merged .mockup-evidence-name {
  font-size: 0.65rem;
  color: var(--color-text-secondary);
  flex: 1;
}

.variation-merged .mockup-evidence-status {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
  flex-shrink: 0;
}

.variation-merged .mockup-verified {
  background: rgba(34, 139, 34, 0.08);
  color: var(--color-success);
}

.variation-merged .mockup-flagged {
  background: rgba(231, 107, 0, 0.1);
  color: var(--color-saffron);
}

/* Confidence donut */

.variation-merged .mockup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.65rem 0.7rem;
  border-top: 1px solid rgba(20, 42, 64, 0.05);
  margin-top: 0.2rem;
}

.variation-merged .mockup-confidence {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.variation-merged .mockup-confidence-ring {
  position: relative;
  width: 36px;
  height: 36px;
}

.variation-merged .mockup-donut {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.variation-merged .mockup-confidence-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.variation-merged .mockup-confidence-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--color-text-secondary);
  opacity: 0.6;
}

.variation-merged .mockup-views-pills {
  display: flex;
  gap: 0.3rem;
}

.variation-merged .mockup-pill {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  color: var(--color-text-secondary);
  background: rgba(20, 42, 64, 0.04);
  border: 1px solid rgba(20, 42, 64, 0.06);
}

.variation-merged .mockup-pill-active {
  background: var(--color-navy);
  color: var(--color-ivory);
  border-color: var(--color-navy);
}

/* --- Pull Quote (editorial with navy rules) --- */

.variation-merged .pull-quote {
  max-width: var(--editorial-body-width);
  margin: 2.5rem auto;
  padding: 2rem 0;
  border-top: 2px solid var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
  text-align: center;
}

.variation-merged .pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--color-text-primary);
  margin: 0;
}

/* Pull quote on dark background */

.variation-merged .pull-quote-dark {
  border-top-color: rgba(248, 245, 239, 0.2);
  border-bottom-color: rgba(248, 245, 239, 0.2);
}

.variation-merged .pull-quote-dark p {
  color: rgba(248, 245, 239, 0.92);
}

/* Heritage secondary section-inner (before #the-problem to satisfy specificity order) */
.variation-merged .section-heritage-secondary .section-inner {
  text-align: center;
}

/* --- Problem Section Visual: Entropy/Loss Diagram --- */

.variation-merged #the-problem .section-inner {
  position: relative;
}

.variation-merged #the-problem .section-body {
  position: relative;
}

/* Decorative loss-flow diagram between pull-quote and body text */
.variation-merged #the-problem .pull-quote {
  position: relative;
}

.variation-merged #the-problem .pull-quote::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 560px;
  height: 72px;
  margin: 2.2rem auto 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 72' fill='none'%3E%3C!-- Discovery box --%3E%3Crect x='0' y='24' width='100' height='24' rx='3' fill='rgba(248,245,239,0.18)'/%3E%3Ctext x='50' y='40' text-anchor='middle' font-family='monospace' font-size='11' fill='rgba(248,245,239,0.8)' letter-spacing='1'%3EDISCOVERY%3C/text%3E%3C!-- Conviction box --%3E%3Crect x='460' y='24' width='100' height='24' rx='3' fill='rgba(248,245,239,0.18)'/%3E%3Ctext x='510' y='40' text-anchor='middle' font-family='monospace' font-size='11' fill='rgba(248,245,239,0.8)' letter-spacing='1'%3ECONVICTION%3C/text%3E%3C!-- Dashed connecting line --%3E%3Cline x1='110' y1='36' x2='450' y2='36' stroke='rgba(248,245,239,0.3)' stroke-width='1.5' stroke-dasharray='8 5'/%3E%3C!-- Loss markers --%3E%3Cg opacity='0.85'%3E%3Cline x1='185' y1='18' x2='185' y2='54' stroke='rgba(180,72,0,0.7)' stroke-width='1'/%3E%3Ctext x='185' y='66' text-anchor='middle' font-family='monospace' font-size='10' fill='rgba(180,72,0,0.8)'%3Esources%3C/text%3E%3Cline x1='265' y1='18' x2='265' y2='54' stroke='rgba(180,72,0,0.7)' stroke-width='1'/%3E%3Ctext x='265' y='66' text-anchor='middle' font-family='monospace' font-size='10' fill='rgba(180,72,0,0.8)'%3Ereasoning%3C/text%3E%3Cline x1='340' y1='18' x2='340' y2='54' stroke='rgba(180,72,0,0.7)' stroke-width='1'/%3E%3Ctext x='340' y='66' text-anchor='middle' font-family='monospace' font-size='10' fill='rgba(180,72,0,0.8)'%3Econfidence%3C/text%3E%3Cline x1='410' y1='18' x2='410' y2='54' stroke='rgba(180,72,0,0.7)' stroke-width='1'/%3E%3Ctext x='410' y='12' text-anchor='middle' font-family='monospace' font-size='10' fill='rgba(180,72,0,0.8)'%3Ejudgment%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* --- Dark Section --- */

.variation-merged .section-dark {
  background: var(--color-navy);
  color: var(--color-ivory);
}

.variation-merged .section-dark .eyebrow {
  color: var(--color-saffron);
}

.variation-merged .section-dark .section-headline {
  color: var(--color-ivory);
}

.variation-merged .section-dark .section-body p {
  color: rgba(248, 245, 239, 0.85);
}

.variation-merged .section-dark .section-body strong {
  color: rgba(248, 245, 239, 0.95);
  font-weight: 500;
}

.variation-merged .section-intro-dark-text {
  color: rgba(248, 245, 239, 0.8);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.7;
  margin: 0 0 2.5rem;
}

/* Comparison table on dark background */

.variation-merged .section-dark .comparison-table th,
.variation-merged .section-dark .comparison-table td {
  border-bottom-color: rgba(248, 245, 239, 0.1);
  color: rgba(248, 245, 239, 0.8);
}

.variation-merged .section-dark .comparison-table th {
  border-bottom-color: rgba(248, 245, 239, 0.2);
  color: rgba(248, 245, 239, 0.85);
}

.variation-merged .section-dark .row-label {
  color: rgba(248, 245, 239, 0.85);
}

.variation-merged .section-dark .comparison-table-3col td:nth-child(4) {
  color: var(--color-ivory);
  border-left-color: var(--color-saffron);
  background: rgba(231, 107, 0, 0.08);
}

.variation-merged .section-dark .comparison-table-3col thead th:last-child {
  color: var(--color-saffron);
  background: rgba(231, 107, 0, 0.1);
}

/* Contact form button — base styles (before dark-section overrides) */
.variation-merged .contact-form .cta-button {
  align-self: center;
  margin-top: 0.5rem;
  border: none;
  cursor: pointer;
}

.variation-merged .contact-form .cta-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Contact body base — before dark-section overrides for specificity order */
.variation-merged .contact-body {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-top: 2.5rem;
  text-align: center;
  letter-spacing: 0.01em;
}

/* Contact section on dark */

.variation-merged #contact.section-dark .section-headline {
  font-size: clamp(2rem, 4vw, 3rem);
}

.variation-merged #contact.section-dark .contact-body {
  color: rgba(248, 245, 239, 0.85);
}

/* Start page: lead + sub differentiation */
.variation-merged .contact-lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-align: center;
  margin: 0 auto 0.6rem;
  max-width: 540px;
}

.variation-merged .contact-sub {
  font-family: var(--font-sans);
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0 auto 2.5rem;
  max-width: 480px;
  opacity: 0.7;
}

.variation-merged #contact.section-dark .contact-lead {
  color: rgba(248, 245, 239, 0.92);
}

.variation-merged #contact.section-dark .contact-sub {
  color: rgba(248, 245, 239, 0.6);
}

.variation-merged #contact.section-dark .cta-button {
  background: var(--color-saffron);
  color: var(--color-ivory);
}

.variation-merged #contact.section-dark .cta-button:hover {
  background: var(--color-ivory);
  color: var(--color-navy);
}

.variation-merged #contact.section-dark .contact-emails {
  color: rgba(248, 245, 239, 0.8);
}

.variation-merged #contact.section-dark .contact-link {
  color: var(--color-saffron);
}

.variation-merged #contact.section-dark .contact-separator {
  color: rgba(248, 245, 239, 0.2);
}

.variation-merged #contact.section-dark .trust-badge {
  color: rgba(248, 245, 239, 0.8);
}

/* --- Contact Form --- */

.variation-merged .contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 480px;
  margin: 2rem auto;
  text-align: left;
}

.variation-merged .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.variation-merged .form-label {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(248, 245, 239, 0.75);
  text-transform: uppercase;
}

.variation-merged .form-input {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-ivory);
  background: rgba(248, 245, 239, 0.06);
  border: 1px solid rgba(248, 245, 239, 0.15);
  border-radius: 4px;
  padding: 0.65rem 0.85rem;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.variation-merged .form-input:focus-visible {
  border-color: var(--color-saffron);
  background: rgba(248, 245, 239, 0.08);
  outline: 2px solid var(--color-saffron);
  outline-offset: 2px;
}

.variation-merged .form-input::placeholder {
  color: rgba(248, 245, 239, 0.3);
}

.variation-merged .form-textarea {
  resize: vertical;
  min-height: 5rem;
}

.variation-merged .form-status {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2em;
  margin: 0;
}

.variation-merged .form-status-error {
  color: #e5604d;
}

.variation-merged .form-success {
  max-width: 480px;
  margin: 2rem auto;
  text-align: center;
}

.variation-merged .form-success-headline {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-ivory);
  margin-bottom: 0.75rem;
}

.variation-merged .form-success-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: rgba(248, 245, 239, 0.7);
  line-height: 1.6;
}

/* --- Warm tint sections --- */

.variation-merged .section-warm {
  background: rgba(245, 240, 232, 1);
}

/* --- In Practice Section --- */

.variation-merged .example-inset {
  border-left: 3px solid var(--color-saffron);
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 0 6px 6px 0;
  margin-top: 1.5rem;
  position: relative;
}

/* Processing status indicator in top-right of inset */
.variation-merged .example-inset::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  width: 88px;
  height: 88px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88' fill='none'%3E%3Ccircle cx='44' cy='44' r='36' stroke='rgba(20,42,64,0.08)' stroke-width='2.5'/%3E%3Cpath d='M44 8a36 36 0 0132.5 20' stroke='rgba(180,72,0,0.25)' stroke-width='2.5' stroke-linecap='round'/%3E%3Ctext x='44' y='42' text-anchor='middle' font-family='monospace' font-size='14' font-weight='600' fill='rgba(20,42,64,0.35)'%3E8.2%3C/text%3E%3Ctext x='44' y='54' text-anchor='middle' font-family='monospace' font-size='8' fill='rgba(20,42,64,0.2)' letter-spacing='0.5'%3E/ 10%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.9;
  pointer-events: none;
}

.variation-merged .example-intro {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 0 1.5rem;
  max-width: calc(100% - 104px);
}

.variation-merged .example-claim {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}

.variation-merged .claim-line {
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  transition: background 0.15s ease;
}

/* Each claim-line gets subtle background differentiation */
.variation-merged .claim-line:nth-child(1) {
  background: rgba(20, 42, 64, 0.025);
}

.variation-merged .claim-line:nth-child(2) {
  background: rgba(180, 72, 0, 0.03);
  border-left: 2px solid rgba(180, 72, 0, 0.15);
}

.variation-merged .claim-line:nth-child(3) {
  background: rgba(34, 139, 34, 0.025);
}

.variation-merged .claim-line:last-child {
  margin-bottom: 0;
}

.variation-merged .claim-line .proof-tag {
  flex-shrink: 0;
}

.variation-merged .claim-line strong {
  color: var(--color-text-primary);
}

.variation-merged .claim-line em {
  color: var(--color-text-secondary);
  font-style: italic;
}

.variation-merged .example-note {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 1.5rem 0 0;
  font-style: italic;
  padding-top: 1rem;
  border-top: 1px solid rgba(20, 42, 64, 0.06);
}

/* --- Markets Grid (additional verticals) --- */

.variation-merged .markets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
  margin-top: 2rem;
}

.variation-merged .market-item {
  padding: 1.2rem;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(20, 42, 64, 0.06);
  border-radius: 8px;
  position: relative;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.variation-merged .market-item:hover {
  border-color: rgba(20, 42, 64, 0.12);
  box-shadow: 0 2px 12px rgba(20, 42, 64, 0.04);
}

/* Market item category icons */
.variation-merged .market-item::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 0.7rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  opacity: 0.3;
}

/* Carbon Credits — leaf/eco icon */
.variation-merged .market-item:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23142a40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8c0 5.523-4.477 10-10 10a1 1 0 01-.707-.293'/%3E%3Cpath d='M3 12S5 8 10 8s7-5 7-5'/%3E%3Cpath d='M3 12c0-3 2-6 7-6'/%3E%3C/svg%3E");
}

/* PE & Secondaries — chart/trending icon */
.variation-merged .market-item:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23142a40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 4 11 11 7 7 2 12'/%3E%3Cpolyline points='18 10 18 4 12 4'/%3E%3C/svg%3E");
}

/* Luxury & Transport — key/authenticate icon */
.variation-merged .market-item:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23142a40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='7.5' r='5'/%3E%3Cline x1='11.04' y1='11.04' x2='18' y2='18'/%3E%3Cline x1='18' y1='14' x2='18' y2='18'/%3E%3Cline x1='14' y1='18' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Featured market cards — enhanced visual treatment */
.variation-merged .market-featured {
  position: relative;
  border-top: 3px solid rgba(20, 42, 64, 0.06);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.variation-merged .market-featured:nth-child(1) {
  border-top-color: var(--color-saffron);
}

.variation-merged .market-featured:nth-child(2) {
  border-top-color: var(--color-navy);
}

.variation-merged .market-featured:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(20, 42, 64, 0.06);
}

.variation-merged .market-featured::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 0.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  opacity: 0.25;
}

/* Fine Art — frame/picture icon */
.variation-merged .market-featured:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23142a40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Crect x='6' y='6' width='12' height='12' rx='0.5' opacity='0.4'/%3E%3Ccircle cx='9' cy='9' r='1.5' opacity='0.3'/%3E%3Cpath d='M6 18l4-5 3 3 2-2 3 4' opacity='0.4'/%3E%3C/svg%3E");
}

/* Real Estate — building icon */
.variation-merged .market-featured:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23142a40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='1'/%3E%3Cline x1='9' y1='22' x2='9' y2='16'/%3E%3Cline x1='15' y1='22' x2='15' y2='16'/%3E%3Crect x='9' y='16' width='6' height='6' opacity='0.3'/%3E%3Cline x1='8' y1='6' x2='10' y2='6' opacity='0.5'/%3E%3Cline x1='14' y1='6' x2='16' y2='6' opacity='0.5'/%3E%3Cline x1='8' y1='10' x2='10' y2='10' opacity='0.5'/%3E%3Cline x1='14' y1='10' x2='16' y2='10' opacity='0.5'/%3E%3C/svg%3E");
}

.variation-merged .market-item p {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
}

.variation-merged .market-item .market-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--color-text-primary);
  margin: 0 0 0.3rem;
}

/* --- Advisory --- */

.variation-merged .advisory {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(20, 42, 64, 0.1);
}

.variation-merged .advisory-heading {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 0.8rem;
}

.variation-merged .advisory p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

.variation-merged .advisory strong {
  color: var(--color-text-primary);
}

/* --- Kernel Grid (What Bernard Is) --- */

.variation-merged .kernel-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.variation-merged .kernel-item {
  padding: 1.2rem;
  padding-top: 1.5rem;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(20, 42, 64, 0.08);
  border-radius: 8px;
  border-top: 3px solid rgba(20, 42, 64, 0.06);
  position: relative;
}

/* --- Kernel Icons (CSS-only SVG icons for 5 feature cards) --- */

.variation-merged .kernel-item::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 0.8rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  opacity: 0.35;
}

.variation-merged .kernel-item:nth-child(3)::before {
  opacity: 0.35;
}

/* 01: Evidence linked to source — chain link icon */
.variation-merged .kernel-item:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23142a40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}

/* 02: Typed claims — clipboard/checklist icon */
.variation-merged .kernel-item:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23142a40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4'/%3E%3Cpath d='M9 14l2 2 4-4'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3C/svg%3E");
}

/* 03: Contradictions tracked — warning/alert triangle icon */
.variation-merged .kernel-item:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23142a40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* 04: Confidence made visible — gauge/meter icon */
.variation-merged .kernel-item:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23142a40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3Cpath d='M16.24 7.76l1.42-1.42'/%3E%3C/svg%3E");
}

/* 05: Outputs rendered as views — layers/stack icon */
.variation-merged .kernel-item:nth-child(5)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23142a40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");
}

.variation-merged .kernel-number {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-saffron);
  line-height: 1;
  margin-bottom: 0.6rem;
  opacity: 0.4;
}

.variation-merged .kernel-item:nth-child(3) .kernel-number {
  opacity: 0.4;
}

.variation-merged .kernel-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.variation-merged .kernel-item p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
}

.variation-merged .kernel-example {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.7;
  border-top: 1px solid rgba(20, 42, 64, 0.06);
  padding-top: 0.4rem;
}

.variation-merged .kernel-closing {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-style: italic;
  color: var(--color-text-primary);
  margin: 2.5rem 0 0;
  text-align: center;
  opacity: 0.8;
}

.variation-merged .governance-fold {
  font-family: var(--font-sans);
  font-size: clamp(0.82rem, 1vw, 0.9rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 2rem auto 0;
  max-width: var(--editorial-body-width);
  text-align: center;
}

.variation-merged .governance-closing-fold {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  font-style: italic;
  color: var(--color-text-primary);
  margin: 1.5rem auto 0;
  max-width: var(--editorial-body-width);
  text-align: center;
  opacity: 0.75;
}

/* --- Steps Flow (How It Works) --- */

.variation-merged .steps-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 2.5rem;
}

.variation-merged .step {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(20, 42, 64, 0.08);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.variation-merged .step-accent {
  background: rgba(231, 107, 0, 0.04);
  border-color: rgba(231, 107, 0, 0.15);
  border-left: 3px solid var(--color-saffron);
}

/* --- Step Icons (How It Works) --- */

.variation-merged .step::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 0.6rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
  opacity: 0.25;
}

.variation-merged .step-accent::before {
  opacity: 0.45;
}

/* Step 01: Preserve evidence — upload/archive icon (child 1 of .steps-flow) */
.variation-merged .steps-flow > .step:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%23142a40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v6a2 2 0 01-2 2H9a2 2 0 01-2-2v-6'/%3E%3Cpolyline points='17 8 14 5 11 8'/%3E%3Cline x1='14' y1='5' x2='14' y2='17'/%3E%3C/svg%3E");
}

/* Step 02: Apply the playbook — cog/rules icon (child 3, after arrow) */
.variation-merged .steps-flow > .step:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%23b44800' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14' cy='14' r='3'/%3E%3Cpath d='M24.3 17.4a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V24a2 2 0 01-4 0v-.09a1.65 1.65 0 00-1.08-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H4a2 2 0 010-4h.09a1.65 1.65 0 001.51-1.08 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06a1.65 1.65 0 001.82.33H10a1.65 1.65 0 001-1.51V4a2 2 0 014 0v.09a1.65 1.65 0 001.08 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V10a1.65 1.65 0 001.51 1H24a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1.08z'/%3E%3C/svg%3E");
}

/* Step 03: Render the record — document/output icon (child 5, after 2nd arrow) */
.variation-merged .steps-flow > .step:nth-child(5)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%23142a40' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3H7a2 2 0 00-2 2v18a2 2 0 002 2h14a2 2 0 002-2V9z'/%3E%3Cpolyline points='17 3 17 9 23 9'/%3E%3Cline x1='9' y1='13' x2='19' y2='13'/%3E%3Cline x1='9' y1='17' x2='19' y2='17'/%3E%3Cline x1='9' y1='21' x2='14' y2='21'/%3E%3C/svg%3E");
}

.variation-merged .step-number {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--color-saffron);
  line-height: 1;
  margin-bottom: 0.8rem;
  opacity: 0.5;
}

.variation-merged .step-accent .step-number {
  opacity: 0.8;
}

.variation-merged .step-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: 0.6rem;
}

.variation-merged .step-accent .step-label {
  color: var(--color-saffron);
}

.variation-merged .step p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

.variation-merged .step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4rem;
  font-size: 0;
}

.variation-merged .step-arrow::after {
  content: "";
  display: block;
  width: 40px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' fill='none'%3E%3Cpath d='M2 10h30' stroke='rgba(20,42,64,0.25)' stroke-width='2' stroke-dasharray='5 3'/%3E%3Cpath d='M28 5l6 5-6 5' stroke='rgba(20,42,64,0.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.variation-merged .steps-closing {
  margin: 2rem 0 0;
  text-align: center;
  max-width: none;
  font-style: italic;
  opacity: 0.8;
}

/* --- Side-by-Side Proof Domains --- */

.variation-merged .proof-domains {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

.variation-merged .proof-domain-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.variation-merged .proof-domain-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-saffron);
  margin-bottom: 0.6rem;
}

.variation-merged .proof-domain-desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0.8rem 0 0;
}

/* --- Proof Module --- */

.variation-merged .proof-module {
  display: block;
  margin-bottom: 2rem;
}

.variation-merged .proof-record {
  border-radius: 8px;
  min-width: 0;
}

/* --- Views heading --- */

.variation-merged .views-heading {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--color-text-primary);
  text-align: center;
  margin: 3rem 0 1.5rem;
}

/* --- Visual View Previews — Diagram-style thumbnails --- */

.variation-merged .proof-views {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

.variation-merged .proof-view-preview {
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(20, 42, 64, 0.1);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.15s ease,
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.2s ease;
}

.variation-merged .view-schematic {
  margin-top: 0.3rem;
}

.variation-merged .proof-view-preview .view-schematic {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.variation-merged .view-schematic > :first-child {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.variation-merged .proof-view-preview:hover {
  border-color: var(--color-saffron);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(20, 42, 64, 0.06);
}

.variation-merged .proof-view-preview .proof-view-label {
  margin-bottom: 0.5rem;
}

/* --- Memo View: Executive summary document --- */

.variation-merged .memo-doc {
  padding: 0.6rem 0.7rem;
  background: rgba(20, 42, 64, 0.018);
  border: 1px solid rgba(20, 42, 64, 0.06);
  border-radius: 4px;
  min-height: 200px;
}

.variation-merged .memo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.variation-merged .memo-id {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  opacity: 0.6;
}

.variation-merged .memo-score {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 600;
  color: var(--color-success);
  background: rgba(34, 139, 34, 0.08);
  padding: 0.08rem 0.3rem;
  border-radius: 2px;
}

.variation-merged .memo-rule {
  height: 1px;
  background: rgba(20, 42, 64, 0.08);
  margin-bottom: 0.45rem;
}

.variation-merged .memo-section {
  margin-bottom: 0.45rem;
}

.variation-merged .memo-section-label {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  opacity: 0.45;
  margin-bottom: 0.2rem;
}

.variation-merged .memo-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(20, 42, 64, 0.07);
  margin-bottom: 0.15rem;
}

.variation-merged .memo-bar-95 {
  width: 95%;
}

.variation-merged .memo-bar-80 {
  width: 80%;
}

.variation-merged .memo-bar-70 {
  width: 70%;
}

.variation-merged .memo-bar-60 {
  width: 60%;
}

.variation-merged .memo-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.35rem 0.4rem;
  background: rgba(231, 107, 0, 0.04);
  border-left: 2px solid var(--color-saffron);
  border-radius: 0 3px 3px 0;
  margin-bottom: 0.45rem;
}

.variation-merged .memo-callout-icon {
  font-size: 0.5rem;
  color: var(--color-saffron);
  line-height: 1;
  flex-shrink: 0;
}

.variation-merged .memo-callout-content {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.variation-merged .memo-callout-label {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-saffron);
}

.variation-merged .memo-callout-detail {
  font-family: var(--font-sans);
  font-size: 0.44rem;
  color: var(--color-text-secondary);
  line-height: 1.3;
}

.variation-merged .memo-action {
  font-family: var(--font-mono);
  font-size: 0.44rem;
  color: var(--color-navy);
  opacity: 0.6;
}

/* --- Packet View: Evidence graph with labeled nodes --- */

.variation-merged .packet-graph {
  padding: 0.4rem 0.2rem;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.variation-merged .packet-node {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid rgba(20, 42, 64, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.5);
}

.variation-merged .packet-claim {
  background: rgba(20, 42, 64, 0.05);
  border-color: var(--color-navy);
  border-width: 1.5px;
  width: 78%;
}

.variation-merged .packet-node-tag {
  font-family: var(--font-mono);
  font-size: 0.44rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy);
  opacity: 0.5;
  flex-shrink: 0;
}

.variation-merged .packet-tag-conflict {
  color: var(--color-saffron);
  opacity: 1;
}

.variation-merged .packet-node-label {
  font-family: var(--font-sans);
  font-size: 0.46rem;
  color: var(--color-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.variation-merged .packet-branches {
  display: flex;
  justify-content: space-between;
  width: 70%;
  height: 14px;
  position: relative;
}

.variation-merged .packet-branch {
  width: 1px;
  height: 100%;
  background: rgba(20, 42, 64, 0.12);
}

.variation-merged .packet-evidence-row {
  display: flex;
  gap: 0.2rem;
  width: 95%;
}

.variation-merged .packet-src {
  flex: 1;
  padding: 0.3rem 0.3rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.variation-merged .packet-src-content {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
}

.variation-merged .packet-src-detail {
  font-family: var(--font-sans);
  font-size: 0.38rem;
  color: var(--color-text-secondary);
  opacity: 0.5;
  line-height: 1.2;
}

.variation-merged .packet-src-meta {
  font-family: var(--font-mono);
  font-size: 0.32rem;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  opacity: 0.3;
  margin-top: 0.04rem;
}

.variation-merged .packet-verified {
  border-left: 2px solid rgba(34, 139, 34, 0.35);
}

.variation-merged .packet-flagged {
  border-left: 2px solid var(--color-saffron);
  background: rgba(231, 107, 0, 0.03);
}

.variation-merged .packet-status-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}

.variation-merged .packet-dot-ok {
  background: var(--color-success);
  opacity: 0.5;
}

.variation-merged .packet-dot-warn {
  background: var(--color-saffron);
}

.variation-merged .packet-src-label {
  font-family: var(--font-mono);
  font-size: 0.44rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.variation-merged .packet-conflict-line {
  width: 1px;
  height: 12px;
  background: rgba(231, 107, 0, 0.3);
  margin: 0 auto;
}

.variation-merged .packet-conflict-node {
  border-color: rgba(231, 107, 0, 0.25);
  background: rgba(231, 107, 0, 0.03);
  width: 55%;
}

.variation-merged .packet-record-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 78%;
  margin-bottom: 0.3rem;
}

.variation-merged .packet-record-id {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  color: var(--color-text-secondary);
  opacity: 0.5;
  letter-spacing: 0.04em;
}

.variation-merged .packet-record-score {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  font-weight: 600;
  color: var(--color-success);
  background: rgba(34, 139, 34, 0.08);
  padding: 0.04rem 0.2rem;
  border-radius: 2px;
}

.variation-merged .packet-resolution-line {
  width: 1px;
  height: 10px;
  background: rgba(20, 42, 64, 0.1);
  margin: 0 auto;
}

.variation-merged .packet-resolution-node {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.35rem;
  border: 1px dashed rgba(20, 42, 64, 0.15);
  border-radius: 4px;
  width: 55%;
}

.variation-merged .packet-resolution-icon {
  font-size: 0.3rem;
  color: var(--color-saffron);
  opacity: 0.6;
}

.variation-merged .packet-resolution-label {
  font-family: var(--font-mono);
  font-size: 0.38rem;
  color: var(--color-text-secondary);
  opacity: 0.5;
  letter-spacing: 0.02em;
}

.variation-merged .packet-confidence-bar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 78%;
  margin-top: auto;
  padding-top: 0.4rem;
}

.variation-merged .packet-confidence-label {
  font-family: var(--font-mono);
  font-size: 0.36rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0.4;
  flex-shrink: 0;
}

.variation-merged .packet-confidence-track {
  flex: 1;
  height: 3px;
  background: rgba(20, 42, 64, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.variation-merged .packet-confidence-fill {
  width: 82%;
  height: 100%;
  background: var(--color-saffron);
  opacity: 0.5;
  border-radius: 2px;
}

.variation-merged .packet-confidence-value {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  opacity: 0.6;
}

/* --- Audit View: Immutable event log --- */

.variation-merged .audit-terminal {
  padding: 0.5rem 0.6rem;
  background: var(--color-navy);
  border: 1px solid rgba(248, 245, 239, 0.08);
  border-radius: 4px;
  min-height: 200px;
}

.variation-merged .audit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.variation-merged .audit-header-label {
  font-family: var(--font-mono);
  font-size: 0.44rem;
  color: rgba(248, 245, 239, 0.7);
  letter-spacing: 0.04em;
}

.variation-merged .audit-header-count {
  font-family: var(--font-mono);
  font-size: 0.4rem;
  color: rgba(248, 245, 239, 0.6);
}

.variation-merged .audit-rule {
  height: 1px;
  background: rgba(248, 245, 239, 0.06);
  margin-bottom: 0.4rem;
}

.variation-merged .audit-log {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.variation-merged .audit-entry {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-mono);
  line-height: 1;
}

.variation-merged .audit-ts {
  font-size: 0.44rem;
  color: rgba(248, 245, 239, 0.6);
  flex-shrink: 0;
  width: 1.4rem;
}

.variation-merged .audit-verb {
  font-size: 0.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(248, 245, 239, 0.75);
  flex-shrink: 0;
  width: 2.4rem;
}

.variation-merged .audit-verb-ok {
  color: rgba(34, 139, 34, 0.85);
}

.variation-merged .audit-verb-warn {
  color: var(--color-saffron);
}

.variation-merged .audit-ref {
  font-size: 0.44rem;
  color: rgba(248, 245, 239, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.variation-merged .audit-entry-warn {
  background: rgba(231, 107, 0, 0.06);
  margin: 0 -0.3rem;
  padding: 0.12rem 0.3rem;
  border-radius: 2px;
}

.variation-merged .audit-entry-warn .audit-ref {
  color: rgba(231, 107, 0, 0.85);
}

/* --- Agent View (fourth proof view — structured API payload) --- */

.variation-merged .agent-payload-card {
  padding: 0.5rem 0.55rem;
  background: #1a1f2e;
  border: 1px solid rgba(130, 160, 255, 0.1);
  border-radius: 4px;
  min-height: 200px;
}

.variation-merged .agent-payload-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.variation-merged .agent-payload-method {
  font-family: var(--font-mono);
  font-size: 0.38rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6ee7a0;
  background: rgba(110, 231, 160, 0.08);
  padding: 0.06rem 0.25rem;
  border-radius: 2px;
}

.variation-merged .agent-payload-endpoint {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  color: rgba(200, 210, 240, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.variation-merged .agent-payload-rule {
  height: 1px;
  background: rgba(130, 160, 255, 0.08);
  margin-bottom: 0.35rem;
}

.variation-merged .agent-json {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  flex: 1;
}

.variation-merged .agent-brace {
  font-family: var(--font-mono);
  font-size: 0.46rem;
  color: rgba(200, 210, 240, 0.3);
  line-height: 1;
}

.variation-merged .agent-json-row {
  padding-left: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.42rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.variation-merged .agent-json-key {
  color: #93b5ff;
}

.variation-merged .agent-json-punct {
  color: rgba(200, 210, 240, 0.25);
}

.variation-merged .agent-json-str {
  color: #a8d8a0;
}

.variation-merged .agent-json-num {
  color: #e0a870;
}

.variation-merged .agent-json-gate {
  color: #1a1f2e;
  background: var(--color-saffron);
  padding: 0.02rem 0.2rem;
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.38rem;
  letter-spacing: 0.04em;
}

.variation-merged .agent-json-row-gate {
  background: rgba(180, 72, 0, 0.08);
  margin: 0.06rem -0.35rem;
  padding: 0.1rem 0.35rem 0.1rem 0.95rem;
  border-radius: 2px;
}

.variation-merged .agent-status-bar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(130, 160, 255, 0.08);
}

.variation-merged .agent-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6ee7a0;
  flex-shrink: 0;
}

.variation-merged .agent-status-text {
  font-family: var(--font-mono);
  font-size: 0.38rem;
  font-weight: 600;
  color: #6ee7a0;
  letter-spacing: 0.04em;
}

.variation-merged .agent-status-latency {
  font-family: var(--font-mono);
  font-size: 0.36rem;
  color: rgba(200, 210, 240, 0.25);
  margin-left: auto;
}

/* --- Mid-page CTA --- */

.variation-merged .mid-cta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(20, 42, 64, 0.08);
}

.variation-merged .mid-cta-note {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  font-weight: 300;
}

/* --- Governance Grid --- */

.variation-merged .governance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.variation-merged .governance-item {
  padding: 1.5rem;
  background: rgba(248, 245, 239, 0.04);
  border: 1px solid rgba(248, 245, 239, 0.08);
  border-radius: 8px;
}

.variation-merged .governance-icon {
  display: block;
  font-size: 1.1rem;
  color: var(--color-saffron);
  margin-bottom: 0.8rem;
  opacity: 0.6;
}

.variation-merged .governance-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ivory);
  margin: 0 0 0.6rem;
  font-weight: 400;
}

.variation-merged .governance-item p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(248, 245, 239, 0.8);
  margin: 0;
}

.variation-merged .governance-closing {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(248, 245, 239, 0.75);
  font-style: italic;
  margin: 0;
}

/* --- Heritage Stats --- */

.variation-merged .heritage-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2.5rem 0;
}

.variation-merged .heritage-stat {
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(20, 42, 64, 0.06);
  border-radius: 8px;
}

.variation-merged .heritage-stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--color-text-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.variation-merged .heritage-stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* --- Heritage Secondary (demoted from main flow) --- */

.variation-merged .section-heritage-secondary {
  background: rgba(245, 240, 232, 0.4);
  border-top: 1px solid rgba(20, 42, 64, 0.06);
}

.variation-merged .section-heritage-secondary .section-headline {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

.variation-merged .heritage-flag {
  display: flex;
  width: 48px;
  height: 32px;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 auto 1.2rem;
  box-shadow: 0 1px 3px rgba(20, 42, 64, 0.1);
  flex-direction: column;
}

.variation-merged .heritage-flag-blue {
  flex: 1;
  background: #005bbb;
}

.variation-merged .heritage-flag-yellow {
  flex: 1;
  background: #ffd500;
}

/* Nav flag (Ukraine link) */
.variation-merged .nav-link-flag {
  display: inline-flex;
  align-items: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.variation-merged .nav-flag {
  display: flex;
  flex-direction: column;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(20, 42, 64, 0.12);
}

.variation-merged .nav-flag-blue {
  flex: 1;
  background: #005bbb;
}

.variation-merged .nav-flag-yellow {
  flex: 1;
  background: #ffd500;
}

/* --- Agent phases & cards (How it works page) --- */

.variation-merged .agents-phases {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.variation-merged .agent-phase-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.variation-merged .agent-phase-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-saffron);
  color: var(--color-ivory);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.variation-merged .agent-phase-name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 400;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.variation-merged .agent-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.variation-merged .agent-card {
  background: rgba(20, 42, 64, 0.03);
  border: 1px solid rgba(20, 42, 64, 0.08);
  border-radius: 6px;
  padding: 1.2rem 1.4rem;
}

.variation-merged .agent-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-saffron);
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}

.variation-merged .agent-role {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

@media (max-width: 720px) {
  .variation-merged .agent-cards {
    grid-template-columns: 1fr;
  }
}

/* --- Scenario Components (How it works page — scenario-driven) --- */

/* Scenario header: domain label + confidence ring */
.variation-merged .scenario-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.variation-merged .scenario-domain {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-saffron);
  background: rgba(180, 72, 0, 0.06);
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
}

.variation-merged .scenario-domain-dark {
  background: rgba(180, 72, 0, 0.15);
  color: var(--color-saffron);
}

.variation-merged .scenario-conf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.variation-merged .conf-ring {
  width: 32px;
  height: 32px;
  transform: rotate(-90deg);
}

.variation-merged .conf-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}

.variation-merged .conf-label-dark {
  color: var(--color-ivory);
}

/* Scenario setup */
.variation-merged .scenario-setup {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.variation-merged .scenario-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-bottom: 1.2rem;
}

.variation-merged .scenario-headline-dark {
  color: var(--color-ivory);
}

.variation-merged .scenario-context-text {
  font-family: var(--font-sans);
  font-size: clamp(0.88rem, 1.1vw, 0.95rem);
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.variation-merged .scenario-context-dark {
  color: rgba(248, 245, 239, 0.8);
}

/* Bernard answer — glassmorphic card */
.variation-merged .bernard-answer {
  display: flex;
  margin: 2.5rem auto;
  background: rgba(248, 245, 239, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(20, 42, 64, 0.08);
  border-radius: 4px 14px 14px 4px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 4px 24px rgba(20, 42, 64, 0.06);
  max-width: 780px;
}

.variation-merged .bernard-answer-dark {
  background: rgba(248, 245, 239, 0.08);
  border-color: rgba(248, 245, 239, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 24px rgba(0, 0, 0, 0.15);
}

.variation-merged .bernard-answer-stripe {
  width: 4px;
  flex-shrink: 0;
  background: #228b22;
}

.variation-merged .bernard-answer-body {
  padding: 1.2rem 1.5rem;
}

.variation-merged .bernard-answer-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #228b22;
  display: block;
  margin-bottom: 0.5rem;
}

.variation-merged .bernard-answer-headline {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-primary);
  margin-bottom: 0.8rem;
}

.variation-merged .bernard-answer-dark .bernard-answer-headline {
  color: var(--color-ivory);
}

.variation-merged .bernard-answer-detail {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: 0.8rem;
}

.variation-merged .bernard-answer-dark .bernard-answer-detail {
  color: rgba(248, 245, 239, 0.8);
}

.variation-merged .bernard-answer-action {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-saffron);
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(20, 42, 64, 0.06);
}

.variation-merged .bernard-answer-dark .bernard-answer-action {
  border-top-color: rgba(248, 245, 239, 0.08);
}

/* Scenario agents heading */
.variation-merged .scenario-agents-heading {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.variation-merged .scenario-agents-heading-dark {
  color: rgba(248, 245, 239, 0.7);
}

/* Scenario agent grid */
.variation-merged .scenario-agent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.variation-merged .scenario-agent {
  padding: 1rem 1.2rem;
  background: rgba(20, 42, 64, 0.025);
  border: 1px solid rgba(20, 42, 64, 0.06);
  border-radius: 8px;
  transition: border-color 0.15s ease;
}

.variation-merged .scenario-agent:hover {
  border-color: rgba(20, 42, 64, 0.12);
}

.variation-merged .scenario-agent-dark {
  background: rgba(248, 245, 239, 0.04);
  border-color: rgba(248, 245, 239, 0.06);
}

.variation-merged .scenario-agent-dark:hover {
  border-color: rgba(248, 245, 239, 0.12);
}

.variation-merged .scenario-agent-flagged {
  border-left: 3px solid var(--color-saffron);
  background: rgba(180, 72, 0, 0.03);
}

.variation-merged .scenario-agent-dark.scenario-agent-flagged {
  background: rgba(180, 72, 0, 0.08);
  border-color: rgba(248, 245, 239, 0.06);
  border-left-color: var(--color-saffron);
}

.variation-merged .scenario-agent-name {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-saffron);
  letter-spacing: 0.02em;
  margin-right: 0.5rem;
}

.variation-merged .scenario-agent-phase {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0.6;
}

.variation-merged .scenario-agent-dark .scenario-agent-phase {
  color: rgba(248, 245, 239, 0.6);
}

.variation-merged .scenario-agent p {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0.4rem 0 0;
}

.variation-merged .scenario-agent-dark p {
  color: rgba(248, 245, 239, 0.75);
}

.variation-merged .scenario-agent p strong {
  color: var(--color-text-primary);
  font-weight: 500;
}

.variation-merged .scenario-agent-dark p strong {
  color: rgba(248, 245, 239, 0.9);
}

/* Agent workstream — center timeline, agents alternate left/right */
.variation-merged .agent-workstream {
  position: relative;
  margin-bottom: 2.5rem;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

/* The center vertical timeline line */
.variation-merged .agent-workstream::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(20, 42, 64, 0.12);
}

/* Each node on the timeline */
.variation-merged .workstream-node {
  position: relative;
  display: flex;
  padding: 0.35rem 0;
  width: 50%;
}

/* Odd nodes — right side (agent content to the right of center line) */
.variation-merged .workstream-node:nth-child(odd) {
  margin-left: 50%;
  padding-left: 28px;
}

/* Even nodes — left side (agent content to the left of center line) */
.variation-merged .workstream-node:nth-child(even) {
  margin-left: 0;
  padding-right: 28px;
  justify-content: flex-end;
}

/* The dot on the center timeline */
.variation-merged .workstream-node::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(20, 42, 64, 0.15);
  border: 2px solid var(--color-bg);
  z-index: 1;
}

.variation-merged .workstream-node:nth-child(odd)::before {
  left: -6px;
}

.variation-merged .workstream-node:nth-child(even)::before {
  right: -6px;
}

/* Connector line from dot to agent card */
.variation-merged .workstream-node::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  width: 18px;
  background: rgba(20, 42, 64, 0.12);
}

.variation-merged .workstream-node:nth-child(odd)::after {
  left: 4px;
}

.variation-merged .workstream-node:nth-child(even)::after {
  right: 4px;
}

/* Flagged node — saffron dot */
.variation-merged .workstream-node-flagged::before {
  background: var(--color-saffron);
  box-shadow: 0 0 0 3px rgba(180, 72, 0, 0.12);
}

/* The agent row: avatar + label */
.variation-merged .workstream-agent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.variation-merged .workstream-agent:hover {
  background: rgba(20, 42, 64, 0.03);
}

/* Even (left-side) agents: avatar on right, text on left */
.variation-merged .workstream-node:nth-child(even) .workstream-agent {
  flex-direction: row-reverse;
  text-align: right;
}

/* Square avatar — enlarges on hover */
.variation-merged .workstream-avatar {
  width: 108px;
  height: 108px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(20, 42, 64, 0.1);
  cursor: zoom-in;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease;
  z-index: 1;
  position: relative;
}

.variation-merged .workstream-avatar:hover {
  transform: scale(2.6);
  box-shadow: 0 12px 40px rgba(20, 42, 64, 0.25);
  z-index: 10;
  border-radius: 4px;
  cursor: default;
}

/* Text label */
.variation-merged .workstream-label {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.variation-merged .workstream-label p {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0.25rem 0 0;
}

.variation-merged .workstream-label p strong {
  color: var(--color-text-primary);
  font-weight: 500;
}

/* Flagged agent — saffron accent */
.variation-merged .workstream-node-flagged .workstream-agent {
  background: rgba(180, 72, 0, 0.03);
}

.variation-merged .workstream-node-flagged:nth-child(odd) .workstream-agent {
  border-left: 3px solid var(--color-saffron);
}

.variation-merged .workstream-node-flagged:nth-child(even) .workstream-agent {
  border-right: 3px solid var(--color-saffron);
}

/* Dark variant (for scenario 2) */
.variation-merged .section-dark .agent-workstream::before {
  background: rgba(248, 245, 239, 0.1);
}

.variation-merged .section-dark .workstream-node::before {
  background: rgba(248, 245, 239, 0.15);
  border-color: var(--color-bg-dark, #142a40);
}

.variation-merged .section-dark .workstream-node::after {
  background: rgba(248, 245, 239, 0.1);
}

.variation-merged .section-dark .workstream-node-flagged::before {
  background: var(--color-saffron);
}

.variation-merged .section-dark .workstream-agent:hover {
  background: rgba(248, 245, 239, 0.04);
}

.variation-merged .section-dark .workstream-label p {
  color: rgba(248, 245, 239, 0.75);
}

.variation-merged .section-dark .workstream-label p strong {
  color: rgba(248, 245, 239, 0.9);
}

.variation-merged .section-dark .workstream-node-flagged .workstream-agent {
  background: rgba(180, 72, 0, 0.08);
}

/* Comparison table mobile — ensure scroll hint + tighten rows */
@media (max-width: 720px) {
  .variation-merged .comparison-table-wrapper {
    overflow-x: auto;
    margin-left: -1.2rem;
    margin-right: -1.2rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .variation-merged .comparison-table-wrapper::after {
    content: "→ scroll";
    display: block;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(248, 245, 239, 0.6);
    margin-top: 0.4rem;
  }

  .variation-merged .comparison-table,
  .variation-merged .comparison-table-3col {
    width: auto;
    min-width: 680px;
  }
}

/* Agent hover zoom — disable on touch devices */
@media (hover: none) {
  .variation-merged .workstream-avatar:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(20, 42, 64, 0.1);
    z-index: 1;
  }

  .variation-merged .team-agent-avatar:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }

  .variation-merged .workstream-avatar,
  .variation-merged .team-agent-avatar {
    cursor: default;
  }
}

/* Workstream mobile — collapse to single column */
@media (max-width: 720px) {
  .variation-merged .agent-workstream {
    padding-left: 28px;
  }

  .variation-merged .agent-workstream::before {
    left: 12px;
  }

  .variation-merged .workstream-node.workstream-node {
    width: 100%;
    margin-left: 0;
    padding-left: 20px;
    padding-right: 0;
    justify-content: flex-start;
  }

  .variation-merged .workstream-node.workstream-node::before {
    left: 6px;
    right: auto;
  }

  .variation-merged .workstream-node.workstream-node::after {
    left: 16px;
    right: auto;
    width: 10px;
  }

  /* All agents: avatar left, text right (no alternating) */
  .variation-merged .workstream-node:nth-child(even) .workstream-agent {
    flex-direction: row;
    text-align: left;
  }

  .variation-merged .workstream-node-flagged:nth-child(even) .workstream-agent {
    border-right: none;
    border-left: 3px solid var(--color-saffron);
  }

  .variation-merged .workstream-avatar {
    width: 80px;
    height: 80px;
  }

  /* On mobile, scale down avatar zoom and center transform-origin
     to prevent enlarged images from overflowing off-screen */
  .variation-merged .workstream-avatar:hover {
    transform: scale(1.8);
    transform-origin: center center;
  }

  .variation-merged .team-agent-avatar:hover {
    transform: scale(1.8);
    transform-origin: center center;
  }
}

/* ECS claim cards — inline verification visualization */
.variation-merged .ecs-card {
  background: rgba(20, 42, 64, 0.025);
  border: 1px solid rgba(20, 42, 64, 0.08);
  border-radius: 8px;
  overflow: hidden;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.variation-merged .ecs-card-dark {
  background: rgba(248, 245, 239, 0.04);
  border-color: rgba(248, 245, 239, 0.08);
}

.variation-merged .ecs-card-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  flex-wrap: wrap;
}

.variation-merged .ecs-card-claim {
  background: rgba(20, 42, 64, 0.03);
}

.variation-merged .ecs-card-dark .ecs-card-claim {
  background: rgba(248, 245, 239, 0.03);
}

.variation-merged .ecs-card-contradiction {
  background: rgba(180, 72, 0, 0.04);
  border-top: 1px solid rgba(180, 72, 0, 0.1);
}

.variation-merged .ecs-card-dark .ecs-card-contradiction {
  background: rgba(180, 72, 0, 0.08);
  border-top-color: rgba(180, 72, 0, 0.15);
}

.variation-merged .ecs-card-resolved {
  background: rgba(34, 139, 34, 0.04);
  border-top: 1px solid rgba(34, 139, 34, 0.1);
}

.variation-merged .ecs-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.variation-merged .ecs-chip-claim {
  background: rgba(20, 42, 64, 0.08);
  color: var(--color-navy);
}

.variation-merged .ecs-card-dark .ecs-chip-claim {
  background: rgba(248, 245, 239, 0.1);
  color: rgba(248, 245, 239, 0.7);
}

.variation-merged .ecs-chip-flag {
  background: rgba(180, 72, 0, 0.12);
  color: var(--color-saffron);
}

.variation-merged .ecs-chip-resolved {
  background: rgba(34, 139, 34, 0.1);
  color: #228b22;
}

.variation-merged .ecs-card-text {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.variation-merged .ecs-card-dark .ecs-card-text {
  color: rgba(248, 245, 239, 0.8);
}

.variation-merged .ecs-card-text em {
  font-style: italic;
  color: var(--color-text-secondary);
}

.variation-merged .ecs-card-dark .ecs-card-text em {
  color: rgba(248, 245, 239, 0.7);
}

.variation-merged .ecs-card-evidence {
  padding: 0.3rem 1rem 0.3rem 1.6rem;
}

.variation-merged .ecs-ev {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-left: 1px solid rgba(20, 42, 64, 0.1);
}

.variation-merged .ecs-card-dark .ecs-ev {
  border-left-color: rgba(248, 245, 239, 0.08);
}

.variation-merged .ecs-ev-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.variation-merged .ecs-ev-verified .ecs-ev-dot {
  background: #228b22;
}

.variation-merged .ecs-ev-partial .ecs-ev-dot {
  background: var(--color-saffron);
  opacity: 0.7;
}

.variation-merged .ecs-ev-unverified .ecs-ev-dot {
  background: var(--color-text-secondary);
  opacity: 0.3;
}

.variation-merged .ecs-ev-text {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  flex: 1;
}

.variation-merged .ecs-card-dark .ecs-ev-text {
  color: rgba(248, 245, 239, 0.7);
}

.variation-merged .ecs-ev-status {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  flex-shrink: 0;
}

.variation-merged .ecs-ev-verified .ecs-ev-status {
  background: rgba(34, 139, 34, 0.08);
  color: #228b22;
}

.variation-merged .ecs-ev-partial .ecs-ev-status {
  background: rgba(180, 72, 0, 0.08);
  color: var(--color-saffron);
}

.variation-merged .ecs-ev-unverified .ecs-ev-status {
  background: rgba(20, 42, 64, 0.06);
  color: var(--color-text-secondary);
}

/* Team phases (condensed reference grid) */
.variation-merged .team-phases {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.variation-merged .team-phase-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.variation-merged .team-phase-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--color-saffron);
  color: var(--color-ivory);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  flex-shrink: 0;
}

.variation-merged .team-phase-name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  font-weight: 400;
  color: var(--color-ivory);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.variation-merged .team-phase-agents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.6rem;
}

/* Team agent card with thumbnail */
.variation-merged .team-agent {
  padding: 0.85rem 1rem;
  background: rgba(248, 245, 239, 0.04);
  border: 1px solid rgba(248, 245, 239, 0.06);
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.variation-merged .team-agent-avatar {
  width: 108px;
  height: 108px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: zoom-in;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease;
  z-index: 1;
  position: relative;
}

.variation-merged .team-agent-avatar:hover {
  transform: scale(2.6);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  z-index: 10;
  border-radius: 4px;
  cursor: default;
}

.variation-merged .team-agent-text {
  flex: 1;
  min-width: 0;
}

.variation-merged .team-agent-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-saffron);
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
}

.variation-merged .team-agent-desc {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(248, 245, 239, 0.75);
}

/* Conductor — special treatment */
.variation-merged .team-conductor {
  margin-top: 2rem;
  padding: 1.2rem 1rem;
  border-top: 1px solid rgba(248, 245, 239, 0.08);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.variation-merged .team-conductor .team-agent-avatar {
  width: 108px;
  height: 108px;
}

.variation-merged .team-conductor .team-agent-name {
  font-size: 1.1rem;
}

.variation-merged .team-conductor .team-agent-desc {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(248, 245, 239, 0.75);
}

/* Scenario responsive overrides */
@media (max-width: 720px) {
  .variation-merged .scenario-agent-grid {
    grid-template-columns: 1fr;
  }

  .variation-merged .team-phase-agents {
    grid-template-columns: 1fr;
  }

  .variation-merged .bernard-answer {
    max-width: 100%;
  }

  .variation-merged .ecs-card {
    max-width: 100%;
  }

  .variation-merged .scenario-headline {
    font-size: clamp(1.2rem, 4vw, 1.7rem);
  }
}

/* --- Subpage hero (no wordmark, tagline-led) --- */

.variation-merged .stage-subpage {
  min-height: auto;
  padding-top: calc(6rem + env(safe-area-inset-top, 0px));
  padding-bottom: 3vh;
}

.variation-merged .stage-subpage .tagline {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-top: 0;
}

.variation-merged .stage-subpage .hero-headline {
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  color: var(--color-text-secondary);
  margin-top: 1.2rem;
  max-width: 580px;
}

.variation-merged .stage-subpage .subline {
  margin-top: 1rem;
  max-width: 620px;
}

.variation-merged .stage-subpage .hero-audience {
  margin-top: 0.6rem;
  font-size: clamp(0.82rem, 1vw, 0.92rem);
}

.js .variation-merged .stage-subpage .hero-mockup {
  animation: mockup-fade-in 1s ease 0.2s forwards;
}

@media (max-width: 720px) {
  .variation-merged .stage-subpage .tagline {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
  }
}

.variation-merged .heritage-narrative {
  max-width: var(--editorial-body-width);
  margin: 0 auto;
  text-align: left;
}

.variation-merged .heritage-narrative p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0 0 1.2rem;
}

.variation-merged .heritage-narrative p:last-child {
  margin-bottom: 0;
  font-style: italic;
  color: var(--color-text-primary);
}

/* --- Views Intro (proof section) --- */

.variation-merged .views-intro {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  text-align: center;
  max-width: var(--editorial-body-width);
  margin: 0 auto 1.5rem;
}

/* --- Footer (enhanced) --- */

.variation-merged .footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.variation-merged .footer-row-legal {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  opacity: 0.7;
}

.variation-merged .footer-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.variation-merged .footer-link:hover {
  color: var(--color-saffron);
}

.variation-merged .footer-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0.8;
}

/* ===== Responsive ===== */

@media (max-width: 960px) {
  .variation-merged .proof-views {
    grid-template-columns: repeat(2, 1fr);
  }

  .variation-merged .kernel-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .variation-merged .steps-flow {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .variation-merged .step-arrow {
    transform: rotate(90deg);
    padding: 0.5rem 0;
  }
}

@media (max-width: 720px) {
  .variation-merged .stage {
    padding: 12vh 6vw 6vh;
  }

  .variation-merged .hero-mockup {
    max-width: 100%;
  }

  .variation-merged .mockup-layout {
    grid-template-columns: 1fr;
  }

  .variation-merged .mockup-sidebar {
    display: none;
  }

  .variation-merged .mockup-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }

  .variation-merged .proof-views {
    grid-template-columns: 1fr;
  }

  .variation-merged .proof-domains {
    grid-template-columns: 1fr;
  }

  .variation-merged .kernel-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }

  .variation-merged .kernel-grid .kernel-item:last-child {
    grid-column: span 2;
  }

  .variation-merged .hero-actions {
    flex-direction: column;
    gap: 1rem;
  }

  .variation-merged .mid-cta {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .variation-merged .markets-wedge {
    grid-template-columns: 1fr;
  }

  .variation-merged .markets-grid {
    grid-template-columns: 1fr;
  }

  .variation-merged .example-inset {
    padding: 1rem 1.2rem;
  }

  .variation-merged .example-inset::before {
    width: 64px;
    height: 64px;
    top: 0.8rem;
    right: 0.8rem;
  }

  .variation-merged .example-intro {
    max-width: calc(100% - 76px);
  }

  .variation-merged .claim-line {
    flex-direction: column;
    gap: 0.3rem;
  }

  /* Problem section flow diagram: hide on small screens */
  .variation-merged #the-problem .pull-quote::after {
    max-width: 360px;
    height: 52px;
  }

  .variation-merged .tagline {
    font-size: clamp(0.95rem, 2vw, 1.3rem);
  }

  .variation-merged .founders-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 480px) {
  .variation-merged .mockup-header {
    flex-wrap: wrap;
    row-gap: 0.4rem;
    padding: 0.55rem 0.8rem;
  }

  .variation-merged .mockup-header-tabs {
    order: 2;
    flex-basis: 100%;
    margin-left: 0;
  }

  .variation-merged .mockup-id {
    margin-left: auto;
  }

  .variation-merged .kernel-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .variation-merged .kernel-grid .kernel-item:last-child {
    grid-column: auto;
  }

  .variation-merged .example-inset {
    padding: 1rem 1rem 1.1rem;
  }

  .variation-merged .example-inset::before {
    content: none;
  }

  .variation-merged .example-intro {
    max-width: none;
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 360px) {
  .variation-merged .mockup-id {
    display: none;
  }

  .variation-merged .mockup-header-tab {
    font-size: 0.5rem;
    letter-spacing: 0.04em;
    padding-inline: 0.35rem;
  }
}

/* --- Founders closing --- */

.variation-merged .founders-closing {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(20, 42, 64, 0.1);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* --- Text Wrap: prevent orphan/widow lines --- */

/* Short/centered text: balance for even line lengths */
.variation-merged .pull-quote p,
.variation-merged .kernel-closing,
.variation-merged .governance-fold,
.variation-merged .governance-closing-fold,
.variation-merged .founders-closing,
.variation-merged .views-intro,
.variation-merged .markets-next {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 400;
  margin-top: 2.5rem;
  text-align: center;
  letter-spacing: 0.01em;
}

.variation-merged .markets-note,
.variation-merged .steps-closing,
.variation-merged .views-heading {
  text-wrap: balance;
}

/* Long prose: prevent orphan last lines without rebalancing */
.variation-merged .section-body p,
.variation-merged .founder-bio p,
.variation-merged .heritage-narrative p,
.variation-merged .example-intro,
.variation-merged .example-note,
.variation-merged .market-featured p:last-child,
.variation-merged .market-item p,
.variation-merged .scenario-context-text,
.variation-merged .bernard-answer-detail,
.variation-merged .scenario-agent p {
  text-wrap: pretty;
}

/* Scenario headlines: balance */
.variation-merged .scenario-headline,
.variation-merged .bernard-answer-headline,
.variation-merged .team-conductor {
  text-wrap: balance;
}

/* --- Section Reveals --- */

.variation-merged .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 420ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 420ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.variation-merged .reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- Proof Step Sequencing --- */

.variation-merged .proof-step {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 350ms ease-out,
    transform 350ms ease-out;
}

.variation-merged .proof-step.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- Active Nav State --- */

.variation-merged .nav-link.is-active {
  color: var(--color-saffron);
}

/* ===================================================================
   Homepage: Cinematic Scroll-Snap Scenes (v15)
   Three full-viewport scenario panels with glassmorphic conversations
   =================================================================== */

/* --- Home Hero Adjustments --- */

.variation-merged .hero-panel {
  display: flex;
  align-items: stretch;
}

.variation-merged .hero-panel .stage {
  min-height: 0;
}

.variation-merged .hero-panel .stage-home {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Shift visual center upward — scroll cue + trust bar occupy lower area.
     Using % of height works across both 16:9 desktop and 4:3 iPad. */
  padding-bottom: 16%;
  position: relative;
}

/* Match production wordmark size */
.variation-merged .hero-panel .wordmark {
  font-size: clamp(2.6rem, 7vw, 6rem);
}

/* --- Tagline block base styles --- */
.variation-merged .tagline-block {
  margin-top: 1.8rem;
  position: relative;
  z-index: 1;
}

/* Home hero tagline: match prod — small uppercase sans-serif */
.variation-merged .tagline-block .tagline {
  font-family: var(--font-sans);
  font-size: clamp(0.65rem, 1.6vw, 0.95rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.variation-merged .tagline-block .tagline-sub {
  margin-top: 0.3rem;
}

.variation-merged .tagline-block .tagline-markets {
  margin-top: 1rem;
  font-size: clamp(0.68rem, 1.2vw, 0.82rem);
  letter-spacing: 0.12em;
  text-transform: none;
  opacity: 0.55;
}

/* --- Hero scroll cue base styles --- */
.variation-merged .hero-scroll-cue {
  position: absolute;
  bottom: 12vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  z-index: 1;
}

.variation-merged .hero-scroll-cue-label {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-navy);
  opacity: 0.45;
  transition: opacity 0.4s ease;
}

/* Thin vertical line that draws downward — quiet, directional */
.variation-merged .hero-scroll-line {
  display: block;
  width: 1px;
  height: 40px;
  position: relative;
  overflow: hidden;
}

.variation-merged .hero-scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--color-navy);
  opacity: 0.18;
  transform: scaleY(0);
  transform-origin: top;
  animation: line-draw 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes line-draw {
  0% {
    transform: scaleY(0);
    opacity: 0.18;
  }
  40% {
    transform: scaleY(1);
    opacity: 0.18;
  }
  70% {
    transform: scaleY(1);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

.variation-merged .hero-scroll-cue:hover .hero-scroll-cue-label {
  opacity: 0.7;
}

.variation-merged .hero-scroll-cue:hover .hero-scroll-line::after {
  opacity: 0.35;
}

/* --- Trust bar hero base styles --- */
.variation-merged .trust-bar-hero {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(20, 42, 64, 0.06);
  border-bottom: none;
  background: rgba(20, 42, 64, 0.02);
  padding: 0.8rem 2rem;
}

.variation-merged .trust-bar-hero .trust-bar-badge {
  font-size: 0.72rem;
}

/* Non-blocking hero: tagline, scroll cue, and trust bar fade in
   gently over ~1.2s via CSS animation, then hold at a low resting
   opacity until the JS animation brings them to full brightness.
   BERNARD stays invisible until its own animation starts — but
   visitors can read the value proposition while they wait. */
@keyframes gentleFadeIn {
  from {
    opacity: 0;
  }
}

.js .variation-merged .tagline-block {
  opacity: var(--tagline-opacity, 0.4);
  transition: opacity 1.4s ease;
  animation: gentleFadeIn 1.2s ease-out;
}

.js .variation-merged .hero-scroll-cue {
  opacity: var(--scroll-cue-opacity, 0.25);
  transition: opacity 1.4s ease;
  animation: gentleFadeIn 1.8s ease-out;
}

.js .variation-merged .trust-bar-hero {
  opacity: var(--trust-bar-opacity, 0.3);
  transition: opacity 1.4s ease;
  animation: gentleFadeIn 2s ease-out;
}

/* hero-bob removed — replaced by line-draw */

.variation-merged .hero-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(180, 72, 0, 0.05) 0%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: hero-breathe 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hero-breathe {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
}

/* --- Home page: body doesn't scroll, .sc owns the viewport --- */

html:has(.home-page) {
  scroll-padding-top: 0;
  overflow: hidden;
}

.home-page.variation-merged {
  overflow: hidden;
  height: 100vh;
}

@supports (height: 100dvh) {
  .home-page.variation-merged {
    height: 100dvh;
  }
}

.home-page.variation-merged #main-content {
  margin: 0;
  padding: 0;
  height: 100vh;
}

@supports (height: 100dvh) {
  .home-page.variation-merged #main-content {
    height: 100dvh;
  }
}

/* --- Scroll-Snap Container --- */

.variation-merged .sc {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
  -webkit-overflow-scrolling: touch;
}

.variation-merged .panel {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: 0;
  height: 100vh;
  max-height: 100vh;
  flex-shrink: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}

@supports (height: 100dvh) {
  .variation-merged .panel {
    height: 100dvh;
    max-height: 100dvh;
  }
}

/* --- Bridge Section (product overview + navigation) --- */

.variation-merged .panel-bridge {
  scroll-snap-align: start;
  min-height: 100vh;
  height: auto;
  max-height: none;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ivory);
  padding: 12vh 8vw;
  position: relative;
}

.variation-merged .bridge-inner {
  max-width: 960px;
  text-align: center;
}

.variation-merged .bridge-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--color-saffron);
  margin: 0 0 2rem;
}

.variation-merged .bridge-headline {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 400;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.25;
}

.variation-merged .bridge-body {
  margin: 2.2rem auto 0;
  max-width: 640px;
  font-family: var(--font-sans);
  font-size: clamp(0.92rem, 1.3vw, 1.05rem);
  line-height: 1.75;
  color: var(--color-text-secondary);
  font-weight: 300;
}

.variation-merged .bridge-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 4.5rem;
  text-align: left;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.variation-merged .trust-bar-bridge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(20, 42, 64, 0.06);
  border-bottom: none;
  background: rgba(20, 42, 64, 0.02);
  padding: 0.8rem 2rem;
}

.variation-merged .bridge-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.variation-merged .bridge-card:hover {
  opacity: 0.7;
}

.variation-merged .bridge-card-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  opacity: 0.12;
  margin-bottom: 1rem;
  line-height: 1;
}

.variation-merged .bridge-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 400;
  color: var(--color-text-primary);
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.variation-merged .bridge-card-body {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  font-weight: 300;
  margin: 0;
  flex: 1;
}

.variation-merged .bridge-card-link {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-saffron);
  font-weight: 600;
  margin-top: 1.2rem;
}

.variation-merged .bridge-cta {
  margin-top: 4rem;
  margin-bottom: 2rem;
}

.variation-merged .bridge-disclaimer {
  margin-top: 2rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  opacity: 0.6;
  text-align: center;
  letter-spacing: 0.02em;
}

.variation-merged .bridge-scarcity {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0.6;
}

@media (max-width: 720px) {
  .variation-merged .bridge-cards {
    grid-template-columns: 1fr;
  }

  .variation-merged .panel-bridge {
    padding: calc(var(--nav-offset, 5.5rem) + 2vh) 6vw 8vh;
  }
}

/* --- Footer --- */

.variation-merged .panel-footer {
  scroll-snap-align: end;
  flex-shrink: 0;
  width: 100%;
}

.variation-merged .panel-footer .site-footer {
  text-align: center;
  padding: 3rem 2rem 2rem;
}

.variation-merged .footer-row-nav {
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(20, 42, 64, 0.06);
}

.variation-merged .footer-row-nav .footer-link {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.variation-merged .footer-link-flag {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.variation-merged .footer-flag {
  display: flex;
  flex-direction: column;
  width: 16px;
  height: 11px;
  border-radius: 1.5px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(20, 42, 64, 0.1);
}

.variation-merged .footer-flag-blue {
  flex: 1;
  background: #005bbb;
}

.variation-merged .footer-flag-yellow {
  flex: 1;
  background: #ffd500;
}

.variation-merged .footer-row-contact {
  margin-bottom: 0.6rem;
}

/* --- Scene Background Layers --- */

.variation-merged .bg {
  position: absolute;
  inset: -56px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transition:
    transform 0.9s ease,
    filter 0.9s ease,
    opacity 0.9s ease;
}

.variation-merged .scene {
  --scene-blur: 1.25px;
  --scene-focus-pull: 0px;
  --scene-layer-scale: 1.1;
  --scene-haze: 0.04;
  background: var(--color-navy);
}

.variation-merged .scene.is-active {
  --scene-focus-pull: 0px;
}

/* Pre-promote all scene layers to GPU for smoother Safari rendering.
   Prevents tile-based chunky rendering during fast scrolling. */
.variation-merged .scene .bg {
  will-change: transform, filter, opacity;
}

.variation-merged .scene .bg-back {
  z-index: 0;
  opacity: 1;
  transform: scale(var(--scene-layer-scale));
  filter: blur(calc(var(--scene-blur) - var(--scene-focus-pull)));
}

.variation-merged .scene .bg-front {
  z-index: 3;
  transform: scale(var(--scene-layer-scale));
}

.variation-merged .scene-air {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.variation-merged .scene-air::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
}

.variation-merged .scene-air::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--scene-haze);
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 255, 255, 0.035) 0%,
      transparent 38%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.04) 0%,
      transparent 22%,
      transparent 78%,
      rgba(0, 0, 0, 0.04) 100%
    ),
    linear-gradient(to top, rgba(0, 0, 0, 0.045) 0%, transparent 36%);
}

.variation-merged .vig {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 58%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

/* --- Conversation Thread --- */

.variation-merged .thread-wrap {
  position: absolute;
  z-index: 4;
  overflow: hidden;
}

.variation-merged .thread {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  padding: calc(72px + 2vh) 0.55rem 6vh 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(248, 245, 239, 0.34) transparent;
}

/* Push content toward the bottom when it doesn't fill the viewport.
   margin-top:auto on the first child works with overflow scroll
   (unlike justify-content:flex-end which clips the start). */
.variation-merged .thread > :first-child {
  margin-top: auto;
}

.variation-merged .thread > * {
  flex: 0 0 auto;
}

.variation-merged .thread::-webkit-scrollbar {
  width: 6px;
}

.variation-merged .thread::-webkit-scrollbar-track {
  background: transparent;
}

.variation-merged .thread::-webkit-scrollbar-thumb {
  background: rgba(248, 245, 239, 0.34);
  border-radius: 999px;
}

/* Fade gradients and scroll indicator removed — auto-scroll handles overflow */
.variation-merged .thread-wrap::before,
.variation-merged .thread-wrap::after {
  display: none;
}

.variation-merged .thread-cue {
  display: none;
}

/* Per-scene thread positioning — full height with generous padding */
.variation-merged .thread-paris {
  top: 0;
  bottom: 0;
  right: 4vw;
  width: min(680px, 48vw);
}

.variation-merged .thread-sd {
  top: 0;
  bottom: 0;
  left: 4vw;
  width: min(660px, 48vw);
}

.variation-merged .thread-sc {
  top: 0;
  bottom: 0;
  right: 4vw;
  width: min(680px, 48vw);
}

/* --- Packed Layout Mode (JS-calculated positions) --- */

.variation-merged .thread-wrap.is-packed {
  overflow: visible;
}

.variation-merged .thread-wrap.is-packed .thread {
  display: block;
  padding: 0;
  /* overflow and max-height set by JS based on content vs viewport */
}

.variation-merged .thread-wrap.is-packed .thread::-webkit-scrollbar {
  width: 5px;
}

.variation-merged .thread-wrap.is-packed .thread::-webkit-scrollbar-track {
  background: transparent;
}

.variation-merged .thread-wrap.is-packed .thread::-webkit-scrollbar-thumb {
  background: rgba(248, 245, 239, 0.28);
  border-radius: 999px;
}

/* --- Glass Bubbles --- */

.variation-merged .g-ctx {
  background: rgba(20, 42, 64, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 20px rgba(20, 42, 64, 0.2);
  opacity: 0;
  transform: translateY(16px);
}

.variation-merged .g-ctx .loc {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-saffron);
}

.variation-merged .g-ctx .tm {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(248, 245, 239, 0.4);
  margin-left: 0.4rem;
}

.variation-merged .g-ctx .who {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-ivory);
  margin-top: 0.3rem;
}

.variation-merged .g-ctx .role {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(248, 245, 239, 0.55);
  margin-top: 0.1rem;
}

.variation-merged .g-ctx .sit {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 400;
  color: rgba(248, 245, 239, 0.7);
  line-height: 1.6;
  margin-top: 0.4rem;
}

.variation-merged .g-client {
  background: rgba(20, 42, 64, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--color-saffron);
  border-radius: 4px 14px 14px 4px;
  padding: 0.75rem 1.05rem;
  align-self: flex-end;
  max-width: 85%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 12px rgba(20, 42, 64, 0.15);
  opacity: 0;
  transform: translateY(16px);
}

.variation-merged .g-ask {
  background: rgba(20, 42, 64, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid rgba(248, 245, 239, 0.6);
  border-radius: 4px 14px 14px 4px;
  padding: 0.75rem 1.05rem;
  align-self: flex-start;
  max-width: 85%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 12px rgba(20, 42, 64, 0.15);
  opacity: 0;
  transform: translateY(16px);
}

.variation-merged .g-bernard {
  background: rgba(248, 245, 239, 0.45);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(248, 245, 239, 0.25);
  border-left: 3px solid var(--color-success);
  border-radius: 4px 14px 14px 4px;
  padding: 1rem 1.15rem;
  align-self: flex-start;
  max-width: 92%;
  color: var(--color-navy);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 4px 24px rgba(20, 42, 64, 0.1);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
}

.variation-merged .g-confirm {
  background: rgba(20, 42, 64, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid rgba(248, 245, 239, 0.6);
  border-radius: 4px 14px 14px 4px;
  padding: 0.75rem 1.05rem;
  align-self: flex-start;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 12px rgba(20, 42, 64, 0.15);
  opacity: 0;
  transform: translateY(16px);
}

.variation-merged .g-relay {
  background: rgba(248, 245, 239, 0.45);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(248, 245, 239, 0.25);
  border-left: 3px solid var(--color-success);
  border-radius: 4px 14px 14px 4px;
  padding: 0.85rem 1.1rem;
  align-self: flex-end;
  max-width: 85%;
  color: var(--color-navy);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 4px 24px rgba(20, 42, 64, 0.1);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
}

.variation-merged .g-thanks {
  background: rgba(20, 42, 64, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--color-saffron);
  border-radius: 4px 14px 14px 4px;
  padding: 0.75rem 1.05rem;
  align-self: flex-end;
  max-width: 85%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 12px rgba(20, 42, 64, 0.15);
  opacity: 0;
  transform: translateY(16px);
}

/* --- Bubble Inner Styles --- */

.variation-merged .b-who {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(248, 245, 239, 0.5);
  margin-bottom: 0.25rem;
}

.variation-merged .b-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-ivory);
  line-height: 1.35;
  font-style: italic;
}

.variation-merged .b-text-sm {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--color-ivory);
  line-height: 1.55;
  font-weight: 400;
}

.variation-merged .b-st {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}

.variation-merged .b-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 6px rgba(34, 139, 34, 0.4);
  animation: b-glow 3s ease-in-out infinite;
}

@keyframes b-glow {
  0%,
  100% {
    box-shadow: 0 0 4px rgba(34, 139, 34, 0.4);
  }
  50% {
    box-shadow: 0 0 10px rgba(34, 139, 34, 0.1);
  }
}

.variation-merged .b-lb {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-success);
}

.variation-merged .b-h {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-navy);
  line-height: 1.3;
  margin-bottom: 0.3rem;
}

.variation-merged .b-p {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin-bottom: 0.4rem;
}

.variation-merged .b-f {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.35rem;
}

.variation-merged .f {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 0.25rem 0.45rem;
  border-radius: 3px;
}

.variation-merged .f-ok {
  background: rgba(34, 139, 34, 0.08);
  border-left: 2px solid var(--color-success);
  color: var(--color-navy);
}

.variation-merged .f-fl {
  background: rgba(180, 72, 0, 0.08);
  border-left: 2px solid var(--color-saffron);
  color: var(--color-navy);
}

.variation-merged .fi {
  flex-shrink: 0;
  font-size: 0.54rem;
}

.variation-merged .b-c {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.variation-merged .c {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  padding: 0.12rem 0.35rem;
  border-radius: 2px;
  background: rgba(20, 42, 64, 0.06);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.12rem;
}

.variation-merged .cd {
  width: 3px;
  height: 3px;
  border-radius: 50%;
}

.variation-merged .cg {
  background: var(--color-success);
}

.variation-merged .cs {
  background: var(--color-saffron);
}

/* Relay/confirm/thanks text color overrides */
.variation-merged .g-relay .b-who,
.variation-merged .g-relay .b-lb {
  color: var(--color-success);
}

.variation-merged .g-relay .b-text-sm {
  color: var(--color-navy);
  font-weight: 400;
}

/* g-confirm and g-thanks use same text colors as their role siblings
   (g-ask and g-client respectively) — no overrides needed */

/* --- Live Reveal / Processing States --- */

.variation-merged .typing-caret::after {
  content: "";
  display: inline-block;
  width: 0.55ch;
  height: 0.95em;
  margin-left: 0.08em;
  border-right: 1px solid currentColor;
  transform: translateY(0.08em);
  animation: caret-blink 0.78s steps(1) infinite;
}

@keyframes caret-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* --- Client typing indicator (three bouncing dots) --- */

.variation-merged .typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  padding: 0.15em 0;
  height: 1.2em;
}

.variation-merged .typing-dots span {
  display: block;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: dot-pulse 1.2s ease-in-out infinite;
}

.variation-merged .typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.variation-merged .typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes dot-pulse {
  0%,
  60%,
  100% {
    opacity: 0.2;
    transform: scale(0.85);
  }
  30% {
    opacity: 0.7;
    transform: scale(1);
  }
}

.variation-merged .bubble-final {
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.variation-merged .g-bernard.is-processing .bubble-final,
.variation-merged .g-relay.is-processing .bubble-final {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.variation-merged .bubble-phase {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0.95rem 1.1rem 0.9rem;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  pointer-events: none;
}

.variation-merged .g-bernard .bubble-phase,
.variation-merged .g-relay .bubble-phase {
  background: transparent;
}

.variation-merged .g-bernard.is-processing .bubble-phase,
.variation-merged .g-relay.is-processing .bubble-phase {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════
   Phase Overlay — Thinking Matrix Background + Readable Task List
   A deterministic grid of squares covers the entire bubble as a
   "thinking" backdrop. The task list sits on top, fully readable.
   ═══════════════════════════════════════════════════════════════════ */

/* --- Thinking matrix canvas (covers the whole bubble) --- */
.variation-merged .phase-matrix {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
}

.variation-merged .phase-matrix-cell {
  position: absolute;
  border-radius: 1px;
  background: rgba(20, 42, 64, 0.3);
  animation: cell-fade var(--cell-dur, 1s) ease-in-out var(--cell-delay, 0s)
    infinite alternate;
  /* Pause when parent overlay is not active — resumed via .is-processing */
  animation-play-state: paused;
}

/* Resume matrix animation only when the bubble is actively processing */
.variation-merged .is-processing .phase-matrix-cell {
  animation-play-state: var(--scene-play-state, running);
}

@keyframes cell-fade {
  0% {
    opacity: var(--cell-lo, 0.03);
  }
  100% {
    opacity: var(--cell-hi, 0.18);
  }
}

/* --- Phase content layer (on top of matrix) --- */
.variation-merged .phase-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* --- Header --- */
.variation-merged .phase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.variation-merged .phase-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(20, 42, 64, 0.9);
  font-weight: 600;
}

.variation-merged .phase-kicker::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: var(--color-success);
  box-shadow: 0 0 8px rgba(34, 139, 34, 0.18);
  animation: phase-pulse 1.1s ease-in-out infinite;
}

.variation-merged .phase-kicker::after {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(34, 139, 34, 0.35);
  animation: network-ring 1.8s ease-out infinite;
}

@keyframes phase-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes network-ring {
  0% {
    transform: translateY(-50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-50%) scale(2.8);
    opacity: 0;
  }
}

.variation-merged .phase-meta {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20, 42, 64, 0.7);
  font-weight: 600;
}

/* --- Source/action counter --- */
.variation-merged .phase-counter {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.15rem 0;
}

.variation-merged .phase-counter-value {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(34, 139, 34, 0.88);
  letter-spacing: -0.02em;
  min-width: 1.8ch;
  text-align: right;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.variation-merged .phase-counter-value.is-bumped {
  animation: counter-bump 0.18s ease;
}

@keyframes counter-bump {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}

.variation-merged .phase-counter-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20, 42, 64, 0.75);
  font-weight: 600;
}

.variation-merged .phase-elapsed {
  font-family: var(--font-mono);
  font-size: 0.44rem;
  letter-spacing: 0.05em;
  color: rgba(20, 42, 64, 0.65);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* --- Task grid — readable list on top of matrix --- */
.variation-merged .phase-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 0.5rem;
  min-height: 4rem;
}

.variation-merged .phase-task {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.variation-merged .phase-task.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.variation-merged .phase-task.is-active {
  opacity: 1;
}

.variation-merged .phase-task.is-complete {
  opacity: 1;
}

.variation-merged .phase-task-icon {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1.5px solid rgba(20, 42, 64, 0.2);
  background: transparent;
  position: relative;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.variation-merged .phase-task.is-active .phase-task-icon {
  border-color: transparent;
  border-top-color: rgba(34, 139, 34, 0.75);
  border-right-color: rgba(34, 139, 34, 0.75);
  animation: task-spin 0.55s linear infinite;
  box-shadow: 0 0 4px rgba(34, 139, 34, 0.25);
}

@keyframes task-spin {
  to {
    transform: rotate(360deg);
  }
}

.variation-merged .phase-task.is-complete .phase-task-icon {
  border-color: transparent;
  background: rgba(34, 139, 34, 0.82);
  animation: task-pop 0.22s ease;
}

@keyframes task-pop {
  0% {
    transform: scale(0.5);
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.variation-merged .phase-task.is-complete .phase-task-icon::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.38rem;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

/* Flagged task — amber warning instead of green checkmark */
.variation-merged .phase-task.is-flagged {
  opacity: 1;
}

.variation-merged .phase-task.is-flagged .phase-task-icon {
  border-color: transparent;
  background: rgba(210, 130, 20, 0.88);
  animation: task-pop 0.22s ease;
}

.variation-merged .phase-task.is-flagged .phase-task-icon::after {
  content: "!";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.4rem;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

.variation-merged .phase-task.is-flagged .phase-task-label {
  color: rgba(180, 100, 10, 0.95);
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  animation: none;
}

.variation-merged .phase-task-label {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.03em;
  color: rgba(20, 42, 64, 0.88);
  white-space: nowrap;
  font-weight: 600;
  transition: color 0.15s ease;
}

.variation-merged .phase-task.is-active .phase-task-label {
  color: rgba(20, 42, 64, 1);
  background: linear-gradient(
    90deg,
    rgba(20, 42, 64, 0.72) 40%,
    rgba(34, 139, 34, 0.72) 50%,
    rgba(20, 42, 64, 0.72) 60%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: label-scan 1.4s ease-in-out infinite;
}

@keyframes label-scan {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.variation-merged .phase-task.is-active .phase-task-label::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(34, 139, 34, 0.6),
    rgba(34, 139, 34, 0.15)
  );
  animation: task-micro-progress 0.9s ease-in-out infinite alternate;
}

@keyframes task-micro-progress {
  0% {
    width: 15%;
  }
  100% {
    width: 85%;
  }
}

.variation-merged .phase-task.is-complete .phase-task-label {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  animation: none;
  color: rgba(20, 42, 64, 0.85);
}

.variation-merged .phase-task.is-done {
  opacity: 1;
}

.variation-merged .phase-task.is-done .phase-task-icon {
  border-color: transparent;
  background: rgba(34, 139, 34, 0.82);
}

/* Flagged tasks keep amber even when dimmed */
.variation-merged .phase-task.is-flagged.is-done .phase-task-icon {
  background: rgba(210, 130, 20, 0.88);
}

.variation-merged .phase-task.is-done .phase-task-label {
  color: rgba(20, 42, 64, 0.88);
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  animation: none;
}

.variation-merged .phase-task.is-flagged.is-done .phase-task-label {
  color: rgba(180, 100, 10, 0.95);
}

/* --- Tools --- */
.variation-merged .phase-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.variation-merged .phase-tool {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  border: 1px solid rgba(20, 42, 64, 0.2);
  background: rgba(20, 42, 64, 0.06);
  color: rgba(20, 42, 64, 0.8);
  font-weight: 600;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.variation-merged .phase-tool.is-active {
  background: rgba(34, 139, 34, 0.12);
  border-color: rgba(34, 139, 34, 0.3);
  color: rgba(20, 42, 64, 0.9);
  transform: translateY(-1px);
}

/* --- Progress bar --- */
.variation-merged .phase-progress {
  height: 2px;
  border-radius: 999px;
  background: rgba(20, 42, 64, 0.08);
  overflow: hidden;
}

.variation-merged .phase-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(34, 139, 34, 0.44),
    rgba(34, 139, 34, 0.82)
  );
  transition: width 0.22s ease;
}

.variation-merged .phase-progress-bar[style*="100%"] {
  box-shadow: 0 0 8px rgba(34, 139, 34, 0.3);
}

/* --- Midpoint CTA Panel --- */

.variation-merged .mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6vw;
  background: var(--color-navy);
}

.variation-merged .scene-closing-headline {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.8vw, 2rem);
  color: var(--color-ivory);
  line-height: 1.35;
  max-width: 580px;
  margin-bottom: 1rem;
}

.variation-merged .scene-closing-body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.88rem;
  color: rgba(248, 245, 239, 0.45);
  line-height: 1.7;
  max-width: 440px;
  margin-bottom: 2.5rem;
}

.variation-merged .mid .cta-button {
  color: var(--color-ivory);
}

/* --- Scene Mobile Responsive --- */

@media (max-width: 768px) {
  .variation-merged .thread-wrap.thread-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .variation-merged .thread-wrap.thread-wrap.is-scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .variation-merged .thread-wrap::before,
  .variation-merged .thread-wrap::after {
    right: 4vw;
  }

  .variation-merged .thread-wrap .thread.thread {
    padding: calc(72px + 2vh) 4vw 6vh;
    max-height: none;
    height: auto;
    min-height: 0;
  }

  /* On mobile, disable bottom-alignment so content starts at the top
     and the first bubble is immediately visible without scrolling. */
  .variation-merged .thread > :first-child {
    margin-top: 0;
  }

  .variation-merged .thread-cue {
    right: 4vw;
    bottom: 0.45rem;
  }

  /* Phase grid: tighter on mobile */
  .variation-merged .phase-grid {
    gap: 0.2rem 0.35rem;
    min-height: 3rem;
  }

  .variation-merged .phase-task-label {
    font-size: 0.5rem;
  }

  .variation-merged .phase-counter-value {
    font-size: 0.9rem;
  }

  .variation-merged .phase-tool {
    font-size: 0.42rem;
    padding: 0.12rem 0.35rem;
  }
}

/* --- Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
  .variation-merged .hero-glow {
    animation: none;
    opacity: 0.4;
  }

  .variation-merged .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .variation-merged .proof-step {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .variation-merged .market-featured:hover,
  .variation-merged .market-item:hover {
    transform: none;
  }

  .variation-merged .b-dot {
    animation: none;
  }

  .variation-merged .phase-kicker::before,
  .variation-merged .phase-matrix-cell {
    animation: none;
    opacity: 0.15;
  }

  .variation-merged .g-ctx,
  .variation-merged .g-client,
  .variation-merged .g-ask,
  .variation-merged .g-bernard,
  .variation-merged .g-confirm,
  .variation-merged .g-relay,
  .variation-merged .g-thanks {
    opacity: 1;
    transform: none;
  }
}

/* --- High Contrast --- */

@media (prefers-contrast: more) {
  .variation-merged .eyebrow {
    opacity: 1;
    font-weight: 600;
  }

  .variation-merged .section-body p,
  .variation-merged .contact-body {
    color: var(--color-text-primary);
  }

  .variation-merged .tagline,
  .variation-merged .subline,
  .variation-merged .hero-audience {
    color: var(--color-text-primary);
  }

  .variation-merged .thread [data-step] {
    border: 1px solid rgba(248, 245, 239, 0.25);
  }

  .variation-merged .kernel-item,
  .variation-merged .market-featured,
  .variation-merged .proof-record {
    border-color: rgba(20, 42, 64, 0.2);
  }

  .variation-merged .nav.is-scrolled {
    box-shadow: 0 1px 0 rgba(20, 42, 64, 0.15);
  }

  .variation-merged .footer-separator {
    color: rgba(20, 42, 64, 0.5);
  }
}

/* --- Save-Data / Low Bandwidth Fallback --- */
/* On low bandwidth, JS never applies data-bg backgrounds.
   Show a subtle gradient so scenes aren't just dark. */

[data-low-bandwidth] .variation-merged .scene {
  background: linear-gradient(135deg, #1a2f42 0%, #142a40 50%, #0f2030 100%);
}

/* Reduce matrix cell count visually on slow connections */
[data-low-bandwidth] .variation-merged .phase-matrix-cell {
  --cell-dur: 2s;
}

/* Skip hover-zoom on agent thumbnails to avoid layout recalc */
[data-low-bandwidth] .variation-merged .workstream-avatar {
  transition: none;
}

[data-low-bandwidth] .variation-merged .workstream-avatar:hover {
  transform: none;
}

/* --- Landscape Phone Handling (B-12) --- */
@media (orientation: landscape) and (max-height: 500px) {
  .variation-merged .panel {
    min-height: 100vh;
    height: auto;
    max-height: none;
    scroll-snap-align: start;
  }

  .variation-merged .hero-panel .stage {
    min-height: 100vh;
    padding-top: 10vh;
    padding-bottom: 5vh;
  }

  .variation-merged .thread-wrap.thread-wrap {
    position: relative;
    inset: auto;
    max-height: none;
  }

  .variation-merged .panel-bridge {
    min-height: 100vh;
    height: auto;
    padding: 6vh 6vw;
  }
}