@font-face{font-family:"Baloo 2";font-weight:800;font-display:swap;src:url(fonts/Baloo2-800.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:600;font-display:swap;src:url(fonts/Baloo2-600.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url(fonts/Nunito-400.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url(fonts/Nunito-700.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url(fonts/Nunito-800.woff2) format("woff2")}

:root{--or:#e8603c;--or2:#fdebe4;--bl:#2f80c9;--bl2:#e0eefa;--tl:#2a9d8f;--tl2:#dff3f0;--yl:#f4b400;--pk:#e8749a;--ink:#2d2a32;--mut:#5a5560;--cream:#fff8ef;--wa:#1faa59;--r:20px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.5 "Nunito",system-ui,sans-serif;padding-bottom:84px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;line-height:1.08;margin:0}
p{margin:0 0 .8em}
a{color:inherit}
.wrap{max-width:640px;margin:0 auto;padding:0 18px}
.sec{padding:44px 0}
.tag{font:800 13px/1 "Baloo 2";letter-spacing:.1em;text-transform:uppercase;color:var(--or);margin:0 0 8px}
.tag.light{color:#fff;opacity:.9}
h2{font-size:clamp(28px,7.5vw,38px);color:var(--ink);margin-bottom:10px}
.sub{color:var(--mut);font-size:17px;margin-bottom:20px}
.fine{font-size:13.5px;color:var(--mut);margin-top:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 22px;border-radius:999px;font:800 17px/1 "Baloo 2";text-decoration:none;border:2.5px solid var(--ink);background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.wa{background:var(--wa);color:#fff}
.btn.wa::before{content:"";width:22px;height:22px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.200zm4.500-6.100c-.2-.1-1.500-.7-1.700-.8s-.4-.1-.6.100l-.8 1c-.1.200-.3.200-.5.100a6.700 6.700 0 0 1-3.300-2.900c-.2-.4.200-.4.700-1.300.1-.2 0-.3 0-.5l-.8-1.900c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.100-.7.300-.2.300-.9.900-.9 2.200s.9 2.600 1.100 2.800c.1.200 1.800 2.800 4.400 3.900 1.600.7 2.300.8 3.100.7.500-.1 1.500-.6 1.700-1.200.2-.6.200-1.100.2-1.200-.1-.2-.3-.3-.5-.4z'/%3E%3C/svg%3E")}
.btn.ghost{background:#fff}
.btn.big{font-size:20px;min-height:60px;width:100%}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.ctas .btn{flex:1 1 150px}

/* hero */
.hero{background:linear-gradient(#fff3e6,var(--cream));padding-bottom:30px;overflow:hidden}
.stripe{height:14px;background:repeating-linear-gradient(-45deg,var(--or) 0 14px,var(--or2) 14px 28px)}
.eyebrow{font:800 15px/1.2 "Baloo 2";color:var(--ink);margin:22px 0 10px}
.eyebrow span{color:var(--or)}
.hero h1{font-size:clamp(36px,10.5vw,54px);color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--or);display:block}
.lead{font-size:18px;color:var(--mut);margin:14px 0 6px}
.lead strong{color:var(--ink)}
.cast{display:flex;align-items:flex-end;justify-content:center;gap:2px;margin:10px 0 0}
.cast img{height:clamp(190px,52vw,300px);width:auto}
.cast .minku{height:clamp(110px,30vw,170px);margin:0 -6px}
.cast img:first-child{animation:bob 3.2s ease-in-out infinite}
.cast img:last-child{animation:bob 3.2s ease-in-out infinite .5s}
@keyframes bob{50%{transform:translateY(-6px)}}

/* checklist */
.checklist{background:#fff}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks button{width:100%;display:flex;align-items:center;gap:14px;text-align:left;font:700 17px/1.3 "Nunito";color:var(--ink);background:var(--cream);border:2.5px solid var(--or2);border-radius:16px;padding:14px 14px;cursor:pointer;min-height:62px;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s}
.checks small{display:block;font-weight:400;color:var(--mut)}
.box{width:30px;height:30px;border-radius:9px;border:3px solid var(--or);background:#fff;flex:none;position:relative;transition:background .15s}
.checks button[aria-pressed=true]{background:var(--or2);border-color:var(--or)}
.checks button[aria-pressed=true] .box{background:var(--or)}
.checks button[aria-pressed=true] .box::after{content:"";position:absolute;left:8px;top:2px;width:8px;height:15px;border:solid #fff;border-width:0 4px 4px 0;transform:rotate(45deg)}
.result{margin-top:20px;background:var(--tl2);border-radius:var(--r);padding:18px}
.meter{height:14px;border-radius:99px;background:#fff;overflow:hidden;margin-bottom:12px}
.meter i{display:block;height:100%;width:0;background:var(--tl);border-radius:99px;transition:width .35s}
#resultText{font:800 20px/1.25 "Baloo 2";margin-bottom:12px}
.result .btn{width:100%}

/* areas */
.cards{display:grid;gap:12px}
.card{position:relative;border-radius:var(--r);padding:16px 16px 14px 76px;background:#fff;border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.card .ico{position:absolute;left:14px;top:14px;width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:26px}
.card h3{font-size:21px;margin-bottom:2px}
.card p{margin:0 0 4px;color:var(--mut);font-size:16px}
.card small{font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.c1 .ico{background:#d9ecfb}.c2 .ico{background:#fdebb8}.c3 .ico{background:#fbd9e4}.c4 .ico{background:#dff3f0}.c5 .ico{background:#fdebe4}

/* ages */
.ages{background:var(--bl2)}
.tabs{display:flex;gap:8px;margin:14px 0 16px}
.tabs button{flex:1;min-height:50px;font:800 16px "Baloo 2";border:2.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--bl);color:#fff}
.agecard{background:#fff;border:2.5px solid var(--ink);border-radius:var(--r);box-shadow:0 4px 0 var(--ink);padding:6px 18px}
.agecard .row{padding:12px 0;border-bottom:2px dashed #e3e0e8}
.agecard .row:last-child{border:0}
.agecard h3{font-size:18px;color:var(--bl);margin-bottom:6px}
.agecard ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.agecard li{background:var(--bl2);border-radius:99px;padding:4px 12px;font-weight:700;font-size:15px}

/* friends */
.trio{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin-top:10px}
.trio figure{margin:0;text-align:center;flex:1}
.trio img{margin:0 auto;max-height:230px;width:auto}
.trio figure:nth-child(2) img{max-height:130px}
.trio figcaption{font:800 20px "Baloo 2";margin-top:6px}
.trio small{display:block;font:600 13px "Nunito";color:var(--mut)}

/* sample */
.sample{background:var(--or);color:#fff;position:relative;overflow:hidden}
.sample h2,.sample .sub{color:#fff}
.sample .sub{opacity:.95}
.chips{display:flex;gap:8px;margin-bottom:16px}
.chips button{flex:1;min-height:50px;font:800 16px "Baloo 2";border:2.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}
.chips button[aria-checked=true]{background:var(--ink);color:#fff}
.yarn{width:200px;margin:18px auto -10px}

/* how */
.steps{list-style:none;padding:0;margin:16px 0 8px;display:grid;gap:12px}
.steps li{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:var(--r);padding:16px;border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.n{flex:none;width:44px;height:44px;border-radius:50%;background:var(--tl);color:#fff;font:800 22px/44px "Baloo 2";text-align:center}
.steps h3{font-size:20px;margin-bottom:2px}
.steps p{margin:0;color:var(--mut);font-size:16px}
.by{text-align:center;margin-top:20px;color:var(--mut)}

/* visit */
.visit{background:var(--tl2)}
.infocard{background:#fff;border:2.5px solid var(--ink);border-radius:var(--r);box-shadow:0 4px 0 var(--ink);padding:18px}
dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 14px}
dt{font:800 15px/1.6 "Baloo 2";color:var(--tl)}
dd{margin:0}
dd a{font-weight:800;font-size:19px;text-decoration:none;color:var(--ink)}

/* faq */
details{background:#fff;border-radius:16px;border:2px solid var(--or2);margin-bottom:10px;padding:0 16px}
summary{cursor:pointer;font:800 18px/1.3 "Baloo 2";padding:14px 24px 14px 0;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:11px;font-size:26px;color:var(--or)}
details[open] summary::after{content:"–"}
details p{color:var(--mut);padding-bottom:14px;margin:0}

/* footer + sticky */
footer{background:var(--ink);color:#ddd;text-align:center;padding:30px 0 20px;font-size:14px}
.fb{font:800 24px "Baloo 2";color:#fff;margin-bottom:4px}
.fb span{color:var(--or)}
.sticky{position:fixed;left:0;right:0;bottom:0;display:flex;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,248,239,.96);backdrop-filter:blur(6px);border-top:2px solid var(--or2);z-index:20}
.sticky .btn{flex:1;min-height:52px}
.sticky .call{background:var(--yl)}
@media(min-width:700px){body{font-size:18px}.cards{grid-template-columns:1fr 1fr}.sticky{display:none}body{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- accessibility + mouse ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--bl);outline-offset:3px}
.fab{display:none}
@media(hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
  .checks button:hover{border-color:var(--or)}
  .tabs button:hover,.chips button:hover{background:var(--or2)}
  .tabs button[aria-selected=true]:hover{background:var(--bl)}
  .chips button[aria-checked=true]:hover{background:var(--ink)}
  summary:hover{color:var(--or)}
}

/* ---------- tablet+ (>=700px) ---------- */
@media(min-width:700px){
  .fab{display:inline-flex;position:fixed;right:24px;bottom:24px;z-index:30;box-shadow:0 4px 0 var(--ink),0 10px 24px rgba(0,0,0,.18)}
}

/* ---------- desktop (>=900px) ---------- */
@media(min-width:900px){
  body{font-size:18px}
  .wrap{max-width:1080px;padding:0 32px}
  .sec{padding:72px 0}
  h2{font-size:44px}
  .sub{font-size:19px;max-width:620px}

  /* hero: text left, characters right */
  .hero{padding-bottom:56px}
  .hero .wrap{display:grid;grid-template-columns:1fr 1.1fr;grid-template-areas:"eyebrow cast" "h1 cast" "lead cast" "ctas cast";grid-template-rows:auto auto auto 1fr;column-gap:40px;align-items:start}
  .eyebrow{grid-area:eyebrow;margin-top:56px;font-size:17px}
  .hero h1{grid-area:h1;font-size:clamp(46px,4.5vw,60px);text-wrap:balance}
  .lead{grid-area:lead;font-size:21px;max-width:520px;margin-top:18px}
  .hero .ctas{grid-area:ctas;align-self:start;max-width:520px;margin-top:22px}
  .cast{grid-area:cast;align-self:end;justify-content:center;margin:48px 0 0;min-width:0}
  .cast img{width:36%;height:auto;min-width:0}
  .cast .minku{width:30%;margin:0 -3%}

  /* checklist: list left, sticky result right */
  .checklist .wrap{display:grid;grid-template-columns:1fr 380px;column-gap:48px;align-items:start}
  .checklist .wrap>*{grid-column:1}
  .checklist .result{grid-column:2;grid-row:1/span 5;position:sticky;top:32px;margin-top:0}

  /* skill areas */
  .cards{grid-template-columns:repeat(3,1fr);gap:18px}
  .card{padding:90px 18px 16px}
  .card .ico{left:18px;top:18px}

  /* ages */
  .tabs{max-width:460px}
  .agecard{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;padding:10px 26px}
  .agecard .row{border-bottom:0;padding:16px 0}

  /* friends */
  .trio{gap:36px;margin-top:20px;max-width:760px}
  .trio img{max-height:320px}
  .trio figure:nth-child(2) img{max-height:180px}

  /* sample: text left, yarn kitten right */
  .sample .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-items:center}
  .sample .wrap>*{grid-column:1}
  .sample .yarn{grid-column:2;grid-row:1/span 6;width:100%;max-width:420px;margin:0 auto}
  .sample .btn.big{max-width:420px}
  .chips{max-width:420px}

  /* how */
  .steps{grid-template-columns:repeat(3,1fr);gap:18px}
  .steps li{flex-direction:column}

  /* visit */
  .infocard{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:30px}
  .infocard .ctas{flex-direction:column;margin-top:0}
  .infocard .ctas .btn{flex:none;width:100%}

  /* faq */
  .faq .wrap{max-width:820px}

  footer{font-size:15px}
}