.pixel-wave-divider {
  width: 100%;
  height: 32px;
  background-color: #fff;
  background-image: url("assets/pixel/environment/wave-calm.svg");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: 256px 32px;
  image-rendering: pixelated;
}

.pixel-wave-divider + .site-footer {
  border-top: 0;
}

/*
 * Persona boards already carry aria-hidden="true" and are supplementary to
 * the visible headings, descriptions, and outcomes. Replace their synthetic
 * UI diagrams with the matching static maritime scene without changing the
 * tab or panel semantics.
 */
.persona-board {
  position: relative;
  min-height: 310px;
  background-color: #f1f3f7;
  background-repeat: no-repeat;
  background-position: center 42%;
  background-size: contain;
  image-rendering: pixelated;
  overflow: hidden;
}

.persona-board > * {
  visibility: hidden;
}

/* Scene identity captions  -  decorative art alone can look interchangeable. */
.persona-board::before,
.persona-board::after {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  visibility: visible;
}

.persona-board::before {
  content: attr(data-persona-scene);
  left: 14px;
  top: 14px;
  padding: 6px 10px;
  border: 1px solid #c6c6cd;
  background: rgba(255, 255, 255, .92);
  color: #111318;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.persona-board::after {
  content: attr(data-persona-key);
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 8px 10px;
  border: 1px solid #dfe3eb;
  background: rgba(241, 243, 247, .94);
  color: #4d5568;
  font-size: 12px;
  font-weight: 620;
  line-height: 1.35;
}

#persona-support .persona-board {
  background-image: url("assets/pixel/personas/support-harbor.svg");
}

#persona-engineering .persona-board {
  background-image: url("assets/pixel/personas/engineering-dock.svg");
}

#persona-success .persona-board {
  background-image: url("assets/pixel/personas/customer-success-port.svg");
}

#persona-operations .persona-board {
  background-image: url("assets/pixel/personas/operations-yard.svg");
}

.error-page-inner {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(280px, 1.15fr);
  align-items: center;
  gap: clamp(32px, 7vw, 96px);
  padding-top: 72px;
  padding-bottom: 72px;
}

.error-page-copy {
  max-width: 620px;
}

.error-page-copy h1 {
  margin: 18px 0 20px;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.06;
  letter-spacing: -.055em;
}

.error-page-copy > p:not(.eyebrow) {
  max-width: 520px;
  margin: 0 0 30px;
  color: var(--muted);
  font-size: 17px;
}

.error-page-art {
  margin: 0;
  display: grid;
  place-items: center;
  min-width: 0;
}

.error-page-art img {
  display: block;
  width: min(640px, 100%);
  height: auto;
  image-rendering: pixelated;
}

@media (max-width: 820px) {
  .persona-board {
    min-height: clamp(210px, 54vw, 310px);
    background-size: min(100%, 480px) auto;
  }

  .error-page-inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .error-page-copy {
    margin-inline: auto;
  }

  .error-page-copy > p:not(.eyebrow) {
    margin-inline: auto;
  }

  .error-page-art {
    order: -1;
  }

  .error-page-art img {
    width: min(480px, 100%);
  }
}

@media print {
  .pixel-wave-divider,
  .persona-board,
  .error-page-art {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-wave-divider,
  .persona-board,
  .error-page-art img {
    animation: none !important;
    transition: none !important;
  }
}