.err-main {
  background: transparent;
  min-height: 100vh;
  font-family: "DM Sans", Arial, sans-serif;
}

.err-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4.5rem) 1.25rem clamp(3rem, 7vw, 5rem);
  min-height: calc(100vh - var(--ph3-bar-h, 80px) - 120px);
}

.err-card {
  width: 100%;
  max-width: 540px;
  background: #ffffff;
  border: 1px solid rgba(32, 52, 76, 0.06);
  border-radius: 24px;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  box-shadow: 0 26px 70px -32px rgba(20, 30, 48, 0.7);
}
@media (prefers-reduced-motion: no-preference) {
  .err-card {
    animation: err-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

.err-code {
  margin: 0 0 0.5rem;
  font-family: "Sora", system-ui, sans-serif;
  font-size: clamp(4.5rem, 18vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #20344c;
}
.err-code span {
  display: inline-block;
  color: #FA7A35;
  transform: translateY(0.02em);
}

.err-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FA7A35;
}

.err-title {
  margin: 0 0 0.75rem;
  font-family: "Sora", system-ui, sans-serif;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #20344c;
}

.err-lede {
  margin: 0 auto 1rem;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #555555;
}
.err-lede strong {
  color: #20344c;
  font-weight: 600;
}
.err-lede + .err-lede {
  margin-top: 0;
}

.err-link-inline {
  color: #FA7A35;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 122, 53, 0.4);
  transition: border-color 0.18s ease;
}
.err-link-inline:hover {
  border-color: #FA7A35;
}

.err-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.err-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0 1.5rem;
  border: none;
  border-radius: 14px;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
}
.err-btn:active {
  transform: translateY(1px);
}
.err-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(250, 122, 53, 0.28);
}

.err-btn--primary {
  background: #FA7A35;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(250, 122, 53, 0.6);
}
.err-btn--primary:hover {
  background: #e06600;
}

.err-btn--ghost {
  background: transparent;
  color: #20344c;
  border: 1.5px solid #dddddd;
}
.err-btn--ghost:hover {
  border-color: #20344c;
  background: rgba(32, 52, 76, 0.03);
}

@keyframes err-card-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}