/* KiddReads — shared styles for the marketing pages (welcome, why, about) */
:root {
  --kr-blue:#4a90e2; --kr-deep:#4a00e0; --kr-purple:#764ba2; --kr-peri:#667eea;
  --kr-gold:#f5a623; --kr-ink:#2d3436; --kr-muted:#636e72; --kr-bg:#f7f8fc;
}
* { box-sizing:border-box; }
body { margin:0; font-family:'Inter',system-ui,sans-serif; color:var(--kr-ink);
  background:var(--kr-bg); line-height:1.6; }
img { max-width:100%; }

/* ---- top nav ---- */
.mk-nav { display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1080px; margin:0 auto; padding:16px 26px; flex-wrap:wrap; }
.mk-nav .brand { display:flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:900; font-size:1.25rem; color:var(--kr-ink); letter-spacing:-.5px; }
.mk-nav .brand img { height:38px; width:auto; }
.mk-nav .links { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.mk-nav .links a { color:var(--kr-muted); text-decoration:none; font-weight:700;
  font-size:.9rem; padding:8px 13px; border-radius:30px; }
.mk-nav .links a:hover { color:var(--kr-ink); background:#eef0f6; }
.mk-nav .links a.cta { background:linear-gradient(135deg,var(--kr-blue),var(--kr-deep));
  color:#fff; box-shadow:0 4px 14px rgba(74,144,226,.4); }
.mk-nav .links a.cta:hover { color:#fff; }

/* ---- hero ---- */
.mk-hero { background:linear-gradient(135deg,var(--kr-peri),var(--kr-purple),var(--kr-deep));
  color:#fff; text-align:center; padding:66px 24px 80px; }
.mk-hero img.logo { height:96px; width:auto;
  filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px rgba(255,255,255,0.65)); }
.mk-hero h1 { font-size:2.9rem; font-weight:900; margin:16px 0 10px; letter-spacing:-1.5px;
  text-shadow:0 4px 12px rgba(0,0,0,.25); }
.mk-hero .tag { font-size:1.16rem; font-weight:600; opacity:.96; max-width:640px;
  margin:0 auto 28px; }
.mk-cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---- buttons ---- */
.mk-btn { display:inline-block; text-decoration:none; font-weight:800; font-size:1rem;
  padding:14px 28px; border-radius:50px; border:none; cursor:pointer; }
.mk-btn.primary { background:#fff; color:var(--kr-deep); box-shadow:0 6px 18px rgba(0,0,0,.2); }
.mk-btn.ghost { background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.mk-btn.solid { background:linear-gradient(135deg,var(--kr-blue),var(--kr-deep)); color:#fff;
  box-shadow:0 6px 18px rgba(74,144,226,.4); }

/* ---- sections ---- */
.mk-section { max-width:1080px; margin:0 auto; padding:58px 24px; }
.mk-section h2 { font-size:2rem; font-weight:900; text-align:center; margin:0 0 10px;
  letter-spacing:-.8px; }
.mk-section .sub { text-align:center; color:var(--kr-muted); max-width:640px;
  margin:0 auto 36px; font-size:1.03rem; }
.mk-prose { max-width:720px; margin:0 auto; }
.mk-prose h2 { text-align:left; }
.mk-prose p { font-size:1.06rem; color:#3a3f44; }

/* ---- feature grid ---- */
.mk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:20px; }
.mk-card { background:#fff; border-radius:18px; padding:26px; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.mk-card .ico { font-size:2.2rem; line-height:1; }
.mk-card h3 { margin:12px 0 6px; font-size:1.12rem; font-weight:800; }
.mk-card p { margin:0; color:var(--kr-muted); font-size:.95rem; }

/* ---- stat strip ---- */
.mk-stats { background:#fff; border-radius:20px; box-shadow:0 10px 24px rgba(0,0,0,.06);
  display:flex; flex-wrap:wrap; justify-content:space-around; gap:18px; padding:30px; }
.mk-stat { text-align:center; }
.mk-stat .n { font-size:2.2rem; font-weight:900; color:var(--kr-deep); }
.mk-stat .l { font-size:.8rem; font-weight:700; color:var(--kr-muted);
  text-transform:uppercase; letter-spacing:1px; }

/* ---- two columns ---- */
.mk-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(286px,1fr)); gap:22px; }
.mk-col { background:#fff; border-radius:18px; padding:30px; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.mk-col h3 { margin:0 0 12px; font-size:1.32rem; font-weight:900; }
.mk-col ul { margin:0; padding-left:20px; }
.mk-col li { margin:9px 0; color:#3a3f44; }

/* ---- placeholder note (editable copy to fill in) ---- */
.mk-fill { background:#fff8e8; border:1px dashed #e7c77a; border-radius:10px;
  padding:3px 8px; font-style:italic; color:#7a5c12; font-weight:600; }

/* ---- final CTA band ---- */
.mk-band { background:linear-gradient(135deg,var(--kr-peri),var(--kr-deep)); color:#fff;
  text-align:center; padding:62px 24px; }
.mk-band h2 { font-size:2rem; font-weight:900; margin:0 0 10px; letter-spacing:-.8px; }
.mk-band p { opacity:.95; margin:0 0 24px; font-size:1.05rem; }

/* ---- footer ---- */
.mk-footer { background:#1f2433; color:#9aa4ad; text-align:center; padding:34px 24px;
  font-size:.85rem; }
.mk-footer a { color:#cfd6e0; text-decoration:none; margin:0 8px; font-weight:600; }
.mk-footer a:hover { color:#fff; }
.mk-footer .heart { display:block; margin-top:12px; font-size:.8rem; color:#6b7480; }

/* ---------- responsive ---------- */
@media (max-width:760px) {
  .mk-nav { padding:12px 16px; gap:10px; }
  .mk-nav .brand { font-size:1.12rem; }
  .mk-nav .brand img { height:32px; }
  .mk-nav .links { gap:2px; }
  .mk-nav .links a { font-size:.82rem; padding:7px 10px; }
  .mk-section { padding:44px 18px; }
  .mk-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
  .mk-card { padding:22px; }
  .mk-cols { gap:16px; }
  .mk-col { padding:24px; }
}

@media (max-width:600px) {
  .mk-hero { padding:44px 18px 54px; }
  .mk-hero img.logo { height:80px; }
  .mk-hero h1 { font-size:1.95rem; letter-spacing:-1px; }
  .mk-hero .tag { font-size:1rem; }
  .mk-section h2, .mk-band h2 { font-size:1.6rem; }
  .mk-prose p { font-size:1rem; }
  .mk-stats { padding:22px 18px; gap:14px; }
  .mk-stat .n { font-size:1.7rem; }
  .mk-band { padding:48px 18px; }
}

@media (max-width:380px) {
  .mk-nav .links a:not(.cta) { padding:6px 8px; font-size:.78rem; }
  .mk-hero img.logo { height:68px; }
  .mk-hero h1 { font-size:1.7rem; }
  .mk-btn { padding:12px 22px; font-size:.95rem; }
}

/* Mobile: keep every form field >=16px so iOS Safari doesn't auto-zoom the page
   on focus (it lurches whenever you tap an input under 16px). Covers the filter
   dropdowns, list/embed search boxes, and the sign-in fields. Small screens only. */
@media (max-width: 820px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea { font-size: 16px !important; }
}