/* inner-pages.css — P-palette for inner marketing pages.
   Scoped to body.sp so it never touches index.html or the app. */

/* ── Base ────────────────────────────────────────────────────────────────── */
body.sp {
  background: #0b1840;
  color: #cdd8f2;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body.sp::before { display: none; }

/* ── Nav + footer (mirrors body.lpp in landing-p.css) ────────────────────── */
body.sp .navbar { background: rgba(7,13,30,0.9); border-bottom-color: rgba(91,141,239,0.22); }
body.sp .nav-logo,
body.sp .nav-logo span { color: #ffffff; }
body.sp .nav-links a { font-family: "Inter", sans-serif; color: #bcc3d4; }
body.sp .nav-links a:hover { color: #5b8def; }
body.sp .mobile-menu-btn { color: #ffffff; }
@media (max-width: 768px) {
  body.sp .nav-links { background: rgba(7,13,30,0.97); border-top-color: rgba(91,141,239,0.22); }
}
body.sp .footer { background: #070d1e; border-top-color: rgba(91,141,239,0.18); }
body.sp .footer-heading { font-family: "Fraunces", Georgia, serif; font-weight: 560; color: #9db4ff; }
body.sp .footer-links a { font-family: "Inter", sans-serif; color: #b3bbcf; }
body.sp .footer-links a:hover { color: #5b8def; }
body.sp .footer-tagline { color: #8089a0; font-family: "Inter", sans-serif; }
body.sp .footer-email { color: #5b8def; }
body.sp .footer-bottom p { color: #8089a0; }
body.sp .footer-logo,
body.sp .footer-logo span { color: #ffffff; }

/* ── Shared section headings ─────────────────────────────────────────────── */
body.sp .section-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 560;
  color: #eef2ff;
}
body.sp .section-title::after {
  display: none;
}
body.sp .section-subtitle { color: #a8b6e0; }

/* ── Hero strips (about, guidelines, contact) ────────────────────────────── */
body.sp .about-hero,
body.sp .contact-hero {
  background: linear-gradient(180deg, #0d1c4a 0%, #0b1840 100%);
  padding: 108px 0 52px;
}
body.sp .page-subtitle {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  color: #a8b6e0;
}

/* ── Content backgrounds ─────────────────────────────────────────────────── */
body.sp .about-content,
body.sp .contact-content { background: #0b1840; }

/* ── Intro + ethos + reasons cards ──────────────────────────────────────── */
body.sp .about-intro,
body.sp .reasons-section {
  background: transparent;
  border: none;
}
body.sp .about-text p { color: #a8b6e0; line-height: 1.78; }
body.sp .about-text strong { color: #eef2ff; }
body.sp .about-text a,
body.sp .about-content a,
body.sp .reasons-section a { color: #5b8def; }
body.sp .about-text a:hover,
body.sp .about-content a:hover,
body.sp .reasons-section a:hover { color: #9db4ff; text-decoration: none; }

/* ── Feature grid cards ──────────────────────────────────────────────────── */
body.sp .feature-card {
  background: rgba(91,141,239,0.06);
  border-color: rgba(91,141,239,0.22);
}
body.sp .feature-card::before { display: none; }
body.sp .feature-card:hover {
  border-color: #5b8def;
  box-shadow: 0 8px 32px rgba(91,141,239,0.18);
  transform: translateY(-5px) scale(1.01);
}
body.sp .feature-title { color: #9db4ff; }
body.sp .feature-description { color: #a8b6e0; }

/* ── Reasons / why-use list ──────────────────────────────────────────────── */
body.sp .reasons-list li { color: #a8b6e0; }
body.sp .reasons-list li::before { color: #5b8def; }
body.sp .reasons-list strong { color: #eef2ff; }

/* ── Tier ladder (guidelines) ────────────────────────────────────────────── */
body.sp .tier-ladder { list-style: decimal; padding-left: 1.6rem; }
body.sp .tier-ladder li {
  color: #a8b6e0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(91,141,239,0.14);
}
body.sp .tier-ladder li:last-child { border-bottom: 0; }
body.sp .tier-ladder li em { color: #7e93cf; }

/* ── FAQ (site.css .faq-* accordion on about page) ───────────────────────── */
body.sp .faq { background: #0b1840; }
body.sp .faq-item {
  background: rgba(91,141,239,0.06);
  border-color: rgba(91,141,239,0.22);
}
body.sp .faq-item:hover { border-color: #5b8def; transform: none; box-shadow: none; }
body.sp .faq-item.open { border-color: #5b8def; }
body.sp .faq-question h3 { color: #eef2ff; }
body.sp .faq-icon { color: #5b8def; }
body.sp .faq-answer { color: #a8b6e0; }

/* ── Avatar / attribution credit at foot of about page ──────────────────── */
body.sp .sp-page-h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  color: #a8b6e0;
  font-size: 2rem;
  letter-spacing: 0.02em;
  padding-top: 4rem;
  margin-bottom: 2.5rem;
}
body.sp .footer-credit { color: #b3c0d8; }
body.sp .footer-credit a { color: #b3c0d8; }
body.sp .footer-credit a:hover { color: #cdd8f2; }

/* ── Contact page copy ───────────────────────────────────────────────────── */
body.sp .contact-intro p { color: #a8b6e0; line-height: 1.78; }

/* ── Policy pages (terms, privacy) ──────────────────────────────────────── */
body.sp.policy-page { padding-top: 80px; }
body.sp.policy-page > .container { font-family: "Inter", sans-serif; }
body.sp.policy-page > .container h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 560;
  color: #eef2ff;
}
body.sp.policy-page > .container h2 {
  color: #9db4ff;
  border-bottom-color: rgba(91,141,239,0.22);
}
body.sp.policy-page > .container h3 { color: #eef2ff; }
body.sp.policy-page > .container p { color: #a8b6e0; }
body.sp.policy-page > .container a { color: #5b8def; text-decoration: underline; }
body.sp.policy-page > .container a:hover { color: #9db4ff; }
body.sp.policy-page > .container li { color: #a8b6e0; }
body.sp.policy-page > .container .meta { color: #7e93cf; }

/* ── App page ────────────────────────────────────────────────────────────── */
body.sp .app-hero { padding-top: 2.5rem; }
body.sp .app-hero::before {
  background:
    radial-gradient(760px 420px at 72% 16%, rgba(91,141,239,0.16), transparent 64%),
    radial-gradient(620px 380px at 18% 78%, rgba(91,141,239,0.08), transparent 66%);
}
body.sp .app-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 560;
}
body.sp .app-title .brand-word {
  font-family: "Saira Stencil One", Impact, system-ui, sans-serif;
  color: #eef2ff;
}
body.sp .app-lede { color: #a8b6e0; }
body.sp .app-device {
  background: linear-gradient(160deg, rgba(7,13,30,0.94), rgba(5,8,20,0.86));
  border-color: rgba(91,141,239,0.28);
  box-shadow: 0 28px 90px rgba(0,0,0,0.35), 0 0 52px rgba(91,141,239,0.14);
}
body.sp .app-device-screen {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 26%),
    linear-gradient(160deg, #0d1c4a, #070d1e);
  border-color: rgba(91,141,239,0.2);
}
body.sp .app-platform-card {
  background: rgba(91,141,239,0.06);
  border-color: rgba(91,141,239,0.22);
}
body.sp .app-platform-card h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 560;
  color: #eef2ff;
}
body.sp .app-platform-card p { color: #a8b6e0; }
body.sp .app-platform-meta { color: #7e93cf; }
body.sp .app-cta {
  background: #fbbf24;
  border-radius: 6px;
  color: #0a0b14;
}
body.sp .app-cta:hover { background: #f59e0b; color: #0a0b14; }
body.sp .app-cta.disabled {
  background: rgba(91,141,239,0.15);
  color: #6f80b8;
}
body.sp .app-feature {
  background: rgba(91,141,239,0.06);
  border-color: rgba(91,141,239,0.18);
}
body.sp .app-feature strong { color: #9db4ff; }
body.sp .app-feature span { color: #a8b6e0; }
body.sp .v2-btn-ghost {
  color: #cdd8f2;
  background: transparent;
  border-color: rgba(91,141,239,0.5);
}
body.sp .v2-btn-ghost:hover { border-color: #5b8def; color: #9db4ff; background: transparent; }

/* ── Games page ─────────────────────────────────────────────────────────── */
body.sp.games-page::before {
  background:
    radial-gradient(900px 600px at 75% 10%, rgba(91,141,239,0.18), transparent 65%),
    radial-gradient(700px 500px at 15% 80%, rgba(91,141,239,0.12), transparent 65%);
}
body.sp .games-h1 { font-family: "Fraunces", Georgia, serif; font-weight: 560; color: #eef2ff; }
body.sp .games-hero-sub { color: #a8b6e0; }
body.sp .games-mode-card {
  background: rgba(91,141,239,0.06);
  border-color: rgba(91,141,239,0.2);
}
body.sp .games-mode-card:hover { border-color: rgba(91,141,239,0.5); }
body.sp .games-mode-card h3 { color: #eef2ff; }
body.sp .games-mode-card p { color: #a8b6e0; }
body.sp .games-section-header h2 { font-family: "Fraunces", Georgia, serif; font-weight: 560; color: #eef2ff; }
body.sp .games-section-header p { color: #a8b6e0; }
body.sp .game-card {
  background: rgba(91,141,239,0.06);
  border-color: rgba(91,141,239,0.2);
}
body.sp .game-card::before {
  background: radial-gradient(60% 60% at 50% 0%, rgba(91,141,239,0.14), transparent 70%);
}
body.sp .game-card:hover {
  border-color: rgba(91,141,239,0.5);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(91,141,239,0.15);
}
body.sp .game-card-name { color: #eef2ff; }
body.sp .game-card-desc { color: #a8b6e0; }
body.sp .games-how { border-top: none; }
body.sp .games-how-steps::before { display: none; }
body.sp .games-how-step {
  background: rgba(91,141,239,0.06);
  border-color: rgba(91,141,239,0.18);
}
body.sp .games-how-step-num { background: linear-gradient(135deg, #5b8def, #9db4ff); }
body.sp .games-how-step h4 { color: #eef2ff; }
body.sp .games-how-step p { color: #a8b6e0; }
body.sp .games-final-card {
  background:
    radial-gradient(800px 400px at 80% 0%, rgba(91,141,239,0.2), transparent 65%),
    radial-gradient(600px 300px at 10% 100%, rgba(91,141,239,0.15), transparent 65%),
    linear-gradient(165deg, rgba(11,24,64,0.8), rgba(7,13,30,0.9));
  border-color: rgba(91,141,239,0.3);
}
body.sp .games-final-card h2 { font-family: "Fraunces", Georgia, serif; font-weight: 560; color: #eef2ff; }
body.sp .games-final-card p { color: #a8b6e0; }