/* ===== Hatch — Cute-alism shared stylesheet ===== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap');

:root{
  --ink:#1c1c22;--cream:#fff7ec;--paper:#fffdf8;
  --coral:#ff6f59;--coral-d:#ec5640;
  --butter:#ffd45e;--bubble:#ff97b7;--mint:#74dcb0;--sky:#8ec5ff;--lilac:#c3a6ff;
  --bd:2.5px solid var(--ink);--sh:5px 5px 0 var(--ink);--sh-lg:8px 8px 0 var(--ink);--sh-sm:3px 3px 0 var(--ink);
  --r:18px;--r-lg:26px;--r-pill:999px;
  --disp:"Fredoka","Baloo 2",system-ui,sans-serif;--body:"Nunito",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--cream);color:var(--ink);line-height:1.62;
  background-image:radial-gradient(var(--ink) .9px,transparent .9px);background-size:28px 28px;background-position:-14px -14px}
.wrap{max-width:1040px;margin:0 auto;padding:0 26px}
a{color:var(--coral-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.12;letter-spacing:-.01em;font-weight:700;color:var(--ink)}

/* buttons */
.btn{font-family:var(--disp);font-weight:600;font-size:15px;border:var(--bd);border-radius:var(--r-pill);box-shadow:var(--sh-sm);padding:12px 22px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;background:var(--paper);color:var(--ink);transition:transform .08s,box-shadow .08s}
.btn:hover{text-decoration:none}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn-coral{background:var(--coral);color:#fff}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-lg{padding:15px 26px;font-size:17px;box-shadow:var(--sh)}

/* header */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,247,236,.9);backdrop-filter:blur(10px);border-bottom:var(--bd)}
.nav{display:flex;align-items:center;gap:18px;height:72px;max-width:1040px;margin:0 auto;padding:0 26px;position:relative}
.logo{display:flex;align-items:center;gap:11px}
.logo .mark{width:40px;height:40px;border:var(--bd);border-radius:13px;background:var(--coral);box-shadow:var(--sh-sm);display:grid;place-items:center;color:#fff;font-family:var(--disp);font-weight:700;font-size:23px;transform:rotate(-4deg)}
.logo .name{font-family:var(--disp);font-weight:700;font-size:25px;color:var(--ink)}.logo .name span{color:var(--coral)}
.nav .sp{flex:1}
.lang{display:inline-flex;flex:none;border:var(--bd);border-radius:var(--r-pill);box-shadow:var(--sh-sm);overflow:hidden;font-family:var(--disp);font-weight:600}
.lang a{padding:8px 13px;background:var(--paper);font-size:13px;border-right:var(--bd);color:var(--ink)}
.lang a:last-child{border-right:none}.lang a.on{background:var(--coral);color:#fff}
.lang a:hover{text-decoration:none}

/* article hero */
.arthero{padding:50px 0 26px;position:relative;overflow:hidden}
.crumb{font-family:var(--disp);font-weight:500;font-size:13px;color:#6a6a74;margin-bottom:16px}
.crumb a{color:#6a6a74}
.kick{display:inline-block;font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;background:var(--lilac);border:var(--bd);border-radius:var(--r-pill);box-shadow:var(--sh-sm);padding:5px 13px;margin-bottom:16px;transform:rotate(-1deg)}
.arthero h1{font-size:44px;margin-bottom:14px;max-width:780px}
.arthero .dek{font-size:18px;font-weight:600;color:#44444c;max-width:680px}
.meta{margin-top:18px;font-family:var(--disp);font-weight:500;font-size:13.5px;color:#6a6a74;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.meta .pill{background:var(--paper);border:var(--bd);border-radius:var(--r-pill);box-shadow:2px 2px 0 var(--ink);padding:4px 12px;color:var(--ink)}

/* layout */
.shell{display:grid;grid-template-columns:1fr 250px;gap:42px;padding:30px 0 60px;align-items:start}
.prose{min-width:0}
.prose h2{font-size:30px;margin:42px 0 14px}
.prose h3{font-size:21px;margin:28px 0 10px}
.prose p{font-size:16.5px;margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 18px 4px;padding-left:22px}
.prose li{font-size:16.5px;margin-bottom:8px}
.prose strong{font-weight:800}
.prose a{font-weight:700}
.prose blockquote{border:var(--bd);border-left-width:8px;border-radius:var(--r);background:var(--paper);box-shadow:var(--sh-sm);padding:16px 20px;margin:20px 0;font-weight:700}
.lead-p{font-size:18.5px;font-weight:700;margin-bottom:22px}

/* TOC sidebar */
.toc{position:sticky;top:96px;background:var(--paper);border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:20px}
.toc h4{font-family:var(--disp);font-size:14px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
.toc ol{list-style:none;display:grid;gap:9px;counter-reset:t}
.toc li{counter-increment:t;font-size:13.5px;font-weight:700;display:flex;gap:9px;align-items:flex-start}
.toc li:before{content:counter(t);background:var(--butter);border:2px solid var(--ink);border-radius:50%;width:21px;height:21px;flex:none;display:grid;place-items:center;font-size:11px;box-shadow:2px 2px 0 var(--ink)}
.toc a{color:var(--ink)}

/* comparison table */
.tbl-wrap{overflow-x:auto;border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);margin:22px 0;background:var(--paper)}
table.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
table.cmp th,table.cmp td{padding:12px 14px;text-align:left;border-bottom:2px solid #ece3d2}
table.cmp thead th{background:var(--ink);color:var(--cream);font-family:var(--disp);font-weight:600;border-bottom:none}
table.cmp thead th:first-child{border-top-left-radius:14px}table.cmp thead th:last-child{border-top-right-radius:14px}
table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp tbody td:first-child{font-weight:800}
table.cmp .yes{color:#1a8f63;font-weight:800}.cmp .no{color:#c0392b;font-weight:800}

/* pros / cons */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.pc .box{border:var(--bd);border-radius:var(--r);box-shadow:var(--sh-sm);padding:18px}
.pc .pros{background:#eafaf2}.pc .cons{background:#fdeef0}
.pc h4{font-family:var(--disp);font-size:16px;margin-bottom:10px}
.pc ul{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.pc li{font-size:14.5px;font-weight:700;display:flex;gap:9px;align-items:flex-start}
.pc .pros li:before{content:"+";color:#1a8f63;font-weight:900;font-family:var(--disp)}
.pc .cons li:before{content:"–";color:#c0392b;font-weight:900;font-family:var(--disp)}

/* callouts / CTA */
.callout{border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:20px 22px;margin:24px 0;background:var(--sky)}
.callout.tip{background:var(--mint)}.callout.note{background:var(--butter)}
.callout h4{font-family:var(--disp);font-size:17px;margin-bottom:6px}
.callout p{font-size:15px;font-weight:700;margin:0}

.cta-box{border:var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-lg);background:var(--ink);color:var(--cream);padding:28px 30px;margin:30px 0;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-box .t{max-width:560px}
.cta-box h3{color:var(--paper);font-size:22px;margin-bottom:6px}
.cta-box p{font-size:15px;font-weight:600;color:#cdd0d8;margin:0}
.cta-box .btn{flex:none}

/* FAQ */
.faq{margin:26px 0}
.faq details{border:var(--bd);border-radius:var(--r);box-shadow:var(--sh-sm);background:var(--paper);padding:14px 18px;margin-bottom:12px}
.faq summary{font-family:var(--disp);font-weight:600;font-size:16.5px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";color:var(--coral-d);font-weight:900;margin-right:10px}
.faq details[open] summary:before{content:"–"}
.faq details p{font-size:15px;font-weight:600;margin-top:10px}

/* related */
.related{border-top:2px dashed #d8cfbf;padding-top:24px;margin-top:34px}
.related h4{font-family:var(--disp);font-size:18px;margin-bottom:14px}
.related .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.related a.card{background:var(--paper);border:var(--bd);border-radius:var(--r);box-shadow:var(--sh-sm);padding:16px;font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--ink);display:block}
.related a.card:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:var(--sh)}

/* disclosure */
.disclosure{font-size:12.5px;font-weight:700;color:#7a7a84;background:var(--paper);border:2px solid #ece3d2;border-radius:12px;padding:10px 14px;margin:18px 0}

/* footer */
footer.site{background:var(--paper);border-top:var(--bd);margin-top:30px;padding:40px 0 26px}
.fbot{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:#7a7a84;flex-wrap:wrap;gap:10px;max-width:1040px;margin:0 auto;padding:0 26px}
.fbot a{color:var(--coral-d)}.fbot .links{display:flex;gap:16px;flex-wrap:wrap}

@media(max-width:880px){
  .shell{grid-template-columns:1fr}
  .toc{position:static;margin-bottom:20px}
  .arthero h1{font-size:32px}.prose h2{font-size:25px}
  .pc,.related .cards{grid-template-columns:1fr}
  .cta-box{flex-direction:column;align-items:flex-start}
}

/* ===== category hub ===== */
.hubintro{padding:8px 0 6px}
.hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0 8px}
.hubcard{background:var(--paper);border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:20px;display:block;transition:transform .1s,box-shadow .1s}
.hubcard:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg);text-decoration:none}
.hubcard .tag{display:inline-block;border:var(--bd);border-radius:var(--r-pill);box-shadow:2px 2px 0 var(--ink);padding:3px 11px;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;background:var(--butter)}
.hubcard h3{font-size:17px;margin-bottom:6px;color:var(--ink)}
.hubcard p{font-size:13.5px;font-weight:600;color:#5c5c66;margin:0}
.hubcard .go{display:inline-block;margin-top:11px;font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--coral-d)}
@media(max-width:880px){ .hubgrid{grid-template-columns:1fr} }

/* ===== home hero + forms ===== */
.homehero{padding:60px 0 30px;position:relative}
.homehero .ey{display:inline-flex;align-items:center;gap:8px;background:var(--mint);border:var(--bd);border-radius:var(--r-pill);box-shadow:var(--sh-sm);padding:8px 16px;font-family:var(--disp);font-weight:600;font-size:13.5px;transform:rotate(-2deg);margin-bottom:20px}
.homehero h1{font-size:52px;max-width:760px;margin-bottom:16px}
.homehero h1 .u{background:var(--butter);border-radius:9px;padding:0 9px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.homehero .dek{font-size:19px;font-weight:600;color:#44444c;max-width:560px;margin-bottom:26px}
.homehero .cta{display:flex;gap:14px;flex-wrap:wrap}
.sectionhead{font-family:var(--disp);font-weight:700;font-size:30px;margin:42px 0 6px}
.sectionsub{font-size:16px;font-weight:600;color:#54545e;margin-bottom:8px}
.hatch-form{border:var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh);background:var(--paper);padding:24px;max-width:540px}
.hatch-form label{display:block;font-family:var(--disp);font-weight:600;font-size:13px;margin:0 0 6px 2px}
.hatch-form input,.hatch-form textarea{width:100%;border:var(--bd);border-radius:12px;background:var(--cream);padding:12px 14px;font-family:var(--body);font-weight:700;font-size:14.5px;margin-bottom:14px}
.hatch-form textarea{min-height:120px;resize:vertical}
@media(max-width:880px){ .homehero h1{font-size:36px} }

/* ===== responsive nav + burger ===== */
.nav-links{display:flex;gap:18px;margin-left:10px;font-family:var(--disp);font-weight:500;font-size:14.5px}
.nav-links a{color:var(--ink);padding:4px 2px;border-bottom:3px solid transparent}
.nav-links a:hover{border-color:var(--coral);text-decoration:none}
.nav-links .m-tool{display:none}
.navtoggle{display:none}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:38px;border:var(--bd);border-radius:11px;box-shadow:var(--sh-sm);background:var(--paper);cursor:pointer;flex:none;padding:0}
.burger span{display:block;height:3px;width:20px;margin:0 auto;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.navtoggle:checked ~ .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.navtoggle:checked ~ .burger span:nth-child(2){opacity:0}
.navtoggle:checked ~ .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:880px){
  .nav-links{display:none}
  .burger{display:flex}
  header .nav > .btn-coral{display:none}
  .nav .logo{order:0}.nav .sp{order:1}.nav .lang{order:2}.nav .burger{order:3}
  .navtoggle:checked ~ .nav-links{display:flex;flex-direction:column;gap:16px;align-items:flex-start;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:var(--bd);box-shadow:var(--sh);padding:20px 26px;font-size:18px;z-index:70}
  .navtoggle:checked ~ .nav-links .m-tool{display:inline-block;background:var(--coral);color:#fff;border:var(--bd);border-radius:var(--r-pill);box-shadow:var(--sh-sm);padding:10px 18px}
  /* keep the top bar from cramming the burger against the edge */
  header .nav{padding-left:16px;padding-right:16px;gap:9px}
  .lang a{padding:7px 11px;font-size:12.5px}
}