/* Frontier Siege — shared site styles.
   Hover states live here because inline styles can't express :hover, which is what the
   design's style-hover attributes meant. */

@font-face { font-family: 'Saira'; src: url('fonts/Saira-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Saira'; src: url('fonts/Saira-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('fonts/Saira_Condensed-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono%5Bwght%5D.ttf') format('truetype'); font-weight: 100 800; font-display: swap; }

/* Must come before any rule that sets display on a hidden element: a plain `display:flex`
   out-specifies the [hidden] attribute's UA style, which would leave hidden nodes visible. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; background: #05080f; color: #cfe3f2; font-family: 'Saira', sans-serif; }
a { color: #4fd1ff; text-decoration: none; }
a:hover { color: #a5e8ff; }
::selection { background: rgba(79,209,255,.3); }
img { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Nav + footer link rows (were style-hover attributes in the design source) */
.navlinks, .footlinks { display: flex; align-items: center; gap: 28px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .12em; }
.footlinks { gap: 24px; letter-spacing: .1em; }
.navlinks a { color: #8fb3cc; }
.navlinks a:hover, .navlinks a.current { color: #4fd1ff; }
.navlinks a.current { cursor: default; }
.navlinks a.nav-cta { color: #4fd1ff; border: 1px solid rgba(79,209,255,.45); padding: 6px 14px; }
.navlinks a.nav-cta:hover { background: rgba(79,209,255,.12); }

/* Focus visibility — keyboard users need to see where they are */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #4fd1ff; outline-offset: 2px;
}

/* ---- Download CTA (replaced the pre-launch "coming soon" line, 2026-08-21) ---- */
.store-badge { display: inline-block; margin-top: 16px; }
.store-badge img {
  width: 190px; height: auto; display: block;
  filter: drop-shadow(0 0 18px rgba(79,209,255,.2));
  transition: transform .15s ease, filter .15s ease;
}
.store-badge:hover img { transform: translateY(-1px); filter: drop-shadow(0 0 26px rgba(79,209,255,.45)); }
.store-note {
  margin: 2px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: #8fb3cc; letter-spacing: .06em;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Card link hover (support page's direct-channel panel) */
.card-link:hover { background: rgba(14,28,48,.95) !important; }

@media (max-width: 640px) {
  .navlinks { font-size: 11px; }
  /* The logo already links home; dropping HOME lets SUPPORT/PRIVACY/TERMS fit, and wrapping
     is the backstop on the narrowest phones. */
  .navlinks .nav-home { display: none; }
  .navlinks { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; gap: 14px; }
  nav { padding: 14px 20px !important; }
  section, main { padding-left: 20px !important; padding-right: 20px !important; }
  footer { padding: 32px 20px !important; }
  .footlinks { flex-wrap: wrap; row-gap: 10px; }
}

/* The home page's in-page section links don't fit beside the logo below ~900px (seven links
   measured 894px at tablet width, ~700px on a phone); visitors scroll the one-page home instead,
   so keep only SUPPORT and DOWNLOAD. */
@media (max-width: 900px) {
  .navlinks a[href^="#"] { display: none; }
}