@font-face {
  font-family: Montserrat;
  src: url('/assets/fonts/montserrat.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Archivo;
  src: url('/assets/fonts/archivo.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  background: #010033;
  --brand-orange: #ff6341;
  --brand-white: #f3fdff;
}
* { box-sizing: border-box; }
body { margin: 0; }
main {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  background: #010033 url('/assets/pond.png') center / cover no-repeat;
}
.brand-heading { margin: 0; line-height: 0; }
.logo {
  display: block;
  width: min(28vw, 540px);
  height: auto;
  animation: arrival 1.2s cubic-bezier(.22, 1, .36, 1) both;
}
.landing-header, .legal-links {
  position: absolute;
  padding: 0 24px;
  width: 100%;
  max-width: 1440px;
  left: 50%;
  transform: translateX(-50%);
  font: 400 11px/1.6 Montserrat, sans-serif;
  letter-spacing: .025em;
}
.landing-header {
  top: max(28px, env(safe-area-inset-top));
  display: flex;
  justify-content: flex-end;
}
.legal-links {
  bottom: max(28px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.copyright { margin: 0; }
.legal-links nav {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.access-link, .legal-links a { color: #a5afc4; text-decoration: none; }
.access-link:hover, .legal-links a:hover { color: var(--brand-white); }
.access-link:focus-visible, .legal-links a:focus-visible { outline: 1px solid var(--brand-orange); outline-offset: 5px; }
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px;
  color: var(--brand-white);
  font: 400 15px/1.7 Montserrat, sans-serif;
}
.legal-page h1 {
  font-family: Archivo, sans-serif;
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
}
.legal-page a { color: var(--brand-white); }
html:has(.editorial-error) { background: #fff; color-scheme: light; }
.editorial-error { min-height: 100svh; color-scheme: light; background: #fff; color: #14162f; font: 400 14px/1.7 Montserrat, sans-serif; }
.error-header { padding: 28px 24px; text-align: center; border-bottom: 1px solid #dbe3e9; }
.error-header img { display: block; margin: auto; height: auto; }
.editorial-error .error-page { min-height: calc(100svh - 190px); background: #fff; padding: 48px 24px; }
.error-content { width: min(100%, 1000px); padding: 32px 24px; text-align: center; }
.error-code { font: 600 10px/1.5 Archivo, sans-serif; letter-spacing: .16em; color: #ff6341; }
.editorial-error h1 { font: 500 clamp(36px, 5vw, 60px)/1.15 Archivo, sans-serif; color: #010033; text-transform: uppercase; margin: 20px 0; }
.error-description { color: #6f7687; }
.error-illustration { display: block; width: 280px; max-width: 100%; height: auto; margin: 24px auto 32px; }
.error-home, .brand-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: #ff6341; color: #fff; box-shadow: 0 8px 20px #ff63412e; text-decoration: none; font: 600 10px/1.5 Archivo, sans-serif; letter-spacing: .04em; text-transform: uppercase; transition: transform .2s; }
.error-home:hover, .brand-button:hover { transform: translateY(-1px); }
.error-home:focus-visible, .brand-button:focus-visible { outline: 2px solid #010033; outline-offset: 4px; }
.error-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; width: 100%; max-width: 1440px; margin-inline: auto; padding: 24px; font: 400 11px/1.6 Montserrat, sans-serif; color: #6f7687; }
.error-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 28px; }
.access-link, .legal-links a, .error-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.access-link { min-width: 44px; justify-content: flex-end; }
.legal-links .copyright { color: #a5afc4; }
.error-footer a:focus-visible { outline: 2px solid #010033; outline-offset: 4px; }
.error-footer a { color: #6f7687; text-decoration: none; }
.error-footer a:hover { color: #010033; }
.policy-page { display: block; min-height: calc(100svh - 190px); background: #fff; padding: 64px 24px; }
.policy-content { width: 100%; max-width: 720px; min-width: 0; margin: auto; }
.policy-content h1 { font-size: clamp(26px, 4vw, 36px); }
.policy-content > p:not(.error-code) { color: #6f7687; margin-bottom: 32px; }
.policy-content h2 { font: 500 22px/1.4 Archivo, sans-serif; color: #010033; margin: 40px 0 16px; }
.policy-content a:not(.brand-button) { color: #010033; text-underline-offset: 3px; }
.policy-content p, .policy-content li, .policy-content td { overflow-wrap: anywhere; }
.policy-content ul { padding-left: 24px; margin-bottom: 32px; }
.policy-content li + li { margin-top: 12px; }
.policy-content .policy-updated { font-size: 12px; }
.policy-table { overflow-x: auto; margin: 24px 0 32px; }
.policy-table:focus-visible { outline: 2px solid #010033; outline-offset: 4px; }
.policy-table table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 13px; text-align: left; }
.policy-table th, .policy-table td { padding: 14px 16px; border-bottom: 1px solid #dbe3e9; vertical-align: top; }
.policy-table th { font-family: Archivo, sans-serif; color: #010033; background: #f7f8fa; }
.policy-table td { color: #6f7687; }
@media (max-width: 1000px) {
  .legal-links, .error-footer { flex-direction: column; text-align: center; gap: 8px; }
  .legal-links nav, .error-footer nav { justify-content: center; }
}
@keyframes arrival {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}
@media (max-width: 600px) {
  .logo { width: 56vw; }
  .legal-links nav, .error-footer nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    width: 100%;
    max-width: 400px;
  }
  .legal-links nav a, .error-footer nav a { justify-content: center; }
  .landing-header, .legal-links, .error-footer { padding-left: 16px; padding-right: 16px; }
  .landing-header { top: max(16px, env(safe-area-inset-top)); }
  .legal-links { bottom: max(16px, env(safe-area-inset-bottom)); }
  .policy-page { padding: 40px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo { animation: none; }
}
