/* ── فصل‌ها بعد از صحنهٔ اول ──
   هر فصل یک صفحهٔ گوشی است و مثل یک شیت با گوشه‌های گرد روی فصل قبلی می‌آید (بدون JS، فقط layout). */
.sheet-sec { position: relative; z-index: 2; border-radius: 30px 30px 0 0; margin-top: -30px; box-shadow: 0 -14px 30px -20px rgba(9,45,72,.28); }
/* اولین شیت روی صحنهٔ پین‌شده نمی‌آید تا دکمهٔ پایین صحنه بریده نشود */
/* زیر صحنهٔ داستان فقط حاشیهٔ «بی‌نوار» (--lv منهای --sv) است؛ برگهٔ بعدی دقیقاً همان‌جا رویش می‌آید تا بعد از داستان اسکرول خالی نماند */
.story + .sheet-sec { margin-top: calc(var(--sv) - var(--lv)); }

/* ── فصل ۲: کتاب تو رو از بَره ── */
.books { background: #fff; padding-inline: 0; justify-content: flex-start; padding-top: 92px; }
.books > .kick, .books > .h2, .books > .lead { margin-inline: var(--gut); }
.books .h2 { font-size: clamp(27px, calc(var(--W) * .078), 38px); }
.books .lead { font-size: 14.5px; }
.row { display: flex; gap: 8px; overflow-x: auto; padding: 6px var(--gut); scrollbar-width: none; }
.row::-webkit-scrollbar { display: none; }
.stg, .trk { flex-shrink: 0; height: 38px; padding: 0 15px; border-radius: 14px; font-weight: 900; font-size: 13.5px; white-space: nowrap; background: #fff; color: var(--sub); box-shadow: inset 0 0 0 2px #E3ECF3; transition: background .25s, color .25s, transform .3s var(--ease-spring); }
.stg[aria-pressed="true"], .trk[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.12); transform: rotate(-3deg) translateY(-2px); }
.trk { height: 32px; font-size: 13px; }
.row.stages { margin-top: 14px; } .row.tracks[hidden] { display: none; }
/* قفسه: تخته پشتِ کتاب‌ها کشیده می‌شود و کتاب‌ها روی لبهٔ بالایش می‌ایستند؛ پدینگ قفسه جای سایه، چرخش سه‌بعدی و عطف کتاب اول را دارد تا چیزی بریده نشود */
.shelf-wrap { position: relative; }
.shelf-wrap::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 14px; height: 18px; border-radius: 6px; background: linear-gradient(180deg, #FFFFFF 0%, #E6EDF5 40%, #C9D6E4 100%); box-shadow: 0 14px 22px -10px rgba(9,45,72,.4), inset 0 1px 0 #fff; }
.shelf { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 16px; overflow-x: auto; padding: 26px 32px 32px var(--gut); scroll-snap-type: x proximity; scroll-padding-inline: 32px var(--gut); scrollbar-width: none; perspective: 800px; }
.shelf::-webkit-scrollbar { display: none; }
/* ارتفاع کتاب‌ها کمی با هم فرق دارد (--h را JS می‌دهد) تا قفسه طبیعی دیده شود */
.book { flex: 0 0 118px; height: calc(146px - var(--h, 0px)); scroll-snap-align: start; position: relative; z-index: 1; animation: bookIn .6s var(--ease-spring) both; animation-delay: calc(var(--i) * 40ms); }
.book::after { content: ""; position: absolute; z-index: -1; left: 2%; right: -8%; bottom: -8px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(9,45,72,.38), transparent); }
.book__in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-24deg); transition: transform .7s var(--ease-spring); }
.book:nth-child(1) .book__in { animation: peek 2.6s 1.2s var(--ease-io) 2; }
@keyframes peek { 0%, 100% { transform: rotateY(-24deg); } 40% { transform: rotateY(-24deg) translateY(-12px); } }
.book.open .book__in { transform: rotateY(180deg); animation: none; }
/* عطف کتاب سمت راست است، مثل کتاب‌های فارسی؛ با چرخش جلد دیده می‌شود و به کتاب حجم می‌دهد */
.book__s { position: absolute; top: 2px; bottom: 2px; left: 100%; width: 14px; transform-origin: 0 50%; transform: rotateY(90deg); border-radius: 0 3px 3px 0; background: linear-gradient(90deg, rgba(0,0,0,.3), rgba(0,0,0,.14)), linear-gradient(180deg, var(--c1), var(--c2)); }
.book__f, .book__b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.book__f { display: flex; flex-direction: column; padding: 10px 12px 10px 10px; border-radius: 14px 5px 5px 14px; color: #fff; background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: inset -6px 0 0 rgba(0,0,0,.16), inset -8px 0 0 rgba(255,255,255,.18); transform: translateZ(1px); }
.book__f::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.35) 0 18%, transparent 19%), radial-gradient(circle at 0% 100%, rgba(0,0,0,.12) 0 30%, transparent 31%); }
.book__f::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255,255,255,.3) 0%, transparent 38%); }
.book__f span { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.9); font-size: 19px; line-height: 1; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
/* اسم کتاب همیشه یک خط است؛ اگر جا نشد JS کمی کوچکش می‌کند (تا ۹٫۵px) */
.book__f b { position: relative; z-index: 1; margin-top: auto; padding: 6px 7px; border-radius: 9px; background: rgba(255,255,255,.95); color: var(--ink); font-size: 12px; font-weight: 900; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* پشت کتاب فقط تعداد مبحث‌ها، درشت و خوانا */
.book__b { transform: rotateY(180deg) translateZ(1px); border-radius: 5px 14px 14px 5px; background: #fff; color: var(--ink); padding: 10px; box-shadow: inset 0 0 0 2px var(--c1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.book__b strong { font-size: 36px; font-weight: 900; color: var(--c1); line-height: 1.1; }
.book__b small { font-size: 12.5px; font-weight: 900; color: var(--sub); }
/* روی آیفون (WebKit) محتوای روی جلد از پشت کتابِ ورق‌خورده برعکس دیده می‌شد: علاوه بر backface روی خود بچه‌ها،
   محتوای هر رو درست وسط ورق خوردن (۰٫۳ ثانیه) پنهان/پیدا می‌شود، پس دیگر هیچ‌وقت از پشت دیده نمی‌شود */
.book__f > *, .book__f::before, .book__f::after, .book__b > * { -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: visibility 0s .3s; }
.book.open .book__f > *, .book.open .book__f::before, .book.open .book__f::after { visibility: hidden; }
.book__b > * { visibility: hidden; }
.book.open .book__b > * { visibility: visible; }
@keyframes bookIn { from { opacity: 0; transform: translateY(30px) rotate(-6deg); } to { opacity: 1; transform: none; } }
.stats { display: flex; justify-content: space-between; gap: 8px; margin: 6px var(--gut) 0; padding: 12px 16px; border-radius: 20px; background: var(--ink); color: #fff; }
.stats div { display: flex; flex-direction: column; align-items: center; line-height: 1.4; }
.stats b { font-size: 21px; font-weight: 900; color: var(--sun); font-variant-numeric: tabular-nums; }
.stats span { font-size: 11.5px; font-weight: 700; opacity: .8; }

/* ── فصل ۳: امروز چی لازمته؟ ── */
.goals { background: linear-gradient(180deg, #EAF4FF 0%, #DCEBFF 100%); }
.deck { position: relative; height: min(calc(var(--sv) * .52), 410px); margin-top: 20px; touch-action: pan-y; }
.gcard { position: absolute; inset: 0; border-radius: 30px; padding: 20px; color: #fff; background: linear-gradient(155deg, var(--g1), var(--g2)); box-shadow: 0 26px 50px -18px rgba(9,45,72,.5);
  display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: transform .5s var(--ease-spring), opacity .4s; will-change: transform; user-select: none; -webkit-user-select: none; }
.gcard.drag { transition: none; }
.gcard__top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.gname { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; background: rgba(255,255,255,.22); font-weight: 900; font-size: 13px; }
.gnum { font-weight: 900; opacity: .7; font-size: 13px; }
.gq { position: relative; font-size: clamp(26px, calc(var(--W) * .076), 33px); font-weight: 900; line-height: 1.35; }
.gdesc { position: relative; font-size: 14.5px; font-weight: 600; opacity: .94; line-height: 1.9; max-width: 88%; }
.gex { position: relative; align-self: flex-start; margin-top: auto; background: #fff; color: var(--ink); padding: 10px 14px; border-radius: 18px 18px 6px 18px; font-weight: 800; font-size: 14px; box-shadow: 0 10px 20px rgba(0,0,0,.15); max-width: 70%; }
.gex::before { content: "مثلاً:"; display: block; font-size: 11px; color: var(--mut); font-weight: 800; }
.gart { position: absolute; left: 14px; bottom: 14px; font-size: 70px; line-height: 1; transform: rotate(-10deg); }
.deck-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.deck-ctl button { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: #fff; box-shadow: var(--sh-s); color: var(--ink); }
.deck-ctl button svg { width: 22px; height: 22px; }
.deck-ctl span { font-weight: 900; font-size: 14px; color: var(--sub); min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.swipe-hint { text-align: center; font-size: 12.5px; font-weight: 800; color: var(--mut); margin-top: 8px; }

/* ── فصل ۴: نظرای مایکت — سه یادداشت که با نوار چسب به دیوار چسبیدن ── */
.revs { background: #fff; }
.rate { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 800; color: var(--sub); }
.rate em { font-style: normal; color: #F59E0B; font-size: 16px; letter-spacing: 1px; }
.rate b { color: var(--ink); font-weight: 900; }
.rvs { display: flex; flex-direction: column; margin-top: 22px; }
.rv { position: relative; width: 90%; margin: 0; padding: 16px 14px 12px; border-radius: 20px; background: var(--t); box-shadow: 0 14px 26px -16px rgba(9,45,72,.45);
  opacity: 0; transform: translate3d(var(--fx), 0, 0) rotate(calc(var(--r) * 4)); transition: transform .8s var(--ease-spring), opacity .45s var(--ease-out); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rv + .rv { margin-top: 2px; }
.rv--l { align-self: flex-end; }
.rvs.on .rv { opacity: 1; transform: rotate(var(--r)); }
.rvs.on .rv:nth-child(2) { transition-delay: .12s; }
.rvs.on .rv:nth-child(3) { transition-delay: .24s; }
.rv::before { content: ""; position: absolute; top: -9px; left: 50%; width: 60px; height: 18px; margin-left: -30px; border-radius: 3px; background: rgba(255,210,63,.8); box-shadow: 0 1px 2px rgba(0,0,0,.08); transform: rotate(calc(var(--r) * -2)); }
.rv__h { display: flex; align-items: center; gap: 8px; }
.rv__av { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; font-size: 15px; font-weight: 900; color: #fff; background: linear-gradient(145deg, var(--a1), var(--a2)); }
.rv__h b { font-size: 14px; font-weight: 900; }
.rv__h em { margin-inline-start: auto; font-style: normal; color: #F59E0B; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.rv blockquote { margin: 6px 0 0; font-size: 14px; line-height: 1.9; font-weight: 700; color: var(--ink); }
.rv--you { box-shadow: inset 0 0 0 2px #D6C8FF; }
.rv--you::before { background: rgba(167,139,250,.5); }
.rv--you blockquote { color: var(--sub); }
.hrt { position: absolute; font-style: normal; font-size: 30px; line-height: 1; pointer-events: none; animation: hrt .9s var(--ease-out) forwards; }
@keyframes hrt { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 25% { transform: translate(-50%, -80%) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, -220%) scale(1); opacity: 0; } }

/* ── فصل ۵: ۵ سؤال مهمون ما + پرو ── */
.pro { background: linear-gradient(170deg, #FFE68F 0%, #FFD23F 42%, #FFB52E 100%); color: #3D2800; }
.pro .kick { background: #3D2800; }
.pro .lead { color: #5C3D02; }
.game { margin-top: 14px; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 22px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.toks { display: flex; gap: 6px; direction: ltr; }
.tk { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--blue); font-weight: 900; font-size: 13px; box-shadow: 0 3px 0 rgba(0,0,0,.12); transition: transform .4s var(--ease-spring), background .3s, color .3s; }
.tk.used { background: rgba(61,40,0,.15); color: rgba(61,40,0,.4); box-shadow: none; transform: scale(.82); }
.ask { margin-inline-start: auto; height: 44px; padding: 0 14px; border-radius: 15px; background: var(--ink); color: #fff; font-weight: 900; font-size: 13.5px; white-space: nowrap; box-shadow: 0 5px 0 rgba(0,0,0,.2); transition: transform .15s; }
.ask:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.gstat { margin-top: 8px; font-size: 13px; font-weight: 800; min-height: 24px; }
.procard { position: relative; overflow: hidden; margin-top: 10px; padding: 18px 18px 16px; border-radius: 28px; background: radial-gradient(120% 80% at 100% 0%, #1D3B8F 0%, var(--navy) 60%); color: #fff; box-shadow: 0 26px 50px -18px rgba(6,23,58,.6); transition: transform .5s var(--ease-spring); }
.procard.glow { transform: scale(1.02); }
.procard.glow::before { opacity: 1; }
.procard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px #FFD23F; opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 2; }
.procard::after { content: ""; position: absolute; width: 180px; height: 180px; left: -60px; bottom: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(124,92,255,.5), transparent 70%); }
.pro__badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; background: linear-gradient(90deg, #FFE28A, #FFB020); color: #3D2800; font-weight: 900; font-size: 12.5px; }
.procard h3 { position: relative; z-index: 1; font-size: 21px; font-weight: 900; line-height: 1.5; margin-top: 10px; }
.procard h3 span { color: var(--sun); }
.tog { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.1); }
.tog button { position: relative; z-index: 1; height: 40px; border-radius: 12px; font-weight: 900; font-size: 13px; color: rgba(255,255,255,.75); transition: color .3s; }
.tog button[aria-pressed="true"] { color: var(--navy); }
/* پیشنهادی: نقطهٔ طلایی روی دکمه، تا پلن پیشنهادی قبل از انتخاب هم دیده شود */
.tog button[data-best]::after { content: ""; position: absolute; top: 6px; inset-inline-end: 8px; width: 6px; height: 6px; border-radius: 99px; background: var(--sun); }
.tog i { position: absolute; top: 4px; bottom: 4px; right: 4px; width: calc(33.333% - 2.67px); border-radius: 12px; background: #fff; transition: transform .45s var(--ease-spring); }
/* RTL: هر گام یک عرض قرص به چپ */
.tog.i1 i { transform: translateX(-100%); }
.tog.i2 i { transform: translateX(-200%); }
.price { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; margin-top: 12px; }
.price b { font-size: clamp(32px, calc(var(--W) * .1), 40px); font-weight: 900; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.price small { font-size: 13px; font-weight: 800; opacity: .8; padding-bottom: 5px; }
.price s { font-size: 13px; opacity: .55; padding-bottom: 5px; }
.price .off { margin-inline-start: auto; align-self: center; padding: 5px 11px; border-radius: 99px; background: var(--pink); font-size: 13px; font-weight: 900; box-shadow: 0 6px 16px -8px rgba(0,0,0,.65); }
/* پلن بدون تخفیف: قیمت قبلی و برچسب فقط پنهان می‌شوند (نه حذف) تا اندازهٔ کارت بین پلن‌ها یکی بماند */
.price.nodiscount s, .price.nodiscount .off { visibility: hidden; }
.perday { position: relative; z-index: 1; font-size: 13px; line-height: 1.5; font-weight: 900; color: var(--sun); margin-top: 4px; }
.procard .cta { margin-top: 12px; }
.invite { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 11px 14px; border-radius: 18px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); font-size: 13px; font-weight: 800; }
.invite b { margin-inline-start: auto; height: 28px; padding: 0 10px; border-radius: 99px; display: grid; place-items: center; background: #3D2800; color: #FFD23F; font-weight: 900; font-size: 13px; }

/* ── فصل ۶: حالا نوبت توئه — تمام‌صفحه و ثابت: یه مکث کوتاه که آیکون ما از گوشی بیرون می‌پره،
   بعد سؤالات متداول مثل یه برگه از پایین روش می‌آد و خودش کمی عقب می‌ره (JS فقط transform/opacity می‌نویسد).
   ارتفاع = صحنهٔ بی‌نوار (--lv) + مکث ۴۰٪ و پوشش یک صفحهٔ «با نوار» (--sv)؛ همین اعداد در landing.js هم هست.
   فصل به بلندی صحنهٔ بی‌نوار است تا وقتی نوار مرورگر جمع می‌شود زیرش خالی نماند؛ محتوایش در بخش «با نوار» وسط‌چین است.
   زمینهٔ تیرهٔ ظرف، وقتی فصل کوچک و عقب می‌رود، دورش دیده می‌شود (نه زمینهٔ روشن صفحه). ── */
.fin-pin { position: relative; z-index: 2; height: calc(var(--lv) + var(--sv) * 1.4); margin-top: -30px; border-radius: 30px 30px 0 0; background: #041026; }
.fin-pin > .fin { position: sticky; top: 0; height: var(--lv); min-height: 0; margin-top: 0; overflow: hidden; padding-bottom: calc(var(--lv) - var(--sv) + 28px + var(--safe-b)); transform-origin: 50% 30%; will-change: transform; }
.fin__shade { position: absolute; inset: 0; z-index: 5; background: #041026; opacity: 0; pointer-events: none; }
.fin-pin + .faq { margin-top: calc(var(--lv) * -1); }
.fin { background: var(--block); color: #fff; text-align: center; align-items: center; }
.fin .kick { align-self: center; background: #fff; color: var(--blue); }
.homescr { position: relative; width: min(calc(var(--W) * .42), 164px); aspect-ratio: 9 / 15; margin: 12px auto 0; padding: 6px; border-radius: 28px; background: #0B121C; box-shadow: 0 30px 60px -20px rgba(0,10,40,.6), 0 0 0 1px rgba(255,255,255,.12); transform: rotate(-4deg); }
.homescr__in { position: relative; height: 100%; border-radius: 23px; overflow: hidden; background: radial-gradient(120% 70% at 20% 0%, #9B7BFF 0%, #3A6BE0 45%, #0B2A6B 100%); display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 11px 7px; padding: 28px 11px; }
.homescr__in::before { content: "۹:۴۱"; position: absolute; top: 8px; right: 14px; font-size: 9px; font-weight: 900; color: #fff; }
.app-i { aspect-ratio: 1; border-radius: 11px; background: var(--c, rgba(255,255,255,.22)); opacity: .9; }
/* جای خالیِ آیکون خودمان در شبکهٔ آیکون‌ها */
.app-i.slot { opacity: 1; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }
.homescr__dim { position: absolute; inset: 0; z-index: 2; background: rgba(3,12,34,.6); opacity: 0; pointer-events: none; }
/* آیکون درس‌جی‌پی‌تی: با اسکرولِ مکث این فصل از جای خودش در صفحهٔ گوشی بیرون می‌پرد، بزرگ و صاف می‌شود و بقیه کم‌رنگ می‌شوند.
   اندازهٔ واقعی‌اش همان اندازهٔ «پریده» است و اول کوچک نشان داده می‌شود تا لوگو هیچ‌وقت تار نشود (جا و مسیرش را JS می‌نویسد). */
.me-pop { position: absolute; z-index: 6; left: 0; top: 0; width: 58%; aspect-ratio: 1; }
.me-pop__glow { position: absolute; inset: -46%; border-radius: 50%; background: radial-gradient(closest-side, rgba(125,238,255,.95), rgba(34,211,238,.5) 58%, transparent); opacity: 0; pointer-events: none; }
.me-pop__tile { position: absolute; inset: 0; border-radius: 27%; background: #fff; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 22px 40px -12px rgba(0,14,56,.7), 0 0 0 3px #fff; }
.me-pop__tile img { width: 84%; height: auto; }
.me-pop__tile::after { content: ""; position: absolute; inset: -30%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%); transform: translateX(-130%); }
.me-pop::after { content: ""; position: absolute; inset: -8%; border-radius: 32%; border: 3px solid var(--sun); opacity: 0; pointer-events: none; }
.me-pop.done .me-pop__tile { animation: meBounce .7s var(--ease-spring); }
.me-pop.done .me-pop__tile::after { animation: meShine 1.1s .15s var(--ease-out) forwards; }
.me-pop.done::after { animation: meRing 1s var(--ease-out); }
@keyframes meBounce { 30% { transform: scale(1.12); } 62% { transform: scale(.97); } }
@keyframes meShine { to { transform: translateX(130%); } }
@keyframes meRing { 0% { opacity: .95; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.5); } }
.me-tag { position: absolute; z-index: 7; left: 0; top: 0; padding: 4px 11px; border-radius: 10px; background: var(--sun); color: #3D2800; font-size: 12.5px; font-weight: 900; white-space: nowrap; box-shadow: 0 4px 0 rgba(0,0,0,.14);
  opacity: 0; transform: translate(-50%, 8px) rotate(4deg) scale(.8); transition: opacity .3s, transform .5s var(--ease-spring); pointer-events: none; }
.homescr.popped .me-tag { opacity: 1; transform: translate(-50%, 0) rotate(4deg); }
.fin .h2 { margin-top: 16px; }
.fin .h2 span { color: var(--sun); }
.fin .lead { color: rgba(255,255,255,.9); }
.stores { display: grid; gap: 10px; width: 100%; max-width: 380px; margin: 16px auto 0; }
/* دکمهٔ دو فروشگاه دقیقاً هم‌شکل‌اند: زمینهٔ مشکی و قاب خاکستری مثل نشان رسمی‌شان، لوگو + «دریافت از» */
.badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.store { height: 58px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 10px; background: #000; color: #fff; box-shadow: inset 0 0 0 1.5px #A6A6A6, 0 12px 24px -10px rgba(0,10,40,.6); transition: transform .18s var(--ease-out); }
.store:active { transform: scale(.96); }
.store img { width: auto; height: 34px; flex-shrink: 0; }
.store span { display: flex; flex-direction: column; align-items: flex-start; font-size: 19px; font-weight: 900; line-height: 1.2; }
.store small { font-size: 11px; font-weight: 700; opacity: .85; }
/* روی آیفون، گزینهٔ آیفون برجسته می‌شود */
.ios .alt [data-ios] { outline: 3px solid var(--sun); outline-offset: 3px; }
.alt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.alt button, .alt a { height: 50px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 900; font-size: 14px; background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.ios .alt [data-ios] { background: #fff; color: var(--blue); }
.alt svg { width: 20px; height: 20px; }
.fin__note { font-size: 12.5px; font-weight: 700; opacity: .88; margin-top: 12px; }

/* ── سؤالات متداول ── */
.faq { background: #fff; min-height: auto; padding-top: 70px; content-visibility: visible; }
.qa { border-bottom: 1.5px solid #EDF2F7; }
.qa:first-of-type { margin-top: 12px; }
.qa summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 2px; font-weight: 900; font-size: 15px; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
/* آیکون باز/بسته با CSS کشیده می‌شود (نه با حرف «+» که در فونت پایین‌تر از وسط می‌نشیند)؛ خود کادر نمی‌چرخد تا در هر دو حالت هم‌تراز بماند */
.qa summary::after { content: ""; margin-inline-start: auto; width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0; color: var(--blue);
  background: linear-gradient(currentColor, currentColor) center / 12px 3px no-repeat, linear-gradient(currentColor, currentColor) center / 3px 12px no-repeat, var(--acc-soft);
  transition: background-size .3s var(--ease-out), background-color .3s, color .3s; }
.qa[open] summary::after { color: #3D2800; background-color: var(--sun); background-size: 12px 3px, 3px 0; }
.qa__a { padding: 0 2px 16px; color: var(--sub); font-size: 14px; line-height: 2; }

/* ── فوتر ── */
.foot { z-index: 3; background: var(--navy); color: #fff; padding: 54px var(--gut) calc(28px + var(--safe-b)); border-radius: 30px 30px 0 0; margin-top: -30px; overflow: hidden; }
.foot::before { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.35), transparent 70%); }
.foot::after { content: ""; position: absolute; width: 280px; height: 280px; left: -120px; bottom: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(124,92,255,.3), transparent 70%); }
.foot > * { position: relative; z-index: 1; }
.foot__word { font-size: clamp(40px, calc(var(--W) * .13), 58px); font-weight: 900; line-height: 1.15; letter-spacing: -1.5px; background: linear-gradient(95deg, #fff 0%, #9EE7FF 45%, #B9A8FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot__tag { font-size: 15px; font-weight: 700; opacity: .8; margin-top: 6px; }
.foot__cta { margin-top: 20px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; font-size: 13.5px; font-weight: 800; color: rgba(255,255,255,.75); }
.foot__c { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; line-height: 1.9; text-align: center; color: rgba(255,255,255,.6); }
/* نماد اعتماد الکترونیکی: آخرین چیزِ لندینگ */
.enamad { display: grid; place-items: center; width: 108px; min-height: 108px; margin: 16px auto 0; padding: 6px; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); }
.enamad img { display: block; width: auto; max-width: 100px; height: auto; }
/* تصویر اینماد فقط روی دامنهٔ ثبت‌شده می‌آید؛ جای دیگر (مثل لوکال) برچسب متنی با همان لینک رسمی نشان داده می‌شود */
.enamad a { display: grid; place-items: center; min-width: 96px; min-height: 96px; }
.enamad.fb img { display: none; }
.enamad.fb a::after { content: "نماد اعتماد\A الکترونیکی"; white-space: pre; text-align: center; font-size: 12.5px; font-weight: 900; line-height: 1.8; color: var(--navy); }

/* شیت آیفون */
.ios-steps { list-style: none; margin: 12px 0 14px; padding: 0; display: grid; gap: 10px; }
.ios-steps li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: #F4F8FC; font-weight: 800; font-size: 14px; line-height: 1.8; }
.ios-steps span { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 900; flex-shrink: 0; }
.ios-steps svg { margin-inline-start: auto; width: 26px; height: 26px; color: #0A84FF; flex-shrink: 0; }
.inapp { padding: 12px 14px; border-radius: 16px; background: #FFF7E0; color: #7A4A06; font-size: 13.5px; font-weight: 800; line-height: 1.9; margin-bottom: 10px; }
.inapp[hidden] { display: none; }
.inapp button { margin-top: 8px; width: 100%; height: 42px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(180,105,14,.35); font-weight: 900; }
.sheet h3 { font-size: 20px; font-weight: 900; }

/* ── جا شدن هر فصل در یک صفحهٔ گوشی (اندازه‌گیری‌شده روی ۳۶۰×۷۴۰ تا ۴۱۲×۹۱۵) ── */
.deck { height: min(calc(var(--sv) * .49), 400px); margin-top: 16px; }
.pro { justify-content: flex-start; padding-top: 86px; }
.procard { padding: 16px 16px 14px; }
.procard h3 { font-size: 20px; margin-top: 8px; }
.tog { margin-top: 10px; }
.price { margin-top: 10px; }
/* صفحه‌های کوتاه: ارتفاع از --sv ثابت‌شده می‌آید (کلاس vp-* روی html)، نه media query، تا با جمع شدن نوار مرورگر عوض نشود */
:where(.vp-800) .chap { padding-top: 72px; }
:where(.vp-800) .h2 { font-size: clamp(26px, calc(var(--W) * .075), 36px); }
:where(.vp-800) .gcard { padding: 16px; gap: 8px; }
:where(.vp-800) .gq { font-size: 24px; }
:where(.vp-800) .gart { font-size: 56px; }
:where(.vp-800) .game { margin-top: 10px; padding: 9px; }
:where(.vp-800) .tk { width: 27px; height: 27px; }
:where(.vp-800) .procard .cta { height: 56px; margin-top: 10px; }
:where(.vp-800) .procard .cta__ic { width: 40px; height: 40px; }
:where(.vp-800) .invite { margin-top: 8px; padding: 9px 12px; }
:where(.vp-800) .rvs { margin-top: 14px; }
:where(.vp-800) .rv { padding: 13px 13px 9px; }
:where(.vp-800) .rv blockquote { font-size: 13.5px; line-height: 1.8; }
:where(.vp-800) .homescr { width: min(calc(var(--W) * .36), 140px); }
:where(.vp-800) .shelf { padding-top: 18px; }
:where(.vp-800) .book { height: calc(126px - var(--h, 0px)); }
/* گوشی‌های خیلی کوتاه: دعوت دوستان (که داخل خود اپ هم هست) جا را به کارت پرو می‌دهد */
:where(.vp-760) .invite { display: none; }
/* گوشی‌های خیلی کوتاه (مثل آیفون وقتی نوار بالا و پایین مرورگر هر دو باز است): هر فصل باز هم در یک صفحه جا شود.
   کارت «نفر بعدی تویی؟» نظر واقعی نیست و خط راهنمای بازی هم بدون آن فهمیده می‌شود؛ این‌جا کنار می‌روند */
:where(.vp-700) .homescr { width: 104px; }
:where(.vp-700) .shelf { padding-top: 12px; }
:where(.vp-700) .book { height: calc(116px - var(--h, 0px)); }
:where(.vp-700) .rv--you { display: none; }
:where(.vp-700) .gstat { display: none; }
:where(.vp-700) .procard h3 { font-size: 18px; }