/* HLauncher's look over the shared site.css: the launcher's teal on a dark slate (the mark's own colours), same
   spacing, type and components as the Cogito pages so the account page works unchanged. */
:root {
  --ground: #0b1a21;
  --panel: #12262f;
  --panel-raised: #18323d;
  --panel-edge: #050d11;
  --gold: #7ccfc4;
  --gold-bright: #a8ece3;
  --text: #e8f4f2;
  --muted: #a9c3bf;
  --accent: #7ccfc4;
}
body { background: radial-gradient(ellipse 90% 520px at 50% 0, rgba(124, 207, 196, 0.10), transparent 70%) no-repeat, var(--ground); }
.brand img { image-rendering: auto; }
img.mark { display: block; margin: 0 auto var(--space-m); width: 96px; height: 96px; }

.hl-hero { text-align: center; padding: var(--space-xxl) 0 var(--space-xl); }
.hl-hero img { width: 128px; height: 128px; }
.hl-hero h1 { font-size: clamp(40px, 8vw, 64px); margin: var(--space-m) 0 var(--space-s); }
.hl-hero p.lead { color: var(--muted); max-width: 36em; margin: 0 auto var(--space-xl); }
.hl-hero .button { font-size: 20px; padding: var(--space-m) var(--space-xl); }
.hl-hero .note { margin-top: var(--space-m); }

.hl-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); max-width: 760px; margin: 0 auto var(--space-xxl); }
.hl-games .card { text-align: center; }
.hl-games img { width: 72px; height: 72px; image-rendering: pixelated; }
.hl-games h2 { margin: var(--space-s) 0; font-size: 28px; }
.hl-games p { color: var(--muted); margin: 0 0 var(--space-m); }
@media (max-width: 640px) { .hl-games { grid-template-columns: 1fr; } }
.hl-foot { text-align: center; padding-bottom: var(--space-xl); }