/* GRIDEXA — the game's own palette, read from Gridexa/DesignSystem/GridexaColors.swift
   so the site and the app are one thing rather than two that resemble each other. */
:root {
  --bg:        #10121a;
  --surface:   #16181e;
  --raised:    #202429;
  --line:      #2e3340;
  --accent:    #66fff2;
  --accent-dim:#40a6a1;
  --text:      #f2f5f7;
  --muted:     #98a0ad;
  --gutter:    20px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* The light comes from above, as it does on every screen in the game. */
  background-image:
    radial-gradient(90% 55% at 50% -10%, rgba(102,255,242,0.10), transparent 70%),
    linear-gradient(180deg, #121722 0%, var(--bg) 42%);
  background-repeat: no-repeat;
  min-height: 100vh;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter) 80px; }

header { padding: 56px 0 8px; text-align: center; }

.mark { width: 60px; height: 60px; }

h1 {
  font-size: clamp(30px, 7vw, 44px);
  letter-spacing: 0.14em;
  font-weight: 600;
  margin: 18px 0 4px;
}
h1 .x { color: var(--accent); }

.tagline {
  color: var(--muted);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-size: 12px;
  margin: 0 0 34px;
}

h2 {
  font-size: 20px;
  margin: 40px 0 12px;
  letter-spacing: 0.01em;
}

h3 { font-size: 16px; margin: 26px 0 6px; color: var(--accent); }

p { margin: 0 0 14px; }

a { color: var(--accent); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  margin: 18px 0;
}

.card.lit { border-color: rgba(102,255,242,0.5); }

ul { margin: 0 0 14px; padding-left: 20px; }
li { margin: 7px 0; }

.promise { list-style: none; padding: 0; }
.promise li { position: relative; padding-left: 28px; }
.promise li::before {
  content: "";
  position: absolute; left: 4px; top: 10px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(102,255,242,0.75);
}

.muted { color: var(--muted); }
.small { font-size: 14px; }

nav { margin: 34px 0 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
nav a {
  display: inline-block;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  min-height: 44px;           /* the same touch floor the game uses */
  line-height: 22px;
}
nav a:hover, nav a:focus { border-color: var(--accent); color: var(--accent); }

footer {
  margin-top: 56px; padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px; text-align: center;
}

table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 15px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }

code { background: var(--raised); padding: 2px 6px; border-radius: 6px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }