/* Basic styling inspired by modern game studio sites */
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#111;line-height:1.6;background:#fff}
a{color:#0a58ff;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.site-header{position:sticky;top:0;z-index:10;background:#1E203F;border-bottom:none}
.site-header .brand,
.site-header .brand span,
.site-header .main-nav a,
.site-header .nav-toggle{color:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:800;color:#111}
.logo{height:32px;width:auto}
.main-nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0;align-items:center}
.nav-toggle{display:none;background:transparent;border:0;font-size:1.25rem}
.nav-cta .btn{padding:.4rem .8rem;border-radius:999px;background:#0a58ff;color:#fff}
.hero{padding:5rem 0;background:linear-gradient(180deg,#f7f9fc, #ffffff)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero h1{font-size:3rem;margin:.2rem 0 1rem}
.lead{font-size:1.125rem;max-width:46ch}
.pill{font-size:.8rem;background:#ff3366;color:#fff;padding:.2rem .6rem;border-radius:999px;margin-left:.4rem}
.store-badges .store-badge{display:inline-block;margin-right:.5rem;padding:.5rem .75rem;border:1px solid #dcdcdc;border-radius:8px;color:#111}
.notify-form{display:flex;gap:.5rem;margin-top:1rem}
.notify-form input{flex:1;padding:.6rem .75rem;border:1px solid #d2d6dc;border-radius:8px}
.section{padding:4rem 0}
.section.alt{background:#fafafa}
.section-head h2{margin:0}
.section-head p{margin:.25rem 0 1.5rem;color:#555}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem}
.card{border:1px solid #e6e6e6;border-radius:12px;overflow:hidden;background:#fff}
.card-media{height:140px;background:radial-gradient(80% 80% at 50% 20%, #e9f0ff, #fff)}
.card-media.muted{filter:grayscale(0.6)}
.card-body{padding:1rem}
.chip{display:inline-block;background:#eef3ff;color:#0a58ff;border:1px solid #d8e4ff;padding:.2rem .5rem;border-radius:999px;font-size:.75rem}
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.news h3{margin:.2rem 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-grid .full{grid-column:1 / -1}
.contact-form input,.contact-form textarea{width:100%;padding:.6rem .75rem;border:1px solid #d2d6dc;border-radius:8px}
.btn{cursor:pointer;font-weight:700;border:none}
.btn-primary{background:#0a58ff;color:#fff;padding:.6rem 1rem;border-radius:8px}
.btn-link{color:#0a58ff}
.site-footer{background:#1E203F;color:#fff;padding:2rem 0;margin-top:2rem}
.site-footer a {color:#fff;text-decoration:none;}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-links{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.logo.small{height:24px}

/* Responsive */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
  .nav-toggle{display:block}
  #nav-links{display:none}
  #nav-links.open{display:flex;flex-direction:column;gap:.75rem;position:absolute;top:64px;right:1rem;background:#fff;border:1px solid #e6e6e6;border-radius:8px;padding:.75rem 1rem}
  .form-grid{grid-template-columns:1fr}
}

/* Style for top-level titles on legal pages */
.privacy h1,
.terms h1 {
  font-weight: 600;   /* Semi-bold instead of full bold (700) */
}

/* Headings underline only inside privacy/terms pages */
.privacy h2,
.terms h2 {
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  padding-bottom: 4px;
  margin-bottom: 1rem;
}

/* Embed mode overrides: used when ?embed=1 is set */
.embedded .site-header,
.embedded .site-footer {
  display: none !important;
}

.embedded main .container {
  max-width: 800px;
  padding-top: 1rem;
}

/* --- Fix mobile horizontal overflow in hero --- */

/* Prevent any child from forcing the hero wider than the viewport */
.hero { overflow-x: hidden; }

/* Grid items can overflow on small screens unless we allow them to shrink */
.hero-grid,
.hero-copy,
.hero-art,
.notify-form { min-width: 0; }

/* Make images/SVGs responsive */
.hero img,
.hero svg { 
  max-width: 100%;
  height: auto;
  display: block;
}

/* Inputs can also push width; allow them to shrink */
.notify-form input { min-width: 0; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2rem;
  align-items: center;
}

.hero-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Global type rhythm --- */
:root{
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  .75rem;
  --space-md:  1rem;
}

h1,h2,h3,h4,h5,h6{
  margin: 0 0 var(--space-sm);
  line-height: 1.2;
}

/* Default paragraph spacing */
p{
  margin: var(--space-xs) 0 var(--space-md);
}

/* When a paragraph follows a heading, reduce the gap */
h1 + p,
h2 + p,
h3 + p{
  margin-top: var(--space-xxs);
}

/* Lead copy gets the same tighter top margin */
p.lead{
  margin-top: var(--space-xxs);
}

/* --- Hero-specific tightening --- */
.hero-copy h1{ margin-bottom: .35rem; }  /* override big default */
.hero-copy .lead{ margin-top: 0; }       /* no extra gap above */

/* Mobile: image above, flush edges, text hugs bottom of image */
@media (max-width: 900px){
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-art {
    order: -1;              /* image first */
    width: 100vw;           /* span full viewport width */
    margin-left: -1rem;     /* cancel container side padding */
    margin-right: -1rem;
    margin-bottom: 0;       /* remove extra space below image */
    text-align: center;
  }

  .hero-img {
    width: 100%;            /* make image scale full width */
    height: auto;
    display: block;
  }

  .hero-copy {
    text-align: center;
    margin-top: 0;          /* no gap, text hugs image */
  }

  .hero {
    padding-top: 0;         /* flush with header */
  }

  /* Mobile nav menu fix */
  #nav-links.open {
    background: #fff;       /* white panel */
    border: 1px solid #e6e6e6;
  }

  #nav-links.open a {
    color: #111;            /* dark text */
  }

  #nav-links.open a:hover {
    color: #0a58ff;         /* brand blue on hover */
  }

  .site-header .nav-toggle {
    color: #fff;            /* hamburger stays visible on blue header */
  }
}