/* Family-facing layer: existing workshop and payment protections stay underneath. */
:root { --bg:#fffdf8; --purple:#6851ca; --purple-dark:#4f399f; --radius-xl:28px; --radius-lg:22px; --radius-md:16px; }
body { background:var(--bg); }
.wrap { width:min(1120px,calc(100% - 40px)); }
header.wrap { width:100%; padding-inline:max(20px,calc((100% - 1120px)/2)); background:#fffdf8f5; }
.nav { min-height:82px; }.navlinks { gap:24px; }
.btn { border-radius:999px; min-height:48px; padding:13px 23px; font-size:1rem; }
.btn-primary { background:var(--purple); box-shadow:none; color:white; }
.btn-primary:hover { background:var(--purple-dark); box-shadow:0 6px 18px #6851ca22; }
.btn-secondary { background:white; border:1px solid #d8d1e2; color:#33264f; box-shadow:none; }
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #137f7b; outline-offset:4px; }
.navlinks a[aria-current=page] { text-decoration:underline; text-underline-offset:6px; }
.navlinks .quest-nav { display:inline-flex!important; }
.navlinks>a:not(.btn) { display:inline-flex; }
.hero { min-height:0; grid-template-columns:1fr 1fr; gap:48px; padding:48px 0 38px; }
.hero h1 { font-size:clamp(2.65rem,5vw,4.5rem); line-height:1.06; letter-spacing:-.035em; margin:20px 0; }
.hero-copy { max-width:440px; font-size:1.1rem; line-height:1.75; }
.eyebrow { border:0; padding:0; color:#725154; font-size:.85rem; }
.hero-actions { margin:26px 0 16px; }.hero-note { color:#66616d; font-size:.85rem; }
.family-hero-art { margin:0; min-width:0; }.family-hero-art img { display:block; width:100%; height:auto; border-radius:28px; }
.family-hero-art figcaption { text-align:center; font-size:.85rem; color:#514859; margin-top:14px; }
.family-hero-art small { display:block; font-size:.72rem; color:#726977; margin-top:4px; }
.family-how { padding:28px 0 42px; }
.family-how h2,.family-play h2,.family-parents h2 { font-family:Georgia,serif; font-size:clamp(1.7rem,3vw,2.15rem); line-height:1.2; letter-spacing:-.02em; margin:0 0 16px; }
.family-how>h2 { text-align:center; }
.how-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:24px; border:0; background:none; }
.how-card { display:flex; gap:14px; align-items:flex-start; background:none; border:0; border-radius:0; padding:12px 0; box-shadow:none; }
.how-number { flex:0 0 38px; width:38px; height:38px; border-radius:50%; background:#efe9fb; color:#6049aa; box-shadow:none; margin:0; display:grid; place-items:center; }
.how-card h3 { margin:3px 0 7px; font-size:1.03rem; }.how-card p { font-size:.92rem; line-height:1.6; margin:0; }
.family-how .how-card { min-height:0; border:0; }
.family-smallprint { color:#696170; font-size:.8rem; line-height:1.65; text-align:center; margin:16px auto 0; max-width:720px; }
.creator-wrap { padding:36px 0 50px; scroll-margin-top:90px; }.creator-intro { display:block; margin-bottom:0; }
.creator-intro .section-title { font-size:clamp(1.9rem,3.5vw,2.6rem); margin:8px 0; }.creator-intro p { color:var(--muted); margin:8px 0; }
.shop-panel { border-radius:24px; border:1px solid #e4dfe9; box-shadow:0 12px 40px #39204805; padding:clamp(20px,4vw,36px); }
.shop-panel h3 { margin:0 0 12px; font-size:1.35rem; }.shop-panel p { line-height:1.65; }
.shop-steps { margin:22px 0; gap:16px; }.shop-steps span { padding:12px 0; text-transform:none; }
.shop-steps [aria-current=step] { color:var(--purple-dark); border-color:var(--purple); }
.drawing-routes { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:650px; margin:24px 0 12px; }
.drawing-route { position:relative; min-height:126px; display:flex!important; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; padding:22px!important; margin:0!important; border-radius:18px; border:1px solid #d8cdec; background:#faf7ff; color:#38284e; cursor:pointer; }
.drawing-route strong { font-size:1.15rem; }.drawing-route span { font-size:.86rem; color:#6b6079; }
.drawing-route:nth-child(2) { background:#fff9ee; border-color:#e8dcc3; }
.drawing-route:hover,.drawing-route:focus-within { border-color:var(--purple); }.drawing-route:focus-within { outline:3px solid #137f7b; outline-offset:3px; }
.drawing-route input[type=file] { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.drawing-help,#previewAllowance,#accountNote { font-size:.86rem; color:#695f75; }
.drawing-next { border-top:1px solid #ece6f1; padding-top:20px; margin-top:20px; }.drawing-next .shop-original { display:block; max-height:190px; margin:0 0 16px; }
.drawing-next .shop-actions { align-items:center; }
.shop-panel label:has(input[type=radio]) { display:flex; gap:9px; align-items:center; min-height:48px; padding:12px; border-radius:12px; background:#faf8fc; }
.shop-panel label:has(input[type=radio]:checked) { background:#f0eafa; outline:1px solid #d3c5e8; }
.shop-panel input[type=radio],.shop-panel input[type=checkbox] { accent-color:var(--purple); width:19px; height:19px; flex-shrink:0; }.shop-panel fieldset { padding:14px; }
#characterChoices button { min-height:48px; font-size:.87rem; }#characterChoices article { min-width:0; }
#shopMessage:empty { display:none; }#shopMessage:not(:empty) { padding:14px 18px; border-radius:14px; background:#fff2eb; }
.family-play { display:flex; align-items:center; gap:26px; padding:28px; border-radius:24px; background:#eaf4ee; margin:0 auto 60px; }
.family-play>div:nth-child(2) { flex:1; }.family-play p,.family-parents p { color:#5c6564; line-height:1.7; margin:0; }.family-play h2 { margin:8px 0; }
.family-play-art { flex:0 0 115px; }.family-play-art img { display:block; width:115px; height:auto; }
.family-game-back { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:26px 0 0; font-size:.88rem; }.family-game-back span { color:#656974; }
#adventure { scroll-margin-top:90px; }
.family-parents { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; padding:0 0 64px; }.family-parents h2 { margin:9px 0 16px; }
.family-parents>div>a { display:inline-block; padding:16px 0; font-size:.9rem; }.family-parents .faq-grid { display:block; margin:0; }
.family-parents details { border:0; border-bottom:1px solid #e4dfe9; border-radius:0; background:none; padding:0; }
.family-parents summary { padding:18px 0; font-size:.97rem; line-height:1.5; cursor:pointer; }.family-parents details p { padding:0 0 18px; font-size:.9rem; }
footer { padding:36px 0; }.studio-workspace { border-radius:18px; }
@media(max-width:800px) {
  .navlinks { gap:14px; }.navlinks .how-nav { display:none!important; }.brand img { width:170px; }
  .hero { gap:26px; }.hero h1 { font-size:clamp(2.3rem,5.8vw,3.5rem); }
  .family-play { flex-wrap:wrap; }.family-play>.btn { margin-left:141px; }.family-parents { gap:30px; }
}
@media(max-width:600px) {
  .wrap { width:calc(100% - 32px); }header.wrap { padding-inline:16px; }
  .nav { flex-wrap:wrap; justify-content:center; gap:9px; padding:12px 0; }.brand img { width:172px; }
  .navlinks { width:100%; justify-content:center; gap:24px; }.navlinks>a:not(.btn) { display:inline-flex; font-size:.87rem; }.navlinks .btn { padding:9px 22px; }
  .hero { grid-template-columns:1fr; padding:28px 0 20px; gap:26px; }.hero h1 { font-size:2.9rem; }.hero-copy { font-size:1rem; }
  .hero-actions { flex-wrap:nowrap; gap:10px; }.hero-actions .btn { width:auto; flex:1; font-size:.89rem; padding:13px; }.family-hero-art { max-width:400px; margin:auto; }
  .family-how { padding:26px 0 12px; }.family-how>h2 { text-align:left; }.how-grid { grid-template-columns:1fr; gap:6px; margin-top:12px; }.family-smallprint { text-align:left; }
  .creator-wrap { padding-top:32px; scroll-margin-top:140px; }.shop-steps { font-size:.82rem; gap:12px; }.drawing-routes { grid-template-columns:1fr; gap:12px; }.drawing-route { min-height:96px; padding:18px!important; }
  .shop-order-grid { gap:20px; }.shop-panel { padding:20px; }.family-play { padding:24px; gap:16px; }.family-play-art { flex-basis:70px; }.family-play-art img { width:70px; }.family-play>.btn { margin-left:0; width:100%; }
  .family-parents { grid-template-columns:1fr; gap:20px; padding-bottom:40px; }.family-game-back { flex-direction:column; align-items:flex-start; gap:8px; }
  html { scroll-padding-top:135px; }#adventure { scroll-margin-top:140px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.btn { transition:none; } }