:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; color: #f5f8fb; background: #02080e; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { min-height: 100svh; display: flex; flex-direction: column; background: linear-gradient(90deg, #02080ef5 0%, #02080eca 34%, #02080e52 65%, #02080eb8 100%), linear-gradient(0deg, #02080e 0%, transparent 65%), url('/images/axxe-night.webp') center center / cover no-repeat; }
.brand { display: flex; align-items: center; gap: 13px; padding: 17px 6vw; font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; background: #02080ed9; border-bottom: 1px solid #28333e; }
.brand-mark { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; }
.brand-caption { display: block; margin-top: 6px; font-size: 8px; letter-spacing: 1.8px; font-weight: 400; color: #adbcc9; }
.header-label { margin-left: auto; font-size: 10px; letter-spacing: 2px; color: #adbcc9; font-weight: 400; }
main { display: grid; grid-template-columns: 1.15fr 1fr; width: min(1160px, 88vw); margin: auto; gap: 8%; align-items: center; padding: 64px 0; }
.intro, .entry { min-width: 0; }
.eyebrow, .card-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 25px; color: #dce5ec; }
.eyebrow span { width: 6px; height: 6px; background: #e32934; }
h1 { font-size: clamp(40px, 4.5vw, 63px); line-height: 1.08; letter-spacing: -2.3px; font-weight: 700; text-transform: uppercase; margin: 0; }
h1 span { color: #e32934; }
.intro-copy { font-size: 15px; line-height: 1.8; color: #d0dbe4; margin: 25px 0 0; }
.entry-card { background: #07111df5; border: 1px solid #2a3846; border-top: 3px solid #e32934; border-radius: 8px; padding: 37px 32px 29px; box-shadow: 0 24px 64px #0005; }
.card-eyebrow { color: #b5c3cf; margin: 0 0 17px; font-size: 10px; }
h2 { margin: 0; font-size: 31px; line-height: 1.2; letter-spacing: -.8px; font-weight: 700; }
.entry-copy { font-size: 14px; line-height: 1.7; margin: 17px 0 27px; color: #c2ced9; }
button { width: 100%; padding: 14px; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.5; border: 1px solid #b9c2ca; border-radius: 4px; color: #53616c; background: #e3e7ea; cursor: not-allowed; }
.google-mark { font-size: 19px; font-weight: 700; }
.sign-in { width: 100%; padding: 14px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; font-weight: 600; line-height: 1.5; border: 1px solid #b9c2ca; border-radius: 4px; color: #17212b; background: #f5f8fb; text-decoration: none; }
.sign-in:focus-visible, button:focus-visible { outline: 3px solid #e32934; outline-offset: 4px; }
button:not(:disabled) { cursor: pointer; color: #17212b; }
.setup-note { display: flex; gap: 10px; margin-top: 19px; padding: 13px 0; color: #c4ced7; }
.status-dot { flex: 0 0 6px; height: 6px; border-radius: 50%; background: #d8ab68; margin-top: 5px; }
.setup-note strong { display: block; font-size: 12px; font-weight: 600; color: #e2bc87; }
.setup-note p { margin: 5px 0 0; font-size: 12px; line-height: 1.6; }
.access-note { padding-top: 19px; margin-top: 11px; border-top: 1px solid #293644; color: #a8b7c5; }
.access-note p { margin: 0; font-size: 11px; line-height: 1.7; }
.preview-label { text-align: center; margin: 17px 0 0; color: #b2c0cd; font-size: 9px; letter-spacing: 1.3px; line-height: 1.6; }
footer { display: flex; justify-content: space-between; padding: 22px 6vw; color: #adbbc8; font-size: 11px; border-top: 1px solid #26323e; background: #02080ed9; }
@media (max-width: 760px) {
  .shell { background: linear-gradient(180deg, #02080e9c 0%, #02080ed9 40%, #02080e 72%), url('/images/axxe-night.webp') 60% top / auto 600px no-repeat; }
  .brand { padding: 17px 6vw; font-size: 15px; }
  .brand-mark { width: 45px; height: 45px; }
  .brand-caption { font-size: 7px; letter-spacing: 1.4px; }
  .header-label { display: none; }
  main { grid-template-columns: 1fr; gap: 30px; max-width: 470px; padding: 34px 0; }
  .eyebrow { font-size: 9px; margin-bottom: 19px; }
  h1 { font-size: 38px; letter-spacing: -1.4px; }
  .intro-copy { font-size: 13px; margin-top: 18px; }
  .entry-card { padding: 28px 24px 24px; }
  h2 { font-size: 28px; }
}
@media (max-width: 360px) {
  h1 { font-size: 33px; }
  .entry-card { padding: 25px 19px 22px; }
  footer { font-size: 10px; gap: 16px; }
}