/* =====================================================================
   Yufena Explorers: shared styles
   Warm cream paper, sage and teal, dusty orange, paper-cut shapes.
   MAP: 1 tokens  2 base  3 header  4 buttons + type  5 sections
        6 pop-up paper art  7 home sections  8 inner pages  9 forms
        10 parents worksheet  11 footer  12 reveal + motion  13 print
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:#33261b; --ink-2:#5c4838; --paper:#f7eedc; --paper-2:#efe3c8; --card:#fffaf0;
  --terra:#c46b4a; --terra-d:#9e4c31; --teal:#4f8f8a; --teal-d:#2c5f5b; --sage:#a5b58f; --sage-d:#6f8a6b;
  --gold:#e1b45b; --gold-l:#f2cf86; --mustard:#d6ae5a; --navy:#5b5f8d; --blue-ink:#2e4a9e;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Avenir Next",Avenir,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --hand:"Segoe Print","Bradley Hand","Chalkboard SE","Marker Felt","Comic Sans MS",cursive;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .26 0 0 0 0 .15 0 0 0 .45 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --wood:radial-gradient(900px 480px at 50% 0%,rgba(255,196,120,.2),transparent 72%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.26) 0 2px,rgba(255,205,150,.05) 2px 130px,rgba(0,0,0,.18) 130px 132px,rgba(255,205,150,.03) 132px 262px),
    repeating-linear-gradient(90deg,rgba(255,205,150,.035) 0 1px,transparent 1px 9px),linear-gradient(180deg,#5a3a24,#352013);
  --cover:linear-gradient(135deg,#3b7370,#2b5754 55%,#244846);
  --paper-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 2px 2px rgba(80,50,20,.1),0 16px 28px -16px rgba(80,50,20,.45);
  --wrap:min(1160px,calc(100% - 40px));
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font:400 18px/1.6 var(--sans);color:var(--ink);background:var(--grain),linear-gradient(180deg,#f8f0df,#f4e9d3);overflow-x:hidden}
@media (min-width:900px){body{font-size:19px}}
img,svg{max-width:100%}
a{color:var(--terra-d);text-underline-offset:3px}
a:hover{color:var(--terra)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);text-wrap:balance;margin:0}
h1{font-size:clamp(40px,6vw,70px);line-height:1.02;letter-spacing:-.015em;font-weight:700}
h2{font-size:clamp(32px,4.2vw,50px);line-height:1.06;letter-spacing:-.01em;font-weight:700;margin:12px 0 18px}
h3{font-size:clamp(22px,2vw,26px);line-height:1.2;font-weight:700;margin:0 0 8px}
.wrap{width:var(--wrap);margin:0 auto}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;background:#fffaf0;color:var(--ink);padding:12px 18px;border-radius:10px;font-weight:700}
.skip:focus{left:12px}
.lede{font-size:clamp(19px,1.8vw,22px);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.muted{color:var(--ink-2)}
.hand{font-family:var(--hand)}

/* ---------- 3. HEADER ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(248,240,223,.93);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid rgba(120,80,40,.14)}
.site-header .bar{width:var(--wrap);margin:0 auto;height:76px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;min-height:48px}
.brand .face{width:46px;height:46px;flex:none;filter:drop-shadow(0 3px 3px rgba(60,35,15,.3))}
.wordmark{font-family:var(--serif);font-weight:700;font-size:33px;line-height:1;letter-spacing:.005em;color:var(--teal-d);
  text-shadow:-1.5px -1.5px 0 #fffaf0,1.5px -1.5px 0 #fffaf0,-1.5px 1.5px 0 #fffaf0,1.5px 1.5px 0 #fffaf0,0 2px 0 #fffaf0,2px 5px 5px rgba(60,35,15,.28)}
.nav{display:flex;align-items:center;gap:4px}
.nav a:not(.btn){display:inline-flex;align-items:center;min-height:48px;padding:10px 14px;border-radius:10px;font-weight:600;font-size:18px;color:var(--ink);text-decoration:none}
.nav a:not(.btn):hover{background:rgba(196,107,74,.1);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--terra-d);box-shadow:inset 0 -3px 0 var(--terra)}
.nav .btn{margin-left:10px}
.menu-btn{display:none;align-items:center;gap:8px;min-height:48px;padding:10px 16px;border-radius:12px;border:2px solid rgba(120,80,40,.22);background:#fffaf0;font:700 18px var(--sans);color:var(--ink);cursor:pointer}
.menu-btn i{position:relative;width:20px;height:2px;background:currentColor;border-radius:2px;display:block}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s}
.menu-btn i::before{top:-6px}.menu-btn i::after{top:6px}
.nav-open .menu-btn i{background:transparent}
.nav-open .menu-btn i::before{transform:translateY(6px) rotate(45deg)}.nav-open .menu-btn i::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:880px){
  .menu-btn{display:inline-flex}
  .nav{position:absolute;left:0;right:0;top:76px;display:none;flex-direction:column;align-items:stretch;gap:2px;padding:12px 20px 22px;background:var(--grain),var(--paper);
    border-bottom:1px solid rgba(120,80,40,.16);box-shadow:0 18px 30px -18px rgba(60,35,15,.45)}
  .nav-open .nav{display:flex}
  .nav a:not(.btn){font-size:20px;padding:14px 12px}
  .nav .btn{margin:12px 0 0}
}
@media (max-width:380px){.wordmark{font-size:28px}.brand .face{width:40px;height:40px}}

/* ---------- 4. BUTTONS + LITTLE TYPE PIECES ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 26px;border:0;border-radius:999px;cursor:pointer;
  font:700 18px/1.15 var(--sans);text-align:center;text-decoration:none;color:#fff8ec;background:linear-gradient(#b4603f,#934a2f);
  box-shadow:0 5px 0 #6a3220,0 12px 20px -8px rgba(90,40,20,.55);transition:transform .12s,box-shadow .12s,filter .2s;touch-action:manipulation}
.btn:hover{color:#fff8ec;filter:brightness(1.07)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #6a3220}
.btn.alt{color:var(--ink);background:linear-gradient(#fffaf0,#efe2c6);box-shadow:0 5px 0 #b59c72,0 12px 20px -10px rgba(90,60,30,.4)}
.btn.alt:active{box-shadow:0 2px 0 #b59c72}
.btn.teal{background:linear-gradient(#3d7d78,#2c5f5b);box-shadow:0 5px 0 #1b3b38,0 12px 20px -8px rgba(20,50,45,.55)}
.btn.sm{min-height:48px;padding:10px 20px}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 18px/1.25 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--terra-d)}
.eyebrow::before{content:"";flex:none;width:12px;height:17px;background:currentColor;clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}
.ul{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q50 2 100 7 T198 5' fill='none' stroke='%23c46b4a' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") bottom/100% 11px no-repeat;padding-bottom:6px}
.ctas{display:flex;flex-wrap:wrap;gap:14px 16px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start}
.ticks li::before{content:"";width:28px;height:28px;border-radius:50%;margin-top:1px;background:var(--teal-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M9 18l6 6 11-12' fill='none' stroke='%23fff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat}
.card{position:relative;background:var(--grain),var(--card);border-radius:18px;box-shadow:var(--paper-shadow)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font:700 18px/1.2 var(--sans);background:#fff4dd;color:var(--ink);box-shadow:0 2px 0 rgba(120,80,40,.18)}
.badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:6px 14px;border-radius:999px;font:700 18px/1.2 var(--sans)}
.badge.free{background:var(--teal-d);color:#fff}
.badge.soon{background:#f3e7cc;color:var(--ink-2);box-shadow:inset 0 0 0 2px #cdb68b}
.updated{font-family:var(--sans);font-weight:600;color:var(--ink-2);margin:10px 0 18px}

/* ---------- 5. SECTIONS ---------- */
.sec{position:relative;padding:clamp(64px,9vw,112px) 0}
.sec.tint{background:var(--grain),var(--paper-2)}
.sec.tint::before{content:"";position:absolute;left:0;right:0;top:-30px;height:32px;pointer-events:none;filter:drop-shadow(0 -2px 1px rgba(80,50,20,.06));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 32' preserveAspectRatio='none'%3E%3Cpath d='M0 32V16Q75 0 150 16T300 16T450 16T600 16T750 16T900 16T1050 16T1200 16V32z' fill='%23efe3c8'/%3E%3C/svg%3E") bottom/1200px 32px repeat-x}
.sh{max-width:780px;margin:0 0 clamp(36px,5vw,56px)}
.sh.center{margin-left:auto;margin-right:auto;text-align:center}
.sh.center .eyebrow{justify-content:center}
.sh p{margin:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,84px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- 6. POP-UP PAPER ART (same look as the lessons) ---------- */
.art{position:relative;width:100%;overflow:hidden;border-radius:14px;perspective:1100px;perspective-origin:50% 90%;container-type:inline-size;--u:calc(100cqw / 600);
  background:#e9dcc2;box-shadow:0 0 0 6px #fffaf0,0 0 0 7px rgba(90,60,30,.22),0 24px 38px -20px rgba(60,35,15,.6)}
.art .layer{position:absolute;inset:0;transform-origin:50% 100%;
  translate:calc(var(--px,0) * var(--dz,0) * 10px) calc(var(--py,0) * var(--dz,0) * 6px);scale:calc(1 + var(--dz,0) * .03);transition:translate .7s cubic-bezier(.2,.7,.3,1)}
.art .layer.lp{filter:drop-shadow(0 calc(2px + var(--dz,0) * 3px) calc(1px + var(--dz,0) * 2px) rgba(50,30,15,.34)) drop-shadow(0 calc(5px + var(--dz,0) * 10px) calc(5px + var(--dz,0) * 8px) rgba(50,30,15,.2))}
.art .layer.flat{filter:none}
.art .layer>svg,.art .mv>svg{display:block;width:100%;height:100%;overflow:visible}
.art .mv{position:absolute;inset:0}
.reveal .art .layer.lp{opacity:0}
.reveal .art.in .layer.lp{animation:popUp 1s cubic-bezier(.22,.85,.3,1) both;animation-delay:calc(150ms + var(--i) * 130ms)}
@keyframes popUp{0%{transform:rotateX(89deg);opacity:0}6%{opacity:1}52%{transform:rotateX(-8deg)}72%{transform:rotateX(3.5deg)}88%{transform:rotateX(-1deg)}100%{transform:rotateX(0);opacity:1}}
.yuwrap{position:absolute;filter:drop-shadow(0 5px 3px rgba(50,30,15,.4));animation:bobY 3s ease-in-out infinite;transform-origin:50% 100%}
.yuwrap svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes bobY{50%{transform:translateY(calc(var(--u,1px) * -5))}}
.blink{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);animation:blink 5.4s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(0)}94%,97%{transform:scaleY(1)}}
.cloudmv{animation:driftX 16s ease-in-out infinite alternate}
@keyframes driftX{from{transform:translateX(calc(var(--u) * -24))}to{transform:translateX(calc(var(--u) * 24))}}
.hazemv{animation:swayX 11s ease-in-out infinite alternate}
@keyframes swayX{from{transform:translateX(calc(var(--u) * -18))}to{transform:translateX(calc(var(--u) * 18))}}
.floatq{position:absolute;font-family:var(--hand);font-weight:800;line-height:1;color:#fff7e2;text-shadow:0 3px 0 rgba(120,70,40,.55);font-size:calc(var(--u) * 54);animation:floatQ 3.2s ease-in-out infinite}
@keyframes floatQ{50%{transform:translateY(calc(var(--u) * -12)) rotate(5deg)}}
.sparkle{position:absolute;width:calc(var(--u) * 16);aspect-ratio:1;background:#fff3c4;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:tw 2.2s ease-in-out infinite}
@keyframes tw{50%{opacity:.2;transform:scale(.6)}}
.drp{position:absolute;width:calc(var(--u) * 6);height:calc(var(--u) * 18);border-radius:4px;background:#4f8f8a;opacity:0;animation:rainF 1.3s linear infinite}
@keyframes rainF{0%{transform:translateY(0);opacity:0}15%{opacity:.85}100%{transform:translateY(calc(var(--u) * 170));opacity:0}}
.pf{position:absolute;width:calc(var(--s) * 2 * var(--u));aspect-ratio:1;margin-left:calc(var(--s) * -1 * var(--u));border-radius:52% 48% 55% 45%/48% 55% 45% 52%;
  background:var(--c,#a39688);opacity:0;animation:pfRise var(--dur,6s) ease-out infinite;animation-delay:var(--dl,0s)}
@keyframes pfRise{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.8}100%{transform:translate(calc(var(--dx) * var(--u)),calc(var(--dy) * var(--u))) scale(2);opacity:0}}
.glow{animation:glowP 2.6s ease-in-out infinite}
@keyframes glowP{50%{opacity:.55}}

/* ---------- 7. HOME SECTIONS ---------- */
/* hero */
.hero{position:relative;padding:clamp(36px,6vw,80px) 0 clamp(90px,11vw,150px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;pointer-events:none;background:radial-gradient(700px 420px at 70% 30%,rgba(255,206,140,.35),transparent 70%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero h1 span{display:block}
.hero h1 .warm{color:var(--terra-d);font-style:italic;font-weight:600}
.hero .lede{max-width:33em;margin:24px 0 32px}
.reassure{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;margin:28px 0 0;padding:0;color:var(--ink-2)}
.reassure li{display:flex;align-items:center;gap:8px}
.reassure li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--sage-d)}
.hero-art{position:relative;max-width:560px;justify-self:end;width:100%}
.hero-art .note{position:absolute;left:-26px;bottom:-26px;z-index:2;max-width:230px;background:#fbe9a8;color:#5a3b10;padding:14px 16px 16px;font:400 19px/1.3 var(--hand);rotate:-4deg;box-shadow:0 12px 18px -8px rgba(60,40,10,.4)}
.hero-art .note::before{content:"";position:absolute;top:-11px;left:50%;width:70px;height:22px;margin-left:-35px;background:rgba(255,255,255,.55);rotate:3deg}
.hills{position:absolute;left:0;right:0;bottom:-2px;height:clamp(60px,9vw,110px);pointer-events:none}
.hills svg{width:100%;height:100%;display:block}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero-art{justify-self:center;max-width:520px}.hero-art .note{left:-6px}}

/* lesson preview on the wooden desk */
.desk{position:relative;border-radius:28px;padding:clamp(28px,5vw,64px);color:#eadbbd;background:var(--wood);overflow:hidden;
  box-shadow:inset 0 2px 0 rgba(255,220,170,.12),0 30px 50px -26px rgba(40,20,5,.75)}
.desk .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,80px);align-items:center}
.desk h2{color:var(--gold-l);text-shadow:0 2px 0 rgba(0,0,0,.3)}
.desk .eyebrow{color:#ffcf9a}
.desk p{color:#eadbbd}
.desk .chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px}
.desk .chip{background:rgba(255,240,210,.12);color:#fbe9c8;box-shadow:inset 0 0 0 1.5px rgba(255,220,170,.3)}
@media (max-width:900px){.desk .grid{grid-template-columns:1fr}}
/* the looping storybook: the cover opens, a paper scene stands up, the cover closes */
.bookloop{position:relative;display:block;width:min(340px,72vw);aspect-ratio:.76;margin:10px auto 26px;perspective:1600px;text-decoration:none;color:inherit}
.bl-pages{position:absolute;inset:6px -12px 2px 8px;border-radius:4px 10px 10px 4px;background:#f1e4c6;box-shadow:2px 2px 0 #e6d7b6,4px 4px 0 #d5c4a1,6px 6px 0 #eadcbc,8px 8px 0 #d0bf9b,0 40px 40px -12px rgba(0,0,0,.6)}
.bl-in{position:absolute;inset:6px 0 2px 8px;border-radius:4px 10px 10px 4px;overflow:hidden;perspective:600px;perspective-origin:50% 90%;
  background:var(--grain),radial-gradient(120% 90% at 50% 40%,#f8edd6,#efe0c0)}
.bl-pop{position:absolute;left:6%;right:6%;bottom:9%;transform-origin:50% 100%;animation:blPop 8s ease-in-out infinite;filter:drop-shadow(0 6px 4px rgba(50,30,15,.35))}
.bl-pop svg{display:block;width:100%;height:auto}
.bl-cap{position:absolute;left:10%;right:8%;top:9%;font:500 19px/1.35 var(--serif);color:var(--ink)}
.bl-cap::first-letter{float:left;font-size:2.8em;line-height:.8;padding:.06em .08em 0 0;font-weight:700;color:var(--terra)}
.bl-cover{position:absolute;inset:0;transform-origin:0 50%;animation:blOpen 8s ease-in-out infinite;border-radius:4px 12px 12px 4px;overflow:hidden;background:var(--cover);
  box-shadow:inset 0 0 0 3px rgba(225,180,91,.6),inset 0 0 0 9px rgba(0,0,0,.16),inset 12px 0 14px -8px rgba(0,0,0,.45);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.bl-cover::before{content:"";position:absolute;inset:14px;border:2px solid rgba(225,180,91,.55);border-radius:6px}
.bl-t{position:absolute;left:10%;right:10%;top:9%;text-align:center;font:700 clamp(22px,2.3vw,28px)/1.12 var(--serif);color:var(--gold-l);text-shadow:0 2px 0 rgba(0,0,0,.35)}
.bl-t small{display:block;margin-top:10px;font:700 18px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#e9d9b0;text-shadow:none}
.bl-hill{position:absolute;left:9%;right:9%;bottom:7%;height:34%;border-radius:50% 50% 0 0/40% 40% 0 0;background:linear-gradient(#6c9a82,#4d7d6c);box-shadow:0 -6px 0 #86ad92}
.bl-sun{position:absolute;right:16%;top:47%;width:13%;aspect-ratio:1;border-radius:50%;background:#d98d5b;box-shadow:0 0 0 7px rgba(217,141,91,.35)}
.bl-yu{position:absolute;left:50%;bottom:7%;width:38%;margin-left:-19%}
.bl-yu .yuwrap{position:relative;width:100%}
.bl-puff{position:absolute;border-radius:50%;background:rgba(232,214,190,.35);pointer-events:none;animation:puffD 7s ease-in-out infinite}
@keyframes puffD{0%,100%{transform:translate(0,0) scale(1);opacity:.5}50%{transform:translate(18px,-14px) scale(1.15);opacity:.85}}
@keyframes blOpen{0%,10%{transform:rotateY(-3deg)}34%,72%{transform:rotateY(-62deg)}94%,100%{transform:rotateY(-3deg)}}
@keyframes blPop{0%,20%{transform:rotateX(84deg);opacity:0}24%{opacity:1}40%{transform:rotateX(-7deg)}48%,68%{transform:rotateX(0);opacity:1}86%,100%{transform:rotateX(84deg);opacity:0}}
.bookloop:focus-visible{outline-offset:12px}

/* seven steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 24px}
.step{padding:64px 22px 24px}
.step .tab{position:absolute;top:-10px;left:20px;display:flex;align-items:center;gap:8px;padding:12px 14px 20px;background:var(--c);color:var(--t,#fff);
  font:700 18px/1 var(--sans);clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 9px),0 100%);filter:drop-shadow(0 3px 2px rgba(60,35,15,.3))}
.step .tab svg{width:24px;height:24px}
.step dl{margin:12px 0 0;display:grid;gap:12px}
.step dt{font:700 18px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.step dt.k{color:var(--sage-d)}.step dt.p{color:var(--terra-d)}
.step dd{margin:2px 0 0;color:var(--ink-2)}
.step.go{display:flex;flex-direction:column;justify-content:center;gap:14px;background:var(--cover);color:#f4e8cf;padding:30px 24px}
.step.go h3{color:var(--gold-l)}
.step.go p{margin:0;color:#e9dcbd}
@media (max-width:1060px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}

/* skills */
.skills{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.skill{text-align:center;padding:28px 18px 26px}
.skill .ic{width:88px;height:88px;margin:0 auto 14px;filter:drop-shadow(0 5px 4px rgba(50,30,15,.25))}
.skill .ic svg{width:100%;height:100%}
.skill p{margin:0;color:var(--ink-2)}
.honest{max-width:760px;margin:40px auto 0;text-align:center;font:500 20px/1.5 var(--serif);color:var(--ink-2)}
.honest b{color:var(--ink)}
@media (max-width:1060px){.skills{grid-template-columns:repeat(2,minmax(0,1fr))}.skill:last-child{grid-column:1/-1}}
@media (max-width:560px){.skills{grid-template-columns:1fr}}

/* learn together */
.points{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:22px}
.points li{display:grid;grid-template-columns:60px 1fr;gap:16px;align-items:start}
.points .pi{width:60px;height:60px;border-radius:50%;background:#fff6e3;display:grid;place-items:center;box-shadow:0 3px 0 rgba(120,80,40,.18),0 0 0 1.5px rgba(120,80,40,.12)}
.points .pi svg{width:34px;height:34px}
.points b{display:block;font:700 22px/1.25 var(--serif);margin-bottom:2px}
.points span{color:var(--ink-2)}
.pagemock{position:relative;max-width:520px;margin:0 auto;padding:34px 32px 86px;border-radius:8px;rotate:-1.2deg;
  background:var(--grain),radial-gradient(120% 90% at 50% 40%,#f8edd6,#efe0c0);
  box-shadow:1px 1px 0 #e6d7b6,2px 2px 0 #d5c4a1,3px 3px 0 #eadcbc,4px 4px 0 #d0bf9b,0 30px 40px -20px rgba(60,35,15,.55)}
.pagemock .story{font:500 22px/1.42 var(--serif);margin:0}
.pagemock .story::first-letter{float:left;font-size:3.1em;line-height:.8;padding:.06em .1em 0 0;font-weight:700;color:var(--terra)}
.pagemock .pn{position:absolute;left:0;bottom:20px;padding:10px 18px 10px 34px;font:700 18px var(--serif);color:#5a3b10;background:linear-gradient(#f7de9a,#efc96e);
  clip-path:polygon(0 0,100% 0,100% 100%,22px 100%,0 calc(100% - 22px))}
.pagemock .pb{position:relative;margin:22px -40px 0 8px;background:#fdf1c8;border-radius:8px;padding:14px 18px;font:600 18px/1.4 var(--serif);color:#4a3412;rotate:-1.5deg;
  box-shadow:0 12px 20px -6px rgba(60,40,10,.45)}
.pagemock .pb b{display:block;font:700 18px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#a0661e;margin-bottom:4px}
.pagemock .timer{position:absolute;right:-22px;top:-26px;width:104px;height:104px;border-radius:50%;background:#fffaf0;display:grid;place-items:center;text-align:center;
  font:700 18px/1.1 var(--sans);color:var(--teal-d);box-shadow:0 0 0 4px #4f8f8a,0 0 0 7px #fffaf0,0 12px 18px -6px rgba(40,30,20,.4);rotate:8deg}
.pagemock .timer b{display:block;font:700 26px/1 var(--serif)}

/* pilot */
.pilot{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,64px);align-items:center;border-radius:24px;padding:clamp(32px,5vw,64px);
  color:#efe3c9;background:var(--cover);box-shadow:inset 0 0 0 3px rgba(225,180,91,.6),inset 0 0 0 9px rgba(0,0,0,.16),0 26px 40px -20px rgba(30,20,10,.65)}
.pilot::before{content:"";position:absolute;inset:16px;border:2px solid rgba(225,180,91,.45);border-radius:12px;pointer-events:none}
.pilot h2{color:var(--gold-l);text-shadow:0 2px 0 rgba(0,0,0,.3)}
.pilot .eyebrow{color:#ffd59e}
.pilot .facts{list-style:none;margin:24px 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.pilot .facts li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center}
.pilot .facts svg{width:44px;height:44px}
.pilot .facts b{color:#fff3da}
.pilot .stamp{width:min(260px,70%);justify-self:center;rotate:-8deg;filter:drop-shadow(0 12px 14px rgba(0,0,0,.35))}
@media (max-width:900px){.pilot{grid-template-columns:1fr}.pilot .stamp{grid-row:1;width:180px}}
@media (max-width:560px){.pilot .facts{grid-template-columns:1fr}}

/* lessons */
.lessons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.lcard{display:flex;flex-direction:column;overflow:hidden;color:inherit;text-decoration:none;transition:transform .25s,box-shadow .25s}
.lcard .art{border-radius:0;box-shadow:none}
.lcard .body{display:flex;flex-direction:column;gap:10px;flex:1;padding:20px 22px 24px}
.lcard h3{margin:0}
.lcard p{margin:0;color:var(--ink-2)}
.lcard .cta{margin-top:auto;padding-top:8px}
a.lcard:hover{transform:translateY(-5px);color:inherit;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 4px 4px rgba(80,50,20,.1),0 26px 36px -18px rgba(80,50,20,.5)}
.lcard.soon .art{filter:saturate(.72)}
.lcard .go{font-weight:700;color:var(--terra-d)}
.lessons.big{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
@media (max-width:1060px){.lessons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.lessons,.lessons.big{grid-template-columns:1fr}}

/* founder note */
.letter{position:relative;max-width:800px;margin:0 auto;padding:46px clamp(24px,6vw,70px) 44px;border-radius:6px;rotate:-.5deg;
  background:var(--grain),linear-gradient(90deg,transparent 0 46px,rgba(214,120,100,.35) 46px 48px,transparent 48px),#fffdf6;
  box-shadow:0 2px 0 #eadfc8,0 26px 40px -22px rgba(60,35,15,.5)}
.letter::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:30px;margin-left:-60px;background:rgba(225,180,91,.55);rotate:-2deg}
.letter p{font:400 20px/1.75 var(--serif);color:var(--ink)}
.letter .sign{font:400 32px/1.1 var(--hand);color:var(--blue-ink);margin:10px 0 0}
.letter .role{color:var(--ink-2);margin:4px 0 0}
.letter .yu{position:absolute;right:-12px;bottom:-34px;width:110px}
.letter .yu .yuwrap{position:relative;width:100%}
@media (max-width:600px){.letter{background:var(--grain),#fffdf6}.letter .yu{width:80px;right:-4px;bottom:-40px}}

/* FAQ */
.faq{max-width:880px;margin:0 auto;display:grid;gap:14px}
.qa{background:var(--grain),var(--card);border-radius:14px;box-shadow:var(--paper-shadow);border-left:8px solid var(--c,var(--terra))}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:18px 22px;font:700 clamp(19px,1.8vw,22px)/1.3 var(--serif)}
.qa summary::-webkit-details-marker{display:none}
.qa .pm{flex:none;width:38px;height:38px;border-radius:50%;background:#f3e6c9;display:grid;place-items:center;font:400 26px/1 var(--sans);color:var(--terra-d);transition:transform .3s}
.qa[open] .pm{transform:rotate(45deg)}
.qa .a{padding:0 22px 20px;color:var(--ink-2)}
.qa .a p:last-child{margin:0}

/* ---------- 8. INNER PAGES ---------- */
.page-hero{position:relative;padding:clamp(44px,7vw,90px) 0 clamp(36px,5vw,56px)}
.page-hero h1{font-size:clamp(38px,5.4vw,62px)}
.page-hero .lede{max-width:38em;margin:18px 0 0}
.page-hero .art-side{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center}
@media (max-width:900px){.page-hero .art-side{grid-template-columns:1fr}}
.panel{padding:clamp(24px,4vw,40px)}
.panel h2{font-size:clamp(28px,3.2vw,38px);margin-top:0}
#signup{padding:32px}
@media (max-width:600px){#signup{padding:20px}}
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:960px){.two{grid-template-columns:1fr}}
.dl{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;margin:0}
.dl dt{font-weight:700}
.dl dd{margin:0;color:var(--ink-2)}
.prose{max-width:760px}
.prose h2{font-size:clamp(26px,2.6vw,32px);margin:40px 0 12px}
.prose ul{padding-left:1.2em}
.prose li{margin:.3em 0}
.method{list-style:none;margin:0;padding:0;display:grid;gap:26px;counter-reset:m}
.method>li{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.method .num{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:var(--t,#fff);font:700 26px var(--serif);box-shadow:0 4px 0 rgba(0,0,0,.18)}
.method .num svg{width:30px;height:30px}
.method h3{margin-top:4px}
.method .ex{margin-top:12px;padding:14px 18px;border-radius:12px;background:#fff4dd;border-left:6px solid var(--c);color:var(--ink)}
.method .ex b{display:block;font:700 18px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--terra-d);margin-bottom:4px}
.say{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.say div{padding:12px 16px;border-radius:12px;background:var(--card);box-shadow:0 2px 0 rgba(120,80,40,.15)}
.say b{display:block;color:var(--sage-d)}
.say div+div b{color:var(--terra-d)}
@media (max-width:600px){.method>li{grid-template-columns:1fr}.say{grid-template-columns:1fr}}
.center{text-align:center}
.yu-small{width:120px;margin:0 auto}
.yu-small .yuwrap{position:relative;width:100%}

/* ---------- 9. FORMS ---------- */
.form{display:grid;gap:22px}
.field>label,.field>legend,.field .lbl{display:block;font:700 18px/1.3 var(--sans);margin:0 0 8px;padding:0}
.field .hint{display:block;font-weight:400;color:var(--ink-2);margin-top:2px}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.input,.form input[type="text"],.form input[type="email"],.form select,.form textarea{width:100%;min-height:54px;padding:13px 14px;border-radius:12px;border:2px solid #d6c39c;background:#fffdf7;
  font:400 19px/1.4 var(--sans);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(79,143,138,.25)}
.choices{display:flex;flex-wrap:wrap;gap:12px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:52px;padding:0 18px;border-radius:12px;border:2px solid #d6c39c;background:#fffdf7;font-weight:700;cursor:pointer}
.choice input:checked+span{background:#ffe7a6;border-color:#b98a2c;box-shadow:0 3px 0 #b98a2c}
.choice input:focus-visible+span{outline:3px solid var(--teal);outline-offset:3px}
.check{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;cursor:pointer}
.check input{width:26px;height:26px;margin:2px 0 0;accent-color:var(--teal-d)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{padding:16px 18px;border-radius:12px;background:#dcefe6;color:#1f4a3a;font-weight:600}
.form-msg.err{background:#fbe1d6;color:#7a2f18}
.form-msg:empty{display:none}

/* ---------- 10. PARENTS WORKSHEET (paper-cut look, prints on one A4 page, clear in black and white) ---------- */
.ws{max-width:820px;margin:0 auto;background:#fff;color:var(--ink);border-radius:14px;padding:26px 32px 22px;font-family:var(--sans);font-size:18px;
  box-shadow:0 2px 0 #e6dcc8,0 26px 40px -22px rgba(60,35,15,.5);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.ws-brand{display:flex;align-items:center;gap:10px}
.ws-brand img{width:46px;height:46px}
.ws-wm{display:flex;flex-direction:column;line-height:1}
.ws-wm b{font-family:var(--serif);font-size:30px;color:var(--teal-d)}
.ws-wm span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--sage-d);margin-top:3px}
.ws-kind{margin-left:auto;font-family:var(--serif);font-weight:700;font-size:16px;color:var(--terra-d);border:2px solid var(--terra-d);border-radius:999px;padding:4px 14px;text-align:center}
.ws-hills{display:block;width:100%;height:30px;margin:6px 0 10px}
.ws-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:4px}
.ws-head h2{font-size:28px;margin:0;color:var(--ink)}
.ws-head .who{display:flex;gap:18px;flex-wrap:wrap;font-weight:700}
.ws-head .who span{border-bottom:2px dotted #8a7b6a;min-width:150px;display:inline-block}
.ws-box{border:2px solid var(--ink);border-radius:14px;background:var(--card);padding:9px 14px 11px;margin:14px 7px 0 0;box-shadow:6px 6px 0 -2px #fff,6px 6px 0 0 var(--sage-d)}
.ws-box h3{font:700 18px/1.2 var(--serif);margin:0 0 4px;display:flex;align-items:center;gap:8px}
.ws-box h3 i{font:700 15px var(--sans);font-style:normal;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--teal-d);color:#fff;flex:none}
.ws-box .tip{font-size:16px;color:var(--ink-2);margin:0 0 2px}
.ws-lines{height:var(--h,68px);background:repeating-linear-gradient(transparent 0 33px,#a89c8c 33px 34px)}
.ws-chain{display:flex;align-items:center;gap:6px;margin-top:6px}
.ws-chain span{flex:1;height:70px;border:2px dashed #8a7b6a;border-radius:10px;background:#fff}
.ws-chain b{color:var(--terra-d);font-size:22px}
.ws-row{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.ws-row .ws-box{margin-right:7px}
.ws-draw{height:150px;border:2px dashed #8a7b6a;border-radius:10px;margin-top:6px;background:#fff}
.ws-check{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:6px}
.ws-check li::before{content:"\25A2";margin-right:8px;font-size:20px}
.ws-foot{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:8px;border-top:2px solid var(--teal-d);font-size:14px;color:var(--ink-2)}
.ws-foot img{width:22px;height:22px}
.ws-foot b{font-family:var(--serif);font-size:16px;color:var(--teal-d)}
.ws-foot .tag{margin-left:auto;font-style:italic}
@media (max-width:640px){.ws{padding:20px 16px}.ws-kind{font-size:14px;padding:3px 10px}.ws-foot{flex-wrap:wrap}.ws-foot .tag{margin-left:0}.ws-row{grid-template-columns:1fr}.ws-chain{flex-wrap:wrap}.ws-chain span{flex:1 1 28%}.ws-chain b{display:none}}

/* ---------- 11. FOOTER ---------- */
.site-footer{color:#eadbbd;background:var(--wood);padding:64px 0 34px;margin-top:clamp(40px,6vw,80px)}
.site-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px}
.site-footer .wordmark{color:var(--gold-l);text-shadow:0 2px 0 rgba(0,0,0,.4)}
.site-footer p{margin:14px 0 0;max-width:30em}
.site-footer h2{font:700 18px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#ffcf9a;margin:0 0 10px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.site-footer a{color:#ffdca8;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,220,170,.18);color:#cdb48c}
@media (max-width:760px){.site-footer .cols{grid-template-columns:1fr 1fr}.site-footer .cols>div:first-child{grid-column:1/-1}}

/* ---------- 12. REVEAL + MOTION ---------- */
.reveal .rv:not(.in){opacity:0;transform:translateY(18px)}
.rv{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--i,0) * 90ms)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .yuwrap,.cloudmv,.hazemv,.floatq,.sparkle,.drp,.pf,.bl-puff,.glow{animation:none!important}
  .pf,.drp{opacity:.5}
  .blink{animation:none!important;transform:scaleY(0)}
  .bl-cover{animation:none!important;transform:rotateY(-24deg)}
  .bl-pop{animation:none!important;transform:none;opacity:1}
  .reveal .rv:not(.in){opacity:1;transform:none}
}

/* ---------- 13. PRINT (the worksheet prints on its own, one A4 page) ---------- */
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff!important;font-size:16px}
  .site-header,.site-footer,.skip,.no-print{display:none!important}
  main>:not(.print-keep){display:none!important}
  .print-keep{padding:0!important;background:none!important}
  .print-keep::before{display:none!important}
  .print-keep>.wrap>:not(.ws){display:none!important}
  .ws{box-shadow:none;border-radius:0;padding:0 2px 0 0;max-width:none}
  .ws-box{break-inside:avoid;margin-top:10px;padding:7px 12px 9px}
  .ws{font-size:15px}
  .ws-hills{height:26px;margin:4px 0 6px}
  .ws-head h2{font-size:24px;white-space:nowrap}
  .ws-head .who span{min-width:120px}
  .ws-lines{height:calc(var(--h) * .9)}
  .ws-chain span{height:56px}
  .ws-draw{height:118px}
  .ws-row{grid-template-columns:1.3fr 1fr}
}
@media (max-width:600px){.pagemock{padding:28px 22px 96px}.pagemock .pb{margin-right:-10px}.pagemock .timer{top:auto;bottom:-18px;right:-6px;width:88px;height:88px}}