/* Shared styles for the program "Explore" pages (positive-you, digital-literacy,
   money-management). Same chunky card language as tiny-tales.html, on the
   corporate brand palette. Each page sets its accent via a body class. */
:root{--navy:#193759;--deep:#163557;--ink:#193759;--cream:#fff9ef;--line:#e6e3dc;
  --accent:#57c4e7;--accent-dark:#2a9cc4;--accent-soft:#d9f5fa;--pop:#ffbf21;--pop-dark:#e99e09;--tint:#e7f7fb}
body.py{--accent:#1e5a92;--accent-dark:#123e68;--accent-soft:#dbe8f6;--pop:#e51a4c;--pop-dark:#a80f33;--tint:#eef4fb}
body.dl{--accent:#57c4e7;--accent-dark:#2a9cc4;--accent-soft:#d9f5fa;--pop:#ffbf21;--pop-dark:#e99e09;--tint:#e7f7fb}
body.mm{--accent:#2f9e63;--accent-dark:#1d7446;--accent-soft:#dcf3e5;--pop:#ffbf21;--pop-dark:#e99e09;--tint:#eaf7ef}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Poppins',Arial,sans-serif}
a{color:inherit}
header{height:78px;display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:auto;padding:0 28px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:900;font-size:1.25rem;letter-spacing:-.03em}
.brand img{display:block;width:52px;height:52px;object-fit:contain}
.brand small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.nav{display:flex;gap:26px;align-items:center;font-weight:800;font-size:.9rem}
.nav a{text-decoration:none}
.pill{background:var(--pop);color:var(--navy);border-radius:50px;padding:14px 22px;box-shadow:0 5px 0 var(--pop-dark);text-decoration:none;font-weight:900;display:inline-block}
body.py .pill{color:#fff}
.pill:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--pop-dark)}
.hero{background:var(--accent);position:relative;overflow:hidden;color:#fff}
.hero-inner{max-width:1200px;margin:auto;padding:65px 28px 78px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:.8rem;font-weight:900}
.hero h1{font-size:clamp(3rem,5vw,5.1rem);letter-spacing:-.055em;line-height:1.03;margin:23px 0;max-width:650px}
.hero h1 em{font-style:normal;color:var(--pop)}
body.dl .hero h1,body.dl .hero p,body.dl .hero .eyebrow{color:var(--navy)}
body.dl .hero h1 em{color:#fff;text-shadow:0 3px 0 #2a9cc4}
.hero p{font-size:1.2rem;line-height:1.55;max-width:560px;font-weight:600;margin-bottom:31px}
.hero-photo{border-radius:32px;overflow:hidden;box-shadow:0 12px 0 rgba(0,0,0,.18);transform:rotate(1.5deg);background:#fff;padding:10px}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:24px}
.hero-board{background:#fff;color:var(--navy);border-radius:32px;padding:28px;box-shadow:0 12px 0 rgba(0,0,0,.18);transform:rotate(1.5deg)}
.hero-board h3{margin:0 0 14px;font-size:1.1rem}
.board-row{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-radius:14px;background:var(--accent-soft);margin:9px 0;font-weight:800}
.board-row span:last-child{font-size:.82rem;background:#fff;border-radius:30px;padding:4px 11px}
.board-row.done span:last-child{background:var(--accent);color:#fff}
.section{max-width:1200px;margin:auto;padding:90px 28px}
.section h2{font-size:clamp(2.4rem,4.4vw,4rem);line-height:1.06;letter-spacing:-.055em;margin:10px 0 22px}
.intro{text-align:center;max-width:820px;margin:auto}
.intro p{font-size:1.2rem;line-height:1.55}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.feature{background:#fff;border:2px solid var(--line);border-radius:20px;padding:29px;box-shadow:0 7px 0 #e7e3d9}
.feature b{display:block;font-size:1.22rem;margin:14px 0 9px}
.feature p{line-height:1.5;margin:0}
.icon{height:54px;width:54px;border-radius:16px;display:grid;place-items:center;font-size:1.7rem;background:var(--accent-soft)}
.feature:nth-child(2) .icon{background:#ffdeeb}
.feature:nth-child(3) .icon{background:#fff0b5}
.dark{background:var(--deep);color:#fff}
.dark .section{padding-top:85px;padding-bottom:90px}
.dark .lead{font-size:1.15rem;line-height:1.55;max-width:680px;opacity:.9}
.unit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:36px}
.unit-grid.five{grid-template-columns:repeat(5,1fr)}
.unit-grid.three{grid-template-columns:repeat(3,1fr)}
.unit{border-radius:19px;padding:23px 20px;background:#fff;color:var(--navy);box-shadow:0 7px 0 #0c2742}
.unit .tag{display:inline-block;font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;background:var(--accent-soft);color:var(--accent-dark);border-radius:30px;padding:5px 11px}
.unit h3{font-size:1.25rem;margin:14px 0 8px;letter-spacing:-.02em}
.unit p{font-size:.93rem;line-height:1.45;margin:0}
.unit ul{margin:10px 0 0;padding-left:18px;font-size:.9rem;line-height:1.45}
.tinted{background:var(--tint)}
.tinted .lead{font-size:1.15rem;line-height:1.55;max-width:680px}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
.option{background:#fff;border-radius:22px;padding:30px;box-shadow:0 7px 0 #cfe0e6}
.option h3{font-size:1.4rem;margin:12px 0 10px;letter-spacing:-.02em}
.option p{line-height:1.55;margin:0 0 12px}
.option ul{margin:0;padding-left:20px;line-height:1.7}
.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}
.split p{font-size:1.13rem;line-height:1.55}
.steps{padding:0;list-style:none}
.steps li{margin:15px 0;display:flex;align-items:center;gap:14px;font-weight:800}
.steps span{background:var(--accent);color:#fff;width:33px;height:33px;border-radius:50%;display:grid;place-items:center;flex:none}
.side-art{border-radius:40px;overflow:hidden;background:var(--accent-soft);padding:12px}
.side-art img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:30px}
.cta{background:var(--pop);text-align:center;padding:85px 25px;color:var(--navy)}
body.py .cta{color:#fff}
.cta h2{font-size:clamp(2.4rem,5vw,4.3rem);letter-spacing:-.06em;line-height:1.05;margin:0 auto 18px;max-width:760px}
.cta p{font-size:1.16rem;max-width:640px;margin:0 auto 10px;line-height:1.5}
.cta .pill{background:var(--navy);color:#fff;box-shadow:0 5px 0 #0c2643;margin-top:14px}
.contact{margin-top:24px;font-weight:800}
.contact a{margin:0 12px}
.other{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.other a{background:#fff;border:2px solid var(--line);border-radius:40px;padding:10px 18px;font-weight:800;text-decoration:none;font-size:.9rem;color:var(--navy)}
footer{padding:32px 28px;text-align:center;font-size:.86rem;font-weight:700}
footer span{color:var(--accent-dark)}
@media(max-width:1050px){.unit-grid,.unit-grid.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.hero-inner,.split,.option-grid{grid-template-columns:1fr;gap:35px}
  .hero-inner{padding-top:50px}
  .unit-grid,.unit-grid.five,.unit-grid.three{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:1fr 1fr}
  .nav a:not(.pill){display:none}}
@media(max-width:560px){header{height:70px;padding:0 16px}
  .brand{font-size:1.05rem}.brand img{width:42px;height:42px}
  .nav .pill{padding:11px 15px;font-size:.8rem}
  .hero-inner{padding:42px 16px 65px}
  .hero h1{font-size:clamp(2.6rem,12vw,3.3rem)}
  .hero p{font-size:1.05rem}
  .section{padding:64px 16px}
  .feature-grid,.unit-grid,.unit-grid.five,.unit-grid.three{grid-template-columns:1fr}
  .hero-photo,.hero-board{transform:none}
  .contact a{display:block;margin:9px}}