/* SPACE IMPACT front page (Claude, 2026-10-13). Loaded after entry/styles.css; keeps the cyan pixel
   identity. Same-origin only (the account server's CSP allows 'self' styles; no inline styles). */
.landing-page { --cyan: #54e4f5; --gold: #ffc266; --void: #b77cff; background: #02060c; }
.site-header { position: sticky; top: 0; z-index: 10; align-items: center; padding: 12px 28px; background: #030a10e6; backdrop-filter: blur(6px); }
.site-header .brand { display: inline-flex; align-items: center; gap: 10px; color: #e8fbff; letter-spacing: 0; font-weight: 800; }
.site-header .brand img { width: 30px; height: 30px; image-rendering: pixelated; }
.site-header .brand b { color: var(--cyan); }
.site-header nav { display: flex; gap: 22px; margin-left: auto; margin-right: 18px; font-size: 14px; font-weight: 600; }
.site-header nav a { color: #cfe6ef; text-decoration: none; }
.site-header nav a:hover { color: var(--cyan); }

/* Hero: a live, self-playing fight behind the headline. */
.landing-page .hero { position: relative; overflow: hidden; min-height: 620px; height: calc(100svh - 180px); max-height: 760px; padding: 56px 7%; background: #02060c; display: flex; align-items: center; }
.landing-page .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #02060cf2 0%, #02060cb3 38%, #02060c10 70%), linear-gradient(0deg, #02060c 0%, #02060c00 22%); }
#hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.landing-page .hero-copy { position: relative; z-index: 2; max-width: 600px; }
.landing-page .eyebrow { letter-spacing: 0; }
.logo { margin: 10px 0 14px; font-size: 112px; line-height: .9; font-weight: 900; font-style: italic; letter-spacing: 0; text-transform: uppercase; color: #eafcff;
  text-shadow: 0 0 22px #54e4f566, 0 4px 0 #0b3a4a; }
.logo span { display: block; padding-left: .32em; color: transparent; background: linear-gradient(180deg, #a8f6ff 0%, #54e4f5 48%, #1aa3c4 100%); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 18px #54e4f580) drop-shadow(0 4px 0 #0b3a4a); }
.landing-page .intro { font-size: 30px; font-weight: 700; margin: 0 0 10px; }
.landing-page .intro em { font-style: normal; color: var(--void); text-shadow: 0 0 16px #b77cff88; }
.landing-page .description { font-size: 17px; max-width: 540px; }
.landing-page .actions button, .landing-page .actions .button { min-height: 52px; font-size: 15px; }
#connect { padding-inline: 30px; }
.get-wallet { margin: 10px 0 0; font-size: 14px; color: #d2e5ef; }
.get-wallet a { font-weight: 700; color: var(--void); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.hero-stats li { padding: 6px 12px; border: 1px solid #54e4f540; background: #04121bcc; font-size: 13px; color: #bcd3dd; }
.hero-stats b { color: var(--cyan); font-size: 16px; margin-right: 4px; }

/* Feature pillars */
.pillars, .steps { padding: 72px 7%; border-top: 1px solid #1b3a4a; }
.pillars h2, .steps h2 { font-size: 40px; margin: 8px 0 30px; }
.pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pillar { position: relative; padding: 22px 22px 20px; background: linear-gradient(180deg, #0a1923, #050d14); border: 1px solid #1e4152; transition: transform .2s, border-color .2s; }
.pillar:hover { transform: translateY(-3px); border-color: var(--cyan); }
.pillar img { width: 40px; height: 40px; image-rendering: pixelated; object-fit: contain; }
.pillar h3 { margin: 12px 0 8px; font-size: 19px; }
.pillar p { margin: 0; color: #b8ccd6; line-height: 1.6; font-size: 15px; }
.pillar b { color: #e8fbff; }
.pillar.is-gold { border-color: #ffc26680; background: linear-gradient(180deg, #1d1708, #0a0d10); }
.pillar.is-gold h3 { color: var(--gold); }
.pillar.is-void { border-color: #b77cff80; background: linear-gradient(180deg, #170c26, #08060f); }
.pillar.is-void h3 { color: #d3b0ff; }

/* Launch steps */
.steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.steps li { padding: 22px; border: 1px solid #1e4152; background: #050d14; display: grid; align-content: start; gap: 6px; }
.steps li > span { width: 38px; height: 38px; display: grid; place-items: center; font-weight: 900; font-size: 18px; color: #02060c; background: var(--cyan); }
.steps h3 { margin: 8px 0 0; font-size: 19px; }
.steps p { margin: 0 0 12px; color: #b8ccd6; line-height: 1.55; }
.steps .button { justify-self: start; }
.landing-page footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.wallet-links { font-size: 14px; }
.landing-page #hub { padding-top: 24px; }

@media (prefers-reduced-motion: reduce) { .pillar { transition: none; } }
@media (max-width: 900px) { .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps ol { grid-template-columns: 1fr; } .landing-page .hero::before { background: linear-gradient(0deg, #02060cf5 0%, #02060cb8 55%, #02060c40 100%); } .landing-page .hero { align-items: flex-end; } }
@media (max-width: 600px) {
  .logo { font-size: 54px; } .landing-page .intro { font-size: 24px; } .pillars h2, .steps h2 { font-size: 28px; }
  .site-header { padding: 10px 16px; } .site-header nav { display: none; } .sandbox { font-size: 10px; }
  .landing-page .hero { padding: 28px 18px 32px; min-height: 640px; height: auto; max-height: none; }
  .landing-page .description { font-size: 15px; }
  .landing-page .actions { display: grid; grid-template-columns: 1fr; } .landing-page .actions .button, .landing-page .actions button { width: 100%; }
  .pillars, .steps { padding: 44px 18px; } .pillar-grid { grid-template-columns: 1fr; }
}

/* Command Hub start options and terms dialog (Claude, 2026-10-14). */
.hub-lede { color: #b9d3db; line-height: 1.55; max-width: 720px; }
.start-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 18px 0; }
.start-option { min-width: 0; padding: 18px; border: 1px solid #285268; background: #06121bcc; }
.start-option.is-gold { border-color: var(--gold); box-shadow: 0 0 24px #ffc26622; }
.start-option h2 { margin: 4px 0 10px; font-size: 20px; }
.start-option.is-gold h2 { color: var(--gold); }
.start-option ul { margin: 0 0 12px; padding-left: 1.2em; line-height: 1.55; color: #cfe6ec; }
.start-option .button, .start-option button { width: 100%; margin-top: 8px; }
.option-status { color: var(--gold); min-height: 20px; }
.genesis-tiers { width: 100%; border-collapse: collapse; font-size: 13px; }
.genesis-tiers th, .genesis-tiers td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #285268; }
.genesis-tiers th { color: #8fb3bd; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.genesis-tiers td:nth-child(3) { color: var(--gold); font-weight: 700; }
.start-option .table-wrap { overflow-x: auto; }
.start-option .fine a, .hub-sampler a { color: var(--cyan); }
.hub-pending:empty { display: none; }
.hub-account { border-top: 1px solid #285268; padding: 10px 0; }
.hub-account summary { cursor: pointer; color: var(--cyan); min-height: 32px; }
.hub-sampler { color: #b9d3db; }
#terms-dialog { width: 620px; max-height: calc(100vh - 32px); overflow-y: auto; }
.terms-lede { line-height: 1.5; }
.terms-list { padding-left: 1.3em; line-height: 1.5; font-size: 14px; }
.terms-list li { margin: 8px 0; }
.terms-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-weight: 700; cursor: pointer; }
.terms-check input { width: 20px; height: 20px; margin: 0; flex: none; }
.terms-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.terms-actions button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 720px) { .start-options { grid-template-columns: minmax(0, 1fr); } .terms-actions button { flex: 1; } }
/* Referral notice (Oct17): stated plainly before sign-in */
.referral-note { display: grid; gap: 4px; margin: 10px 0; padding: 10px 12px; border: 1px solid #ffb35c; border-radius: 8px; background: #1d1408e6; color: #ffe2b8; font-size: 13.5px; line-height: 1.4; max-width: 560px; }
.referral-note b { color: #ffcf7a; }
/* Activation screen v2 (Claude, Oct17): steps, compare table, Starter beside Genesis. */
.hub-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 6px 0 14px; flex-wrap: wrap; }
.hub-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid #285268; color: #8fb3bd; font-size: 13px; font-weight: 700; }
.hub-steps li b { width: 22px; height: 22px; display: grid; place-items: center; background: #11303f; color: #cfe6ec; font-size: 12px; }
.hub-steps li.is-done { color: #7fe3b0; border-color: #2f6b52; } .hub-steps li.is-done b { background: #2f6b52; color: #eafff4; }
.hub-steps li.is-now { color: #e8fbff; border-color: var(--cyan); box-shadow: 0 0 14px #54e4f533; } .hub-steps li.is-now b { background: var(--cyan); color: #02060c; }
.hub-compare { display: grid; margin: 14px 0 18px; border: 1px solid #285268; font-size: 13.5px; }
.hub-compare > div { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.4fr); border-top: 1px solid #1b3a4a; }
.hub-compare > div:first-child { border-top: 0; }
.hub-compare span { padding: 8px 10px; color: #cfe6ec; line-height: 1.4; }
.hub-compare span:first-child { color: #8fb3bd; font-weight: 700; }
.hub-compare-head span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8fb3bd; font-weight: 800; }
.hub-compare-head .is-gold, .hub-compare span:last-child b { color: var(--gold); }
.hub-checkout { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.hub-checkout > #starter-checkout { margin: 0; }
.hub-checkout > #launch-pack-section { margin: 0; border: 1px solid var(--gold); box-shadow: 0 0 22px #ffc26618; padding: 14px; }
.choice-kicker { margin: 0 0 4px; font-size: 11px; letter-spacing: .12em; color: var(--cyan); font-weight: 800; }
.choice-list { margin: 8px 0 0; padding-left: 1.1em; color: #cfe6ec; line-height: 1.55; font-size: 13.5px; }
#starter-checkout .checkout-row { display: grid; gap: 12px; }
#starter-checkout .checkout-primary { width: 100%; }
@media (max-width: 900px) { .hub-checkout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .hub-compare > div { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); } .hub-compare span { padding: 6px; font-size: 12px; } }
/* Easy login (Oct17): last-used wallet tag and install / open-in-wallet links. */
.wallet-last { margin-left: auto; padding: 2px 6px; border: 1px solid var(--cyan); color: var(--cyan); font-size: 11px; font-weight: 800; }
.wallet-install { display: grid; gap: 8px; margin: 6px 0; }
.wallet-install .button { text-align: center; }
/* Epoch 0 note (Oct17) */
.event-note { max-width: 560px; margin: 10px 0; padding: 10px 12px; border: 1px solid #8a6a2f; border-radius: 4px; background: #2a200bcc; color: #ffd27a; font-size: 14px; line-height: 1.45; }