/* =========================================================
   محب — Mohib · "Faith Roots" match (sample #2)
   Palette + layout extracted via Gemini vision from web-samples-pics/2.png:
   sunlit forest CLEARING — warm-gold centre, deep-green painted frame,
   dark-brown headline, cream open-book, dark-green story cards, gold buttons.
   ========================================================= */

/* GLOBAL [hidden] GUARD — the JS toggles visibility via the `hidden` attribute, but any class that sets
   `display:` silently defeated it (author rule beats the UA stylesheet). That one pattern produced 7 live bugs:
   the guest notification bell + a permanent red "0" badge, a clickable empty quiz-skip button, a dead "Get PDF"
   button, the 🌐 switch on single-language stories, the guest save-child checkbox, and the char-popup rows.
   `hidden` must ALWAYS win. (The old per-class compensations remain harmlessly redundant.) */
[hidden]{display:none!important}

@font-face{font-family:"Baloo Bhaijaan 2";src:url("../fonts/BalooBhaijaan2.woff2") format("woff2"),url("../fonts/BalooBhaijaan2.ttf") format("truetype");font-weight:400 800;font-display:swap}
@font-face{font-family:"Tajawal";src:url("../fonts/Tajawal-Medium.woff2") format("woff2"),url("../fonts/Tajawal-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Tajawal";src:url("../fonts/Tajawal-Bold.woff2") format("woff2"),url("../fonts/Tajawal-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Amiri";src:url("../fonts/Amiri-Bold.woff2") format("woff2"),url("../fonts/Amiri-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --warm:#FEEB9D;       /* centre sunlight */
  --warm-2:#FBDF93;
  --sun:#FBD06B;
  --green-frame:#2C4C34;/* deep painted frame green */
  --green-frame-2:#1F3B28;
  --green-card:#35593F; /* story cards / CTA fill */
  --green-mid:#60936F;  /* distant hills */
  --gold:#FDD76D;       /* Customize / accents */
  --gold-btn:#F8D8A0;   /* nav button / book pages */
  --gold-deep:#E0A93B;
  --ink:#3D2711;        /* dark-brown text */
  --ink-soft:#6A4E33;
  --cream:#F4EFDD;      /* light text on green */
  --parch:#F6EDD9;      /* page / section surface */
  --parch-2:#FCF5E4;
  --line:rgba(61,39,17,.16);

  --radius:16px; --radius-lg:24px;
  --shadow:0 20px 44px -22px rgba(30,20,8,.55);
  --shadow-sm:0 10px 24px -16px rgba(30,20,8,.5);
  --wrap:1160px;
  --fh:"Baloo Bhaijaan 2","Tajawal",system-ui,sans-serif;
  --fb:"Tajawal",system-ui,sans-serif;
  --fa:"Amiri",serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--fb);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;
  background:var(--parch);overflow-x:clip;min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--fh);font-weight:700;line-height:1.24}
.wrap{width:min(var(--wrap),92vw);margin-inline:auto}
.center{text-align:center}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  font-family:var(--fh);font-weight:700;font-size:1rem;padding:.68em 1.5em;border-radius:14px;
  border:2px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .16s,box-shadow .2s,background .2s,color .2s}
.btn:active{transform:translateY(1px)}
/* warm gold pill — nav "Personalize", Customize */
.btn-gold{background:var(--gold);color:var(--ink);border-color:rgba(61,39,17,.25);
  box-shadow:0 8px 18px -10px rgba(224,169,59,.7)}
.btn-gold:hover{background:#FFE18A;box-shadow:0 12px 24px -10px rgba(224,169,59,.85)}
/* soft warm button (nav) */
.btn-soft{background:var(--gold-btn);color:var(--ink);border-color:rgba(61,39,17,.3)}
.btn-soft:hover{background:#FBE6BE}
/* deep green — Get Started / primary */
.btn-green{background:var(--green-card);color:var(--cream);box-shadow:0 10px 22px -12px rgba(30,50,35,.8)}
.btn-green:hover{background:#2C4A34}
.btn-outline{background:transparent;border-color:var(--green-card);color:var(--green-card)}
.btn-outline:hover{background:rgba(53,89,63,.12)}
.btn-ghost{background:transparent;color:var(--ink);border-color:transparent}
.btn-ghost:hover{color:var(--gold-deep)}
.btn-xs{padding:.3em .85em;font-size:.8rem;border-radius:10px}
/* submit-in-progress: hide the label + show a spinner so a slow network never reads as a frozen button */
.btn.is-busy{position:relative;color:transparent!important;pointer-events:none}
.btn.is-busy::after{content:"";position:absolute;top:50%;left:50%;width:1.05em;height:1.05em;margin:-.525em 0 0 -.525em;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:btnspin .6s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}
.btn-sm{padding:.48em 1.05em;font-size:.9rem;border-radius:12px}
.btn-lg{padding:.82em 2em;font-size:1.1rem}

/* ---------- Eyebrow / heads ---------- */
.eyebrow{display:inline-block;font-family:var(--fh);font-weight:700;font-size:.9rem;color:var(--gold-deep);margin-bottom:.8rem}
.sec-head{text-align:center;max-width:640px;margin:0 auto 2.4rem}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);color:var(--ink)}
.panel{background:linear-gradient(180deg,var(--parch-2),var(--parch));color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}

/* ---------- Header (transparent over the clearing) ---------- */
.site-head{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(44,76,52,.55),rgba(44,76,52,0));backdrop-filter:blur(6px)}
.head-inner{display:flex;align-items:center;gap:1rem;height:64px}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--cream)}
.brand-seal{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:linear-gradient(160deg,#E7C877,#C98F2E);color:#204027;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.3)}
.brand-text b{font-family:var(--fh);font-size:1.5rem;color:var(--cream);display:block;line-height:1;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.brand-text i{font-style:normal;font-size:.68rem;letter-spacing:.28em;color:var(--gold);text-transform:uppercase}
.nav{display:flex;gap:1.4rem;margin-inline-start:auto}
.nav a{font-weight:700;font-family:var(--fh);color:var(--cream);position:relative;padding:.3em 0;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.nav-auth{display:none}/* login/account lives in header on desktop; shown inside the burger menu on mobile */
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .2s}
.nav a:hover::after{transform:scaleX(1)}
.head-cta{display:flex;align-items:center;gap:.5rem;margin-inline-start:1rem}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--cream);border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- HERO = sunlit forest clearing ---------- */
.hero{position:relative;z-index:1;overflow-x:clip;margin-top:-64px;padding:calc(64px + clamp(1rem,2.5vw,2rem)) 0 clamp(2.4rem,5vw,4rem);
  background-color:var(--green-frame);
  background-image:url("../img/hero-bg.webp");
  background-size:cover;background-position:center 22%;background-repeat:no-repeat;
}
/* soft warm lift in the centre so the headline + book read cleanly on the painting */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 46%, rgba(255,247,222,.55), transparent 72%)}
.hero>.wrap{position:relative;z-index:2}
/* PHONES: keep the painting FULL-BLEED (cover) but drop the heavy white wash that was
   erasing it — just a light lift behind the headline for readability. */
@media(max-width:768px){
  .hero{background-size:cover;background-position:center 30%}
  .hero::before{background:radial-gradient(85% 34% at 50% 16%, rgba(255,247,222,.42), transparent 78%)}
}

.hero-head{text-align:center;max-width:820px;margin:0 auto clamp(1.2rem,3vw,2rem)}
.hero-head .eyebrow{color:var(--ink);opacity:.9;text-shadow:0 1px 8px rgba(255,248,225,.9)}
.hero-head h1{font-size:clamp(1.85rem,5vw,3.5rem);color:var(--ink);text-wrap:balance;line-height:1.18;
  text-shadow:0 2px 14px rgba(255,248,225,.95),0 1px 0 rgba(255,255,255,.6)}
.hero-head .subhead{font-size:clamp(1.05rem,2vw,1.4rem);color:var(--ink);font-family:var(--fh);margin-top:.4rem;text-shadow:0 1px 10px rgba(255,248,225,.9)}
.hero-body{display:grid;grid-template-columns:1.6fr .8fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:center}

/* painted open book (generated asset, bg cut to transparent) */
.storybook{position:relative;margin:0;display:grid;place-items:center}
.book-img{width:100%;max-width:600px;position:relative;z-index:1;filter:drop-shadow(0 22px 30px rgba(30,20,8,.45))}

/* drifting golden stars around the hero book */
.bk-star{position:absolute;color:var(--gold);pointer-events:none;z-index:3;opacity:0;
  filter:drop-shadow(0 2px 4px rgba(224,169,59,.55));animation:bkstar 4s ease-in-out infinite}
.bk-star.b1{top:5%;inset-inline-start:9%;font-size:1.25rem;animation-delay:0s}
.bk-star.b2{top:13%;inset-inline-end:7%;font-size:.85rem;animation-delay:.7s}
.bk-star.b3{top:45%;inset-inline-start:1%;font-size:1rem;animation-delay:1.4s}
.bk-star.b4{bottom:15%;inset-inline-end:4%;font-size:1.35rem;animation-delay:2.1s}
.bk-star.b5{bottom:7%;inset-inline-start:15%;font-size:.8rem;animation-delay:2.8s}
.bk-star.b6{top:24%;inset-inline-end:20%;font-size:.95rem;animation-delay:3.4s}
@keyframes bkstar{0%,100%{opacity:0;transform:translateY(6px) scale(.6) rotate(0)}50%{opacity:.95;transform:translateY(-6px) scale(1.1) rotate(22deg)}}

/* attention-grabbing gold play button on the book: breathing scale + flowing gold levels + glint sweep + halo pulse */
.book-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:66px;height:66px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;font-size:1.5rem;color:#3a2a08;
  background:linear-gradient(120deg,var(--gold-deep) 0%,var(--gold) 30%,#FFF3C4 50%,var(--gold) 70%,var(--gold-deep) 100%);
  background-size:220% 220%;
  animation:playbreathe 2.2s ease-in-out infinite,goldshift 2.6s linear infinite,goldglow 2.2s ease-in-out infinite}
.book-play::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--gold);z-index:0;animation:playring 2.2s ease-out infinite}
.book-play::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.9) 49%,transparent 64%);background-size:260% 260%;
  animation:playglint 2.8s ease-in-out infinite}
.book-play span{position:relative;z-index:2;margin-inline-start:3px;text-shadow:0 1px 1px rgba(255,247,214,.6)}
.book-play:hover{background:radial-gradient(circle at 40% 30%,#FFF7DE,var(--gold));background-size:auto;
  animation:playbreathe 2.2s ease-in-out infinite,goldglow 1.5s ease-in-out infinite}
@keyframes playbreathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.09)}}
@keyframes playring{0%{transform:scale(.85);opacity:.6}100%{transform:scale(1.55);opacity:0}}
@keyframes goldshift{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes goldglow{0%,100%{box-shadow:0 10px 26px -8px rgba(0,0,0,.55),0 0 0 0 rgba(253,215,109,.6)}50%{box-shadow:0 10px 26px -8px rgba(0,0,0,.55),0 0 26px 7px rgba(253,215,109,.9)}}
@keyframes playglint{0%,100%{background-position:130% 0}55%{background-position:-45% 0}}
@media (prefers-reduced-motion:reduce){.book-play,.book-play::before,.book-play::after{animation:none}
  .book-play{background:radial-gradient(circle at 40% 30%,var(--gold-btn),var(--gold))}}

/* hero video popup */
.vpop{position:fixed;inset:0;z-index:240;display:grid;place-items:center;padding:1rem;background:rgba(10,25,18,.82);backdrop-filter:blur(6px);animation:obFade .25s ease}
.vpop[hidden]{display:none}
.vpop-inner{position:relative;width:min(860px,96vw)}
.vpop video{width:100%;border-radius:16px;background:#000;display:block;box-shadow:0 30px 70px -20px rgba(0,0,0,.8)}
.vpop-x{position:absolute;top:-14px;inset-inline-end:-14px;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;background:#fff;color:var(--ink);font-size:1rem;box-shadow:0 8px 20px -8px rgba(0,0,0,.5);z-index:2}
.vpop-x:hover{background:var(--parch)}
/* the player stage: rounded, controls OVERLAID on the video over a gradient (no raw native bar) */
.vwrap{position:relative;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 30px 70px -20px rgba(0,0,0,.8)}
.vwrap video{border-radius:0;box-shadow:none}
.vbar{position:absolute;inset-inline:0;bottom:0;z-index:2;display:flex;align-items:center;gap:.55rem;direction:ltr;
  padding:1.6rem .9rem .7rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72) 55%);
  opacity:1;transition:opacity .25s}
.vwrap:fullscreen .vbar{padding-bottom:1.2rem}
.vb{width:40px;height:40px;flex:0 0 auto;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#fff;font-size:1rem;transition:background .15s,transform .15s}
.vb:hover{background:rgba(255,255,255,.28);transform:scale(1.06)}
#vpPlay{background:var(--gold);color:var(--ink);font-size:1.05rem}
#vpPlay:hover{background:var(--gold-2)}
.vtime{flex:0 0 auto;color:#fff;font-size:.78rem;font-variant-numeric:tabular-nums;opacity:.9;white-space:nowrap}
/* seek + volume ranges: slim gold sliders */
.vseek,.vvol{-webkit-appearance:none;appearance:none;height:5px;border-radius:999px;background:rgba(255,255,255,.28);cursor:pointer;outline:none}
.vseek{flex:1 1 auto;min-width:60px}
.vvol{flex:0 0 64px}
.vseek::-webkit-slider-thumb,.vvol::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.5);cursor:pointer}
.vseek::-moz-range-thumb,.vvol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid #fff;cursor:pointer}
.vseek::-moz-range-track,.vvol::-moz-range-track{height:5px;border-radius:999px;background:rgba(255,255,255,.28)}
/* speed select: dark pill */
.vrate{flex:0 0 auto;border:0;border-radius:999px;padding:.3em .7em;background:rgba(255,255,255,.14);color:#fff;
  font-family:var(--fh);font-weight:700;font-size:.78rem;cursor:pointer;outline:none}
.vrate option{color:var(--ink);background:#fff}
@media(max-width:560px){.vvol,.vrate{display:none}.vb{width:36px;height:36px}.vbar{gap:.4rem;padding:1.2rem .6rem .55rem}}
@media(max-width:520px){.vpop-x{top:-6px;inset-inline-end:-2px}}
.sb-plate{position:relative;padding:18px 22px;border-radius:14px;max-width:560px;width:100%;
  background:linear-gradient(180deg,#FBF1D8,#EAD7AC);
  border:1px solid rgba(61,39,17,.25);
  box-shadow:var(--shadow),inset 0 0 0 10px #FBF3DD, 0 0 0 10px #6B4A25;
  transform:rotate(-.5deg)}
.sb-plate::before{content:"";position:absolute;inset:18px 22px;border-radius:8px;box-shadow:inset 0 0 26px rgba(0,0,0,.16);pointer-events:none;z-index:2}
.sb-plate img{border-radius:8px;aspect-ratio:16/10;object-fit:cover;width:100%}
.sb-spine{position:absolute;top:18px;bottom:18px;inset-inline-start:50%;width:30px;transform:translateX(-50%);z-index:3;
  background:linear-gradient(90deg,transparent,rgba(80,52,22,.32) 45%,rgba(80,52,22,.32) 55%,transparent);pointer-events:none}
.sb-pages{position:absolute;inset:8px -10px -12px 8px;z-index:-1;border-radius:16px;
  background:repeating-linear-gradient(90deg,#E7D3A6,#E7D3A6 3px,#D8C08E 3px,#D8C08E 6px);box-shadow:var(--shadow);transform:rotate(-.5deg)}
.storybook figcaption{margin-top:1rem;font-family:var(--fh);color:var(--ink);font-size:1.05rem;text-align:center}
.storybook .glow{position:absolute;inset:-10% -8% 6% -8%;z-index:-2;pointer-events:none;background:radial-gradient(50% 46% at 50% 46%,rgba(255,236,170,.6),transparent 70%);filter:blur(8px)}

/* right story list — dark-green cards, gold Customize */
.hero-list{display:grid;gap:.85rem;align-content:center}
.mini{display:flex;align-items:center;gap:.8rem;padding:.6rem;border-radius:14px;
  background:var(--green-card);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-sm);
  transition:transform .18s,box-shadow .2s}
.mini:hover{transform:translateX(-4px);box-shadow:var(--shadow)}
.mini img{width:60px;height:60px;border-radius:10px;object-fit:cover;flex:0 0 auto;box-shadow:0 4px 10px -4px rgba(0,0,0,.6)}
.mini h3{font-size:1rem;color:var(--cream);margin-bottom:.4rem}

.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(1.4rem,3vw,2.2rem)}
.seals{display:flex;gap:.7rem}
.seal{display:grid;grid-template-columns:auto auto;align-items:center;gap:.35rem;
  background:radial-gradient(circle at 30% 25%,#FBEBB6,#E0A93B);color:var(--ink);
  border-radius:999px;padding:.32rem .8rem .32rem .45rem;font-family:var(--fh);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.4)}
.seal i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.5);font-size:.95rem;font-style:normal}
.seal small{font-size:.66rem;line-height:1.05;font-weight:700}

/* --- single-screen app composition (matches the #2 layout) --- */
.hero-screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.hero-body{align-items:center}
.stage{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.stage-cta{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
@media(max-width:600px){.stage-cta{flex-direction:column;align-items:stretch;width:100%;max-width:340px;margin-inline:auto}.stage-cta .btn{width:100%}}
.hero-strip{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(1.2rem,3vw,2rem)}
.contact{display:flex;gap:1.2rem;color:var(--green-card);font-weight:700;font-family:var(--fh);font-size:.9rem}
.contact span{display:inline-flex;align-items:center;gap:.4rem}
.badges{display:flex;gap:.8rem}
.badge-seal{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;text-align:center;
  background:radial-gradient(circle at 40% 30%,#FBEBB6,#E0A93B);color:var(--ink);
  border:3px solid #C98F2E;box-shadow:0 8px 18px -10px rgba(0,0,0,.5);
  font-family:var(--fh);font-weight:700;font-size:.62rem;line-height:1.15;padding:.4rem}
.badge-seal b{font-size:.98rem;display:block;margin-bottom:.1rem}
.badge-seal small{font-size:.64rem;line-height:1.1}
@media(max-width:920px){.hero-strip{justify-content:center}.contact{order:2}}

/* ---------- Sections (parchment) ---------- */
.band{position:relative;z-index:1;padding:clamp(2.6rem,6vw,4.4rem) 0}
.band.stories{background:linear-gradient(180deg,var(--parch),#F1E6CC)}
.band.reviews{background:var(--green-frame);color:var(--cream)}
.band.reviews .sec-head h2,.band.reviews .eyebrow{color:var(--cream)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}

/* personalization */
.pc-copy{padding:clamp(1.4rem,3vw,2.2rem)}
.pc-copy .eyebrow{color:var(--gold-deep)}
.pc-copy h2{font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--ink)}
.pc-copy p{color:var(--ink-soft);margin:.6rem 0 1rem}
.ticks{list-style:none;display:grid;gap:.55rem;margin-bottom:1.4rem}
.ticks li{position:relative;padding-inline-start:1.7rem;font-weight:500;color:var(--ink)}
.ticks li::before{content:"✓";position:absolute;inset-inline-start:0;top:.3rem;color:var(--cream);background:var(--green-card);width:1.15rem;height:1.15rem;border-radius:50%;display:grid;place-items:center;font-size:.72rem}
.photo-morph{display:flex;align-items:center;gap:1rem;justify-content:center}
.pm-card{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--parch);border:1px solid var(--line);flex:1;max-width:220px}
.pm-tag{position:absolute;top:8px;inset-inline-start:8px;z-index:2;background:rgba(44,76,52,.85);color:var(--cream);font-size:.72rem;padding:.2em .7em;border-radius:999px;font-weight:500}
.pm-placeholder{aspect-ratio:3/4;display:grid;place-items:center;font-size:3rem;color:var(--ink-soft);background:repeating-linear-gradient(45deg,#efe6d2,#efe6d2 12px,#e7dcc4 12px,#e7dcc4 24px)}
.pm-after img{aspect-ratio:3/4;object-fit:cover}
.pm-after{outline:3px solid var(--gold);outline-offset:-3px}
.pm-arrow{font-size:1.8rem;color:var(--gold-deep);font-weight:700;transform:scaleX(-1)}

/* story cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-bottom:2rem}
.card{background:linear-gradient(180deg,var(--parch-2),var(--parch));border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s}
.card:hover{transform:translateY(-5px)}
.story-card .thumb{overflow:hidden;background:#e9dfc7}
.story-card .thumb img{aspect-ratio:3/4;object-fit:cover;transition:transform .4s}
.story-card:hover .thumb img{transform:scale(1.04)}
.card-body{padding:1.05rem 1.2rem 1.3rem}
.badge{display:inline-block;font-size:.74rem;font-weight:700;color:#2b5c44;background:rgba(53,89,63,.14);padding:.22em .7em;border-radius:999px;margin-bottom:.5rem}
.card-body h3{font-size:1.28rem;color:var(--green-card)}
.card-body p{color:var(--ink-soft);font-size:.95rem;margin:.35rem 0 .7rem}
.link-more{font-family:var(--fh);font-weight:700;color:var(--gold-deep)}

/* steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.step{background:linear-gradient(180deg,var(--parch-2),var(--parch));border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:2rem 1.4rem 1.6rem;text-align:center;box-shadow:var(--shadow-sm)}
.step-num{display:grid;place-items:center;width:56px;height:56px;margin:0 auto .8rem;border-radius:50%;
  font-family:var(--fh);font-size:1.6rem;color:var(--cream);
  background:linear-gradient(160deg,#3E6749,var(--green-card));box-shadow:0 10px 20px -8px rgba(0,0,0,.4)}
.step h3{color:var(--green-card);font-size:1.22rem;margin-bottom:.3rem}
.step p{color:var(--ink-soft)}
.no-hassle{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem;margin-top:2rem;font-family:var(--fh);font-weight:700;color:var(--green-card)}

/* features */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.feature{background:linear-gradient(180deg,var(--parch-2),var(--parch));border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem 1.4rem;text-align:center;box-shadow:var(--shadow-sm);transition:transform .2s}
.feature:hover{transform:translateY(-4px)}
.fi{display:inline-grid;place-items:center;width:60px;height:60px;font-size:1.7rem;border-radius:18px;margin-bottom:.6rem;
  background:radial-gradient(circle at 40% 30%,rgba(253,215,109,.6),rgba(224,169,59,.22))}
.feature h3{font-size:1.18rem;color:var(--green-card);margin-bottom:.2rem}
.feature p{color:var(--ink-soft);font-size:.94rem}

/* reviews (on green) */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.review{background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
  padding:1.4rem;box-shadow:var(--shadow-sm);position:relative}
.review::before{content:"“";position:absolute;top:-.2rem;inset-inline-end:.8rem;font-family:var(--fa);font-size:3rem;color:rgba(253,215,109,.55)}
.stars{color:var(--gold);letter-spacing:.15em;margin-bottom:.5rem}
.review p{color:#eef1e6}

/* pricing */
.pricing{background:linear-gradient(180deg,#F1E6CC,var(--parch))}
.offer{max-width:640px;margin:0 auto;text-align:center;padding:clamp(1.8rem,4vw,3rem);position:relative;overflow:hidden}
.offer::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 40% at 50% 0%,rgba(253,215,109,.28),transparent 70%)}
.offer h2{color:var(--ink);font-size:clamp(1.5rem,3vw,2.1rem);position:relative}
.offer-flag{display:inline-block;background:var(--green-card);color:var(--cream);font-family:var(--fh);font-weight:700;font-size:.86rem;padding:.35em 1.1em;border-radius:999px;margin-bottom:1rem;box-shadow:var(--shadow-sm)}
.price{display:flex;align-items:baseline;justify-content:center;gap:.8rem;margin:1rem 0 .3rem;flex-wrap:wrap}
.price-now{font-family:var(--fh);font-size:clamp(2.6rem,6vw,3.6rem);font-weight:800;color:var(--gold-deep);line-height:1}
.price-now small{font-size:1.1rem;font-weight:700}
.price-was{color:var(--ink-soft);text-decoration:line-through;font-size:1.2rem}
.price-save{background:rgba(53,89,63,.16);color:var(--green-card);font-weight:700;padding:.2em .7em;border-radius:999px;font-size:.9rem}
.price-sub{color:var(--ink-soft);margin-bottom:1.2rem}
.offer-list{list-style:none;display:inline-grid;gap:.5rem;text-align:start;margin:0 auto 1.5rem}
.offer-list li{position:relative;padding-inline-start:1.7rem;font-weight:500;color:var(--ink)}
.offer-list li::before{content:"✦";position:absolute;inset-inline-start:0;color:var(--gold-deep)}
.offer-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

/* footer */
/* reverent verse/blessing band (site-wide, above the footer) */
.blessing-band{position:relative;z-index:1;background:linear-gradient(180deg,#20381F,#1B301D);border-top:1px solid rgba(224,169,59,.35);border-bottom:1px solid rgba(224,169,59,.2);padding:.7rem 1rem;text-align:center}
.blessing-band .wrap{display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap}
.blessing-band .bl-ic{color:var(--gold);font-size:1rem;opacity:.9}
.blessing-band .bl-text{color:#F0E9D8;font-weight:600;font-size:1.02rem;line-height:1.5}
.blessing-band .bl-ref{color:var(--gold-deep);font-style:normal;font-size:.85rem;opacity:.9}
@media(max-width:640px){.blessing-band .bl-text{font-size:.95rem}}
.site-foot{position:relative;z-index:1;background:linear-gradient(180deg,#24402B,#182D1F);color:#DFEAE0;border-top:3px solid var(--gold-deep)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding:2.8rem 0 1.6rem}
.foot-logo b{color:#fff;font-size:1.6rem}
.foot-logo i{color:var(--gold)}
.tagline{font-family:var(--fa);color:var(--gold);font-size:1.15rem;margin:.6rem 0}
.foot-note{color:#a9c1b0;font-size:.92rem;max-width:32ch}
.foot-links h4,.foot-contact h4{font-family:var(--fh);color:#fff;margin-bottom:.7rem;font-size:1.05rem}
.foot-links a{display:block;color:#cfe0d3;padding:.5rem 0}/* roomier tap target + separation on mobile */
.foot-links a:hover{color:var(--gold)}
.foot-contact p{color:#a9c1b0;font-size:.92rem;margin-bottom:.45rem;line-height:1.55}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);text-align:center;padding:1rem;color:#8fae98;font-size:.85rem}

/* responsive */
@media(max-width:920px){
  .hero-body,.two-col{grid-template-columns:1fr}
  .hero-list{grid-auto-flow:column;overflow:auto;grid-auto-columns:minmax(180px,1fr);padding-bottom:.5rem}
  .mini{flex-direction:column;text-align:center}.mini img{width:100%;height:110px}
  .cards,.steps,.feature-grid,.review-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .leaf-bl,.leaf-br{display:none}
}
@media(max-width:620px){
  .nav{position:fixed;inset:64px 0 auto;flex-direction:column;background:var(--green-frame);padding:1rem 6vw;gap:.2rem;
    transform:translateY(-140%);transition:transform .28s;box-shadow:var(--shadow);margin:0}
  .nav.open{transform:translateY(0)}
  .nav a{padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .nav-auth{display:block}
  .burger{display:flex}.head-cta .btn-ghost{display:none}
  .cards,.feature-grid,.review-grid,.foot-grid,.steps{grid-template-columns:1fr}
  .hero-list{grid-auto-flow:row}.mini{flex-direction:row}.mini img{width:60px;height:60px}
  .photo-morph{flex-direction:column}.pm-arrow{transform:rotate(90deg)}
  .hero-foot{justify-content:center;text-align:center}
}
/* small phones: header must fit ~320px — keep the gold "خصّص الآن" CTA visible but COMPACT */
@media(max-width:400px){
  /* header spans the FULL width on phones (the 92vw wrap left ~29px of side margin the fixed 44px buttons can't fit into) */
  .head-inner{gap:.4rem;width:auto;max-width:none;margin-inline:0;padding-inline:.5rem}
  .head-cta{margin-inline-start:auto;gap:.3rem}
  .head-cta .btn-gold{padding:.34em .7em;font-size:.8rem;border-radius:10px;min-height:38px !important;white-space:nowrap}
  .brand-text i{display:none}   /* the latin sub-line goes; the gold CTA stays */
  .brand-seal{width:34px;height:34px}
  .brand-text b{font-size:1.25rem}
  .btn-lg{white-space:normal;max-width:100%}   /* long hero CTAs wrap instead of overflowing their wrap and cropping */
}
/* extra-small phones (≤360px): brand + gold CTA + bell + burger must all fit ~320px -> drop the (occasional) globe.
   Selector-free (not tied to the bell's hidden state), so it holds for guest AND logged-in. */
@media(max-width:360px){
  .head-inner{gap:.3rem;padding-inline:.4rem}
  .brand-seal{width:30px;height:30px}
  .brand-text b{font-size:1.05rem}
  .head-cta{gap:.25rem;margin-inline-start:auto}
  /* keep the language globe + bell visible; the "Create" CTA is still in the burger menu + the hero, so drop it here to fit 320
     (!important beats the later ≤600 touch-target rule that sets .head-cta .btn-gold display:inline-flex) */
  .head-cta .btn-gold{display:none !important}
}
/* ---------- language/settings globe ---------- */
.globe{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:var(--cream);
  width:38px;height:38px;border-radius:11px;cursor:pointer;font-size:1.05rem;line-height:1;
  display:grid;place-items:center;transition:background .2s,transform .16s}
.globe:hover{background:rgba(255,255,255,.28);transform:translateY(-1px)}

/* ---------- first-visit chooser ---------- */
.ob-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.2rem;
  background:rgba(15,35,24,.62);backdrop-filter:blur(6px);animation:obFade .25s ease}
.ob-overlay[hidden]{display:none}
@keyframes obFade{from{opacity:0}to{opacity:1}}
.ob-card{width:min(560px,94vw);max-height:92vh;overflow:auto;text-align:center;
  background:linear-gradient(180deg,var(--parch-2),var(--parch));color:var(--ink);
  border:1px solid rgba(224,169,59,.5);border-radius:var(--radius-lg);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7),0 0 0 6px rgba(255,255,255,.35);
  padding:clamp(1.4rem,4vw,2.4rem);animation:obPop .3s cubic-bezier(.2,.8,.2,1)}
@keyframes obPop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.ob-emblem{display:grid;place-items:center;width:56px;height:56px;margin:0 auto .6rem;border-radius:16px;font-size:1.5rem;
  background:linear-gradient(160deg,var(--blue),#3E5A70);color:#ffbf00;box-shadow:var(--shadow-sm)}
.ob-card h2{font-size:clamp(1.4rem,3.4vw,2rem);color:var(--ink)}
.ob-sub{color:var(--ink-soft);margin:.4rem 0 1.3rem}
.ob-group{text-align:start;margin-bottom:1.1rem}
.ob-group>label{display:block;font-family:var(--fh);font-weight:700;color:var(--green-card);margin-bottom:.5rem;font-size:.98rem}
/* currency: auto-selected + hidden by default, revealed by the gold "Change" button */
.ob-cur-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.ob-cur-head>label{margin-bottom:0}
.ob-cur-now{font-family:var(--fh);font-weight:700;color:var(--ink)}
.ob-edit{margin-inline-start:auto;background:transparent;border:1.5px solid var(--gold-deep);color:var(--gold-deep);font-family:var(--fh);font-weight:700;font-size:.82rem;border-radius:999px;padding:.15rem .8rem;cursor:pointer}
.ob-edit:hover{background:var(--gold-deep);color:#fff}
.ob-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.ob-pill{font-family:var(--fh);font-weight:700;font-size:.92rem;padding:.5em 1.05em;border-radius:12px;cursor:pointer;
  background:#fff;color:var(--ink);border:2px solid var(--line);transition:all .16s}
.ob-pill:hover{border-color:var(--gold-deep)}
.ob-pill.on{background:var(--green-card);color:var(--cream);border-color:var(--green-card);box-shadow:0 8px 16px -10px rgba(30,50,35,.8)}
.ob-confirm{width:100%;margin-top:.6rem}
.ob-note{color:var(--ink-soft);font-size:.85rem;margin-top:.7rem}

/* ---------- motion: float + breathe (inspired by the ux-blends-beauty ref) ---------- */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-10px) rotate(var(--rot,0deg))}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.book-img{animation:floaty 5.5s ease-in-out infinite}
.storybook .glow{animation:breathe 5.5s ease-in-out infinite}
/* floaty, slightly-rotated story cards (shadow-floaty + rotate-[-6deg] + animate-float) */
.mini{box-shadow:0 14px 28px -16px rgba(10,30,20,.5)}   /* clean, straight, aligned — no scattered rotation/float */
.badge-seal{animation:breathe 4s ease-in-out infinite}
.badge-seal:nth-child(2){animation-delay:1s}
.feature .fi{animation:breathe 4.5s ease-in-out infinite}
.step-num{animation:floaty 5s ease-in-out infinite}
.fi,.pm-arrow{will-change:transform}

/* ---------- English locale fonts: Fredoka + Nunito (from the ref site) ---------- */
html[lang="en"]{--fh:"Fredoka","Baloo Bhaijaan 2",system-ui,sans-serif;--fb:"Nunito",system-ui,sans-serif}

/* ---------- gamified social-proof toasts (rich, TOP) ---------- */
.toasts{position:fixed;bottom:20px;inset-inline-start:16px;z-index:500;display:flex;flex-direction:column;gap:.6rem;pointer-events:none;max-width:340px}   /* ABOVE every modal overlay (ob 200 / vf 220 / br 300 / cf 400) — the net-error toast was invisible exactly when a fetch died inside the OTP/onboarding modals */
.toast{position:relative;display:flex;align-items:center;gap:.7rem;background:#fff;color:var(--ink);
  border:1px solid rgba(224,169,59,.5);border-radius:14px;padding:.6rem .7rem;max-width:340px;pointer-events:auto;
  box-shadow:0 18px 44px -14px rgba(10,30,20,.5);transform:translateY(16px) scale(.98);opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .45s}
.toast.show{transform:none;opacity:1}
.toast img.thumb{width:52px;height:52px;border-radius:11px;object-fit:cover;flex:0 0 auto;border:1px solid var(--line)}
.toast .tx{font-size:.9rem;line-height:1.4;color:var(--ink);font-weight:500;padding-inline-end:.6rem}
.toast .tx b{color:var(--green-card);font-weight:700}
.toast .tx small{display:block;color:var(--gold-deep);font-size:.72rem;font-weight:700;margin-top:1px}
.toast .tx-close{position:absolute;top:2px;inset-inline-end:2px;display:inline-grid;place-items:center;min-width:38px;min-height:38px;background:transparent;border:0;color:var(--ink-soft);cursor:pointer;font-size:1rem;line-height:1;padding:0;border-radius:8px}   /* ≥38px tap target (was ~29px) */
.toast .av{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-family:var(--fh);font-weight:700;color:#3a2a08;background:radial-gradient(circle at 40% 30%,var(--gold-2),var(--gold))}
/* error/network toasts: warm-red badge (the ⚠ icon color) — distinct from the gold success/info badge */
.toast.toast-error .av{color:#fff;background:radial-gradient(circle at 40% 30%,#f0797d,#e5484d)}
/* responsive: below the header on desktop; bottom on phones so it never covers the header/hero */
@media(max-width:600px){.toasts{top:auto;bottom:16px;inset-inline-start:8px;inset-inline-end:76px;max-width:none}}   /* leave the dock (right) uncovered */

/* ---------- floating action DOCK: every floating button lives here as a flex column, so they can NEVER overlap ---------- */
.fab-dock{position:fixed;inset-inline-end:14px;bottom:14px;z-index:120;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.fab-dock>*{pointer-events:auto;position:static !important;inset:auto !important;margin:0 !important;flex:0 0 auto}
.fab-dock .to-top:not(.show){display:none}   /* back-to-top only takes a slot once it appears */
body:has(.pwa-banner.show) .fab-dock{bottom:86px}   /* clear the install banner when it's up */
@media(max-width:600px){.fab-dock{inset-inline-end:10px;bottom:10px}}

/* ---------- live viewers badge + music toggle ---------- */
.live-badge{position:fixed;bottom:16px;inset-inline-start:16px;z-index:120;display:flex;align-items:center;gap:.45rem;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;box-shadow:0 12px 26px -14px rgba(10,30,20,.5);
  font-family:var(--fh);font-weight:700;font-size:.84rem;color:var(--ink)}
.live-badge .dot{width:9px;height:9px;border-radius:50%;background:#35c15e;animation:livepulse 1.8s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(53,193,94,.55)}70%{box-shadow:0 0 0 8px rgba(53,193,94,0)}100%{box-shadow:0 0 0 0 rgba(53,193,94,0)}}
.music-btn{position:fixed;bottom:16px;inset-inline-end:70px;z-index:120;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(160deg,var(--gold-2),var(--gold));color:#3a2a08;font-size:1.15rem;display:grid;place-items:center;
  box-shadow:0 12px 24px -10px rgba(0,0,0,.5);transition:.2s}
.music-btn.on{background:linear-gradient(160deg,#7fbf93,var(--green-card));color:#fff}
.music-btn:hover{transform:translateY(-2px)}
/* "sound coming from here" — concentric waves radiate while music is playing */
.music-btn.on::before,.music-btn.on::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.75);pointer-events:none;animation:soundwave 1.8s ease-out infinite}
.music-btn.on::after{animation-delay:.9s}
@keyframes soundwave{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.1);opacity:0}}
@media(prefers-reduced-motion:reduce){.music-btn.on::before,.music-btn.on::after{animation:none;opacity:0}}
.music-panel{position:fixed;bottom:14px;inset-inline-end:76px;z-index:121;width:210px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 40px -14px rgba(10,30,20,.5);padding:.7rem .8rem;transform-origin:bottom;
  transform:translateY(12px) scale(.96);opacity:0;pointer-events:none;transition:.22s}
.music-panel.open{transform:none;opacity:1;pointer-events:auto}
.music-panel .mp-title{font-family:var(--fh);font-weight:700;color:var(--green-card);font-size:.88rem;text-align:center;margin-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-panel .mp-ctrls{display:flex;justify-content:center;gap:.5rem;margin-bottom:.55rem}
.music-panel .mp-b{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--parch);color:var(--ink);cursor:pointer;font-size:1rem}
.music-panel .mp-b.mp-play{background:var(--green-card);color:var(--cream);border-color:var(--green-card)}
.music-panel .mp-vol{width:100%}
/* ALL range sliders site-wide use the brand GOLD (not the browser default grey) */
/* ALL range sliders site-wide: a fully CUSTOM gold track + glossy knob (NOT the flat browser default) */
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer;margin:0}
input[type="range"]::-webkit-slider-runnable-track{height:9px;border-radius:999px;background:linear-gradient(90deg,var(--gold-deep,#E0A93B),var(--gold-2,#f4d58d));box-shadow:inset 0 1px 2px rgba(90,60,10,.35)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px;width:21px;height:21px;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#fff7e2,var(--gold-2,#f4d58d) 44%,var(--gold-deep,#E0A93B));border:2px solid #fff;
  box-shadow:0 2px 6px rgba(120,80,10,.5),0 0 0 1px rgba(170,120,30,.45);cursor:pointer;transition:transform .12s}
input[type="range"]::-moz-range-track{height:9px;border-radius:999px;background:rgba(120,90,20,.18)}
input[type="range"]::-moz-range-progress{height:9px;border-radius:999px;background:linear-gradient(90deg,var(--gold-deep,#E0A93B),var(--gold-2,#f4d58d))}
input[type="range"]::-moz-range-thumb{width:21px;height:21px;border-radius:50%;background:radial-gradient(circle at 38% 30%,#fff7e2,var(--gold-2,#f4d58d) 44%,var(--gold-deep,#E0A93B));border:2px solid #fff;box-shadow:0 2px 6px rgba(120,80,10,.5);cursor:pointer}
input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.1)}
input[type="range"]:hover::-moz-range-thumb{transform:scale(1.1)}
input[type="range"]:focus{outline:none}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(224,169,59,.4),0 2px 6px rgba(120,80,10,.5)}
input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(224,169,59,.4)}
@media(max-width:600px){.live-badge{font-size:.78rem;bottom:12px;inset-inline-start:10px}
  .music-panel{inset-inline-end:76px;bottom:14px}.music-panel .mp-b{width:44px;height:44px}}

/* ---------- PWA install banner + back-to-top ---------- */
.pwa-banner{position:fixed;z-index:180;inset-inline:12px;bottom:12px;margin-inline:auto;max-width:520px;
  display:flex;align-items:center;gap:.8rem;background:linear-gradient(180deg,#fff,var(--parch-2));color:var(--ink);
  border:1px solid rgba(224,169,59,.55);border-radius:16px;padding:.7rem .9rem;
  box-shadow:0 18px 40px -16px rgba(10,30,20,.55);transform:translateY(150%);transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.pwa-banner.show{transform:none}
.pwa-banner .pb-ic{font-size:1.6rem;flex:0 0 auto}
.pwa-banner .pb-txt{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.pwa-banner .pb-txt b{font-family:var(--fh);color:var(--green-card)}
.pwa-banner .pb-txt span{font-size:.85rem;color:var(--ink-soft)}
.pwa-banner kbd{background:var(--parch);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:.05em .4em;font:600 .82em/1 monospace;color:var(--ink)}
.pwa-banner .pb-actions{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}
.pwa-banner .pb-x{display:inline-grid;place-items:center;min-width:40px;min-height:40px;background:transparent;border:0;color:var(--ink-soft);font-size:1.1rem;cursor:pointer;padding:0;border-radius:8px}   /* ≥40px tap target (was ~29px) */
.pwa-banner .pb-x:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.to-top{position:fixed;z-index:120;inset-inline-end:124px;bottom:68px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;text-align:center;align-content:center;
  background:linear-gradient(160deg,#3E6749,var(--green-card));color:var(--cream);font-size:1.2rem;font-weight:700;
  box-shadow:0 12px 24px -10px rgba(0,0,0,.5);opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:.25s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--green-frame)}
/* floating WhatsApp help — matches .music-btn (round, same size/shadow); sits next to it in the control row */
.wa-help{position:fixed;z-index:120;inset-inline-end:124px;bottom:16px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,#3ec55f,#25a34a);text-decoration:none;
  box-shadow:0 12px 24px -10px rgba(0,0,0,.5);transition:.2s}
.wa-help:hover{transform:translateY(-2px)}
.wa-help:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media(max-width:600px){
  .pwa-banner{inset-inline:8px;bottom:8px}
  .to-top{width:46px;height:46px;inset-inline-end:10px;bottom:118px}
  .wa-help{inset-inline-end:10px;bottom:118px;width:46px;height:46px}
  .burger{width:44px;height:44px;padding:0;align-items:center;justify-content:center}
  .globe{width:44px;height:44px}
  .head-cta .btn-gold,.btn-sm:not(.btn-ghost),.btn-xs{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .storybook .glow{inset:-8% 0 6% 0}
  .toast .tx-close{top:2px;inset-inline-end:2px;padding:8px;font-size:1rem;line-height:1}
  .link-more{display:inline-block;padding-block:.45rem}
  /* the dock lifts itself above the install banner; also lift the popover panels + toasts + live badge */
  body:has(.pwa-banner.show) .music-panel,body:has(.pwa-banner.show) .asst-panel{bottom:96px}
  body:has(.pwa-banner.show) .toasts{bottom:96px}
  body:has(.pwa-banner.show) .live-badge{bottom:92px}
}

/* ---------- in-app notifications (header bell) ---------- */
.notif-wrap{position:relative;display:inline-block}
.bell{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:var(--cream);
  width:38px;height:38px;border-radius:11px;cursor:pointer;font-size:1.05rem;line-height:1;position:relative;
  display:grid;place-items:center;transition:background .2s,transform .16s}
.bell:hover{background:rgba(255,255,255,.28);transform:translateY(-1px)}
.bell-badge{position:absolute;top:-5px;inset-inline-end:-5px;min-width:18px;height:18px;padding:0 4px;
  background:#d9483b;color:#fff;border-radius:999px;font-size:.68rem;font-weight:700;line-height:18px;
  display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.notif-pop{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:210;width:min(320px,86vw);
  background:var(--cream,#fff);color:var(--ink,#3B2F26);border:1px solid var(--line,rgba(59,47,38,.14));
  border-radius:14px;box-shadow:0 12px 34px rgba(15,35,24,.28);overflow:hidden;max-height:70vh;overflow-y:auto}
.np-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.7rem .9rem;
  border-bottom:1px solid var(--line,rgba(59,47,38,.14));font-size:.92rem}
.np-head a{color:var(--gold,#C7A24A);font-size:.8rem;font-weight:600;text-decoration:none;white-space:nowrap}
.np-item{display:flex;flex-direction:column;gap:.25rem;padding:.7rem .9rem;text-decoration:none;
  color:var(--ink,#3B2F26);border-bottom:1px solid var(--line,rgba(59,47,38,.08));transition:background .15s}
.np-item:last-child{border-bottom:0}
.np-item:hover{background:rgba(199,162,74,.1)}
.np-tx{font-size:.9rem;line-height:1.5}
.np-item time{font-size:.72rem;opacity:.6}
.np-empty{padding:1.2rem .9rem;text-align:center;color:var(--ink,#3B2F26);opacity:.6;font-size:.9rem}
@media(max-width:600px){ .bell{width:44px;height:44px} }

@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}

/* ---------- guided tour (accessibility-first: elderly / low-literacy / special-needs) ---------- */
.tour-ov{position:fixed;inset:0;z-index:9998;pointer-events:auto}
.tour-box{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(20,30,20,.62),0 0 0 3px var(--gold),0 0 24px 5px rgba(253,215,109,.6);transition:top .25s,left .25s,width .25s,height .25s;pointer-events:none}
.tour-card{position:fixed;z-index:10000;max-width:min(92vw,380px);background:var(--parch,#FBF6EA);border:2px solid var(--gold-deep);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:1.1rem 1.15rem 1rem;font-family:var(--fb)}
.tour-x{position:absolute;top:6px;inset-inline-end:8px;background:transparent;border:0;color:var(--gold-deep);font-size:1.05rem;line-height:1;cursor:pointer;padding:4px 7px;border-radius:8px;z-index:2}
.tour-x:hover{background:rgba(224,169,59,.18)}
.tour-card .tour-title{padding-inline-end:1.4rem}   /* leave room for the X */
.tour-card[hidden]{display:none}
.tour-arrow{position:absolute;left:50%;transform:translateX(-50%);color:var(--gold-deep);font-size:1.7rem;line-height:1;animation:tourbob 1s ease-in-out infinite}
.tour-card.below .tour-arrow{top:-1.6rem}.tour-card.below .tour-arrow::before{content:"\25B2"}
.tour-card.above .tour-arrow{bottom:-1.6rem}.tour-card.above .tour-arrow::before{content:"\25BC"}
@keyframes tourbob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-7px)}}
.tour-title{font-family:var(--fh);color:var(--green-frame);font-size:1.28rem;margin:.1rem 0 .45rem}
.tour-body{color:var(--ink);font-size:1.06rem;line-height:1.6;margin:0 0 .9rem}
.tour-nav{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.tour-btn{font-family:var(--fh);font-weight:700;font-size:1rem;border-radius:12px;padding:.55rem 1.1rem;cursor:pointer;border:0;min-height:46px}
.tour-next{background:var(--green-card);color:#fff;margin-inline-start:auto;font-size:1.12rem;padding:.62rem 1.45rem}
.tour-back{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
.tour-skip{background:transparent;color:var(--ink-soft);text-decoration:underline;min-height:auto;padding:.3rem .4rem;font-size:.9rem}
.tour-read{background:var(--gold-btn,#F8D8A0);color:var(--ink)}
.tour-dots{display:flex;gap:.35rem;justify-content:center;margin-top:.85rem}
.tour-dots span{width:8px;height:8px;border-radius:50%;background:var(--line);transition:all .2s}
.tour-dots span.on{background:var(--gold-deep);width:20px;border-radius:6px}
.tour-help{position:fixed;inset-inline-end:16px;bottom:16px;z-index:60;width:54px;height:54px;border-radius:50%;border:0;background:var(--gold-deep);color:#fff;font-family:var(--fh);font-weight:800;font-size:1.6rem;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.tour-help:hover{filter:brightness(1.08)}
@media(max-width:600px){.tour-card{max-width:94vw}.tour-help{width:48px;height:48px;font-size:1.4rem;inset-inline-end:12px;bottom:12px}}

/* Help assistant — floating chat (💬) sits ABOVE the tour "?" button; panel opens over the bubble. */
.asst-bubble{position:fixed;inset-inline-end:16px;bottom:82px;z-index:60;width:44px;height:44px;border-radius:50%;border:0;background:var(--green-card);color:#fff;font-size:1.3rem;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.3);transition:transform .15s}
.asst-bubble:hover{transform:scale(1.06)}
.asst-panel{position:fixed;inset-inline-end:76px;bottom:14px;z-index:61;width:340px;max-width:calc(100vw - 92px);height:460px;max-height:74vh;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden}
.asst-panel[hidden]{display:none}
.asst-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.7rem 1rem;background:var(--green-card);color:#fff;font-family:var(--fh);font-weight:800}
.asst-x{background:transparent;border:0;color:#fff;font-size:1.1rem;cursor:pointer;line-height:1}
.asst-head-x{display:flex;align-items:center;gap:.1rem}
.asst-hbtn{background:transparent;border:0;color:#fff;font-size:1rem;cursor:pointer;line-height:1;padding:.2rem .32rem;border-radius:8px;opacity:.9}
.asst-hbtn:hover{opacity:1;background:rgba(255,255,255,.16)}
.asst-hbtn svg{display:block}
.asst-wa{color:#eafff0}
.asst-msgs{flex:1;overflow-y:auto;padding:.8rem;display:flex;flex-direction:column;gap:.55rem;background:var(--cream,#faf7ef)}
.asst-msg{display:flex;align-items:flex-end;gap:.35rem;max-width:100%}
.asst-msg.user{flex-direction:row-reverse}
.asst-bub{padding:.5rem .75rem;border-radius:14px;font-size:.95rem;line-height:1.55;max-width:80%;white-space:pre-wrap;overflow-wrap:anywhere}
.asst-msg.bot .asst-bub{background:#fff;border:1px solid var(--line);border-bottom-inline-start-radius:4px}
.asst-msg.user .asst-bub{background:var(--gold-deep);color:#fff;border-bottom-inline-end-radius:4px}
.asst-typing{opacity:.6;font-size:1.2rem;letter-spacing:.12em}
.asst-read{background:transparent;border:0;cursor:pointer;font-size:.9rem;opacity:.55;padding:0 .1rem}
.asst-read:hover{opacity:1}
.asst-in{display:flex;align-items:center;gap:.4rem;padding:.5rem;border-top:1px solid var(--line);background:#fff}
.asst-input{flex:1;min-width:0;border:1px solid var(--line);border-radius:20px;padding:.5rem .8rem;font:inherit;font-size:.95rem;outline:none}
.asst-input:focus{border-color:var(--gold-deep)}
.asst-mic,.asst-send{border:0;border-radius:50%;width:38px;height:38px;flex:none;cursor:pointer;font-size:1.05rem}
.asst-mic{background:#ececec;color:#333}
.asst-mic.on{background:#e5484d;color:#fff;animation:asstPulse 1s infinite}
.asst-send{background:var(--green-card);color:#fff}
@keyframes asstPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media(max-width:600px){.asst-bubble{width:46px;height:46px}.asst-panel{inset-inline:8px;bottom:80px;width:auto;max-width:none;height:70vh}.asst-menu{inset-inline-end:64px;bottom:12px}}

/* bubble action menu (Ask AI / WhatsApp / Tour) */
.asst-menu{position:fixed;inset-inline-end:68px;bottom:16px;z-index:62;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 48px rgba(10,30,20,.3);padding:.35rem;display:flex;flex-direction:column;gap:.15rem}
.asst-menu[hidden]{display:none}
.asst-mi{display:flex;align-items:center;gap:.6rem;width:100%;padding:.62rem .7rem;border:0;background:transparent;border-radius:10px;cursor:pointer;font:inherit;font-size:.95rem;color:var(--ink);text-align:start}
.asst-mi:hover{background:var(--cream,#faf7ef)}
.asst-mi .ami-ic{flex:none;width:24px;display:inline-flex;align-items:center;justify-content:center;color:var(--green-card)}
.asst-mi .ami-ic svg{display:block}
.asst-mi-wa .ami-ic{color:#25a34a}
/* AI avatar on bot lines (so it's clear it's an AI agent talking) */
.asst-av{flex:none;width:24px;height:24px;display:grid;place-items:center;font-size:1rem;align-self:flex-start;margin-top:2px}
/* WhatsApp support button dropped into the chat when the user asks for a human */
.asst-walink{display:inline-flex;align-items:center;gap:.45rem;background:#25a34a;color:#fff;border:0;border-radius:12px;padding:.55rem .85rem;cursor:pointer;font:inherit;font-weight:600}
.asst-walink svg{fill:#fff}
/* while the help menu is open, get the FOMO live badge + toasts out of the way */
body:has(.asst-menu:not([hidden])) .live-badge,
body:has(.asst-menu:not([hidden])) .toasts{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s}

/* the currency pills stay truly hidden until the gold "Change" button reveals them */
.ob-pills[hidden]{display:none}