/* HeartWise: the method page and the Feelings check-in. Owner: `method`.
   Uses site.css tokens. All motion is switched off by the global reduced-motion rule in site.css. */

.sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
.m-sec{padding:84px 0}
button{font-family:inherit}
[hidden]{display:none!important}

/* ------------------------------------------------------------ faces */
.hf{width:100%;height:auto;overflow:visible;display:block}
.hf .fb,.hf .eyes,.hf .mouth,.hf .tear,.hf .sweat,.hf .puffs circle,.hf .pu{transform-box:view-box}
.hf .fb{transform-origin:60px 62px}
.hf .eyes{transform-origin:60px 58px}
.hf .mouth{transform-origin:60px 86px}
.hf-happy .fb{animation:fhappy 3.2s ease-in-out infinite}
.hf-happy .eyes{animation:fblink 4.6s infinite}
.hf-sad .fb{animation:fsad 5s ease-in-out infinite}
.hf-sad .tear{animation:ftear 3.2s ease-in infinite}
.hf-angry .fb{animation:fangry 2.6s ease-in-out infinite}
.hf-angry .puffs circle{animation:fpuff 2.6s ease-out infinite}
.hf-angry .puffs .p2{animation-delay:.3s}
.hf-scared .fb{animation:fscared .34s linear infinite}
.hf-scared .pu{animation:fdart 3s ease-in-out infinite}
.hf-scared .sweat{animation:fsweat 2.4s ease-in infinite}
.hf-tired .fb{animation:ftired 6s ease-in-out infinite}
.hf-tired .mouth{animation:fyawn 6s ease-in-out infinite}
.hf-tired .eyes{animation:fdroop 6s ease-in-out infinite}
@keyframes fhappy{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-7px) scale(.98,1.03)}60%{transform:translateY(0) scale(1.03,.96)}}
@keyframes fblink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.15)}}
@keyframes fsad{0%,100%{transform:rotate(-2.5deg) translateY(1px)}50%{transform:rotate(2.5deg) translateY(3px)}}
@keyframes ftear{0%,10%{transform:translateY(0) scale(.7);opacity:0}25%{opacity:1;transform:translateY(0) scale(1)}80%{opacity:1;transform:translateY(22px)}100%{opacity:0;transform:translateY(28px)}}
@keyframes fangry{0%,68%,100%{transform:translateX(0)}72%{transform:translateX(-1.6px)}76%{transform:translateX(1.6px)}80%{transform:translateX(-1.4px)}84%{transform:translateX(1.4px)}90%{transform:translateX(-.6px)}}
@keyframes fpuff{0%{transform:translateY(8px) scale(.3);opacity:0}30%{opacity:.95}100%{transform:translateY(-16px) scale(1.25);opacity:0}}
@keyframes fscared{0%,100%{transform:translate(0,0)}25%{transform:translate(1px,-.6px)}50%{transform:translate(-1px,.6px)}75%{transform:translate(.6px,.8px)}}
@keyframes fdart{0%,100%{transform:translateX(0)}30%{transform:translateX(-3px)}65%{transform:translateX(3px)}}
@keyframes fsweat{0%,15%{transform:translateY(-4px);opacity:0}35%{opacity:1}100%{transform:translateY(26px);opacity:0}}
@keyframes ftired{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(4deg) translateY(3px)}}
@keyframes fyawn{0%,55%,100%{transform:scale(.8,.7)}75%{transform:scale(1.15,1.5)}}
@keyframes fdroop{0%,55%,100%{transform:translateY(0)}75%{transform:translateY(2px) scaleY(.7)}}
.hop .hf .fb,.on .hf .fb{animation-duration:.9s}
.hf-happy.hop .fb{animation:fhop .7s var(--ease) 1}
@keyframes fhop{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-16px) scale(.96,1.08)}60%{transform:translateY(0) scale(1.08,.92)}100%{transform:none}}

/* ------------------------------------------------------------ hero */
.m-hero{padding:64px 0 76px}
.m-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.m-hero .lead{max-width:56ch}
.m-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.m-jump a{font:800 .86rem/1 var(--f-body);text-decoration:none;color:var(--ink-2);padding:13px 16px;border-radius:999px;background:#fff;border:2px solid var(--line);min-height:44px;display:inline-flex;align-items:center;transition:.2s}
.m-jump a:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.m-hero-art{position:relative;max-width:520px;margin-left:auto;width:100%;padding:26px 0 26px}
.m-hero-art>img{position:relative;border-radius:var(--r-xl);box-shadow:var(--sh-3);width:100%;height:auto;rotate:-1.5deg}
.m-blob{position:absolute;inset:0 -6% 0 -6%;background:radial-gradient(circle at 30% 25%,#FFE6B8,#FFD0B8 55%,#F8B9A8);border-radius:58% 42% 52% 48%/48% 56% 44% 52%;animation:morph 14s ease-in-out infinite;opacity:.9}
.m-fl{position:absolute;width:86px;animation:mbob 5s ease-in-out infinite;filter:drop-shadow(0 10px 12px rgba(43,33,64,.25))}
.m-fl0{left:-6%;top:-2%}.m-fl1{right:-4%;top:6%;width:78px;animation-delay:.8s}.m-fl2{right:8%;bottom:-6%;width:92px;animation-delay:1.6s}
@keyframes mbob{50%{transform:translateY(-12px) rotate(3deg)}}
@media (max-width:900px){.m-hero .wrap{grid-template-columns:1fr}.m-hero-art{margin:6px auto 0;max-width:440px}.m-fl{width:64px}.m-fl1{width:58px}.m-fl2{width:68px}.m-fl0{left:-2%}.m-fl1{right:-1%}}

/* ------------------------------------------------------------ five feelings */
.m-feels{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.m-feels>li{flex:0 0 calc(20% - 16px);min-width:150px}
.m-feel{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 14px 20px;border:3px solid color-mix(in srgb,var(--fc) 55%,#fff);border-radius:var(--r-l);background:color-mix(in srgb,var(--fc) 16%,#fff);cursor:pointer;color:var(--ink);transition:transform .35s var(--ease),box-shadow .35s,border-color .2s}
.m-feel:hover{transform:translateY(-8px);box-shadow:var(--sh-3);border-color:var(--fc)}
.m-feel:active{transform:translateY(-2px) scale(.98)}
.m-feel .fcv{width:112px;display:block}
.m-feel .fn{font:600 1.7rem/1 var(--f-head);margin-top:4px}
.m-feel .fo{font-size:.92rem;color:var(--ink-2);font-weight:700;line-height:1.35}
.m-hearts{position:absolute;inset:0;pointer-events:none;overflow:visible}
.m-hearts svg{position:absolute;left:50%;top:38%;width:20px;height:20px;fill:var(--coral);animation:mheart 1.1s var(--ease) forwards;opacity:0}
@keyframes mheart{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}15%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(var(--r));opacity:0}}
.m-widen{text-align:center;margin-top:50px}
.m-widen p{font-size:1.7rem;color:var(--ink-2);margin-bottom:18px}
.m-wd{list-style:none;margin:0 auto;padding:0;display:flex;justify-content:center;align-items:flex-end;gap:30px;position:relative;max-width:680px}
.m-wd::before{content:"";position:absolute;left:8%;right:8%;bottom:30px;border-top:3px dashed rgba(43,33,64,.22)}
.m-wd li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.m-wd i{display:block;border-radius:50%;background:var(--bc);box-shadow:0 0 0 5px var(--bt);position:relative;z-index:1}
.m-wd li:nth-child(1) i{width:16px;height:16px}.m-wd li:nth-child(2) i{width:22px;height:22px}.m-wd li:nth-child(3) i{width:30px;height:30px}.m-wd li:nth-child(4) i{width:40px;height:40px}.m-wd li:nth-child(5) i{width:52px;height:52px}
.m-wd b{font:700 .9rem/1 var(--f-head);color:var(--bd)}
@media (max-width:760px){.m-feels>li{flex:0 0 calc(50% - 10px);min-width:0}.m-feel .fcv{width:92px}.m-wd{gap:8px}}

/* ------------------------------------------------------------ pillars */
.m-pil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center}
.m-ring{position:relative;width:min(100%,460px);aspect-ratio:1;margin:0 auto}
.m-ringsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.m-ringsvg .rl{fill:none;stroke:#BDA9DA;stroke-width:.7;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;opacity:.9}
.m-ring:not(.in) .rl{stroke-dashoffset:100}
.m-ring.in .rl{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--ease)}
.m-core{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font:600 1rem/1.1 var(--f-head);color:var(--ink-2);width:34%}
.m-core img{width:46%;height:auto;animation:mpulse 3.2s ease-in-out infinite}
@keyframes mpulse{50%{transform:scale(1.14)}}
.m-nodes{position:absolute;inset:0}
.m-node{position:absolute;translate:-50% -50%;width:clamp(62px,19%,88px);aspect-ratio:1;border-radius:50%;border:4px solid var(--pc);background:#fff;padding:0;cursor:pointer;box-shadow:var(--sh-2);display:grid;place-items:center;transition:transform .35s var(--ease),background .25s,box-shadow .25s;opacity:0;scale:.3}
.m-ring.in .m-node,.no-js .m-node{opacity:1;scale:1;transition:opacity .5s calc(var(--k)*.12s + .3s),scale .6s cubic-bezier(.3,1.5,.5,1) calc(var(--k)*.12s + .3s),transform .35s var(--ease),background .25s,box-shadow .25s}
.m-node .gl{width:62%;display:block}
.m-node .gl svg{width:100%;height:100%;overflow:visible}
.m-node b{position:absolute;right:-8px;top:-8px;width:28px;height:28px;border-radius:50%;background:var(--pd);color:#fff;font:700 .9rem/28px var(--f-head);text-align:center}
.m-node:hover{transform:scale(1.1)}
.m-node[aria-selected="true"]{background:color-mix(in srgb,var(--pc) 24%,#fff);transform:scale(1.2);box-shadow:0 0 0 7px color-mix(in srgb,var(--pc) 28%,transparent),var(--sh-3);z-index:2}
.m-panels{min-height:230px}
.m-pp{display:flex;gap:22px;align-items:center;background:#fff;border-radius:var(--r-l);padding:30px 30px;box-shadow:var(--sh-2);border:3px solid color-mix(in srgb,var(--pc) 45%,#fff);margin-bottom:14px}
.m-pp.show{animation:mpop .55s var(--ease)}
@keyframes mpop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.m-pp .pg{flex:none;width:104px;height:104px;border-radius:50%;background:color-mix(in srgb,var(--pc) 16%,#fff);display:grid;place-items:center}
.m-pp .pg svg{width:70%;height:70%;overflow:visible}
.m-pp .ptag{display:inline-block;font:800 .76rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:var(--pd);color:#fff;margin-bottom:10px}
.m-pp h3{font-size:1.7rem;color:var(--pd);margin-bottom:4px}
.m-pp .pimg{margin:0 0 10px;color:var(--ink-2);font-weight:700}
.m-pp .pimg b{color:var(--ink)}
.m-pp .pq{font:italic 600 1.55rem/1.3 var(--f-serif);margin:0;color:var(--ink)}
.m-banner{margin:54px auto 0;max-width:900px}
.m-banner img{width:100%;height:auto;border-radius:var(--r-xl);box-shadow:var(--sh-3)}
/* the second pillars painting is shown as a slim cropped strip so it does not repeat the hero picture */
.m-banner{max-width:900px}.m-banner img{aspect-ratio:900/300;object-fit:cover;object-position:50% 78%}
.m-gloss{margin-top:-6px;font-size:1rem;color:var(--ink-2)}
.no-js .m-ring{display:none}
@media (max-width:900px){.m-pil{grid-template-columns:1fr;gap:34px}.m-pp{padding:22px 20px;gap:16px}.m-pp .pg{width:76px;height:76px}.m-pp h3{font-size:1.45rem}.m-pp .pq{font-size:1.35rem}}
@media (max-width:480px){.m-node b{width:24px;height:24px;font-size:.8rem;line-height:24px;right:-6px;top:-6px}.m-core{font-size:.85rem}}

/* ------------------------------------------------------------ zones */
.m-zones{max-width:980px;margin:0 auto}
.m-zpick{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.m-zbtn{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px;min-height:92px;border-radius:var(--r-l);border:3px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .3s}
.m-zbtn:hover{transform:translateY(-4px);border-color:var(--zc)}
.m-zbtn .zdot{flex:none;width:34px;height:34px;border-radius:50%;background:var(--zc);box-shadow:0 0 0 4px var(--zt),0 0 0 6px var(--zc)}
.m-zbtn .zt{display:flex;flex-direction:column;flex:1;min-width:0}
.m-zbtn .zt b{font:600 1.2rem/1.1 var(--f-head)}
.m-zbtn .zt span{font-size:.92rem;font-weight:700;color:var(--ink-2)}
.m-zbtn .zsh{flex:none;color:var(--zd)}
.zi{display:block;max-width:100%;height:auto}
.m-zbtn[aria-pressed="true"]{background:var(--zt);border-color:var(--zc);color:var(--zd);box-shadow:var(--sh-2)}
.m-zbtn[aria-pressed="true"] .zt span{color:var(--zd)}
.m-zstage{--zbg:#DDF0DA;--zfg:#1E5A35;position:relative;min-height:430px;border-radius:var(--r-xl);overflow:hidden;display:flex;align-items:flex-end;padding:22px;background:var(--zbg);transition:background .7s var(--ease);box-shadow:var(--sh-2)}
.m-zstage[data-zone="yellow"]{--zbg:#FFF0B5;--zfg:#6B4700}
.m-zstage[data-zone="red"]{--zbg:#FBD9D2;--zfg:#8A2515}
.m-zstage>svg{position:absolute;left:0;right:0;top:0;height:calc(100% - 150px);width:100%}
.zs{opacity:0;transition:opacity .7s}
.m-zstage[data-zone="green"] .zs-green,.m-zstage[data-zone="yellow"] .zs-yellow,.m-zstage[data-zone="red"] .zs-red{opacity:.78}
.zs-green .zr{animation:zslide 7s linear infinite}.zs-green .zr1{animation-duration:9s}.zs-green .zr2{animation-duration:12s}
.zs-yellow .zr{animation:zslide 3.4s linear infinite}.zs-yellow .zr1{animation-duration:4.4s}.zs-yellow .zr2{animation-duration:5.4s}
@keyframes zslide{to{transform:translateX(-120px)}}
.zs-red .zr{transform-box:fill-box;transform-origin:50% 100%;animation:zspike 1.3s ease-in-out infinite}
.zs-red .zr1{animation-delay:-.4s}.zs-red .zr2{animation-delay:-.8s}
@keyframes zspike{0%,100%{transform:scaleY(.72) translateX(0)}35%{transform:scaleY(1.12) translateX(-2px)}50%{transform:scaleY(1.04) translateX(2px)}70%{transform:scaleY(.86) translateX(-1px)}}
.m-zcap{position:relative;width:100%;background:rgba(255,255,255,.86);border-radius:var(--r-l);padding:20px 26px;display:flex;flex-wrap:wrap;gap:6px 30px;align-items:center;color:var(--zfg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.m-zinfo{display:none}
.m-zstage[data-zone="green"] .m-zinfo[data-z="green"],.m-zstage[data-zone="yellow"] .m-zinfo[data-z="yellow"],.m-zstage[data-zone="red"] .m-zinfo[data-z="red"],.no-js .m-zinfo{display:block}
.m-zinfo h3{font-size:1.7rem;margin:0;color:var(--zfg)}
.m-zinfo .zw{font:600 1.3rem/1.2 var(--f-head);margin:2px 0 0;color:var(--zfg)}
.m-zinfo .zshape{margin:2px 0 0;font-weight:800;font-size:.95rem;letter-spacing:.04em;color:var(--zfg)}
.m-zok{margin:0 0 0 auto;font:italic 600 1.7rem/1.2 var(--f-serif);color:var(--zfg)}
@media (max-width:760px){.m-zpick{grid-template-columns:1fr}.m-zstage{min-height:360px;padding:14px}.m-zcap{padding:16px 18px}.m-zok{margin:4px 0 0}}

/* ------------------------------------------------------------ lantern */
.m-lan{overflow:hidden}
.m-lan::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 22% 55%,rgba(242,182,50,.14),transparent 55%);pointer-events:none}
.m-lan-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;position:relative}
.m-lan-frame{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);max-width:420px;margin:0 auto}
.m-lan-frame img{width:100%;height:auto}
.m-glow{--lit:.15;position:absolute;left:48%;top:63.5%;width:84%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;mix-blend-mode:screen;opacity:calc(.12 + var(--lit)*.88);scale:calc(.55 + var(--lit)*.75);transition:opacity 1s var(--ease),scale 1s var(--ease)}
.m-glow::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,226,140,.95) 0,rgba(255,176,60,.5) 28%,rgba(255,140,40,.12) 52%,transparent 68%);animation:mflick 3.4s ease-in-out infinite}
@keyframes mflick{0%,100%{opacity:1;transform:scale(1)}30%{opacity:.82;transform:scale(.96)}55%{opacity:1;transform:scale(1.03)}78%{opacity:.9;transform:scale(.98)}}
.m-lan .lead{max-width:56ch}
.m-sub{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 8px}
.m-lan .chip{min-height:44px;background:transparent;color:#EDE3FF;border-color:rgba(255,255,255,.4)}
.m-lan .chip:hover{border-color:#fff;color:#fff}
.m-lan .chip[aria-pressed="true"]{background:var(--sun);border-color:var(--sun);color:var(--night)}
.m-subnote{color:#CFC4E6;font-size:.98rem;margin:0 0 22px}
.m-steps{position:relative;display:flex;justify-content:space-between;gap:4px;margin:0 0 22px}
.m-line{position:absolute;left:5%;right:5%;top:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.18)}
.m-line i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--sun),#FFD98A);box-shadow:0 0 14px rgba(242,182,50,.8);transition:width .8s var(--ease)}
.m-st{position:relative;flex:1 1 0;min-width:44px;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;color:#CFC4E6;cursor:pointer;transition:opacity .3s}
.m-st i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:700 1.1rem/1 var(--f-head);font-style:normal;background:var(--night);border:3px solid rgba(255,255,255,.4);color:#fff;transition:all .4s var(--ease)}
.m-st span{display:none;font:700 .76rem/1.15 var(--f-body);text-align:center}
.m-st:hover i{transform:translateY(-4px)}
.m-st.lit i{background:var(--sun);border-color:#FFE29A;color:var(--night);box-shadow:0 0 18px rgba(242,182,50,.55)}
.m-st[aria-pressed="true"] i{transform:scale(1.22);box-shadow:0 0 0 5px rgba(242,182,50,.28),0 0 30px rgba(242,182,50,.9)}
.m-st[aria-pressed="true"] span{color:#fff}
.m-st.off{opacity:.45}
.m-stepcard{background:rgba(255,255,255,.08);border:2px dashed rgba(255,255,255,.3);border-radius:var(--r-l);padding:26px 28px}
.m-stn{margin:0 0 4px;font:800 .8rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}
.m-stepcard h3{font-size:2.2rem;margin:0 0 4px;color:#fff}
.m-std{font:italic 600 1.6rem/1.3 var(--f-serif);color:#fff;margin:0 0 18px;min-height:2.6em}
.m-stepcard.flash{animation:mpop .5s var(--ease)}
.m-lan .btn-g{color:#fff;border-color:rgba(255,255,255,.6)}.m-lan .btn-g:hover{background:#fff;color:var(--night)}
.m-lan .btn[disabled]{opacity:.45;cursor:default;transform:none}
@media (min-width:760px){.m-st span{display:block}}
@media (max-width:860px){.m-lan-grid{grid-template-columns:1fr;gap:34px}.m-lan-frame{max-width:300px}.m-line{left:6%;right:6%}.m-st i{width:44px;height:44px}.m-stepcard{padding:22px 20px}}

/* ------------------------------------------------------------ iceberg */
.m-ice-ui{max-width:1060px;margin:0 auto}
.m-toggle{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:30px}
.m-tg{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 26px;min-height:64px;border-radius:var(--r-l);border:3px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.25s var(--ease)}
.m-tg b{font:600 1.15rem/1.15 var(--f-head)}
.m-tg span{font-size:.9rem;font-weight:700;color:var(--ink-2)}
.m-tg:hover{border-color:var(--sky)}
.m-tg[aria-pressed="true"]{background:var(--sky-d);border-color:var(--sky-d);color:#fff;box-shadow:var(--sh-2)}
.m-tg[aria-pressed="true"] span{color:#DCEAF6}
.m-ice-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.m-ice-stage{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);background:#CDEBF0;line-height:0}
.m-ice-stage svg{width:100%;height:auto;display:block}
.m-ice-stage .sk1{stop-color:#FFD9B8}.m-ice-stage .sk2{stop-color:#FFF1DE}
.m-ice-stage[data-mode="adult"] .sk1{stop-color:#CFE3EE}.m-ice-stage[data-mode="adult"] .sk2{stop-color:#F0F7FA}
.m-ice-stage .w1{stop-color:#7FD3D6}.m-ice-stage .w2{stop-color:#2D7FA8}
.m-ice-stage[data-mode="adult"] .w1{stop-color:#4C96B8}.m-ice-stage[data-mode="adult"] .w2{stop-color:#143C63}
.berg{animation:iberg 6s ease-in-out infinite}
@keyframes iberg{50%{transform:translateY(5px) rotate(.4deg)}}
.iwv{animation:iwave 7s linear infinite}.iwv2{animation:iwave 11s linear infinite reverse}
@keyframes iwave{to{transform:translateX(-100px)}}
.ib{cursor:pointer;opacity:.86;animation:ibin .6s var(--ease) both;animation-delay:calc(var(--i)*.09s);transition:opacity .25s,filter .25s}
.ib:hover{opacity:1}
.ib.sel{opacity:1;filter:drop-shadow(0 0 7px rgba(255,255,255,.85)) brightness(1.06)}
@keyframes ibin{from{opacity:0;transform:translateY(-16px)}to{transform:none}}
.ibl{fill:none;stroke:#fff;stroke-width:3;opacity:0;transition:opacity .25s;pointer-events:none}
.ibl.sel{opacity:.95}
.ibn{fill:#fff;stroke:rgba(43,33,64,.2);stroke-width:1.5;transition:fill .25s,r .25s}
.ibn.sel{fill:#fff;stroke:#E4694A;stroke-width:4}
.ibt{font:700 15px var(--f-head);fill:#2B2140;text-anchor:middle;pointer-events:none}
.bub{fill:rgba(255,255,255,.5);animation:ibub 8s linear infinite}
@keyframes ibub{from{transform:translateY(0);opacity:0}15%{opacity:.8}to{transform:translateY(-250px);opacity:0}}
.m-ice-side{min-width:0}
.m-surf{display:flex;gap:14px;align-items:center;background:var(--sun-t);border-radius:var(--r-m);padding:14px 18px;margin:0 0 14px;color:var(--ink)}
.m-surf .sd{flex:none;width:18px;height:18px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px #fff}
.m-layers{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.m-layers button{width:100%;display:flex;align-items:center;gap:14px;min-height:52px;padding:8px 16px 8px 10px;border-radius:999px;border:3px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;text-align:left;transition:.25s var(--ease);font:700 1.05rem/1.2 var(--f-body)}
.m-layers button i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 1rem/1 var(--f-head);font-style:normal;background:var(--lc);color:var(--ink);box-shadow:inset 0 0 0 2px rgba(43,33,64,.18)}
.m-layers button:hover{border-color:var(--sky);transform:translateX(4px)}
.m-layers button[aria-pressed="true"]{background:var(--sky-t);border-color:var(--sky-d)}
.m-layercard{background:#fff;border-radius:var(--r-l);padding:22px 26px;box-shadow:var(--sh-2);border:3px solid var(--sky-t);margin-bottom:14px}
.m-layercard.pop{animation:mpop .45s var(--ease)}
.m-ln{margin:0 0 4px;font:800 .78rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--sky-d)}
.m-layercard h3{font-size:1.9rem;margin:0 0 4px;color:var(--sky-d)}
.m-lq{font:italic 600 1.5rem/1.3 var(--f-serif);margin:0;color:var(--ink)}
.m-paint{margin:44px auto 0;max-width:760px}
.m-paint img{width:100%;height:auto;border-radius:var(--r-xl);box-shadow:var(--sh-3);transition:opacity .4s}
.m-paint img.fade{opacity:0}
@media (max-width:860px){.m-ice-grid{grid-template-columns:1fr;gap:26px}.m-tg{padding:12px 18px;flex:1 1 220px}}

/* ------------------------------------------------------------ ages */
.m-age{text-align:center}
.m-age p{font-size:.95rem;line-height:1.5}
.m-ice{display:inline-block;margin-top:10px;font:800 .78rem/1 var(--f-body);padding:7px 11px;border-radius:999px;background:var(--bt);color:var(--bd)}
.m-more{display:block;margin-top:12px;font-weight:800;color:var(--bd)}
.m-more::after{content:" →";transition:margin .3s}
.m-age:hover .m-more::after{margin-left:6px}
@media (max-width:760px){.m-age{text-align:left}}
.m-cta{padding:60px 40px;text-align:center;background:#fff}
.m-cta h2{max-width:760px;margin-inline:auto}
.m-cta .lead{margin:0 auto 28px}
@media (max-width:600px){.m-cta{padding:44px 22px}}

/* ============================================================ CHECK-IN */
.ci-hero .lead{max-width:62ch}
.ci-tabs{display:inline-flex;gap:6px;margin-top:26px;padding:6px;background:#fff;border-radius:999px;border:2px solid var(--line);box-shadow:var(--sh-1)}
.ci-tab{font:800 1rem/1 var(--f-body);padding:15px 24px;min-height:50px;border-radius:999px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;transition:.2s}
.ci-tab:hover{color:var(--ink)}
.ci-tab[aria-selected="true"]{background:var(--ink);color:#fff}
.ci-pane{max-width:1000px;margin:0 auto}
.ci-prog{list-style:none;margin:0 0 26px;padding:0;display:flex;justify-content:center;gap:10px}
.ci-prog li{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink-3);font-size:.95rem}
.ci-prog li:not(:last-child)::after{content:"";width:34px;border-top:3px dashed rgba(43,33,64,.2);margin-left:4px}
.ci-prog i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid var(--line);font:700 1rem/1 var(--f-head);font-style:normal;color:var(--ink-2);transition:.3s}
.ci-prog li.on{color:var(--ink)}
.ci-prog li.on i{background:var(--coral-btn);border-color:var(--coral-btn);color:#fff;scale:1.1}
.ci-prog li.done i{background:var(--leaf-d);border-color:var(--leaf-d);color:#fff}
.ci-step{animation:mpop .5s var(--ease)}
.ci-step h2{text-align:center;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:6px;outline:none}
.ci-help{text-align:center;color:var(--ink-2);font-size:1.05rem;margin:0 auto 24px;max-width:60ch}
.ci-feels{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.ci-feel{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 10px 20px;min-height:200px;border-radius:var(--r-l);border:4px solid color-mix(in srgb,var(--fc) 60%,#fff);background:color-mix(in srgb,var(--fc) 18%,#fff);color:var(--ink);cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s,border-color .2s}
.ci-feel:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--fc)}
.ci-feel:active{transform:scale(.97)}
.ci-feel .fcv{width:100%;max-width:130px;display:block}
.ci-feel .fn{font:600 1.7rem/1 var(--f-head)}
.ci-feel[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 5px var(--sun-t),var(--sh-2)}
.ci-zones{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ci-zone{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 18px 30px;min-height:230px;border-radius:var(--r-xl);border:5px solid var(--zc);background:var(--zt);color:var(--zd);cursor:pointer;text-align:center;transition:transform .3s var(--ease),box-shadow .3s}
.ci-zone:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.ci-zone:active{transform:scale(.97)}
.ci-zone .zsh{color:var(--zd)}
.ci-zone b{font:600 1.9rem/1.1 var(--f-head)}
.ci-zone .zw{font:700 1.2rem/1.2 var(--f-body)}
.ci-zone .zsh svg{animation:cizs 2.4s ease-in-out infinite}
@keyframes cizs{50%{transform:translateX(5px)}}
.ci-nav{justify-content:center;margin-top:26px}
.ci-card{background:#fff;border-radius:var(--r-xl);padding:30px 34px;box-shadow:var(--sh-2);margin-bottom:20px}
.ci-card h3{font-size:1.5rem;text-align:center}
.ci-rhead{display:flex;align-items:center;gap:30px;justify-content:center;flex-wrap:wrap;text-align:left}
.ci-rface{width:140px;flex:none}
.ci-rhead h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 4px;text-align:left;outline:none}
.ci-ok{font:italic 600 1.9rem/1.2 var(--f-serif);color:var(--leaf-d);margin:0 0 10px}
.ci-rz{display:inline-flex;align-items:center;gap:12px;margin:0;padding:8px 16px;border-radius:999px;background:var(--zt,#eee);color:var(--zd,var(--ink));font-weight:800}
.ci-rz .zi{width:56px;height:24px}
.ci-lan{background:var(--cream)}
.ci-lstep{background:#fff;border-radius:var(--r-l);padding:22px 26px;text-align:center;margin:0 auto 18px;max-width:560px;border:3px dashed var(--line)}
.ci-ln{margin:0 0 4px;font:800 .8rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--coral-d)}
.ci-lstep h4{font:600 2.2rem/1.1 var(--f-head);margin:0 0 6px}
.ci-ld{font:italic 600 1.6rem/1.3 var(--f-serif);margin:0}
.ci-lan .btn-row,.ci-calm .btn-row{justify-content:center}
.ci-calm{text-align:center}
.ci-breath{margin:6px auto 22px}
.ci-bwrap{position:relative;width:min(260px,70vw);aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.ci-bwrap::before{content:"";position:absolute;inset:0;border-radius:50%;border:3px dashed rgba(43,33,64,.2)}
.ci-bcircle{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E9F3FC,#9CC4EA 60%,#6FA3D6);box-shadow:0 0 40px rgba(91,143,199,.45);transform:scale(.5);transition:transform 4s ease-in-out}
.ci-breath[data-state="in"] .ci-bcircle{transform:scale(1)}
.ci-breath[data-state="out"] .ci-bcircle{transform:scale(.5)}
.ci-btext{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;color:var(--ink)}
.ci-btext b{font:600 1.7rem/1.1 var(--f-head)}
.ci-btext span{font:700 2.6rem/1 var(--f-head);color:var(--sky-d)}
.ci-breath[data-reduce="true"] .ci-bcircle{display:none}
.ci-breath[data-reduce="true"] .ci-bwrap{aspect-ratio:auto;min-height:120px;width:100%}
.ci-breath[data-reduce="true"] .ci-bwrap::before{display:none}
.ci-motion{font-size:.95rem;color:var(--ink-2);margin:16px 0 0}
.ci-adult{display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;max-width:720px;margin:34px auto 0;padding:16px 22px;border-radius:var(--r-l);background:var(--sky-t);color:var(--ink);font-weight:700;font-size:1rem}
.ci-ah{flex:none;width:22px;height:22px;fill:var(--sky-d)}
/* class mode */
.ci-jars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ci-jarbox{background:var(--zt);border:4px dashed var(--zc);border-radius:var(--r-xl);padding:18px 18px 22px;text-align:center;color:var(--zd)}
.ci-jar{display:block;width:100%;max-width:270px;margin:0 auto;border:0;background:none;padding:6px;cursor:pointer;border-radius:var(--r-l);transition:transform .3s var(--ease)}
.ci-jar:hover{transform:translateY(-6px)}
.ci-jar:active{transform:scale(.96)}
.ci-jar svg{width:100%;height:auto}
.ci-jar .glass{fill:rgba(255,255,255,.72);stroke:var(--zd);stroke-width:5;stroke-linejoin:round}
.ci-jar .lid{fill:var(--zd)}
.ci-jar .dots circle{fill:var(--zc);stroke:var(--zd);stroke-width:2}
.ci-jar .dots circle.new{animation:cidrop .8s cubic-bezier(.3,1.35,.5,1)}
@keyframes cidrop{from{transform:translateY(-230px);opacity:0}15%{opacity:1}to{transform:none}}
.ci-jarbox .jl{display:flex;flex-direction:column;align-items:center;gap:2px}
.ci-jarbox .jc{font:700 clamp(3rem,7vw,4.6rem)/1 var(--f-head);color:var(--zd)}
.ci-jarbox .jl b{font:600 1.5rem/1.1 var(--f-head)}
.ci-jarbox .jl>span:not(.jc):not(.jsh){font-weight:800;font-size:1.05rem}
.ci-jarbox .jsh{margin-top:6px;color:var(--zd)}
.ci-status{text-align:center;font-weight:800;color:var(--ink-2);min-height:1.7em;margin:18px 0 6px}
.ci-ctl{margin-top:6px;align-items:center}
.ci-confirm{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 14px;border-radius:var(--r-m);background:var(--coral-t);font-weight:800}
.ci-priv{text-align:center;margin-top:20px;font-size:.98rem;color:var(--ink-2)}
#pane-class:fullscreen{background:var(--paper);padding:28px;overflow:auto;display:flex;flex-direction:column;justify-content:center;max-width:none}
#pane-class:fullscreen .ci-jar{max-width:340px}
@media (max-width:860px){
  .ci-feels{grid-template-columns:repeat(2,1fr)}.ci-feels .ci-feel:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 8px)}
  .ci-zones{grid-template-columns:1fr}.ci-zone{min-height:0;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:22px 18px}
  .ci-jars{grid-template-columns:1fr;gap:16px}
  .ci-jarbox{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:6px;text-align:left;padding:12px 14px}.ci-jarbox .jl{align-items:flex-start}
  .ci-card{padding:24px 18px}.ci-rhead{gap:14px;justify-content:center;text-align:center}.ci-rhead h2{text-align:center}.ci-rface{width:110px}
  .ci-prog li span{display:none}.ci-prog{gap:6px}
}
@media (max-width:480px){.ci-tabs{display:flex;width:100%}.ci-tab{flex:1;padding:14px 8px}}
@media (prefers-reduced-motion:reduce){.m-node,.m-ring.in .m-node{opacity:1;scale:1}.m-ringsvg .rl{stroke-dashoffset:0!important}.ib{opacity:.86}}
.m-ice-side .note{color:var(--ink-2)}

.ci-soft-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 0}
.ci-soft{min-height:44px;padding:0 20px;border-radius:99px;border:2px dashed var(--line,#d9cfc0);background:#fff;color:var(--ink-2,#4a3f5c);font:800 .95rem/1 var(--f-body,Nunito,sans-serif);cursor:pointer}
.ci-soft:hover{border-style:solid;border-color:var(--leaf-d,#245A37)}
.ci-soft:focus-visible{outline:3px solid var(--sky-d,#1D4568);outline-offset:3px}
.ci-softmsg{margin:18px auto 0;max-width:560px;padding:18px 22px;border-radius:var(--r-m,18px);background:#EAF3EC;border:2px solid #BFE0C2;text-align:center}
.ci-softmsg p{margin:0 0 12px;font-weight:600}