
:root{ --brand:#ee5d08; --blurple:#5865F2; --ink:#1b1b1f; --bg:#ffffff; --card:#ffffff; --border:rgba(0,0,0,.08); }
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#ffffff,#fafafa 45%,#f8f9ff 100%);}
.container{max-width:1120px;margin:0 auto;padding:24px;}
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.85);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border);}
.brand{display:flex;align-items:center;gap:12px;padding:10px 0;text-decoration:none;color:inherit}
.brand img{height:85px;width:auto}
.brand b{font-weight:800;letter-spacing:.2px}
nav a{color:#333;text-decoration:none;margin:0 10px;font-weight:700}
nav a:hover{color:var(--blurple)}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;padding:56px 0 28px}
.badge{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--blurple),var(--brand));color:#fff;padding:8px 14px;border-radius:999px;font-weight:700;letter-spacing:.4px;box-shadow:0 8px 24px rgba(88,101,242,.25)}
h1,h2,h3{font-family:'Space Grotesk',Inter,sans-serif}
.section{padding:42px 0}
.banner-centered {text-align: center;}
.banner-gradient {
  background: linear-gradient(135deg, rgba(88,101,242,.08), rgba(238,93,8,.12));
}

/* Make the tagline bigger and orange */
.banner.banner-gradient p,
.banner.banner-gradient strong {
  font-size: 2.1rem;
  color: var(--brand);
}
.banner-kids-cta {
  background: linear-gradient(135deg, rgba(238,93,8,.16), rgba(88,101,242,.12));
  border-color: rgba(238,93,8,.4);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* Make the text inside a bit stronger and clearer */
.banner-kids-cta p {
  margin-bottom: 10px;
  font-size: 1.05rem;
}

/* Slightly tighten and smooth the inputs inside that banner */
.banner-kids-cta select {
  background: #fff;
}


.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border-radius:20px;padding:20px;border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.05)}
.btn{appearance:none;border:none;border-radius:16px;padding:14px 18px;font-weight:800;cursor:pointer;transition:.2s ease;letter-spacing:.2px;display:inline-block}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(238,93,8,.25)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(238,93,8,.35)}
.btn-ghost{background:#fff;color:var(--blurple);border:2px solid rgba(88,101,242,.25)}
.btn-ghost:hover{border-color:var(--blurple);background:rgba(88,101,242,.06)}
.banner{background:linear-gradient(135deg, rgba(88,101,242,.08), rgba(238,93,8,.08));border:1px solid var(--border);border-radius:22px;padding:20px}
footer{padding:36px 0;color:#4a4a57;border-top:1px solid var(--border)}
.taglist{display:flex;flex-wrap:wrap;gap:8px}
.tag{background:rgba(88,101,242,.08);border:1px solid rgba(88,101,242,.15);color:#2b2b3a;padding:8px 10px;border-radius:999px;font-weight:600}
@media (max-width:980px){.hero{grid-template-columns:1fr}}

.pz-banner {
  margin: 20px 0 30px;
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(
      135deg,
      rgba(88,101,242,0.09),
      rgba(238,93,8,0.12)
  ); /* same colours as the index banner */
  text-align: center;
  box-shadow: 0 8px 22px rgba(0,0,0,0.05);
}

.pz-logo {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.5px;
}

/* goNative in solid brand orange (#ee5d08) */
.pz-gonative {
  color: var(--brand); /* #ee5d08 */
  margin-right: 8px;
}

/* ParentZone with the same gradient colours as the homepage banner */
.pz-parentzone {
  background: linear-gradient(135deg, var(--blurple), var(--brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pz-gonative {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 85%;         /* ← THIS controls the size */
}

