/* Bible World — bibleworldapp.com. Storybook look: painted skies, cream paper, deep garden green, warm gold. */
@font-face{font-family:Fredoka;src:url(/assets/fonts/fredoka-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Fredoka;src:url(/assets/fonts/fredoka-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:"Google Sans Flex";src:url(/assets/fonts/google-sans-flex.woff2) format('woff2');font-weight:400 700;font-display:swap}

:root{
  --cream:#fbf4e4;--paper:#fffaf0;--sand:#f4e6c8;--ink:#2a3325;--muted:#5b6452;--line:#e6d9bb;
  --green:#23583c;--green-d:#163a27;--leaf:#5f9e48;--orange:#cc5f2c;--gold:#f0b53c;--gold-l:#ffe28d;--sky:#8fd0f2;--rose:#f1a39b;--night:#0f2236;
  --r:28px;--shadow:0 18px 40px -18px rgba(86,58,20,.38),0 4px 12px -6px rgba(86,58,20,.2);
  --head:Fredoka,"Google Sans Flex",system-ui,sans-serif;--body:"Google Sans Flex","Google Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1180px;--gutter:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--ink);font:400 18px/1.6 var(--body);overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--green)}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.08;margin:0;color:var(--green-d);letter-spacing:-.005em}
p{margin:0}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.narrow{--wrap:860px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--green-d);color:#fff;padding:10px 18px;border-radius:12px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:10px}

/* highlighted words with a hand-drawn gold underline */
.hl{position:relative;color:var(--orange);white-space:nowrap}
.hl .swoosh{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.3em;overflow:visible;pointer-events:none}
.hl .swoosh path{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) .35s}
.is-in .hl .swoosh path,.hero .hl .swoosh path{stroke-dashoffset:0}
.line{display:block}

/* ── buttons & store pills */
.btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:12px 22px;font:600 17px/1 var(--head);letter-spacing:.01em;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.btn svg{width:20px;height:20px}
.btn-sun{background:linear-gradient(180deg,#ffd76a,#f2a93a);color:#4a2a07;box-shadow:0 10px 22px -10px rgba(190,110,10,.9),inset 0 -3px 0 rgba(150,80,0,.25),inset 0 2px 0 rgba(255,255,255,.6)}
.btn-sun:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 26px -12px rgba(190,110,10,.95),inset 0 -3px 0 rgba(150,80,0,.25),inset 0 2px 0 rgba(255,255,255,.6)}
.btn-lg{padding:17px 30px;font-size:20px}.btn-lg svg{width:24px;height:24px}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--green-d);box-shadow:inset 0 0 0 2px var(--line)}
.stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.store{display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 14px;border-radius:18px;background:var(--green-d);color:#fff;text-decoration:none;text-align:left;box-shadow:0 10px 22px -12px rgba(22,58,39,.9)}
.store svg{width:30px;height:30px;flex:none}
.store small{display:block;font:600 11px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;opacity:.78}
.store b{display:block;font:600 18px/1.15 var(--head)}
.store.light{background:rgba(255,251,240,.92);color:var(--green-d);box-shadow:0 10px 24px -14px rgba(40,30,10,.6),inset 0 0 0 2px rgba(255,255,255,.8)}
.store.soon{cursor:default}

/* ── top bar */
.topbar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:20px;padding:10px var(--gutter);transition:background .3s,box-shadow .3s,padding .3s}
.topbar.scrolled,.topbar.solid{background:rgba(251,244,228,.9);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 8px 24px -18px rgba(60,40,10,.6);padding-block:6px}
.brand img{width:132px;filter:drop-shadow(0 4px 6px rgba(60,35,10,.3));transition:width .3s,opacity .3s,transform .3s}
.home .topbar:not(.scrolled) .brand img{opacity:0;transform:translateY(-8px);pointer-events:none}
.topbar.scrolled .brand img{width:112px}
.nav{display:flex;gap:4px;margin-inline:auto}
.nav a{padding:9px 14px;border-radius:999px;color:var(--green-d);font:600 16px/1 var(--head);text-decoration:none;transition:background .2s}
.topbar:not(.scrolled):not(.solid) .nav a{color:#fff;text-shadow:0 1px 3px rgba(20,40,60,.6)}
.nav a:hover{background:rgba(255,255,255,.55)}
.topbar:not(.scrolled) .nav a:hover{background:rgba(255,255,255,.22)}
.top-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav+.top-actions{margin-left:0}
.lang{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.75);color:var(--green-d);font:600 15px/1 var(--head);text-decoration:none}
.lang svg{width:18px;height:18px}
.top-cta{padding:10px 18px;font-size:16px}
.menu-btn{display:none;width:44px;height:44px;border-radius:14px;border:0;background:rgba(255,255,255,.8);color:var(--green-d);cursor:pointer}
.menu-btn svg{width:24px;height:24px;margin:auto}

/* ── hero */
.hero{position:relative;min-height:max(680px,100svh);display:grid;grid-template-rows:1fr auto;isolation:isolate;overflow:hidden;background:#79c3ea}
.hero-art{position:absolute;inset:0;z-index:-1}
.hero-art picture,.hero-paint{position:absolute;inset:0;width:100%;height:100%}
.hero-paint{object-fit:cover;object-position:50% 40%;transform-origin:50% 35%;animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.12) translate3d(-1.2%,1%,0)}}
.hero-glow{position:absolute;left:50%;top:30%;width:min(1100px,110vw);aspect-ratio:1.7;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,250,232,.78),rgba(255,250,232,.38) 55%,rgba(255,250,232,0));pointer-events:none}
.hero-rays{position:absolute;left:50%;top:-30%;width:180vmax;aspect-ratio:1;transform:translateX(-50%);background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,246,210,.16) 0 6deg,transparent 6deg 14deg);mask:radial-gradient(closest-side,#000 10%,transparent 62%);-webkit-mask:radial-gradient(closest-side,#000 10%,transparent 62%);animation:spin 120s linear infinite;mix-blend-mode:soft-light}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(to top,var(--cream) 4%,rgba(251,244,228,0));z-index:-1;pointer-events:none}
.sparkles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sparkles i{position:absolute;width:var(--s);height:var(--s);color:#fff6c8;opacity:0;animation:twinkle var(--t) ease-in-out var(--delay) infinite}
.sparkles i svg{width:100%;height:100%;filter:drop-shadow(0 0 6px rgba(255,240,170,.9))}
@keyframes twinkle{0%,100%{opacity:0;transform:translateY(0) scale(.4) rotate(0)}45%{opacity:.95;transform:translateY(-14px) scale(1) rotate(40deg)}70%{opacity:.6}}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(84px,11vh,130px);padding-bottom:110px;gap:clamp(12px,1.8vh,20px)}
.hero-top,.hero-bottom{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vh,18px)}
.hero-logo{margin:0}
.hero-logo img{width:min(560px,82vw);filter:drop-shadow(0 18px 24px rgba(70,40,10,.38));animation:signIn 1.3s cubic-bezier(.2,1.5,.4,1) both}
@keyframes signIn{from{opacity:0;transform:translateY(-40px) rotate(-6deg) scale(.7)}to{opacity:1;transform:none}}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(255,252,242,.92);color:var(--orange);font:700 14px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 8px 18px -12px rgba(60,40,10,.6);animation:rise .9s .45s both}
.hero-kicker svg{width:16px;height:16px;color:var(--rose)}
.hero-title{font:700 clamp(46px,7.4vw,104px)/.96 var(--head);color:var(--green-d);text-shadow:0 2px 0 rgba(255,255,255,.6),0 10px 30px rgba(255,250,230,.9);animation:rise 1s .6s both}
.hero-title .hl{color:var(--orange)}
.hero-sub{max-width:640px;padding:12px 22px;border-radius:22px;background:rgba(255,250,238,.84);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 26px -16px rgba(60,40,10,.6);font-size:clamp(17px,1.45vw,20px);font-weight:500;color:#33402e;animation:rise 1s .75s both}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:6px;animation:rise 1s .9s both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--green-d);font:600 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;opacity:.85}
.scroll-cue i{width:26px;height:40px;border-radius:14px;border:2.5px solid currentColor;position:relative}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:7px;width:5px;height:9px;margin-left:-2.5px;border-radius:3px;background:currentColor;animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ── showcase: devices + stats */
.showcase{position:relative;padding:clamp(40px,6vw,80px) 0 clamp(30px,4vw,60px)}
.showcase-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:center}
.devices{position:relative;padding:0 9% 6% 0}
.device{margin:0;position:relative;background:linear-gradient(150deg,#3d3b45,#17161c 60%,#2b2a31);box-shadow:0 40px 70px -28px rgba(60,40,10,.55),0 14px 26px -14px rgba(60,40,10,.4),inset 0 0 0 2px #4c4a54,inset 0 0 0 5px #111015}
.device-screen{position:absolute;overflow:hidden;background:#e9dcc0}
.device-screen video{width:100%;height:100%;object-fit:cover}
.device.ipad{aspect-ratio:1112/848;border-radius:clamp(22px,3vw,44px);transform:rotate(-2.5deg)}
.device.ipad .device-screen{inset:3.3%;border-radius:clamp(10px,1.4vw,18px)}
.device.iphone{position:absolute;right:0;bottom:0;width:27%;aspect-ratio:9/19.4;border-radius:clamp(20px,3vw,40px);transform:rotate(5deg)}
.device.iphone .device-screen{inset:3.2% 5%;border-radius:clamp(14px,2.2vw,30px)}
.device.iphone::before{content:"";position:absolute;left:50%;top:4.6%;width:30%;height:2.6%;transform:translateX(-50%);border-radius:99px;background:#0b0b0e;z-index:2}
.showcase-copy h2{margin-top:14px;font-size:clamp(40px,4.6vw,64px)}
.showcase-copy .lede{margin-top:16px}
.stats-row{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stats-row li{background:var(--paper);border-radius:22px;padding:18px 18px 16px;box-shadow:var(--shadow),inset 0 0 0 2px #f1e6cb}
.stats-row b{display:block;font:700 clamp(38px,4vw,54px)/1 var(--head);color:var(--orange)}
.stats-row span{display:block;margin-top:6px;font-size:15px;line-height:1.35;color:var(--muted);font-weight:500}

/* ── section headings */
section{position:relative}
.section-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:clamp(26px,4vw,48px)}
.section-head h2{font-size:clamp(40px,5.4vw,72px)}
.sticker{width:96px;height:auto;filter:drop-shadow(0 10px 14px rgba(80,55,20,.3));transform:rotate(-6deg)}
.eyebrow,.tag{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border-radius:999px;background:var(--paper);color:var(--orange);font:700 13px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;box-shadow:0 6px 16px -10px rgba(80,55,20,.5),inset 0 0 0 2px #f0e4c7}
.eyebrow svg{width:16px;height:16px;color:var(--gold)}
.lede{max-width:720px;font-size:clamp(18px,1.6vw,21px);color:var(--muted)}
.on-dark h2{color:#fff}.on-dark .lede{color:#d6e2ea}
.on-dark .eyebrow{background:rgba(255,255,255,.1);color:var(--gold-l);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips.center{justify-content:center}
.chips li{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 10px;border-radius:999px;background:var(--paper);font:600 15px/1.2 var(--head);color:var(--green-d);box-shadow:0 6px 14px -10px rgba(80,55,20,.55),inset 0 0 0 2px #efe3c6}
.chips li svg{width:20px;height:20px;padding:3px;border-radius:50%;background:#e3efd6;color:var(--green)}
.chips.small li{padding:7px 14px;font-size:14px}

/* reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
[data-reveal].is-in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

/* ── stories journey */
.stories{padding:clamp(60px,8vw,110px) 0 clamp(50px,7vw,90px);background:linear-gradient(180deg,var(--cream),#fdf6e7 40%,#f9efd9)}
.journey{position:relative;margin-top:clamp(-40px,-2vw,-10px);overflow:hidden;padding-bottom:6px}
.panorama{display:flex;width:max-content;height:clamp(220px,26vw,380px);will-change:transform;opacity:.95}
.panorama img{height:100%;width:auto;max-width:none;flex:none;margin-right:-2px}
.shelf{position:relative;margin-top:calc(-1 * clamp(150px,16vw,230px))}
.shelf-track{list-style:none;margin:0;padding:10px max(var(--gutter),calc((100vw - var(--wrap))/2)) 30px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.shelf-track::-webkit-scrollbar{display:none}
.shelf-track.dragging{cursor:grabbing;scroll-snap-type:none}
.story-card{position:relative;flex:none;width:clamp(230px,24vw,300px);aspect-ratio:3/4;border-radius:24px;overflow:hidden;scroll-snap-align:center;background:#ead9b7;box-shadow:0 22px 34px -18px rgba(70,45,15,.6),0 0 0 5px #fffaf0,0 0 0 7px #ecdcb7;transition:transform .35s cubic-bezier(.2,.9,.3,1.3);margin:7px 0}
.story-card:hover{transform:translateY(-8px) rotate(-1.2deg)}
.story-card img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.story-card::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(to top,rgba(24,40,24,.86),rgba(24,40,24,0))}
.story-badge{position:absolute;left:12px;top:12px;z-index:1;padding:6px 12px;border-radius:999px;background:rgba(22,58,39,.88);color:#fff;font:600 13px/1 var(--head)}
.story-copy{position:absolute;inset:auto 16px 16px;z-index:1;color:#fff}
.story-copy b{display:block;font:600 24px/1.1 var(--head);text-shadow:0 2px 8px rgba(0,0,0,.4)}
.story-copy small{display:block;margin-top:4px;font-size:14px;opacity:.9}
.shelf-btn{position:absolute;top:calc(50% - 32px);z-index:2;width:56px;height:56px;border-radius:50%;border:0;background:var(--paper);color:var(--green-d);box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;transition:transform .2s}
.shelf-btn:hover{transform:scale(1.08)}
.shelf-btn svg{width:26px;height:26px}
.shelf-btn.prev{left:max(10px,calc((100vw - var(--wrap))/2 - 70px))}
.shelf-btn.next{right:max(10px,calc((100vw - var(--wrap))/2 - 70px))}
.shelf-hint{text-align:center;color:var(--muted);font-size:15px}

/* ── trailer */
.cinema{padding:clamp(70px,9vw,130px) 0;color:#fff;background:radial-gradient(120% 80% at 50% 0%,#1f4a6b 0%,var(--night) 60%,#0b1828 100%);overflow:hidden}
.cinema-bg{position:absolute;inset:0;background:radial-gradient(2px 2px at 12% 22%,#fff8,transparent),radial-gradient(1.5px 1.5px at 72% 18%,#fff9,transparent),radial-gradient(2px 2px at 38% 72%,#fff6,transparent),radial-gradient(1.5px 1.5px at 88% 64%,#fff8,transparent),radial-gradient(1.5px 1.5px at 22% 88%,#fff6,transparent),radial-gradient(2px 2px at 56% 40%,#fff5,transparent);background-size:420px 380px;opacity:.8;animation:stars 60s linear infinite}
@keyframes stars{to{background-position:420px -380px}}
.screen-frame{position:relative;max-width:1040px;margin:0 auto;padding:clamp(8px,1.2vw,14px);border-radius:clamp(22px,3vw,36px);background:linear-gradient(150deg,#3e3c46,#141318 60%,#2d2c33);box-shadow:0 50px 90px -30px rgba(0,0,0,.7),0 0 120px -20px rgba(120,190,240,.35)}
.poster{position:relative;display:block;width:100%;padding:0;border:0;border-radius:clamp(14px,2vw,24px);overflow:hidden;cursor:pointer;background:#000}
.poster img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .8s,filter .4s}
.poster:hover img{transform:scale(1.03);filter:brightness(1.05)}
.play-ring{position:absolute;left:50%;top:50%;width:clamp(76px,9vw,116px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#ffd76a,#f2a93a);color:#4a2a07;box-shadow:0 0 0 12px rgba(255,215,106,.25),0 20px 40px -10px rgba(0,0,0,.6);animation:pulse 2.4s ease-in-out infinite}
.play-ring svg{width:42%;height:42%;margin-left:8%}
@keyframes pulse{50%{box-shadow:0 0 0 22px rgba(255,215,106,.08),0 20px 40px -10px rgba(0,0,0,.6)}}
.cinema-note{margin-top:18px;text-align:center;color:#b9c9d6;font-size:15px}

/* ── story games */
.games{padding:clamp(70px,9vw,130px) 0;background:linear-gradient(180deg,#f7ecd4,var(--cream) 20%)}
.game-grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,2.4vw,30px);--cols:3}
.game-card{flex:0 0 calc((100% - (var(--cols) - 1) * clamp(18px,2.4vw,30px)) / var(--cols))}
.game-card{background:var(--paper);border-radius:var(--r);padding:12px 12px 20px;box-shadow:var(--shadow),inset 0 0 0 2px #f0e5c9;transition:transform .35s cubic-bezier(.2,.9,.3,1.3),box-shadow .35s}
.game-card:hover{transform:translateY(-6px)}
.game-shot{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:#eadcb9}
.game-shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.game-card:hover .game-shot img{transform:scale(1.05)}
.game-chapter{position:absolute;left:10px;top:10px;padding:6px 12px;border-radius:999px;background:rgba(22,58,39,.86);color:#fff;font:600 13px/1 var(--head)}
.game-card h3{margin:16px 8px 6px;font-size:24px}
.game-card p{margin:0 8px;color:var(--muted);font-size:16px;line-height:1.5}

/* ── create & learn */
.learn{padding:clamp(70px,9vw,130px) 0;background:radial-gradient(80% 50% at 10% 20%,#f9e3c4 0,transparent 60%),radial-gradient(70% 40% at 90% 70%,#e2efd2 0,transparent 60%),var(--cream)}
.feature{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:center;margin-top:clamp(50px,7vw,110px)}
.feature:first-of-type{margin-top:0}
.feature.flip .feature-media{order:2}
.feature-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.feature-copy .sticker{width:84px}
.feature-copy h3{font-size:clamp(34px,4vw,54px)}
.feature-copy p:not(.tag){color:var(--muted);font-size:18px}
.tablet-card{border-radius:clamp(18px,2.4vw,30px);padding:clamp(7px,1vw,11px);background:linear-gradient(150deg,#3e3c46,#141318 60%,#2d2c33);box-shadow:0 34px 60px -28px rgba(60,40,10,.6)}
.tablet-card img{border-radius:clamp(12px,1.6vw,20px);width:100%;aspect-ratio:4/3;object-fit:cover}
.tablet-card.solo{transform:rotate(-1.5deg)}
.feature.flip .tablet-card.solo{transform:rotate(1.5deg)}
.fan{position:relative;aspect-ratio:1.25}
.fan .tablet-card{position:absolute;width:78%;transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
.fan .t0{left:0;top:0;transform:rotate(-6deg);z-index:1}
.fan .t1{right:0;top:14%;transform:rotate(4deg);z-index:2}
.fan .t2{left:10%;bottom:0;transform:rotate(-1deg);z-index:3}
.fan:hover .t0{transform:rotate(-9deg) translate(-4%,-3%)}.fan:hover .t1{transform:rotate(7deg) translate(4%,-2%)}.fan:hover .t2{transform:rotate(0) translateY(4%)}
.compare{position:relative;border-radius:clamp(20px,2.6vw,32px);overflow:hidden;aspect-ratio:1672/941;box-shadow:0 34px 60px -28px rgba(60,40,10,.6),0 0 0 8px var(--paper),0 0 0 10px #ecdcb7;touch-action:pan-y;user-select:none}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare-over{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.35);pointer-events:none}
.compare-handle i{position:absolute;top:50%;left:50%;width:54px;height:54px;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(180deg,#ffd76a,#f2a93a);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.35);color:#4a2a07}
.compare-handle svg{width:18px;height:18px}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare-tag{position:absolute;top:14px;padding:6px 12px;border-radius:999px;background:rgba(255,250,240,.9);font:600 14px/1 var(--head);color:var(--green-d);pointer-events:none}
.compare-tag.left{left:14px}.compare-tag.right{right:14px}
.media-hint{margin-top:18px;text-align:center;color:var(--muted);font-size:15px}

/* ── Bible friends */
.friends{padding:clamp(70px,9vw,130px) 0;background:linear-gradient(180deg,var(--cream),#f6e9cd)}
.friend-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,28px)}
.friend{transform:rotate(var(--tilt));transition:transform .4s cubic-bezier(.2,.9,.3,1.4)}
.friend:hover{transform:rotate(0) translateY(-8px) scale(1.02)}
.friend.is-in{transform:rotate(var(--tilt))}
.friend.is-in:hover{transform:rotate(0) translateY(-8px) scale(1.02)}
.friend-art{border-radius:24px 24px 18px 18px;overflow:hidden;aspect-ratio:4/5;background:#e9d8b5;box-shadow:0 0 0 6px var(--paper),0 0 0 8px #e9d9b3,0 26px 40px -20px rgba(70,45,15,.6)}
.friend-art img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.friend:hover .friend-art img{transform:scale(1.07)}
.friend-label{position:relative;margin:-26px 10px 0;padding:14px 14px 12px;border-radius:18px;background:var(--paper);text-align:center;box-shadow:0 12px 24px -14px rgba(70,45,15,.5),inset 0 0 0 2px #efe2c3}
.friend-label b{display:block;font:600 24px/1.1 var(--head);color:var(--green-d)}
.friend-label span{display:block;margin-top:5px;font-size:15px;line-height:1.35;color:var(--muted)}
.friend-label small{display:block;margin-top:8px;font:700 11px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}

/* ── gallery */
.gallery{padding:clamp(70px,9vw,130px) 0 clamp(50px,7vw,100px);background:linear-gradient(180deg,#f6e9cd,var(--cream) 30%)}
.tabs{display:flex;justify-content:center;gap:8px;margin:-10px auto 30px;padding:6px;border-radius:999px;background:var(--paper);width:max-content;box-shadow:var(--shadow),inset 0 0 0 2px #efe3c6}
.tabs button{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:11px 22px;border-radius:999px;font:600 17px/1 var(--head);color:var(--green-d);cursor:pointer;transition:background .25s,color .25s}
.tabs button svg{width:18px;height:18px}
.tabs button[data-tab=iphone] svg{transform:scale(.8,1)}
.tabs button[aria-selected=true]{background:var(--green-d);color:#fff}
.gallery-track{list-style:none;margin:0;padding:10px max(var(--gutter),calc((100vw - var(--wrap))/2)) 30px;display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#d9c79f transparent}
.gallery-track li{flex:none;scroll-snap-align:center}
.shot{display:block;padding:clamp(6px,.8vw,9px);border:0;border-radius:clamp(18px,2vw,26px);background:linear-gradient(150deg,#3e3c46,#141318 60%,#2d2c33);cursor:zoom-in;box-shadow:0 28px 46px -24px rgba(60,40,10,.55);transition:transform .35s}
.shot:hover{transform:translateY(-6px) rotate(-.6deg)}
.shot img{border-radius:clamp(12px,1.4vw,18px)}
.ipad .shot img{width:clamp(280px,44vw,560px);aspect-ratio:4/3;object-fit:cover}
.iphone .shot{border-radius:clamp(22px,3vw,36px)}
.iphone .shot img{width:clamp(170px,20vw,250px);aspect-ratio:1179/2556;object-fit:cover;border-radius:clamp(16px,2.2vw,28px)}

/* ── grown-ups */
.parents{padding:clamp(70px,9vw,130px) 0;background:radial-gradient(60% 50% at 80% 10%,#dcecf6 0,transparent 70%),radial-gradient(60% 50% at 10% 90%,#e5efd6 0,transparent 70%),var(--cream)}
.care-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.care{background:var(--paper);border-radius:var(--r);padding:26px 26px 24px;box-shadow:var(--shadow),inset 0 0 0 2px #f0e5c9}
.care-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(160deg,#e9f3dd,#cfe5bd);color:var(--green);margin-bottom:16px;box-shadow:inset 0 -3px 0 rgba(40,90,50,.12)}
.care:nth-child(3n+2) .care-icon{background:linear-gradient(160deg,#fff0d0,#ffd99a);color:#a3591a}
.care:nth-child(3n+3) .care-icon{background:linear-gradient(160deg,#e4f1fb,#c4def2);color:#2b6a95}
.care-icon svg{width:30px;height:30px}
.care h3{font-size:23px;margin-bottom:8px}
.care p{color:var(--muted);font-size:16.5px}
.plan{margin-top:clamp(26px,3vw,40px);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:clamp(24px,3vw,38px);border-radius:var(--r);background:linear-gradient(120deg,var(--green-d),#2c6b48);color:#fff;box-shadow:0 30px 50px -26px rgba(22,58,39,.8)}
.plan h3{color:#fff;font-size:clamp(26px,3vw,36px);margin-bottom:8px}
.plan p{color:#d8e8dc;max-width:640px}
.plan .store{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}

/* ── FAQ */
.faq{padding:clamp(70px,9vw,120px) 0;background:var(--cream)}
.faq-list{display:grid;gap:12px}
.faq details{background:var(--paper);border-radius:22px;box-shadow:0 10px 24px -18px rgba(70,45,15,.55),inset 0 0 0 2px #f0e4c7;transition:box-shadow .3s}
.faq details[open]{box-shadow:0 18px 30px -18px rgba(70,45,15,.6),inset 0 0 0 2px var(--gold)}
.faq summary{list-style:none;display:flex;align-items:center;gap:16px;padding:20px 24px;cursor:pointer;font:600 20px/1.3 var(--head);color:var(--green-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;background:#f3e7cc;position:relative;transition:transform .3s,background .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.5px;margin:-1.25px 0 0 -6px;border-radius:2px;background:var(--green-d)}
.faq summary i::after{transform:rotate(90deg);transition:transform .3s}
.faq details[open] summary i{background:var(--gold-l)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{padding:0 24px 22px;color:var(--muted)}

/* ── finale */
.finale{position:relative;min-height:clamp(620px,80vh,900px);display:grid;align-items:end;padding:clamp(40px,6vw,80px) 0;overflow:hidden;isolation:isolate}
.finale-art{position:absolute;inset:0;z-index:-1}
.finale-art img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.finale::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--cream) 0,rgba(251,244,228,0) 22%,rgba(251,244,228,0) 45%,rgba(251,244,228,.7) 75%,var(--cream) 100%)}
.finale-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:clamp(26px,3vw,40px);border-radius:36px;background:rgba(255,250,240,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 60px -30px rgba(60,40,10,.6);max-width:860px}
.finale-logo{width:min(380px,66vw);margin-top:calc(-1 * clamp(70px,9vw,120px));filter:drop-shadow(0 16px 20px rgba(70,40,10,.35))}
.finale-card h2{font-size:clamp(38px,5vw,64px)}
.finale-card>p{color:var(--muted);font-size:19px}

/* ── footer */
.footer{position:relative;background:var(--green-d);color:#d9e6dc;padding:clamp(70px,8vw,100px) 0 28px;margin-top:40px}
.footer-hills{position:absolute;left:0;right:0;top:-38px;height:40px;background:var(--green-d);mask:radial-gradient(60px 40px at 60px 40px,#000 98%,transparent) 0 0/120px 40px repeat-x;-webkit-mask:radial-gradient(60px 40px at 60px 40px,#000 98%,transparent) 0 0/120px 40px repeat-x}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;align-items:center}
.footer-brand img{width:200px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.footer-brand p{margin-top:12px;max-width:340px;font-size:16px}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer-links a{color:#fff;font:600 17px/1.4 var(--head);text-decoration:none}
.footer-links a:hover{color:var(--gold-l)}
.legal-line{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:#a9c0af}

/* ── modals */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none}
dialog::backdrop{background:rgba(8,18,28,.86);backdrop-filter:blur(6px)}
.video-modal{width:min(1280px,94vw)}
.video-modal video{width:100%;max-height:86vh;border-radius:18px;background:#000;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.modal-close{position:absolute;right:-6px;top:-58px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.95);color:var(--green-d);cursor:pointer;display:grid;place-items:center}
.modal-close svg{width:22px;height:22px}
.lightbox{width:94vw;height:92vh;overflow:visible}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:20px;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.lightbox .modal-close{top:6px;right:6px;z-index:2}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--green-d);cursor:pointer;display:grid;place-items:center;z-index:2}
.lb-nav svg{width:26px;height:26px}
.lb-nav.prev{left:6px}.lb-nav.next{right:6px}

/* ── legal pages */
.legal-page main{padding:130px 0 80px}
.legal h1{font-size:clamp(36px,5vw,56px);margin-bottom:10px}
.legal h2{font-size:clamp(24px,2.6vw,30px);margin:38px 0 10px}
.legal p,.legal li{color:#3e4838;font-size:18px;margin-bottom:12px}
.legal .box{padding:22px 24px;border-radius:22px;background:#e6f0d9;box-shadow:inset 0 0 0 2px #d3e4c1}
.legal small{color:var(--muted)}
.legal a{color:var(--green);font-weight:600}

/* ── responsive */
@media (max-width:1100px){
  .nav a{padding:9px 10px;font-size:15px}
  .game-grid{--cols:2}
  .friend-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .menu-btn{display:block}
  .nav{position:fixed;left:12px;right:12px;top:68px;display:none;flex-direction:column;gap:2px;padding:12px;border-radius:24px;background:rgba(255,250,240,.98);box-shadow:0 30px 60px -20px rgba(40,30,10,.5)}
  .nav.open{display:flex}
  .nav a,.topbar:not(.scrolled):not(.solid) .nav a{color:var(--green-d);text-shadow:none;padding:14px 16px;font-size:18px}
  .top-cta span{display:none}.top-cta{padding:11px}
  .showcase-grid{grid-template-columns:1fr}
  .feature,.feature.flip{grid-template-columns:1fr}
  .feature.flip .feature-media{order:0}
  .care-grid{grid-template-columns:repeat(2,1fr)}
  .plan{grid-template-columns:1fr}
  .plan .stores{justify-content:flex-start}
}
@media (max-width:700px){
  body{font-size:17px}
  .brand img{width:108px}
  .lang span{display:none}.lang{padding:10px}
  .hero{min-height:max(640px,100svh)}
  .hero-inner{padding-top:78px;justify-content:space-between;padding-bottom:28px;min-height:100%}
  .hero-sub{font-size:16.5px;padding:14px 16px}
  .hero-top{width:100%;padding:0 14px 18px;border-radius:30px;background:rgba(255,250,238,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 14px 30px -18px rgba(60,40,10,.6)}
  .hero-logo{margin-top:-6px}.hero-logo img{width:min(320px,74vw)}
  .hero-title{font-size:clamp(40px,12vw,54px);text-shadow:none}
  .hero-kicker{box-shadow:inset 0 0 0 2px #f1e4c6;font-size:12.5px}
  .stores{gap:8px}.store{padding:8px 14px 8px 10px;gap:9px}.store svg{width:24px;height:24px}.store b{font-size:16px}.store small{font-size:10px}
  .hero-actions{gap:10px}
  .hero-glow{top:22%}
  .stats-row{grid-template-columns:1fr 1fr}
  .game-grid{--cols:1}
  .friend-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .friend-label{margin:-22px 6px 0;padding:12px 10px 10px}
  .friend-label b{font-size:19px}.friend-label span{font-size:13.5px}
  .care-grid{grid-template-columns:1fr}
  .shelf-btn{display:none}
  .shelf{margin-top:-130px}
  .story-card{width:68vw}
  .tabs button{padding:10px 18px}
  .modal-close{top:-54px;right:0}
  .faq summary{font-size:18px;padding:18px 18px}
  .faq details p{padding:0 18px 18px}
  .scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .hl .swoosh path{stroke-dashoffset:0}
}

/* ── SEO structure: eyebrows live inside their h2, the hero h1 holds the sign and keyword line, FAQ questions are h3 */
.section-head h2,.showcase-copy h2{display:flex;flex-direction:column;align-items:center}
.showcase-copy h2{align-items:flex-start}
.section-head h2 .eyebrow,.showcase-copy h2 .eyebrow{margin-bottom:16px}
.hero-logo{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vh,18px)}
.faq summary h3{margin:0;font:inherit;color:inherit;letter-spacing:inherit}

/* ── at a glance */
.glance{margin-top:clamp(26px,3vw,40px);padding:clamp(22px,3vw,34px);border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow),inset 0 0 0 2px #f0e5c9}
.glance h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:16px}
.glance dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.glance dl div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:12px 0;border-top:1px dashed var(--line)}
.glance dt{font:600 16px/1.4 var(--head);color:var(--orange)}
.glance dd{margin:0;font-size:16px;line-height:1.45;color:var(--ink)}
@media (max-width:900px){.glance dl{grid-template-columns:1fr}.glance dl div{grid-template-columns:120px 1fr}}