/* Floobly pages: soft lavender sky, pink ghost, sparkles. Builds on /style.css. */
.fb{
  --fb-pink:#E57DB7; --fb-pink-d:#C94F92; --fb-rose:#FFD9EA; --fb-lav:#EEE8FB; --fb-lav2:#F8E9F3;
  --fb-ink:#4F4D57; --fb-eye:#4F4D57; --fb-shadow:0 18px 50px -18px rgba(150,60,120,.35);
}
@media (prefers-color-scheme:dark){.fb{
  --fb-lav:#2A2533; --fb-lav2:#33263A; --fb-rose:#4A2B40; --fb-ink:#F1EEF6;
  --fb-shadow:0 18px 50px -18px rgba(0,0,0,.6);
}}
.fb main{overflow-x:clip}

/* ---------- hero ---------- */
.fb-hero{position:relative;background:linear-gradient(160deg,var(--fb-lav) 0%,var(--fb-lav2) 60%,var(--fb-rose) 130%);border-bottom:1px solid var(--line)}
.fb-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;padding-top:56px;padding-bottom:64px}
.fb-name{font:800 clamp(40px,7vw,64px)/1 var(--head);letter-spacing:-.04em;color:var(--fb-ink);margin:0 0 14px}
.fb-hero h1{font:800 clamp(32px,5.4vw,52px)/1.05 var(--head);letter-spacing:-.035em;margin:0 0 14px;color:var(--fb-pink-d)}
@media (prefers-color-scheme:dark){.fb-hero h1{color:#F29BC9}}
.fb-hero .sub{font:600 clamp(18px,2.4vw,22px)/1.4 var(--head);color:var(--fb-ink);margin:0 0 14px}
.fb-hero p.lede{color:var(--muted);font-size:18px;max-width:46ch;margin:0 0 26px}
.fb-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font:700 16px/1 var(--head);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-play{background:var(--fb-pink-d);color:#fff;box-shadow:0 10px 24px -10px rgba(201,79,146,.8)}
.btn-play svg{width:20px;height:20px}
.btn-ghost{color:var(--ink);background:var(--card);border:1px solid var(--line)}
.fb-note{font-size:14px;color:var(--muted);margin:14px 0 0}

/* sparkles */
.spark{position:absolute;width:18px;height:18px;color:var(--fb-pink);opacity:.8;animation:twinkle 3.2s ease-in-out infinite}
.spark.l{color:#B9A6EC}
.spark svg{width:100%;height:100%}
@keyframes twinkle{0%,100%{transform:scale(.7);opacity:.35}50%{transform:scale(1.15);opacity:.95}}

/* ---------- phone mock ---------- */
.stage{position:relative;display:flex;justify-content:center}
.phone{position:relative;width:min(300px,78vw);aspect-ratio:9/18.5;border-radius:42px;background:#1E1C22;padding:10px;box-shadow:var(--fb-shadow),0 0 0 1px rgba(0,0,0,.06)}
.screen{position:relative;height:100%;border-radius:33px;overflow:hidden;background:#F4F1F8;display:flex;flex-direction:column}
.appbar{display:flex;align-items:center;gap:10px;padding:26px 14px 10px;background:#fff;border-bottom:1px solid #ECE7F2}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#9AD0F5,#5B8DEF)}
.appbar b{font:700 14px/1.1 var(--head);color:#25222B}
.appbar small{display:block;font:500 11px/1.2 var(--sans);color:#8B8496}
.msgs{flex:1;padding:12px 12px 0;display:flex;flex-direction:column;gap:7px}
.m{max-width:78%;padding:8px 11px;border-radius:16px;font:500 12.5px/1.35 var(--sans);color:#25222B;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.m.me{align-self:flex-end;background:#DCF5D9}
.typing{margin:auto 12px 12px;padding:9px 12px;border-radius:999px;background:#fff;font:500 12px/1 var(--sans);color:#A79FB2;border:1px solid #ECE7F2}

/* the floating panel + ghost on the phone */
.panel{position:absolute;left:12px;right:12px;bottom:58px;background:#2A2830;color:#F4EEF6;border-radius:22px;padding:12px 12px 10px;box-shadow:0 14px 30px -10px rgba(0,0,0,.45);font:500 12px/1.4 var(--sans);animation:pop .6s cubic-bezier(.2,1.4,.4,1) .4s both}
.panel .q{align-self:flex-end;margin-left:auto;width:fit-content;max-width:85%;background:#4A3A48;color:#FFE3F1;padding:7px 10px;border-radius:14px 14px 4px 14px;margin-bottom:8px}
.panel .a{margin:0 0 8px}
.panel .a b{color:#F29BC9}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid #4A4652;border-radius:999px;padding:4px 9px;font:600 11px/1 var(--head);color:#E8DDF0}
.chip.on{background:#E57DB7;border-color:#E57DB7;color:#2A1020}
@keyframes pop{from{transform:translateY(16px) scale(.92);opacity:0}to{transform:none;opacity:1}}
.mini-ghost{position:absolute;right:16px;bottom:200px;width:54px;filter:drop-shadow(0 8px 10px rgba(120,40,90,.35));animation:bob 3.4s ease-in-out infinite}

/* big ghost beside the phone */
.hero-ghost{position:absolute;z-index:2;left:-90px;top:6%;width:140px;animation:bob 4s ease-in-out infinite;filter:drop-shadow(0 18px 18px rgba(150,60,120,.22))}
.say{position:absolute;z-index:3;left:-10px;top:-1%;background:#fff;color:#4F4D57;font:700 15px/1 var(--head);padding:12px 16px;border-radius:18px;box-shadow:0 8px 20px -8px rgba(80,40,80,.3);white-space:nowrap;animation:bob 4s ease-in-out infinite}
.say::after{content:"";position:absolute;left:22px;bottom:-9px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.blink{animation:blink 5s infinite;transform-origin:center 121px;transform-box:view-box}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}

/* ---------- sections ---------- */
.fb-sec{padding:56px 0 8px}
.fb-sec h2{margin-top:0}
.kicker{font:700 13px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px}
.f{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;transition:transform .2s ease,border-color .2s ease}
.f:hover{transform:translateY(-3px);border-color:var(--accent-soft)}
.f .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--chip);color:var(--accent);margin-bottom:14px}
.f .ic svg{width:24px;height:24px}
.f h3{margin:0 0 6px;font-size:18px}
.f p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:24px;counter-reset:s}
.step{position:relative;background:linear-gradient(160deg,var(--fb-lav),var(--fb-lav2));border-radius:22px;padding:24px 22px 22px;border:1px solid var(--line)}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--fb-pink-d);color:#fff;font:800 16px/1 var(--head);margin-bottom:14px}
.step h3{margin:0 0 6px;font-size:18px}
.step p{margin:0;color:var(--muted);font-size:15.5px}

/* costumes */
.wardrobe{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px;margin-top:26px}
.look{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 10px 14px;text-align:center}
.look img{width:84px;height:84px;margin:0 auto 10px;transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.look:hover img{transform:translateY(-6px) rotate(-4deg) scale(1.06)}
.look b{display:block;font:700 15px/1.2 var(--head)}
.look span{display:block;font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:3px}
.mix{margin-top:18px;background:var(--card);border:1px dashed var(--accent-soft);border-radius:18px;padding:16px 20px;color:var(--muted)}
.mix b{color:var(--ink)}

/* plans + privacy band */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:24px}
.band{border-radius:24px;padding:26px;border:1px solid var(--line);background:var(--card)}
.band h3{margin:0 0 8px;font-size:20px}
.band p{margin:0 0 10px;color:var(--muted)}
.band ul{margin:0;padding-left:20px;color:var(--muted)}
.band li{margin:4px 0}
.band.pink{background:linear-gradient(150deg,var(--fb-rose),var(--fb-lav));}

/* faq */
.faq{margin-top:20px;display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;font:700 16.5px/1.4 var(--head);padding:16px 28px 16px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:12px;font:600 24px/1 var(--head);color:var(--accent);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 16px;color:var(--muted)}

/* final cta */
.final{margin:56px 0 0;text-align:center;border-radius:28px;padding:44px 22px;background:linear-gradient(150deg,var(--fb-lav) 0%,var(--fb-rose) 120%);border:1px solid var(--line);position:relative;overflow:hidden}
.final img{width:96px;margin:0 auto 14px;animation:bob 4s ease-in-out infinite}
.final h2{margin:0 0 8px}
.final p{color:var(--muted);margin:0 auto 22px;max-width:46ch}
.final .fb-cta{justify-content:center}

@media (max-width:820px){
  .fb-hero .wrap{grid-template-columns:1fr;padding-top:36px;padding-bottom:48px}
  .stage{margin-top:20px;padding-top:86px}
  .hero-ghost{left:4%;width:84px;top:0}
  .say{left:calc(4% + 92px);top:14px;font-size:13px;padding:10px 13px}
  .spark{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- privacy page ---------- */
.policy{padding-top:44px;padding-bottom:8px}
.policy-head{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.policy-head img{width:58px;height:58px}
.policy-head h1{font:800 clamp(28px,4.6vw,40px)/1.1 var(--head);letter-spacing:-.03em;margin:0}
.policy .meta{color:var(--muted);margin:6px 0 26px;font-size:15px}
.policy .summary{background:linear-gradient(150deg,var(--fb-lav),var(--fb-lav2));border:1px solid var(--line);border-radius:22px;padding:22px 24px;margin:0 0 30px}
.policy .summary h2{margin:0 0 8px;font-size:20px}
.policy section h2{font-size:21px;margin:34px 0 8px}
.policy p,.policy li{max-width:70ch}
.policy ul{padding-left:22px}
.policy li{margin:6px 0}
.policy .toc{margin-bottom:8px}
.policy .toc ol{columns:2;column-gap:28px}
@media (max-width:600px){.policy .toc ol{columns:1}}
.policy .end{color:var(--muted);border-top:1px solid var(--line);margin-top:36px;padding-top:16px;font-size:15px}
.policy section{padding:0}

/* readable text on the light hero */
@media (prefers-color-scheme:light){.fb-hero p.lede{color:#4A4459}.fb-hero .fb-note{color:#6B6480}.fb-hero h1{color:#D63F8C}}
@media (prefers-color-scheme:dark){.fb-hero p.lede{color:#D3CEDF}}