:root{
  --bg:#ffffff; /* white */
  --card:#f8fafc; /* light gray */
  --muted:#475569; /* slate-600 */
  --text:#0f172a; /* slate-900 */
  --accent:#0284c7; /* sky-700 */
  --accent-2:#38bdf8; /* sky-400 */
  --ok:#16a34a; /* green-600 */
  --border:rgba(0,0,0,.06);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:focus{outline:3px solid var(--accent);outline-offset:2px}

/* Layout helpers */
.wrapper{max-width:1100px;margin:0 auto;padding:24px}
.section{padding:24px 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px 22px;box-shadow:0 4px 10px rgba(0,0,0,.05)}

/* Headings */
h1{font-size:clamp(28px,4vw,40px);line-height:1.2;margin:8px 0 6px}
h2{font-size:clamp(22px,3.5vw,32px);margin:4px 0 14px;color:var(--accent)}
h3{font-size:clamp(18px,2.5vw,22px);margin:6px 0}
.meta,.muted{color:var(--muted)}
.small{font-size:14px;color:var(--muted)}

/* Grid */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
}

/* Header (global) */
header[role="banner"]{position:sticky;top:0;background:#fff;z-index:50;border-bottom:1px solid var(--border)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px}
.brand{display:flex;align-items:center;gap:14px}
.brand__logo{width:180px;height:auto}
.menu a{margin-left:18px}
.menu a:hover,.menu a:focus{text-decoration:underline}
.menu a[aria-current="page"]{font-weight:700;color:var(--accent-2)}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:40px 0}
.hero .eyebrow{color:var(--accent);font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-size:12px}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.1;margin:.2em 0}
.hero p{font-size:clamp(16px,2.2vw,20px);color:#1f2937}
.hero {
  padding-left: 24px;
  padding-right: 24px;
}

/* Add space between sections (matches homepage rhythm) */
main.wrapper section.card + section.card {
  margin-top: 40px;
}

/* Buttons */
.btn{display:inline-block;border-radius:999px;padding:12px 18px;border:1px solid var(--accent);color:#fff;background:linear-gradient(180deg,var(--accent-2),var(--accent));font-weight:700}
.btn--ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}

/* Badges / Pills / Tags */
.pill{display:inline-block;background:rgba(2,132,199,.08);color:var(--accent);border:1px solid rgba(2,132,199,.3);border-radius:999px;padding:4px 10px;font-size:12px;margin-left:8px}
.tag{display:inline-block;background:rgba(2,132,199,.08);border:1px solid rgba(2,132,199,.3);color:var(--accent);padding:2px 8px;border-radius:999px;font-size:12px;margin-left:8px}
.badge{font-size:12px;border:1px solid rgba(22,163,74,.35);color:var(--ok);background:rgba(22,163,74,.08);border-radius:999px;padding:2px 8px}
.ok{color:var(--ok)}

/* Lists */
ul{padding-left:20px}
.list-tight li{margin:6px 0}
.features li{margin:6px 0}

/* App cards */
.app-card h3{display:flex;align-items:center;gap:10px}
.store-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.store-buttons img{height:40px}
.notice{font-size:13px;color:var(--muted)}

/* Tables (Privacy page) */
table{width:100%;border-collapse:separate;border-spacing:0;margin:8px 0 12px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}
th{background:#eef2f7;color:#0f172a}
tr:last-child td{border-bottom:none}

section.card:last-of-type {
  margin-bottom: 40px;
}

/* Footer */
footer{margin:40px 0 16px;color:var(--muted);font-size:14px;text-align:center}

/* Utilities */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#111827;color:#e5e7eb;padding:8px 12px;border-radius:8px;z-index:100}

/* Page-specific light touches (optional) */
/* Age-suitability h2 icons */
.page-age h2{display:flex;align-items:center;gap:12px}
.page-age h2 img{width:60px;height:60px;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.15)}

/* Responsive tweak: stack hero on narrow screens */

/* Add consistent horizontal padding to all homepage sections */
body.home section {
  padding-left: 24px;
  padding-right: 24px;
}

/* Reduce extra vertical gap between Why + Safety only on homepage */
body.home #why {
  margin-bottom: 0;
}
body.home #safety {
  margin-top: -40px; /* was effectively ~48–56px combined before */
}

@media (max-width: 1024px) {
  body.home section,
  .hero {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Mobile: hide the menu until toggled; show button */

@media (max-width:860px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .menu{
    display:none;               /* hidden by default on mobile */
    position:absolute;
    right:16px;
    top:64px;                   /* below header */
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    flex-direction:column;
    gap:8px;
    z-index:60;
  }
  .menu a{margin:0;padding:8px 10px;white-space:nowrap}

  /* When menu is open */
  .menu.is-open{display:flex}
}

/* --- Tighten mobile paddings so nothing touches edges --- */
@media (max-width:780px){
  .wrapper{padding:16px}
  .nav{padding:10px 16px}
  .hero{grid-template-columns:1fr}
  .menu a{margin-left:12px}
}

/* --- Mobile Nav (Hamburger) --- */
.menu-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:10px;
}
.menu-toggle .bar{
  display:block;
  width:22px;
  height:2px;
  background:#0f172a;
  margin:4px 0;
}

/* Default: show horizontal menu (desktop) */
.menu{display:flex;align-items:center;gap:0}
.menu a{margin-left:18px}

/* Mobile tweaks */
@media (max-width:600px){
  .app-icon{ width:64px; height:64px; }
  .app-title .title{ font-size:1.25rem; }
  .app-heading .icon{ width:64px; height:64px; } /* Mobile: shrink icon a bit */
}

/* Optional: give cards a bit more breathing room on very small phones */
@media (max-width:420px) {
  .card{padding:16px 16px}
  .table-responsive th,
  .table-responsive td {padding: 8px 10px;}
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.table-responsive table {
  border: 0;
  border-radius: 0;
  margin: 0;
  min-width: 640px;
  table-layout: fixed;
}

.table-responsive th,
.table-responsive td {
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Title + icon layout */
.app-title{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0;                 /* prevents extra space above */
}
.app-icon{
  width:100px;
  height:100px;
  border-radius:12px;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
  flex:0 0 auto;            /* keep icon from shrinking */
}
.title-wrap{
  display:flex;
  flex-direction:column;    /* stack Title and Ages */
  align-items:flex-start;   /* flush left */
}
.app-title .title{
  color:var(--accent);
  font-size:1.4rem;
  line-height:1.2;
  font-weight:700;
}
.app-title .pill{
  margin-left:0;            /* flush with title */
  margin-top:6px;
}

/* Age Suitability: icon + stacked title/age */
.app-heading{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 8px;
}
.app-heading .icon{
  width:100px;
  height:100px;
  border-radius:12px;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
  flex:0 0 auto;
}
.app-heading .title-wrap{
  display:flex;
  flex-direction:column;   /* stack Title + Ages */
  align-items:flex-start;  /* flush left */
}
.app-heading .title{
  color:var(--accent);
  font-weight:700;
  font-size:clamp(22px,3.5vw,28px);
  line-height:1.2;
}
.app-heading .tag{
  margin-left:0;           /* align under Title */
  margin-top:6px;
}

/* =====================================================================
   RDP — Refined Consolidated Overrides
   - Grids: 2-col on tablet/desktop; 1-col only on phones (<=700px)
   - Nav: collapsible on tablets & phones (<=860px, includes 768px)
   ===================================================================== */

/* Grid defaults (desktop/tablet-first) */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* Phones (<=700px): collapse grids */
@media (max-width:700px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  /* Hero stacks on phones */
  .hero{ grid-template-columns:1fr; gap:20px }
  .hero > *{ min-width:0 }
  .hero .card{ margin:0 }
  img, video{ max-width:100%; height:auto }
}

/* Tablets & phones (<=860px): use collapsible nav */
@media (max-width:860px){
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav{position:relative}
  .nav .menu{
    display:none;
    position:absolute; right:16px; top:64px;
    background:#fff; border:1px solid var(--border);
    border-radius:12px; padding:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    flex-direction:column; gap:8px; z-index:60;
  }
  .nav .menu a{margin:0;padding:8px 10px;white-space:nowrap}
  .nav .menu.is-open{display:flex}
}

/* Desktop-only (>860px): inline nav, hide toggle */
@media (min-width:861px){
  .nav .menu{display:flex;align-items:center;gap:18px}
  .menu-toggle{display:none}
}

/* eBooks webpage */
  .filters { display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0 4px; }
    .filter-pill { border:1px solid var(--accent); color:var(--accent); background:#fff; border-radius:999px; padding:6px 10px; font-size:12px; cursor:pointer; }
    .filter-pill[aria-pressed="true"] { background: linear-gradient(180deg,var(--accent-2),var(--accent)); color:#fff; }

    .grid-books { display:grid; gap:16px; grid-template-columns: repeat(3, 1fr); }
    @media (max-width:1024px){ .grid-books{ grid-template-columns: repeat(2,1fr); } }
    @media (max-width:640px){ .grid-books{ grid-template-columns: 1fr; } }

    .ebook-card { display:flex; flex-direction:column; height:100%; }
    .ebook-card .cover { overflow:hidden; width="590" height="885"; margin-bottom:12px; background:#eef2f7; box-shadow:0 2px 4px rgba(0,0,0,.15); }
    .ebook-card .meta { font-size:13px; color:var(--muted); margin:6px 0; }
    .ebook-card .cta { margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; }

    .btn-store img { height:34px; display:block; }
    .badge-age { display:inline-block; background: rgba(2,132,199,.08); color: var(--accent); border:1px solid rgba(2,132,199,.3); border-radius:999px; padding:2px 8px; font-size:12px; }