/* resource.html motion + extras */
.rv{opacity:0;transform:translateY(34px) scale(.97);filter:blur(8px);transition:opacity .8s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*.12s),transform .9s cubic-bezier(.2,.9,.25,1.1) calc(var(--i,0)*.12s),filter .8s ease calc(var(--i,0)*.12s)}
.rv.in{opacity:1;transform:none;filter:none}
html:not(.js) .rv{opacity:1;transform:none;filter:none}
/* learn cards */
.learn-grid article{position:relative;display:grid;grid-template-columns:62px 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:start;overflow:hidden}
.learn-grid article>b{grid-column:2;align-self:end}.learn-grid article>p{grid-column:2}
.ai-w{grid-row:1/3;grid-column:1;width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(255,226,154,.28),rgba(255,226,154,.05));box-shadow:inset 0 0 0 1px rgba(227,194,122,.35)}
.ai{width:40px;height:40px;fill:none;stroke:#ffe29a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.learn-grid article::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,236,190,.14) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.learn-grid article.in::after{animation:rsweep 1.4s ease .5s 1}
@keyframes rsweep{to{transform:translateX(120%)}}
.learn-grid article:hover{transform:translateY(-4px);border-color:rgba(227,194,122,.5)}
/* steps */
.lesson-list{list-style:none!important;counter-reset:none;position:relative;padding-left:0!important}
.lesson-list::before{content:"";position:absolute;left:25px;top:20px;bottom:20px;width:2px;background:linear-gradient(#e3b04a,rgba(227,176,74,.15));transform-origin:top;transform:scaleY(var(--lp,0));transition:transform 1.4s ease}
.lesson-list.in-line::before{--lp:1}
.lesson-list li{display:grid!important;grid-template-columns:52px 1fr;gap:18px;align-items:start;position:relative}
.lesson-list li::before,.lesson-list li::marker{content:none}
.stn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:800 20px/1 "BBB Sans",Arial,sans-serif;color:#1a1204;background:radial-gradient(circle at 35% 25%,#fff3cf,#e3b04a 70%);box-shadow:0 0 0 5px rgba(227,176,74,.15),0 10px 22px -8px rgba(227,176,74,.8);transform:scale(.4);transition:transform .7s cubic-bezier(.3,1.7,.5,1) calc(var(--i,0)*.12s + .2s)}
.lesson-list li.in .stn{transform:none}
.lesson-list li.in .stn{animation:rpulse 3.4s ease-in-out calc(var(--i,0)*.5s + 1.2s) infinite}
@keyframes rpulse{0%,70%,100%{box-shadow:0 0 0 5px rgba(227,176,74,.15),0 10px 22px -8px rgba(227,176,74,.8)}85%{box-shadow:0 0 0 12px rgba(227,176,74,0),0 10px 22px -8px rgba(227,176,74,.8)}}
/* heading reveals */
.learn h2,.detail-bottom h2,.cmp h2{opacity:0;transform:translateY(22px);transition:opacity .9s,transform .9s}
.learn h2.in,.detail-bottom h2.in,.cmp h2.in{opacity:1;transform:none}
/* button leaves */
.cap-leaf{position:relative;display:inline-block;flex:0 0 auto}
.cap-leaf .fairy{--fg:.9}
.cap-leaf .button.forest{--fg:.5}
.cap-row .cap-btn.forest{padding:14px 18px 14px 26px;display:inline-flex;align-items:center;white-space:nowrap}
/* spiral book */
.nb-real{padding:0}
.nb-spiral{position:relative;filter:drop-shadow(0 34px 40px rgba(0,0,0,.55));animation:nbf 6s ease-in-out infinite}
@keyframes nbf{50%{transform:translateY(-8px) rotate(.6deg)}}
.nb-spiral img{display:block;width:100%;height:auto;border-radius:0!important;box-shadow:none!important}
.nb-dig{position:absolute;right:6%;top:6%;font:800 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.18em;color:#10240f;padding:8px 12px;border-radius:99px;background:linear-gradient(140deg,#f6e7ab,#d2b25a);box-shadow:0 8px 16px -6px rgba(0,0,0,.6)}
/* compare */
.cmp h2{font-size:clamp(28px,4vw,48px);line-height:1.05;margin:10px 0 22px}
.cmp h2 em{font-style:italic}
.cmp-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.cmp article{padding:22px 24px;border-radius:20px;border:1px solid rgba(227,194,122,.24);background:linear-gradient(160deg,rgba(255,236,190,.07),rgba(255,236,190,.015))}
.cmp-b{border-style:dashed!important}
.cmp-t{display:inline-block;font:800 10px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;padding:6px 10px;border-radius:99px;background:linear-gradient(110deg,#7be39a,#c6ffd6);color:#0b2a18;margin-bottom:12px}
.cmp-soon{background:linear-gradient(110deg,#e3b04a,#ffe29a);color:#1a1204}
.cmp h3{font-size:22px;margin:0 0 6px;color:#fff6dd}.cmp article>p{margin:0 0 12px;color:#d6cdb6;font-size:15px}
.cmp ul{margin:0 0 14px;padding-left:18px;color:#d8dccf;font-size:14px;line-height:1.55}
@media(max-width:900px){.learn-grid article{grid-template-columns:54px 1fr}.ai-w{width:54px;height:54px}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none;transition:none}.in *{animation:none!important}.nb-spiral{animation:none}.stn{transform:none}.lesson-list::before{transform:none}.learn h2,.detail-bottom h2,.cmp h2{opacity:1;transform:none}}
.cmp,.cmp article{text-align:left}.cmp h2{text-align:left;margin-top:10px}
.cmp{margin-bottom:56px}
.cmp ul{list-style:disc}

/* v54 icon refresh: two-tone line icons, gentle looping motion */
.ai .fl{fill:rgba(255,226,154,.14)}
.ai-w{position:relative}
.ai-w::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 120%,rgba(255,226,154,.22),transparent 65%);pointer-events:none}
.ai .spk,.ai .play,.ai .hub{fill:#ffe29a;stroke:none}
.ai .tk,.ai .ray{stroke-width:1.5;opacity:.8}
.ai .ln{stroke-dasharray:24;stroke-dashoffset:24}
.in .ai .ln{animation:i-type 4.2s ease-in-out infinite}
.in .ai .l2{animation-delay:.35s}.in .ai .l3{animation-delay:.7s}
@keyframes i-type{0%{stroke-dashoffset:24}25%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:24}}
.in .ai .spk{transform-box:fill-box;transform-origin:center;animation:i-twinkle 2.6s ease-in-out infinite}
@keyframes i-twinkle{0%,100%{transform:scale(.7) rotate(0);opacity:.6}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
.in .ai .arm{transform-box:view-box;transform-origin:7px 21.5px;animation:i-clap 3.2s ease-in-out infinite}
@keyframes i-clap{0%,55%,100%{transform:rotate(0)}68%{transform:rotate(-17deg)}78%{transform:rotate(0)}}
.in .ai .play{animation:i-pulse 3.2s ease-in-out infinite}
@keyframes i-pulse{0%,55%{opacity:.55}78%,100%{opacity:1}}
.in .ai .sun{transform-box:fill-box;transform-origin:center;animation:i-sun 6s linear infinite}
@keyframes i-sun{to{transform:rotate(360deg)}}
.in .ai .hill{stroke-dasharray:90;stroke-dashoffset:90;animation:i-hill 4.5s ease-in-out infinite}
@keyframes i-hill{0%{stroke-dashoffset:90}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:90}}
.in .ai .hand{transform-box:view-box;transform-origin:24px 27px;animation:i-hand 4s cubic-bezier(.5,0,.3,1) infinite}
@keyframes i-hand{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.in .ai *{animation:none!important}.ai .ln,.ai .hill{stroke-dashoffset:0}}