/* MSP Landing Page Styles */

/* Dark wrapper sections: kill global .section-header margin-top inside padded containers */
.msp-architecture-wrapper .section-header,
.msp-proof-wrapper .section-header,
.msp-sovereignty-wrapper .section-header,
.msp-comparison-wrapper .section-header {
  margin-top: 0;
}

/* ============================================================================
   ENTRANCE ANIMATIONS
   ============================================================================ */

.msp-hidden {
  opacity: 0;
  transform: translateY(24px);
}

.msp-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--ease-snappy), transform 0.6s var(--ease-snappy);
}


/* ============================================================================
   FULL-WIDTH BREAKOUT — match perimeter page pattern
   ============================================================================ */

.msp-hero-container,
.msp-results,
.msp-handles,
.msp-manifest,
.msp-protocol,
.msp-scenarios,
.msp-cta {
  width: 100vw;
  max-width: var(--max-width-full);
  margin-left: 50%;
  transform: translateX(-50%);
  padding-left: var(--space-2xl);
  padding-right: var(--space-2xl);
}


/* ============================================================================
   SECTION CANVAS POSITIONING
   Absolute-position canvases behind section content
   ============================================================================ */

.msp-proof-wrapper,
.msp-architecture-wrapper {
  position: relative;
  overflow: hidden;
}

#msp-proof-canvas,
#msp-architecture-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Content above canvas */
.msp-proof-wrapper > .msp-proof,
.msp-architecture-wrapper > .msp-architecture {
  position: relative;
  z-index: 2;
}


/* ============================================================================
   HERO
   ============================================================================ */

.msp-hero-container {
  position: relative;
  height: 600px;
  background-color: var(--color-bg-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-3xl);
  padding-left: 0;
  padding-right: 0;
}

.msp-hero-section {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 100%;
  pointer-events: none;
  color: var(--color-text-inverse);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.msp-hero-section .section-header {
  margin: 0;
}

.msp-hero-section .section-header h1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  color: inherit;
}

.msp-hero-section .section-header h3 {
  font-weight: var(--weight-light);
  color: inherit;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
}

@media (min-width: 992px) {
  .msp-hero-section .section-header h1 {
    font-size: var(--text-6xl);
  }
}


/* ============================================================================
   WHAT YOUR TEAM SEES — Result examples
   ============================================================================ */

/*
 * Everything in this section uses the DEFAULT body font.
 * No mono. No serif. One typeface, three weights.
 *
 * Hierarchy:
 *   Question  — 36px / 700 / italic / dark
 *   Value     — 20px / 900 / dark
 *   Label     — 11px / 600 / uppercase tracked / tertiary
 *   Source    — 13px / 500 / uppercase tracked / muted + icon
 */

.msp-results {
  padding: 0;
  height: 80vh;
  min-height: 500px;
  max-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msp-results__cycle {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
}

/* ── Question ── */

.msp-results__q {
  font-size: 36px;
  font-weight: var(--weight-bold);
  font-style: italic;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
  min-height: 1.3em;
}

.msp-results__q.msp-typing::after {
  content: '|';
  font-style: normal;
  animation: msp-blink 0.6s step-end infinite;
  color: var(--color-accent);
}

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

/* ── Answer area ── */

.msp-results__answer-area {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.msp-results__answer-area.msp-results--hidden {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(4px);
}

/* ── Answer row of items ── */

/* ── Answer grid: 3 equal columns ── */

.msp-results__a {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin-bottom: 0;
}

.msp-results__a-item {
  text-align: center;
  padding: var(--space-lg) 0;
}

.msp-results__a-label {
  display: block;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-xs);
}

.msp-results__a-value {
  display: block;
  font-size: 20px;
  font-weight: var(--weight-black);
  color: var(--color-text);
}

/* Stagger entrance — expensive feel */
.msp-results__answer-area:not(.msp-results--hidden) .msp-results__a-item {
  animation: msp-val-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.msp-results__answer-area:not(.msp-results--hidden) .msp-results__a-item:nth-child(1) { animation-delay: 0.1s; }
.msp-results__answer-area:not(.msp-results--hidden) .msp-results__a-item:nth-child(2) { animation-delay: 0.22s; }
.msp-results__answer-area:not(.msp-results--hidden) .msp-results__a-item:nth-child(3) { animation-delay: 0.34s; }

/* Sources fade in last */
.msp-results__answer-area:not(.msp-results--hidden) .msp-results__sources {
  animation: msp-source-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

@keyframes msp-val-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes msp-source-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Sources ── */

.msp-results__sources {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
}

.msp-results__source-preamble {
  margin: 0;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}

.msp-results__source-preamble strong {
  font-weight: var(--weight-black);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.msp-results__source-systems {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
}

.msp-results__source-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  width: 120px;
}

.msp-results__source-picto {
  display: flex;
  align-items: center;
  justify-content: center;
}

.msp-results__source-picto svg {
  width: 48px;
  height: 48px;
  fill: var(--color-text-tertiary);
}

.msp-results__source-name {
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: 0.04em;
}

/* ── Mobile ── */

@media (max-width: 767px) {
  .msp-results__q {
    font-size: 24px;
  }
  .msp-results__a {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .msp-results {
    height: auto;
    min-height: auto;
    max-height: none;
  }
  .msp-hero-container {
    height: auto;
    min-height: auto;
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-md) var(--space-2xl);
    overflow: visible;
  }
  .msp-hero-section {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }
  #msp-canvas {
    display: none;
  }
  /* Reduce side padding on all full-width sections for mobile */
  .msp-hero-container,
  .msp-results,
  .msp-handles,
  .msp-manifest,
  .msp-protocol,
  .msp-scenarios,
  .msp-cta {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  .msp-results__a-value {
    font-size: 18px;
  }
  .msp-results__a-item:last-child .msp-results__a-value {
    font-size: 20px;
  }
}


/* ============================================================================
   HOW MSP WORKS — Architecture section (dark)
   ============================================================================ */

.msp-architecture-wrapper {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding: var(--space-3xl) var(--space-2xl);
  margin-bottom: var(--space-3xl);
  width: 100vw;
  max-width: var(--max-width-full);
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: var(--radius-xl);
}

.msp-architecture-wrapper .section-header h2 {
  color: var(--color-text-inverse);
}

.msp-architecture-wrapper .section-header h3 {
  color: var(--color-text-muted);
}

/* Architecture diagram — 3 nodes with connectors */
.msp-architecture__diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: var(--max-width-wide);
  margin: 0 auto var(--space-3xl);
  padding: var(--space-2xl) 0;
}

.msp-architecture__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 auto;
  width: 180px;
}

.msp-architecture__node-icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--space-md);
}

.msp-architecture__node-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-text-muted);
}

.msp-architecture__node--bridge .msp-architecture__node-icon svg {
  fill: var(--color-accent-light);
}

.msp-architecture__node-label {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-xs);
  color: var(--color-text-inverse);
}

.msp-architecture__node--bridge .msp-architecture__node-label {
  color: var(--color-accent-light);
}

.msp-architecture__node-detail {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Connectors between nodes */
.msp-architecture__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 200px;
  gap: var(--space-sm);
}

.msp-architecture__connector-line {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--color-border-dark) 20%,
    var(--color-accent-light) 50%,
    var(--color-border-dark) 80%,
    transparent
  );
  position: relative;
}

/* Animated pulse on connector */
.msp-architecture__connector-line::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 24px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--color-accent-light);
  box-shadow: 0 0 12px var(--color-accent-light);
  animation: msp-connector-pulse 3s ease-in-out infinite;
}

@keyframes msp-connector-pulse {
  0% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 24px); opacity: 0; }
}

.msp-architecture__connector-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Steps — 3-column grid */
.msp-architecture__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

.msp-architecture__step {
  padding: var(--space-xl);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xl);
  background-color: rgba(255, 255, 255, 0.03);
}

.msp-architecture__step-number {
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  color: var(--color-accent-light);
  opacity: 0.3;
  margin-bottom: var(--space-sm);
  line-height: var(--leading-none);
}

.msp-architecture__step h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-md);
  color: var(--color-text-inverse);
}

.msp-architecture__step p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

@media (max-width: 767px) {
  .msp-architecture__diagram {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .msp-architecture__connector {
    max-width: 100%;
    flex-direction: row;
  }

  .msp-architecture__connector-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg,
      transparent,
      var(--color-border-dark) 20%,
      var(--color-accent-light) 50%,
      var(--color-border-dark) 80%,
      transparent
    );
  }

  .msp-architecture__connector-line::after {
    animation: msp-connector-pulse-vertical 3s ease-in-out infinite;
    width: 8px;
    height: 24px;
    left: -3px;
    top: 0;
  }

  .msp-architecture__steps {
    grid-template-columns: 1fr;
  }
}

@keyframes msp-connector-pulse-vertical {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: calc(100% - 24px); opacity: 0; }
}


/* ============================================================================
   THE PROTOCOL — Code example with annotations
   ============================================================================ */

.msp-protocol {
  padding-bottom: var(--space-3xl);
}

.msp-protocol__showcase {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-2xl);
  max-width: var(--max-width-wide);
  margin: 0 auto;
  align-items: start;
}

/* Code block — terminal style */
.msp-protocol__code-wrapper {
  background-color: var(--color-bg-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.msp-protocol__code-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  background-color: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--color-border-dark);
}

.msp-protocol__code-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-border-dark);
}

.msp-protocol__code-dot:first-child {
  background-color: #ff5f57;
}

.msp-protocol__code-dot:nth-child(2) {
  background-color: #ffbd2e;
}

.msp-protocol__code-dot:nth-child(3) {
  background-color: #28ca41;
}

.msp-protocol__code-filename {
  margin-left: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.msp-protocol__code {
  margin: 0;
  padding: var(--space-xl);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.msp-protocol__code code {
  font-family: inherit;
  background: none;
  padding: 0;
}

/* Syntax highlighting */
.msp-code-key {
  color: #93c5fd;
}

.msp-code-string {
  color: #86efac;
}

.msp-code-bool {
  color: #fbbf24;
}

/* Annotations */
.msp-protocol__annotations {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.msp-protocol__annotation {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.msp-protocol__annotation-marker {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 2px;
}

.msp-protocol__annotation-marker svg {
  width: 100%;
  height: 100%;
  fill: var(--color-accent);
}

.msp-protocol__annotation h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-xs);
}

.msp-protocol__annotation p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.msp-protocol__footnote {
  text-align: center;
  margin-top: var(--space-2xl);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: var(--max-width-content);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 991px) {
  .msp-protocol__showcase {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   PROOF / CASE STUDY — Dark dramatic section
   ============================================================================ */

.msp-proof-wrapper {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding: var(--space-3xl) var(--space-2xl);
  margin-bottom: var(--space-3xl);
  /* Full-width breakout — same pattern as hero */
  width: 100vw;
  max-width: var(--max-width-full);
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: var(--radius-xl);
}

.msp-proof-wrapper .section-header h2 {
  color: var(--color-text-inverse);
}

.msp-proof-wrapper .section-header h3 {
  color: var(--color-text-muted);
}

.msp-proof__card {
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl);
  max-width: var(--max-width-content);
  margin: 0 auto;
  background-color: var(--color-bg-dark);
  position: relative;
  z-index: 2;
}

.msp-proof__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.msp-proof__icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
}

.msp-proof__icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-accent-light);
}

.msp-proof__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: 0;
  color: var(--color-text-inverse);
}

.msp-proof__subtitle {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Before / After outcome */
.msp-proof__outcome {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.msp-proof__outcome-item h4 {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-md);
}

/* Before label in muted, After label in accent */
.msp-proof__outcome-item:first-child h4 {
  color: var(--color-text-muted);
}

.msp-proof__outcome-item:last-child h4 {
  color: var(--color-accent-light);
}

.msp-proof__outcome-item p {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.msp-proof__outcome-divider {
  width: 1px;
  background-color: var(--color-border-dark);
}

@media (max-width: 767px) {
  .msp-proof__outcome {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .msp-proof__outcome-divider {
    width: 100%;
    height: 1px;
  }
}

/* Stats row */
.msp-proof__stats {
  display: flex;
  gap: var(--space-3xl);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border-dark);
}

.msp-proof__stat {
  display: flex;
  flex-direction: column;
}

.msp-proof__stat-number {
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-none);
  margin-bottom: var(--space-xs);
  color: var(--color-text-inverse);
  transition: transform 0.3s var(--ease-snappy);
}

/* Pulse on count completion */
.msp-count-done {
  animation: msp-count-pulse 0.4s var(--ease-snappy);
}

@keyframes msp-count-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.msp-proof__stat-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}

.msp-proof__footer {
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .msp-proof-wrapper {
    padding: var(--space-2xl) var(--space-md);
  }

  .msp-proof__card {
    padding: var(--space-xl);
  }

  .msp-proof__stats {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .msp-proof__stat-number {
    font-size: var(--text-4xl);
  }

  .msp-proof__header {
    flex-direction: column;
    text-align: center;
  }
}


/* ============================================================================
   OPERATIONS MANIFEST — 51 operations by category
   ============================================================================ */

.msp-manifest {
  padding-bottom: var(--space-3xl);
}

.msp-manifest__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

.msp-manifest__category {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  background-color: var(--color-bg);
  transition: border-color var(--duration-slow) var(--ease-snappy);
}

.msp-manifest__category:hover {
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.msp-manifest__category-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.msp-manifest__category-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.msp-manifest__category-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-accent);
}

.msp-manifest__category-header h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  flex: 1;
}

.msp-manifest__category-count {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.msp-manifest__ops {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.msp-manifest__ops li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.msp-manifest__ops li:last-child {
  border-bottom: none;
}

.msp-manifest__ops li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-accent);
  flex-shrink: 0;
  opacity: 0.5;
}

.msp-manifest__footnote {
  text-align: center;
  margin-top: var(--space-2xl);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

/* ── Spectrum: from trivial to extreme ── */

.msp-manifest__spectrum {
  max-width: var(--max-width-wide);
  margin: var(--space-3xl) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.msp-manifest__spectrum-default,
.msp-manifest__spectrum-extreme {
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
}

.msp-manifest__spectrum-default {
  background-color: var(--color-bg-alt);
  border: 2px solid var(--color-accent);
}

.msp-manifest__spectrum-extreme {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  border: 2px solid transparent;
}

.msp-manifest__spectrum-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.msp-manifest__spectrum-badge--extreme {
  color: color-mix(in srgb, var(--color-text-inverse) 50%, transparent);
}

.msp-manifest__spectrum-default h3,
.msp-manifest__spectrum-extreme h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  margin-bottom: var(--space-md);
  line-height: var(--leading-snug);
}

.msp-manifest__spectrum-default p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.msp-manifest__spectrum-extreme p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: color-mix(in srgb, var(--color-text-inverse) 65%, transparent);
}

@media (max-width: 767px) {
  .msp-manifest__spectrum {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .msp-manifest__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .msp-manifest__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   WHO USES MSP — Deployment scenarios
   ============================================================================ */

.msp-scenarios {
  padding-bottom: var(--space-3xl);
}

.msp-scenarios__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

.msp-scenarios__card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  background-color: var(--color-bg);
  transition: border-color var(--duration-slow) var(--ease-snappy);
}

.msp-scenarios__card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.msp-scenarios__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-md);
}

.msp-scenarios__icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-accent);
}

.msp-scenarios__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.msp-scenarios__card h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-md);
}

.msp-scenarios__card p {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-lg);
}

.msp-scenarios__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.msp-scenarios__stat-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
}

.msp-scenarios__stat-detail {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .msp-scenarios__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   DIGITAL SOVEREIGNTY — Dark principles section
   ============================================================================ */

.msp-sovereignty-wrapper {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding: var(--space-3xl) var(--space-2xl);
  margin-bottom: var(--space-3xl);
  width: 100vw;
  max-width: var(--max-width-full);
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: var(--radius-xl);
}

.msp-sovereignty-wrapper .section-header h2 {
  color: var(--color-text-inverse);
}

.msp-sovereignty-wrapper .section-header h3 {
  color: var(--color-text-muted);
}

.msp-sovereignty__content {
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

.msp-sovereignty__statement {
  max-width: var(--max-width-content);
  margin: 0 auto var(--space-3xl);
}

.msp-sovereignty__statement p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.msp-sovereignty__statement strong {
  color: var(--color-text-inverse);
  font-weight: var(--weight-semibold);
}

.msp-sovereignty__principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.msp-sovereignty__principle {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  padding: var(--space-xl);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xl);
  background-color: rgba(255, 255, 255, 0.02);
}

.msp-sovereignty__principle-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
}

.msp-sovereignty__principle-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-accent-light);
}

.msp-sovereignty__principle h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-sm);
  color: var(--color-text-inverse);
}

.msp-sovereignty__principle p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

@media (max-width: 767px) {
  .msp-sovereignty__principles {
    grid-template-columns: 1fr;
  }

  .msp-sovereignty-wrapper {
    padding: var(--space-2xl) var(--space-md);
  }
}


/* ============================================================================
   WHAT SYNTHGRID HANDLES
   ============================================================================ */

.msp-handles {
  padding-bottom: var(--space-3xl);
}

.msp-handles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

.msp-handles__card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  background-color: var(--color-bg);
  transition: all var(--duration-slow) var(--ease-snappy);
}

.msp-handles__card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent),
              0 0 20px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.msp-handles__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-md);
}

.msp-handles__icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-accent);
}

.msp-handles__card h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-sm);
}

.msp-handles__card p {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.msp-handles__card code {
  background-color: var(--color-bg-alt);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

@media (max-width: 991px) {
  .msp-handles__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .msp-handles__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   COMPARISON — Traditional vs MSP
   ============================================================================ */

.msp-comparison-wrapper {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding: var(--space-2xl) var(--space-2xl) var(--space-3xl);
  margin-bottom: var(--space-3xl);
  width: 100vw;
  max-width: var(--max-width-full);
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: var(--radius-xl);
}

.msp-comparison-wrapper .section-header h2 {
  color: var(--color-text-inverse);
}

.msp-comparison-wrapper .section-header h3 {
  color: var(--color-text-muted);
}

.msp-comparison__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2xl);
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

.msp-comparison__column-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-border-dark);
}

.msp-comparison__column--before .msp-comparison__column-title {
  color: var(--color-text-muted);
}

.msp-comparison__column--after .msp-comparison__column-title {
  color: var(--color-accent-light);
  border-bottom-color: var(--color-accent-light);
}

.msp-comparison__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.msp-comparison__list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.msp-comparison__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
}

.msp-comparison__value {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.msp-comparison__value--highlight {
  color: var(--color-text-inverse);
  font-weight: var(--weight-semibold);
}

.msp-comparison__divider {
  width: 1px;
  background-color: var(--color-border-dark);
}

@media (max-width: 767px) {
  .msp-comparison__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .msp-comparison__divider {
    width: 100%;
    height: 1px;
  }
}


/* ============================================================================
   CTA SECTION
   ============================================================================ */

.msp-cta {
  text-align: center;
  padding-bottom: var(--space-3xl);
}

.msp-cta .section-header {
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-lg);
}

.msp-cta .cta-frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-3xl);
  max-width: 800px;
  margin: 0 auto;
}

.msp-cta .cta-frame p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-lg);
  color: var(--color-text-secondary);
}

.msp-cta__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.msp-cta__secondary-button {
  display: inline-block;
  padding: var(--space-lg) var(--space-3xl);
  font-weight: var(--weight-extrabold);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-family: var(--font-sans);
  border: 2px solid var(--color-bg-dark);
  color: var(--color-bg-dark);
  background-color: transparent;
  text-decoration: none;
  transition: all var(--duration-normal) var(--ease-default);
}

.msp-cta__secondary-button:hover {
  background-color: var(--color-bg-dark);
  color: var(--color-bg);
}


/* ============================================================================
   RESPONSIVE — CTA mobile
   ============================================================================ */

@media (max-width: 767px) {
  .msp-cta .cta-frame {
    padding: var(--space-lg) var(--space-lg);
  }
  .msp-cta__secondary-button {
    padding: var(--space-md) var(--space-xl);
  }
}


/* ============================================================================
   RESPONSIVE — desktop-only helper
   ============================================================================ */

@media (max-width: 991px) {
  .desktop-only {
    display: none;
  }
}