/* Toddler Toy Finder — shared styles */
:root{
  --bg:#F7F4EE; --card:#FFFFFF; --card-2:#FBF8F2;
  --ink:#2C2A26; --soft:#6B665C; --mute:#938C80; --line:#E7E1D6;
  --sage:#3C7659; --sage-b:#4C8C6B; --sage-tint:#E7F0E9;
  --apricot:#DC7F3E; --apricot-b:#C96E2E; --apricot-tint:#F7E9DA;
  --clay:#B5654A; --sky:#4C7C9B; --plum:#7C5E9B; --gold:#B08A2E;
  --shadow:0 1px 2px rgba(44,42,38,.05), 0 10px 24px -14px rgba(44,42,38,.22);
  --r:16px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#191817; --card:#232120; --card-2:#1F1D1C;
    --ink:#EFEBE3; --soft:#ABA599; --mute:#807A6F; --line:#33302B;
    --sage:#72B991; --sage-b:#5FA87F; --sage-tint:#22302A;
    --apricot:#E89A5F; --apricot-b:#EDA971; --apricot-tint:#31261C;
    --clay:#D08668; --sky:#7BA6C2; --plum:#A98CC4; --gold:#CBA654;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 30px -16px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;}
.wrap{max-width:660px;margin:0 auto;padding:0 18px 60px;}
a{color:var(--sage);}
:focus-visible{outline:2.5px solid var(--apricot);outline-offset:2px;border-radius:8px;}

/* nav */
.nav{max-width:660px;margin:0 auto;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);text-decoration:none;font-size:1.02rem;letter-spacing:-.01em;}
.brand .dot{width:22px;height:22px;border-radius:7px;background:var(--sage);display:grid;place-items:center;font-size:.85rem;}
.nav .links{display:flex;gap:16px;font-size:.9rem;}
.nav .links a{color:var(--soft);text-decoration:none;font-weight:600;}
.nav .links a:hover{color:var(--sage);}

/* header / hero */
header.hero{text-align:center;padding:14px 6px 6px;}
.kick{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);font-weight:700;}
h1{font-size:clamp(1.7rem,7vw,2.3rem);line-height:1.08;margin:.35em 0 .3em;letter-spacing:-.02em;text-wrap:balance;}
.sub{color:var(--soft);font-size:1rem;margin:0 auto;max-width:36ch;text-wrap:balance;}
.disclose-top{margin:14px auto 0;font-size:.78rem;color:var(--mute);max-width:42ch;}
.disclose-top a{color:var(--mute);}

/* finder panel */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;margin-top:22px;box-shadow:var(--shadow);}
.q{margin-bottom:20px;}
.q:last-child{margin-bottom:0;}
.q > label{display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:1.02rem;margin-bottom:11px;}
.q .opt{font-weight:400;font-size:.82rem;color:var(--mute);}
.pills{display:flex;flex-wrap:wrap;gap:9px;}
.pill{appearance:none;border:1.5px solid var(--line);background:var(--card-2);color:var(--ink);
  font:inherit;font-size:.95rem;font-weight:600;padding:11px 15px;border-radius:12px;cursor:pointer;
  min-height:46px;transition:transform .12s ease,border-color .12s ease,background .12s ease;}
.pill:hover{border-color:var(--sage-b);}
.pill:active{transform:scale(.97);}
.pill[aria-pressed="true"]{background:var(--sage-tint);border-color:var(--sage-b);color:var(--sage);}
.pill.goal[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--sage-b);}

.giftrow{display:flex;align-items:center;gap:12px;margin-top:4px;padding:13px 15px;border:1.5px dashed var(--line);border-radius:12px;background:var(--card-2);}
.giftrow .gl{font-weight:700;font-size:.98rem;flex:1;}
.giftrow .gl small{display:block;font-weight:400;font-size:.8rem;color:var(--mute);margin-top:2px;}
.toggle{appearance:none;position:relative;width:50px;height:29px;border-radius:20px;background:var(--line);border:none;cursor:pointer;flex:none;transition:background .16s ease;}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;transition:transform .16s ease;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.toggle[aria-pressed="true"]{background:var(--apricot);}
.toggle[aria-pressed="true"]::after{transform:translateX(21px);}

.go{width:100%;margin-top:24px;border:none;border-radius:13px;background:var(--apricot);color:#fff;
  font:inherit;font-weight:800;font-size:1.08rem;letter-spacing:.01em;padding:16px;cursor:pointer;min-height:54px;
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--apricot) 70%,transparent);transition:transform .12s ease,background .12s ease;}
.go:hover{background:var(--apricot-b);}
.go:active{transform:translateY(1px) scale(.99);}

/* results */
.results{margin-top:26px;display:none;}
.results.show{display:block;animation:fade .45s ease both;}
.rhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
.rhead h2{font-size:1.15rem;margin:0;}
.redo{background:none;border:none;color:var(--sage);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;padding:6px 2px;text-decoration:underline;text-underline-offset:3px;}
.disclose-res{font-size:.76rem;color:var(--mute);margin:0 0 14px;}
.guide-cta{margin:0 0 16px;}
.guide-cta a{display:inline-block;font-weight:700;font-size:.9rem;color:var(--sage);text-decoration:none;background:var(--sage-tint);padding:9px 14px;border-radius:11px;}
.guide-cta a:hover{background:color-mix(in srgb,var(--sage-tint) 70%,var(--sage) 10%);text-decoration:underline;}

.toy{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;margin-bottom:13px;box-shadow:var(--shadow);}
.toy .toptag{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px;}
.tag{font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:20px;}
.tag.motor{background:var(--sage-tint);color:var(--sage);}
.tag.talk{background:var(--apricot-tint);color:var(--apricot-b);}
.tag.pretend{color:#fff;background:var(--plum);}
.tag.active{color:#fff;background:var(--clay);}
.tag.calm{color:#fff;background:var(--sky);}
.tag.learn{color:#fff;background:var(--gold);}
.tag.match{background:transparent;border:1px dashed var(--sage-b);color:var(--sage);}
.tag.gift{background:var(--apricot);color:#fff;}
.toy h3{font-size:1.12rem;margin:0 0 5px;line-height:1.2;}
.toy .why{color:var(--soft);font-size:.94rem;margin:0 0 13px;}
.toy .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.price{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.price .dim{color:var(--line);}
.buy{display:inline-flex;align-items:center;gap:6px;background:var(--sage);color:#fff;text-decoration:none;
  font-weight:700;font-size:.92rem;padding:11px 15px;border-radius:11px;min-height:44px;transition:transform .12s ease,background .12s ease;}
.buy:hover{background:var(--sage-b);}
.buy:active{transform:scale(.97);}
.buy svg{width:14px;height:14px;}
.empty{background:var(--card);border:1px dashed var(--line);border-radius:var(--r);padding:22px;text-align:center;color:var(--soft);}

/* guide links */
.guides{margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;box-shadow:var(--shadow);}
.guides h2{font-size:1.05rem;margin:0 0 12px;}
.guides ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:7px 16px;}
.guides li a{color:var(--soft);font-size:.9rem;font-weight:600;text-decoration:none;}
.guides li a:hover{color:var(--sage);}

/* newsletter */
.news{margin-top:28px;background:var(--sage-tint);border:1px solid color-mix(in srgb,var(--sage) 24%,transparent);border-radius:var(--r);padding:22px 20px;text-align:center;}
.news h3{margin:0 0 6px;font-size:1.15rem;}
.news p{margin:0 auto 14px;font-size:.92rem;color:var(--soft);max-width:38ch;}
.news form{display:flex;gap:8px;max-width:380px;margin:0 auto;}
.news input{flex:1;min-width:0;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:11px;padding:12px 14px;font:inherit;min-height:48px;}
.news button{border:none;background:var(--sage);color:#fff;font:inherit;font-weight:700;padding:0 18px;border-radius:11px;cursor:pointer;min-height:48px;}
.news button:hover{background:var(--sage-b);}
.news .msg{margin:10px 0 0;font-size:.86rem;font-weight:600;color:var(--sage);}

/* content pages */
.content{margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow);}
.content h1{font-size:clamp(1.5rem,5vw,2rem);text-align:left;margin:0 0 4px;}
.crumbs{font-size:.8rem;color:var(--mute);margin:0 0 10px;}
.crumbs a{font-weight:600;color:var(--mute);text-decoration:none;}
.crumbs a:hover{color:var(--sage);}
.content .updated{font-size:.8rem;color:var(--mute);margin:0 0 18px;}
.guide-hero{display:block;width:100%;max-width:300px;height:auto;margin:0 auto 20px;border-radius:12px;box-shadow:var(--shadow);}
.content h2{font-size:1.15rem;margin:26px 0 8px;}
.content p,.content li{color:var(--soft);font-size:.96rem;}
.content ul{padding-left:20px;}
.content li{margin:6px 0;}
.content strong{color:var(--ink);}
.content a{font-weight:600;}

/* footer */
footer.site{margin-top:30px;font-size:.8rem;color:var(--mute);text-align:center;line-height:1.6;padding:0 6px;}
footer.site .legend{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:10px;}
footer.site .flinks{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:10px 0;}
footer.site .flinks a{color:var(--soft);font-weight:600;text-decoration:none;}
footer.site .flinks a:hover{color:var(--sage);}
footer.site p{margin:6px auto;max-width:52ch;}
footer.site b{color:var(--soft);}

@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}