/* tablet-rtl-botB.css — Bot B2. (1) Tablet parity 561–900px with fna.pro; (2) RTL (/ar,/fa: html[dir=rtl]) mobile ≤560px.
   Values measured from fna.pro computed styles (page-module heroGrid/row/rightsGrid @media max-width:900px). */
@media (min-width:561px) and (max-width:900px){
  /* Home hero: official heroGrid → 1 column, gap 40px, padding 76px 0 72px inside 28px wrap */
  html body #app .hero{grid-template-columns:1fr!important;gap:40px!important;margin:0!important;padding:76px 28px 72px!important;max-width:none!important}
  html body #app .hero .hero-copy{max-width:none!important;width:auto!important}
  html body #app .hero h1 br{display:none!important}
  html body #app .hero .intro{max-width:558px!important}
  html body #app .hero .hero-visual{justify-content:center!important;width:auto!important}
  html body #app .hero .passport-motion,html body #app .hero .passport-reference{width:320px!important;height:auto!important;max-width:100%}
  /* Tiers section: full width, 28px gutters; head = title + note side by side */
  html body #app #tiers.tiers-section{margin:0!important;padding:78px 28px 30px!important}
  html body #app #tiers.tiers-section .section-head{display:flex!important;align-items:center;gap:20px!important}
  /* (head layout below) */

  /* Tier rows: official grid 48px 1fr auto; areas "badge name bonus" / "badge thr thr" */
  html body #app #tiers #passport-tier-list .tier-row{grid-template-columns:48px 1fr auto!important;grid-template-areas:"badge name bonus" "badge thr thr"!important;padding:18px 10px!important;gap:18px!important;color:rgb(14,18,16)!important;align-items:center}
  html body #app #tiers #passport-tier-list .tier-row .tier-medal{grid-area:badge;width:54px!important;height:54px!important}
  html body #app #tiers #passport-tier-list .tier-row .tier-medal img{width:54px!important;height:54px!important}
  html body #app #tiers #passport-tier-list .tier-row .tier-name{grid-area:name}
  html body #app #tiers #passport-tier-list .tier-row .tier-name strong{font-size:21px!important;line-height:normal!important}
  html body #app #tiers #passport-tier-list .tier-row .tier-name small{font-size:12px!important;font-weight:500!important;color:rgb(107,117,111)!important}
  html body #app #tiers #passport-tier-list .tier-row .tier-value{grid-area:thr;text-align:left!important;align-items:flex-start!important;justify-content:flex-start!important}
  html body #app #tiers #passport-tier-list .tier-row .tier-value strong{font-size:17px!important;font-weight:400!important}
  html body #app #tiers #passport-tier-list .tier-row .tier-value small{font-size:11px!important;letter-spacing:1.1px!important;color:rgb(138,149,143)!important}
  html body #app #tiers #passport-tier-list .tier-row .tier-bonus{grid-area:bonus;padding:7px 16px!important;font-weight:800!important}
  /* Passport rights: official rightsGrid → 1 column, gap 14, cards 24px 26px r14 */
  html body #app .passport-benefits-head{margin:0 0 30px!important;justify-content:space-between;align-items:baseline}
  html body #app .passport-benefits-head h2{line-height:normal!important}
  html body #app .passport-benefits-head p{font-size:14px!important;line-height:normal!important;color:rgb(107,117,111)!important}
  html body #app .rights-grid{grid-template-columns:1fr!important;gap:14px!important;margin:0!important}
  html body #app .rights-grid>article{padding:24px 26px!important;border-radius:14px!important}
  html body #app .rights-grid>article h3{font-size:15px!important;font-weight:700!important;line-height:normal!important;margin:10px 0 0!important}
  html body #app .rights-grid>article>small{margin:0!important;font-size:13px!important}
  html body #app .rights-grid>article>b{font-size:20px!important;font-weight:600!important;line-height:normal!important;margin:8px 0 0!important}
  html body #app .rights-grid>article>p{font-size:13px!important;line-height:20.15px!important;margin:8px 0 0!important;color:rgb(107,117,111)!important}
  /* How it works: official single column, section padding 30px 0 90px */
  html body #app .how-section{margin:0!important;padding:30px 28px 90px!important}
  html body #app .how-section .how-grid{grid-template-columns:1fr!important}
  html body #app .how-section p{font-size:13.5px!important;line-height:20.925px!important}
  html body footer{margin:0!important}
  /* Header nav 721–900: official lets "CRYPTO CARD" wrap to two lines (59×30) */
  html body .header .site-nav a{white-space:normal!important}
  /* full-bleed sections like official (ours had width:736px at 768) */
  html body #app .hero,html body #app #tiers.tiers-section,html body #app .content-section,html body #app main>section{width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
  /* Passport office (/passport): official PurchaseForm wrap 56px 28px 90px, head eyebrow/H1/P sizes */
  html body #app main.passport-office{margin:0!important;width:auto!important;padding:56px 28px 90px!important;max-width:none!important}
  html body #app .office-intro .eyebrow{font-size:12px!important;font-weight:800!important;letter-spacing:2.16px!important;color:rgb(11,171,102)!important}
  html body #app .office-intro h1{font-size:clamp(34px,4.6vw,46px)!important;line-height:normal!important;letter-spacing:-0.35328px!important;color:rgb(14,18,16)!important}
  html body #app .office-intro>p:not(.eyebrow){font-size:15px!important;line-height:normal!important;color:rgb(68,78,73)!important;max-width:590px}
  html body #app .office-tier-card strong{font-weight:700!important;line-height:normal!important;color:rgb(14,18,16)!important}
  html body #app .office-tier-card span{font-weight:400!important;line-height:normal!important;color:rgb(107,117,111)!important}
  /* Tiers head: official flex space-between, gap 20, both items shrink (h2 136/180/222 wide at 600/768/900) */
  html body #app #tiers .section-head{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;gap:20px!important}
  html body #app #tiers .section-head>*{flex:0 1 auto!important;min-width:0!important;width:auto!important;max-width:none!important;margin-top:0!important;margin-bottom:0!important}
  html body #app #tiers .section-head h2{line-height:normal!important;white-space:normal!important}
  html body #app #tiers .section-head p{line-height:normal!important}
  /* Passport tier picker: official tierGrid repeat(4,1fr) at ≤1040 incl. 600 */
  html body #app main.passport-office .office-tier-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  /* Passport small copy (official PurchaseForm values) */
  html body #app main.passport-office .amount-hint{font-size:12px!important;line-height:normal!important}
  html body #app main.passport-office .office-payment-notice{font-size:11.5px!important;line-height:normal!important}
  /* SnapshotQuota head: plain, title clamp 26px→27px at 900, copy 14px */
  html body #app .snapshot-quota-head{background:transparent!important;border:0!important;padding:0!important}
  html body #app .snapshot-quota-head h2{font-size:max(26px,3vw)!important;line-height:normal!important;margin:0 0 8px!important}
  html body #app .snapshot-quota-head>p{font-size:14px!important;line-height:normal!important;color:rgb(107,117,111)!important}
  /* Rights section (v20q): official section 78px 28px 30px; rows sized to content (no equal 1fr rows) */
  html body #app section.passport-benefits-section{padding:78px 28px 30px!important}
  html body #app .passport-benefits-section .rights-grid{grid-auto-rows:auto!important;align-items:start!important}
  html body #app .passport-benefits-section .rights-grid>article{height:auto!important;min-height:0!important}
  html body #app .passport-benefits-section .stake-explainer,html body #app .passport-benefits-section .stake-footnote{margin-left:0!important;margin-right:0!important;width:auto!important;max-width:none!important}
  html body #app .stake-footnote{font-size:11.5px!important;line-height:normal!important}
  html body #app .passport-benefits-section .passport-benefits-head{display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important;gap:20px!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
  html body #app .passport-benefits-section .passport-benefits-head>*{flex:0 1 auto!important;min-width:0!important;margin:0!important}
  html body #app .passport-benefits-section .rights-grid{width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
  html body #app .passport-benefits-section .stake-footnote{padding-left:0!important;padding-right:0!important}
  /* Community buttons (A's desktop-5 icons: svg.tg-plane / span.tg-label / svg.tg-ext) — official TelegramGroups at 561-900 */
  html body #app .community-links{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;margin:0!important;padding:0 28px 64px!important;width:auto!important;max-width:none!important}
  html body #app .community-links>a{height:64px!important;min-height:0!important;box-sizing:border-box!important;padding:14px 22px!important;border-radius:14px!important;background:rgb(39,160,220)!important;color:#fff!important;font-size:16px!important;font-weight:700!important;line-height:21.6px!important;display:flex!important;align-items:center!important;gap:17px!important}
  html body #app .community-links>a .tg-plane{width:26px!important;height:26px!important;flex:0 0 26px!important}
  html body #app .community-links>a .tg-label{flex:1 1 auto!important;min-width:0!important;font-size:16px!important;font-weight:700!important;line-height:21.6px!important}
  html body #app .community-links>a .tg-ext{width:20px!important;height:20px!important;flex:0 0 20px!important}
  html body #app .stake-section .stake-explainer{margin-left:0!important;margin-right:0!important;width:auto!important;max-width:none!important;padding-left:28px!important;padding-right:28px!important}
}

/* ===== RTL mobile (/ar, /fa) ≤560px — scoped to html[dir=rtl] only ===== */
@media (max-width:560px){
  /* Home: section titles shrink to content and sit on the right (official H2 "آلية العمل" x241 w121) */
  html[dir=rtl] .how-section h2,
  html[dir=rtl] .passport-benefits-head h2{width:fit-content;max-width:100%}
  /* Passport: SnapshotQuota block full content width (official x28 w334), plain head, 26px title */
  html[dir=rtl] .snapshot-quota{margin-left:0!important;margin-right:0!important;width:auto!important;max-width:none!important}
  html[dir=rtl] .snapshot-quota-head{width:auto!important;max-width:none!important}
  html[dir=rtl] .snapshot-quota-head{background:transparent!important;border:0!important;padding:0!important}
  html[dir=rtl] .snapshot-quota-head h2{font-size:26px!important;line-height:normal!important;margin:0 0 8px!important}
  html[dir=rtl] .snapshot-quota-head>p{font-size:14px!important;line-height:normal!important;color:rgb(107,117,111)!important}
  html[dir=rtl] .office-tier-card strong{font-weight:700!important;line-height:normal!important;color:rgb(14,18,16)!important}
  html[dir=rtl] .office-tier-card span{font-weight:400!important;line-height:normal!important;color:rgb(107,117,111)!important}
  /* r6 Home stake bullets: mirror (official li padding 0 18px 0 0, dot right:0) */
  html[dir=rtl] body main .stake-section > .stake-explainer .stake-bullets li{padding:0 18px 0 0!important}
  html[dir=rtl] body main .stake-section > .stake-explainer .stake-bullets li::before{left:auto!important;right:0!important}
  /* r6 Home ExtraMatchSchedule chip amount: official <small dir=ltr> (isolate) => "7,500 BSC-USDC"; ours <b> inherits rtl => "BSC-USDC 7,500" */
  html[dir=rtl] body main .passport-benefits-section .extra-rate-item b{direction:ltr!important;unicode-bidi:isolate!important;text-align:end!important}
  /* r6 Rules bullets: shared style.css sets right:8px for RTL, which overrides left and lands the dot on the text. Official keeps left:4px (padding-left 26px) */
  html[dir=rtl] body #app main.rules-page .rules-section .rules-bullet-list li::before{right:auto!important;left:4px!important}
  /* r6 Passport SnapshotQuota amounts: official bidi = "0BSC-USDC" (LTR run), right-aligned, small margin 0 8px 0 0 */
  html[dir=rtl] body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-amount.snapshot-quota-amount,
  html[dir=rtl] body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-result-card > strong{direction:ltr!important;justify-content:flex-end!important}
  html[dir=rtl] body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-amount > small,
  html[dir=rtl] body #app main.passport-office section.snapshot-quota.snapshot-quota .allocation-result-card > strong > small{margin:0 8px 0 0!important}
  /* r6 Passport progress: official RTL track fills from the right (inset-inline-start 0) */
  html[dir=rtl] body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-progress > i.snapshot-quota-preview,
  html[dir=rtl] body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-progress > #previewProgress,
  html[dir=rtl] body #app main.passport-office section.snapshot-quota.snapshot-quota .snapshot-quota-progress > span#cumulativeProgress{left:auto!important;right:0!important}
}

/* Community buttons stack to one column at narrow tablet (official: 1 col @600, 2 col @768) */
@media (min-width:561px) and (max-width:640px){
  html body #app .community-links{grid-template-columns:minmax(0,1fr)!important}
}