/* Standalone error screens: no dependency on a client theme or Tailwind CDN. */
.error-page { position: fixed; inset: 0; z-index: 1000; overflow: auto; background: #001127; color: #f4f6fc; color-scheme: dark; font: 400 clamp(16px, 1.35vw, 30px)/1.5 Inter, Arial, sans-serif; }
.error-page *, .error-page *::before, .error-page *::after { box-sizing: border-box; }
.error-404 { --error-desktop: url('../images/errors/404-desktop.png'); --error-mobile: url('../images/errors/404-mobile.png'); }
.error-500 { --error-desktop: url('../images/errors/500-desktop.png'); --error-mobile: url('../images/errors/500-mobile.png'); }
.error-canvas { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 65% 35%; background: #001127 var(--error-desktop) left center / cover no-repeat; }
.error-logo { position: absolute; top: 4.5%; left: 2.5%; width: 9%; height: auto; object-fit: contain; }
.error-500 .error-logo { left: 6.5%; width: 10%; }
@media (min-width: 1200px) {
    .error-404:not(.error-mobile) .error-canvas { grid-template-columns: 71% 29%; }
    .error-404:not(.error-mobile) .error-copy h1 { font-size: 3em; }
}
.error-copy { grid-column: 2; align-self: center; min-width: 0; padding: 5em 1.8em 7em .8em; }
.error-eyebrow { margin: 0 0 2em; text-transform: uppercase; letter-spacing: .34em; font-size: .65em; color: #d6dceb; }
.error-404 .error-eyebrow::after { content: ''; display: block; width: 3em; height: 2px; margin-top: .9em; background: #007aff; }
.error-copy h1 { margin: 0 0 .35em; font-size: 2.65em; font-weight: 750; letter-spacing: -.035em; line-height: 1.1; color: #f4f6fc; background: linear-gradient(150deg, #fff 10%, #f4f6fc 50%, #aebcd4); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.error-copy h1:focus { outline: none; }
.error-accent { background: linear-gradient(105deg, #00c5f7, #008aff 65%, #0064ed); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.error-period { -webkit-text-fill-color: #94b3e5; }
.error-description { margin: 1em 0 2em; color: #c4cce0; font-size: 1.08em; line-height: 1.4; }
.error-primary { display: flex; align-items: center; justify-content: center; gap: 1.2em; width: fit-content; max-width: 100%; min-height: 48px; padding: .85em 1.5em; border: 1px solid #147aff; border-radius: .2em; background: linear-gradient(110deg, #004fff, #0877ff); box-shadow: 0 0 1.5em #005cff22; color: #fff; font: inherit; font-size: .9em; font-weight: 600; cursor: pointer; }
.error-primary:hover { background: #157cff; }
.error-primary span { font-size: 1.4em; line-height: 1; }
.error-primary .error-retry-icon { font-size: 1.9em; }
.error-secondary { display: block; width: fit-content; max-width: 100%; min-height: 44px; margin-top: 1em; padding: .3em 0; border: 0; border-bottom: 1px solid #1685ec; background: none; color: #d2daeb; font: inherit; font-size: .82em; cursor: pointer; }
.error-secondary span { margin-left: .8em; }
.error-footer { position: absolute; bottom: 7%; right: 4%; max-width: 32%; display: flex; align-items: center; gap: 1.4em; font-size: .6em; letter-spacing: .2em; color: #bac5db; }
.error-footer::before { content: ''; width: 4em; height: 1px; flex: none; background: #1685ec; }
.error-500 .error-footer::before { background: #9dacbf; }
.error-page button:focus-visible { outline: 3px solid #b7dcff; outline-offset: 5px; }
@media (forced-colors: active) { .error-copy h1, .error-accent, .error-period { background: none; -webkit-text-fill-color: CanvasText; } }

.error-page.error-mobile { font-size: clamp(16px, 3.4vw, 29px); }
.error-page.error-mobile .error-canvas { display: block; width: 100%; max-width: 852px; margin: 0 auto; min-height: 100dvh; padding-top: min(119vw, 1014px); background-image: var(--error-mobile); background-size: 100% auto; background-position: center top; }
.error-page.error-mobile .error-logo { top: min(6vw, 52px); left: 39%; width: 22%; }
.error-page.error-mobile .error-copy { padding: 1em 5% 0; text-align: center; }
.error-page.error-mobile .error-eyebrow { font-size: .75em; margin-bottom: 1.5em; }
.error-page.error-mobile .error-eyebrow::after { margin-inline: auto; }
.error-page.error-mobile .error-copy h1 { font-size: 2.6em; }
.error-page.error-mobile .error-description { font-size: 1.1em; margin: 1em 0 1.5em; }
.error-page.error-mobile .error-primary { width: 78%; margin-inline: auto; min-height: 50px; padding: .8em .7em; font-size: 1em; }
.error-page.error-mobile .error-secondary { margin: 1em auto 0; font-size: 1em; }
.error-page.error-mobile .error-footer { position: static; max-width: none; justify-content: center; flex-wrap: wrap; margin: 3em 5% 0; padding-bottom: max(3em, env(safe-area-inset-bottom)); font-size: .7em; text-align: center; }
.error-page.error-mobile .error-footer::before { width: 3em; }

@media (max-width: 900px) {

.error-page { font-size: clamp(16px, 3.4vw, 29px); }
.error-page .error-canvas { display: block; width: 100%; max-width: 852px; margin: 0 auto; min-height: 100dvh; padding-top: min(119vw, 1014px); background-image: var(--error-mobile); background-size: 100% auto; background-position: center top; }
.error-page .error-logo { top: min(6vw, 52px); left: 39%; width: 22%; }
.error-page .error-copy { padding: 1em 5% 0; text-align: center; }
.error-page .error-eyebrow { font-size: .75em; margin-bottom: 1.5em; }
.error-page .error-eyebrow::after { margin-inline: auto; }
.error-page .error-copy h1 { font-size: 2.6em; }
.error-page .error-description { font-size: 1.1em; margin: 1em 0 1.5em; }
.error-page .error-primary { width: 78%; margin-inline: auto; min-height: 50px; padding: .8em .7em; font-size: 1em; }
.error-page .error-secondary { margin: 1em auto 0; font-size: 1em; }
.error-page .error-footer { position: static; max-width: none; justify-content: center; flex-wrap: wrap; margin: 3em 5% 0; padding-bottom: max(3em, env(safe-area-inset-bottom)); font-size: .7em; text-align: center; }
.error-page .error-footer::before { width: 3em; }

}