:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0e0b1a;
  color: #f4f1ff;
}

* { box-sizing: border-box; }

body { margin: 0; line-height: 1.65; }

a { color: #c6f432; }

.wrap { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

header { border-bottom: 1px solid #2a2244; }

nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.2rem; }

.brand { color: #f4f1ff; font-size: 1.2rem; font-weight: 800; text-decoration: none; letter-spacing: -.03em; }

/* The app icon's Neon pop mark: lime, pink and violet frames with a play mark (Theme.swift LogoMark). */
.brand::before { content: ""; display: inline-block; width: 2rem; height: 2rem; margin-right: .65rem; border-radius: .55rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23140F24'/%3E%3Crect x='23.65' y='10.85' width='29.5' height='29.5' rx='6.4' fill='%23C6F432'/%3E%3Crect x='17.25' y='17.25' width='29.5' height='29.5' rx='6.4' fill='%23FF4D9D'/%3E%3Crect x='10.85' y='23.65' width='29.5' height='29.5' rx='6.4' fill='%238B5CF6'/%3E%3Cpath d='M21.5 32.3v12.2l10.9-6.1z' fill='%23fff'/%3E%3C/svg%3E") center / cover no-repeat; vertical-align: middle; }

.links { display: flex; gap: 1.1rem; flex-wrap: wrap; }

.links a { color: #a8a2c8; text-decoration: none; }

.links a:hover, .links a:focus-visible { color: #c6f432; text-decoration: underline; }

main { padding-block: 4rem 5rem; }

h1, h2 { line-height: 1.15; letter-spacing: -.035em; }

h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); margin: 0 0 1.25rem; }

h2 { font-size: 1.35rem; margin: 2.4rem 0 .65rem; }

p, li { color: #cdc8e4; }

.lead { font-size: 1.2rem; max-width: 44rem; }

.eyebrow { color: #ff6fb1; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; }

.card { background: #1c1730; border: 1px solid #2a2244; border-radius: 1.25rem; padding: 1.5rem; margin-block: 2rem; }

.card h2 { margin-top: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-block: 2rem; }

.grid .card { margin-block: 0; }

.button { display: inline-block; background: #c6f432; color: #1e2a05; font-weight: 800; text-decoration: none; border-radius: 999px; padding: .75rem 1.25rem; }

.button:hover, .button:focus-visible { background: #d6fa6a; }

footer { border-top: 1px solid #2a2244; padding-block: 1.5rem; color: #a8a2c8; font-size: .9rem; }

footer .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 480px) {
  nav { align-items: flex-start; flex-direction: column; }
  main { padding-block: 3rem 4rem; }
}