/* Screen-Free Vault v2 — Design System
   Cream #FCF9F5 • Terracotta #D95D39 • Sage #E3ECE3 • Charcoal #232323 */
:root{--cream:#FCF9F5;--terra:#D95D39;--terra-d:#C24E2E;--sage:#E3ECE3;--sage-d:#5B7553;--char:#232323;--muted:#6f6a63;--card:#fff;--radius:20px;--shadow:0 10px 30px rgba(35,35,35,.08);--shadow-lg:0 24px 60px rgba(35,35,35,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--cream);color:var(--char);line-height:1.6;padding-bottom:84px}
h1,h2,h3,.display{font-family:'Plus Jakarta Sans',sans-serif;line-height:1.15;margin:0}
img{max-width:100%;display:block}a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.announce{background:var(--char);color:#fff;text-align:center;font-weight:700;font-size:.9rem;padding:10px 16px}
.announce b{color:#FFC98A}
.hero{padding:56px 0 40px}.hero-grid{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.eyebrow{color:var(--terra);font-weight:800;letter-spacing:.12em;font-size:.78rem;text-transform:uppercase}
.hero h1{font-size:clamp(2.2rem,5.2vw,3.6rem);font-weight:800;margin:14px 0}
.hero h1 em{font-style:normal;color:var(--terra)}
.hero p.lede{font-size:1.13rem;color:var(--muted);max-width:34rem}
.hero-img{border-radius:28px;box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
.hero-img img{width:100%;height:100%;object-fit:cover}
.float-badge{position:absolute;background:#fff;border-radius:999px;padding:8px 16px;font-weight:800;font-size:.85rem;box-shadow:var(--shadow);animation:floaty 4s ease-in-out infinite}
.fb1{top:16px;left:16px}.fb2{bottom:16px;right:16px;animation-delay:1.2s;color:var(--terra)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--terra);color:#fff;font-weight:800;font-size:1.05rem;padding:16px 32px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;box-shadow:0 12px 28px rgba(217,93,57,.35);transition:.2s}
.btn:hover{background:var(--terra-d);transform:translateY(-2px)}
.btn.glow{animation:glow 2.2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 12px 28px rgba(217,93,57,.35)}50%{box-shadow:0 12px 40px rgba(217,93,57,.65)}}
.subnote{font-size:.85rem;color:var(--muted);margin-top:10px}
.stars{color:#E9A13B;letter-spacing:2px}
section{padding:64px 0}.sec-head{text-align:center;max-width:44rem;margin:0 auto 36px}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800}.sec-head p{color:var(--muted)}
/* Before/After slider */
.ba{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:16/10;max-width:920px;margin:0 auto;touch-action:none;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .before-img{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:4px;background:#fff;transform:translateX(-50%);box-shadow:0 0 20px rgba(0,0,0,.35);pointer-events:none}
.ba-handle{position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%);background:#fff;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:900;box-shadow:var(--shadow-lg);pointer-events:none}
.ba-tag{position:absolute;top:14px;background:rgba(35,35,35,.82);color:#fff;padding:6px 14px;border-radius:999px;font-size:.8rem;font-weight:700;pointer-events:none}
.ba-tag.l{left:14px}.ba-tag.r{right:14px;background:var(--terra)}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
/* Flipbook */
.flipbook{max-width:560px;margin:0 auto;background:var(--card);border-radius:24px;box-shadow:var(--shadow-lg);overflow:hidden}
.fb-page{position:relative;aspect-ratio:8.5/9.5;padding:34px 30px;display:flex;flex-direction:column;background:repeating-linear-gradient(#fff,#fff 30px,#fdf6ee 31px)}
.fb-page h3{font-size:1.5rem;margin-bottom:6px}.fb-page .fb-module{color:var(--terra);font-weight:800;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.fb-visual{flex:1;display:grid;place-items:center;min-height:0;padding:6px 0}
.fb-visual img{max-height:330px;max-width:100%;width:auto;object-fit:contain;border:1px solid #efe6da;border-radius:12px;box-shadow:0 8px 24px rgba(35,35,35,.12)}
.fb-lines{color:var(--muted);font-size:.95rem}
.fb-watermark{position:absolute;inset:auto 0 0 0;background:rgba(35,35,35,.88);color:#fff;text-align:center;font-weight:700;font-size:.82rem;padding:9px}
.fb-watermark b{color:#FFC98A}
.fb-controls{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#fff;border-top:1px solid #f0e8de}
.fb-controls button{background:var(--char);color:#fff;border:0;border-radius:999px;padding:10px 22px;font-weight:800;cursor:pointer}
.fb-controls button:disabled{opacity:.3;cursor:default}
/* Age tabs */
.tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.tab{border:2px solid #e7ded2;background:#fff;border-radius:999px;padding:11px 20px;font-weight:800;cursor:pointer;font-family:inherit}
.tab.active{background:var(--char);color:#fff;border-color:var(--char)}
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:.25s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card img{height:170px;width:100%;object-fit:cover}
.card .card-body{padding:18px}.card h3{font-size:1.05rem;margin-bottom:6px}.card p{color:var(--muted);font-size:.92rem;margin:0}
.chip{display:inline-block;background:var(--sage);color:var(--sage-d);font-weight:800;font-size:.72rem;border-radius:999px;padding:4px 10px;margin-bottom:8px}
/* Modules grid */
.mod-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mod{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);transition:.25s}.mod:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.mod .pages{color:var(--terra);font-weight:800}.mod ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:.94rem}
/* Pricing */
.price-card{max-width:640px;margin:0 auto;background:#fff;border:3px solid var(--terra);border-radius:28px;box-shadow:var(--shadow-lg);overflow:hidden}
.price-card .pc-img{max-height:320px;width:100%;object-fit:cover}
.price-body{padding:30px}.stack{list-style:none;margin:0 0 8px;padding:0}
.stack li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed #eee;font-weight:600}
.price-big{text-align:center;font-family:'Plus Jakarta Sans';font-size:3.4rem;font-weight:800;color:var(--terra);margin:8px 0}
.guarantee{background:#FFF7E8;border-radius:16px;padding:16px;text-align:center;margin-top:18px;font-size:.95rem}
/* Reviews */
.rev-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rev{background:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.rev cite{font-weight:800;font-style:normal;display:block;margin-top:10px}
/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq-item{background:#fff;border-radius:16px;box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
.faq-q{width:100%;background:none;border:0;text-align:left;font:inherit;font-weight:800;padding:18px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-q svg{flex:none;transition:transform .35s}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-a div{padding:0 20px 18px;color:var(--muted)}
/* Sticky bar + toast */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;background:#fff;box-shadow:0 -6px 30px rgba(0,0,0,.14);z-index:60;display:flex;align-items:center;gap:12px;padding:10px 14px}
.sticky-bar img{width:46px;height:46px;border-radius:10px;object-fit:cover}
.sticky-bar .sb-info{flex:1;min-width:0}.sticky-bar .sb-price{font-weight:900}.sticky-bar .sb-price s{color:var(--muted);font-weight:600}
.sticky-bar .btn{padding:12px 20px;font-size:.95rem;white-space:nowrap}
@media(min-width:900px){.sticky-bar{left:auto;right:22px;bottom:22px;border-radius:20px;max-width:430px}}
.toast{position:fixed;left:16px;bottom:96px;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);padding:13px 16px;font-size:.88rem;font-weight:600;max-width:320px;z-index:61;opacity:0;transform:translateY(14px);transition:.45s;pointer-events:none}
.toast.show{opacity:1;transform:none}
footer{background:var(--char);color:#cfc9c2;text-align:center;padding:36px 20px 110px;font-size:.88rem}
@media(min-width:900px){footer{padding-bottom:36px}}