/* About + FAQ pages (loaded after pages.css). Mobile first; 700px+ = tablet, 1100px+ = desktop. */
:root{--font:"Fredoka","Segoe UI",sans-serif;--shot-ring:#fff}
@media (prefers-color-scheme: dark){:root{--shot-ring:#1d2d28}}
body.ko .t-en,body:not(.ko) .t-ko{display:none}
h1,h2,h3{font-family:var(--font)}
.wrap{max-width:1120px;margin:0 auto}
header.site{max-width:1120px}
.hero{padding:6px 24px 6px;text-align:center}
.hero h1{font-size:30px;line-height:1.15;margin:8px 0 0}
.hero p{color:var(--muted);margin:8px 0 0;font-size:15px}
.float{animation:fl 3.2s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-9px)}}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
.pop{animation:pop .5s}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.float,.fab{animation:none!important}.reveal{opacity:1;transform:none;transition:none}}

/* ---- steps ---- */
.step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 22px 8px;min-width:0}
.step .n{width:38px;height:38px;border-radius:50%;background:linear-gradient(#3ee6c6,var(--accent-dark));color:#fff;font-family:var(--font);font-weight:700;display:grid;place-items:center;box-shadow:0 3px 0 #0b7e65;margin-bottom:8px}
.step h2{font-size:22px;margin:0 0 4px;color:var(--text)}
.step p{color:var(--muted);font-size:14px;margin:0 0 12px;line-height:1.55}
.step .note{font-size:12px;margin:6px 0 0}
.shot{width:230px;height:300px;border-radius:22px;overflow:hidden;box-shadow:0 10px 22px rgba(14,156,125,.25),0 0 0 6px var(--shot-ring);background:#fff}
.shot img{width:100%;display:block}
.tag{display:inline-block;font-size:12px;font-weight:700;color:#8a5a00;background:#ffe9a8;border-radius:8px;padding:2px 8px;margin-left:6px;vertical-align:middle;font-family:"Segoe UI",sans-serif}
.media{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;min-width:0}

/* step 4 koala */
.kstage{position:relative;width:300px;height:340px;display:grid;place-items:center}
.kstage .glow{position:absolute;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,#fff6c9 0,#d9f7ec 55%,transparent 72%)}
.kstage .kk{height:290px;position:relative;filter:drop-shadow(0 12px 10px rgba(14,156,125,.25))}

/* step 5 rooms: four cards in a 2x2 grid */
.rooms-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:400px;padding:4px 0}
.room{text-align:center;padding:14px 10px 12px;border-radius:20px;background:var(--card);box-shadow:0 3px 0 var(--mint);font-size:15px;font-weight:700;font-family:var(--font)}
.room img{width:100%;max-width:150px;aspect-ratio:1;object-fit:contain;display:block;margin:0 auto 4px}

/* step 6: animated "how it works" (snap -> pick -> list); each stage lights up in turn, 6s loop */
.add{width:100%;max-width:460px;padding:20px 12px 16px;background:var(--card);border-radius:18px;box-shadow:0 3px 0 var(--mint)}
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:4px;text-align:center;font-size:13px;color:var(--muted)}
.fs{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:700;opacity:.55;transform:scale(.94);animation:fsAct 6s ease-in-out infinite}
.fs2{animation-delay:2s}.fs3{animation-delay:4s}
@keyframes fsAct{0%{opacity:.55;transform:scale(.94)}6%,30%{opacity:1;transform:scale(1.04)}36%,100%{opacity:.55;transform:scale(.94)}}
.vis{width:92px;height:92px;border-radius:22px;background:var(--bg);box-shadow:0 3px 0 var(--mint);display:grid;place-items:center;position:relative;overflow:hidden;align-content:center}
.vis .ic{font-size:44px;line-height:1}
.flash{position:absolute;inset:0;background:#fff;opacity:0;animation:flashA 6s infinite}
@keyframes flashA{0%,4%{opacity:0}6%{opacity:.95}14%,100%{opacity:0}}
.wd{display:block;font-size:11px;padding:1px 8px;border-radius:8px;background:var(--card);color:var(--text);box-shadow:0 2px 0 var(--mint);margin:2px 0;animation:wdSel 6s infinite}
.wd.w1{animation-delay:2.2s}.wd.w2{animation-delay:2.7s}.wd.w3{animation-delay:3.2s}
@keyframes wdSel{0%{background:var(--card);transform:none}4%,22%{background:#bff3d6;color:#17553a;transform:scale(1.07)}28%,100%{background:var(--card);transform:none}}
.plus{position:absolute;right:7px;top:7px;background:var(--accent);color:#fff;font-style:normal;font-weight:700;border-radius:10px;padding:1px 7px;font-size:13px;opacity:0;animation:plusA 6s infinite 4s}
@keyframes plusA{0%{opacity:0;transform:translateY(8px) scale(.6)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0}}
.arrow{font-style:normal;color:var(--accent);font-size:22px;opacity:.3;animation:arr 6s infinite}
.arrow.a1{animation-delay:1.4s}.arrow.a2{animation-delay:3.4s}
@keyframes arr{0%{opacity:.3;transform:none}6%{opacity:1;transform:translateX(5px)}20%,100%{opacity:.3;transform:none}}
@media (prefers-reduced-motion: reduce){.fs,.wd,.plus,.arrow,.flash{animation:none!important}.fs{opacity:1;transform:none}.plus{opacity:1}.flash{display:none}}

/* FAQ block + FAQ page */
.faqsec{max-width:760px;margin:34px auto 0;padding:0 18px}
.faqsec h2{font-size:24px;text-align:center;margin:0 0 12px;color:var(--text)}
.faq-item{background:var(--card);border-radius:14px;box-shadow:0 3px 0 var(--mint);padding:12px 16px;margin:0 0 10px}
.faq-item summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font);font-size:22px;color:var(--accent-dark);line-height:1}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{margin:8px 0 2px;color:var(--muted);font-size:14px;line-height:1.6}
.more-link{display:block;text-align:center;margin:14px 0 0;font-weight:700}
.faq-nav{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin:10px 0 4px;font-size:14px;font-weight:700}
.faq-group{max-width:760px;margin:26px auto 0;padding:0 18px;scroll-margin-top:12px}
.faq-group h2{font-size:21px;margin:0 0 10px;color:var(--accent-dark)}
.end{text-align:center;padding:34px 20px 20px}
.end h2{font-size:24px;margin:0}.end p{color:var(--muted);margin:6px 0 10px}
body.ko .end .lbl .t-en{display:none}

/* koala start button (floating on tablet/desktop, inline on mobile) */
.fab{position:relative;display:inline-block;text-decoration:none;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fab img{width:170px;display:block;margin-top:20px;filter:drop-shadow(0 10px 8px rgba(40,60,70,.28))}
.fab .lbl{z-index:2;position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;padding:7px 18px 9px;border-radius:999px;background:linear-gradient(#fffaf0,#fde9c9);color:#f2708f;font-family:"Jua","Fredoka",sans-serif;font-size:21px;line-height:1.1;box-shadow:0 3px 0 #e8c9a0,0 6px 10px rgba(80,60,40,.22),inset 0 2px 0 rgba(255,255,255,.9);text-shadow:0 1px 0 #fff,0 2px 0 rgba(242,112,143,.25)}
.fab:active{transform:translateY(2px) scale(.98)}
.fab-float{display:none}
footer.site{padding-bottom:40px}
footer.site .fl{margin:0 8px}

/* ---- tablet ---- */
@media (min-width:700px){
 .hero{padding:30px 40px 10px}.hero h1{font-size:44px}.hero p{font-size:18px}
 .step{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto auto 1fr;gap:8px 34px;align-items:center;text-align:left;padding:30px 36px}
 .step .n{grid-column:1;grid-row:2;justify-self:start}
 .step>h2{grid-column:1;grid-row:3}.step>p{grid-column:1;grid-row:4}
 .step>p.note{grid-row:5;align-self:start}
 .step>.shot,.step>.media{grid-column:2;grid-row:1 / span 5;justify-self:center;align-self:center}
 .step.alt>.n,.step.alt>h2,.step.alt>p{grid-column:2;justify-self:start}
 .step.alt>.shot,.step.alt>.media{grid-column:1}
 .step h2{font-size:28px}.step p{font-size:16px}.step .note{font-size:13px}
 .shot{width:270px;height:350px}
 .kstage{width:330px}
 .faqsec{margin-top:50px}
 .end{display:none}
 .fab-float{display:block;position:fixed;right:16px;bottom:12px;z-index:30;animation:fl 3s ease-in-out infinite}
 .fab-float img{width:180px}.fab-float .lbl{font-size:22px}
}
/* ---- desktop ---- */
@media (min-width:1100px){
 .hero{padding:50px 40px 20px}.hero h1{font-size:56px}
 .step{gap:10px 60px;padding:46px 40px}.step h2{font-size:34px}.step p{font-size:18px}
 .shot{width:300px;height:390px}.kstage{width:380px;height:400px}.kstage .kk{height:340px}
 .fab-float{right:28px;bottom:22px}.fab-float img{width:210px}.fab-float .lbl{font-size:25px}
}