. */
main.page > .page-hero + .sec,
main.page > .page-hero-slim + .sec,
main.page > .sec + .sec{
position:relative;
}
main.page > .page-hero + .sec::before,
main.page > .page-hero-slim + .sec::before,
main.page > .sec + .sec::before{
content:"";
position:absolute;
top:0; left:50%;
transform:translateX(-50%);
width:calc(100% - 48px);
max-width:1100px;
height:1px;
background:linear-gradient(90deg,transparent 0%,rgba(168,85,247,.28) 20%,rgba(99,102,241,.55) 50%,rgba(6,182,212,.28) 80%,transparent 100%);
pointer-events:none;
z-index:0;
}
main.page > .page-hero + .sec::after,
main.page > .page-hero-slim + .sec::after,
main.page > .sec + .sec::after{
content:"";
position:absolute;
top:0; left:50%;
transform:translate(-50%,-50%);
width:10px; height:10px;
border-radius:50%;
background:radial-gradient(circle,#c4b5fd 0%,rgba(168,85,247,.6) 40%,transparent 70%);
box-shadow:0 0 20px 4px rgba(168,85,247,.35);
pointer-events:none;
z-index:0;
}
/* -------------------------------------------------------- Page-hero backdrop
One continuous mesh covering breadcrumb + hero on inner pages. The pseudo
lives on .crumbs but extends DOWN through the hero region, so there is no
visible seam between and . Hero text paints over it
transparently — the image stays readable.
Home ( / ) has no .crumbs so this is skipped there; .hero-shell keeps its
own backdrop. */
.page-hero,.page-hero-slim{position:relative}
.crumbs{position:relative;isolation:isolate}
.crumbs::before{
content:"";
position:absolute;
top:-4px;
left:calc(50% - 50vw);
right:calc(50% - 50vw);
height:720px;
background:url("/assets/img/page-hero-bg.webp") center top/cover no-repeat;
opacity:.55;
mix-blend-mode:screen;
pointer-events:none;
z-index:-1;
mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.6) 6%,rgba(0,0,0,1) 22%,rgba(0,0,0,.55) 62%,transparent 96%);
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.6) 6%,rgba(0,0,0,1) 22%,rgba(0,0,0,.55) 62%,transparent 96%);
}
@media (prefers-reduced-motion:reduce){
.crumbs::before{opacity:.35}
}
/* ============================================================================
Mobile polish — consolidates tightening for < 700 / < 480 / < 380 viewports.
~70% of traffic is mobile; this block exists so nothing relies on accidental
behaviour from dozens of ad-hoc breakpoints above.
============================================================================ */
/* --- Header: shrink "Launch app" to icon-only on very small screens -------- */
@media(max-width:560px){
.hdr-right .btn-primary{padding:10px 14px;font-size:13px}
.hdr-right .btn-primary .arr{width:16px;height:16px}
}
@media(max-width:400px){
.hdr-right .btn-primary .btn-label,
.hdr-right .btn-primary span:first-child{display:none}
.hdr-right .btn-primary{width:42px;padding:0;min-height:42px;justify-content:center;border-radius:10px}
.hdr-right{gap:6px}
.hdr-inner{gap:14px}
.brand{font-size:15px}
}
/* --- Breadcrumbs: tighter, wrap properly on small screens ------------------ */
@media(max-width:640px){
.crumbs{padding:12px 18px 0;font-size:12px}
.crumbs ol{gap:6px;font-size:11.5px}
}
/* --- Page hero / meta rows ------------------------------------------------- */
@media(max-width:640px){
.info-hero{padding:14px 0 8px}
.info-hero-art{min-height:180px}
.info-hero-copy{padding:24px 20px;gap:12px}
.info-hero-copy .lede,
.guide-hero-copy .lede,
.contact-hero-copy .lede{font-size:15px;line-height:1.6}
.info-meta-row,
.hero-meta-row,
.contact-meta-row,
.guide-hero-meta{font-size:10.5px;gap:8px;letter-spacing:.04em}
.info-meta-row .sep,
.hero-meta-row .sep,
.contact-meta-row .sep{display:none}
}
/* --- TL;DR card tighter padding ------------------------------------------- */
@media(max-width:640px){
.tldr{padding:20px 18px}
.tldr p{font-size:15px;line-height:1.65}
}
/* --- Prose boxed: tighter on small viewports ------------------------------ */
@media(max-width:520px){
.prose-boxed{padding:20px 18px}
.prose-wide{font-size:15.5px;line-height:1.7}
.prose-wide h2{font-size:22px;margin:28px 0 10px}
.prose-wide h3{font-size:17px;margin:20px 0 8px}
.prose-guide h2{font-size:22px;margin-top:28px}
}
/* --- Section headings polish ---------------------------------------------- */
@media(max-width:640px){
.sec-head{margin-bottom:28px}
.page .sec-head{margin-bottom:28px}
.sec-head .kicker{font-size:9.5px;padding:3px 10px}
.sec-head .lede{font-size:14.5px}
.page-h2{font-size:clamp(22px,5.6vw,32px)}
.page-h1{font-size:clamp(28px,8vw,48px)}
}
/* --- Finale CTA: stack full-width on small screens ------------------------ */
@media(max-width:520px){
.finale-cta{flex-direction:column;align-items:stretch;width:100%;padding:0 6px}
.finale-cta .btn{width:100%}
}
/* --- Cards general: reduce padding on very narrow viewports --------------- */
@media(max-width:520px){
.contact-card,.compare-card,.aside-card,.third-card,.dual-card,
.flag-step,.channel-card,.refusal-card{padding:18px 18px}
.dual-card{padding:22px 20px}
.flag-step{padding:22px 20px}
.aside-card{padding:18px 18px}
}
/* --- Contact primary bar: stack email + copy on tight screens ------------- */
@media(max-width:520px){
.contact-primary{padding:12px 14px;gap:8px}
.contact-primary-label{display:none}
.contact-primary-email{font-size:14.5px;word-break:break-all}
.contact-copy{margin-left:0}
}
/* --- Compare card VS header row: keep "disk + name" on single line -------- */
@media(max-width:480px){
.compare-card-vs{gap:8px;font-size:12px}
.compare-card-vs .vs-disk{width:26px;height:26px;font-size:10.5px}
.compare-card-vs .vs-word{font-size:9.5px;padding:2px 6px}
.compare-card h3{font-size:16px}
}
/* --- VS block on compare/{slug}/ hero at small screens -------------------- */
@media(max-width:480px){
.compare-detail-hero .info-hero-art{padding:22px 14px;min-height:220px}
.vs-block{gap:8px}
.vs-disk-ours,.vs-disk-them{width:58px;height:58px;font-size:14px;border-width:2px}
.vs-disk-ours svg{width:24px;height:24px}
.vs-badge{width:36px;height:36px;font-size:12px}
.vs-label{font-size:12px}
.vs-tag{font-size:9px;padding:2px 7px;letter-spacing:.08em}
}
/* --- Compare feature matrix: sticky first col, tighter padding, bigger touch */
@media(max-width:720px){
.compare-wrap{
margin-left:-18px;margin-right:-18px;
border-radius:0;border-left:none;border-right:none;
-webkit-overflow-scrolling:touch;
}
.compare thead th,
.compare tbody th,
.compare tbody td{padding:12px 14px;font-size:13.5px}
.compare thead th{font-size:11.5px}
.compare tbody th{position:sticky;left:0;background:var(--surface);z-index:1;box-shadow:1px 0 0 var(--border-2)}
}
/* --- Narrative grid: already stacks at 780px; tighten fonts --------------- */
@media(max-width:520px){
.narrative-col{font-size:15px;line-height:1.7}
}
/* --- Ethics card tighter -------------------------------------------------- */
@media(max-width:520px){
.ethics-card{padding:22px 18px}
.ethics-card p{padding-left:16px;font-size:15px;line-height:1.7}
.ethics-card::before{left:0;width:2px}
}
/* --- Posture list: tighter rows ------------------------------------------- */
@media(max-width:520px){
.posture-list li{padding:12px 16px;font-size:14px;gap:12px}
.posture-mark{width:22px;height:22px;font-size:12px}
}
/* --- Stats strip: stat dd size reduction ---------------------------------- */
@media(max-width:520px){
.stats-strip .stat{padding:18px 20px}
.stats-strip dd{font-size:22px;flex-wrap:wrap;gap:4px}
.stats-strip .stat-sub{font-size:10.5px}
}
/* --- Refusals grid: already stacks — trim mark + type --------------------- */
@media(max-width:520px){
.refusal-card{padding:16px 18px;gap:12px}
.refusal-mark{width:24px;height:24px;font-size:12px}
.refusal-card p{font-size:14px;line-height:1.55}
}
/* --- Guide detail hero: extra tightening ---------------------------------- */
@media(max-width:520px){
.guide-hero-v2{padding:14px 0 6px}
.guide-hero-art{min-height:180px}
.guide-hero-copy{padding:22px 18px;gap:12px}
}
/* --- Coin detail: aside-card spacing + sidebar sticky off at narrow ------- */
@media(max-width:520px){
.coin-detail-grid{gap:22px}
.aside-dl{font-size:13px}
.aside-list li a{padding:9px 10px;font-size:13px}
}
/* --- Guide hub cards: pill / meta tighter --------------------------------- */
@media(max-width:520px){
.guide-card-v2 h3{font-size:18px;line-height:1.28}
.guide-card-v2 p{font-size:14px;line-height:1.55}
.guide-art{aspect-ratio:16/9}
.guide-pill{font-size:9.5px;padding:3px 9px}
}
/* --- Coin chip grid: stack cleanly ---------------------------------------- */
@media(max-width:520px){
.coin-hub{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.coin-chip{padding:10px 12px;gap:10px}
.coin-chip img{width:26px;height:26px}
.coin-chip b{font-size:13px}
.coin-chip span{font-size:11.5px}
}
@media(max-width:360px){
.coin-hub{grid-template-columns:1fr}
}
/* --- Pair hub: same treatment --------------------------------------------- */
@media(max-width:520px){
.pair-hub{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pair-card{padding:14px 14px}
.pair-head{font-size:14px}
.pair-sub{font-size:12.5px}
}
@media(max-width:380px){
.pair-hub{grid-template-columns:1fr}
}
/* --- Touch targets: global min 44px on interactive surfaces --------------- */
@media(max-width:720px){
.btn{min-height:44px}
.btn-sm{min-height:40px}
.swap-dir{min-width:44px;min-height:44px}
.faq-item summary{padding:16px 0;min-height:56px}
.reverse-link{min-height:40px}
.aside-list li a{min-height:40px}
}
/* --- Hide FF copy-button affordance on swap form at really tight widths --- */
@media(max-width:380px){
.swap-row .leg{padding:14px 14px}
.swap-row .leg-amt{font-size:22px}
}
/* --- Prevent any wide image / SVG overflow -------------------------------- */
img,svg{max-width:100%;height:auto}
.guide-art img,.info-hero-art > img,.contact-hero-art img,.guide-hero-art img{height:100%}
/* --- Safe-area insets for iOS notch (hero + fixed elements) ---------------
NOTE: safe-area padding on .mnav is handled by .mnav-head / .mnav-foot
themselves so the panel itself starts flush at the top of the viewport. */
@supports(padding:max(0px)){
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}
/* --- Prevent horizontal scroll caused by any overflow --------------------- */
html,body{max-width:100vw;overflow-x:clip}
/* =========================================================================
FLOATING LANGUAGE SWITCHER v2
A mini-globe FAB (country flag as sphere texture + globe grid overlay) that
morphs into a coherent glass panel. Button and panel share the same aurora
and glass treatment so the expansion feels like one continuous surface.
========================================================================= */
.lang-fab{
--fab-size: 62px;
--fab-gap: 18px;
--fab-brand: #6366f1;
--fab-violet: #a855f7;
--fab-cyan: #06b6d4;
--fab-z: 1000;
--fab-ring: rgba(255,255,255,.22);
--fab-shadow: 0 14px 38px -14px rgba(0,0,0,.75);
--fab-glow: 0 0 34px rgba(99,102,241,.32), 0 0 18px rgba(168,85,247,.22);
--fab-surface: linear-gradient(180deg, rgba(26,26,50,.96) 0%, rgba(14,14,32,.98) 100%);
position: fixed;
right: calc(22px + env(safe-area-inset-right));
bottom: calc(22px + env(safe-area-inset-bottom));
width: var(--fab-size);
height: var(--fab-size);
z-index: var(--fab-z);
font-family: Inter, system-ui, sans-serif;
isolation: isolate;
}
.lang-fab--rtl{
right: auto;
left: calc(22px + env(safe-area-inset-left));
}
/* ----- FAB button ----- */
.lang-fab-btn{
position: relative;
width: var(--fab-size);
height: var(--fab-size);
border-radius: 50%;
border: 1px solid var(--fab-ring);
padding: 0;
cursor: pointer;
color: #f7f7fb;
background: transparent;
box-shadow: var(--fab-shadow), inset 0 0 0 1px rgba(255,255,255,.05);
transition: transform .35s cubic-bezier(.2,.85,.2,1.25), box-shadow .25s ease, border-color .25s ease;
overflow: hidden;
}
.lang-fab-btn:hover{
transform: translateY(-2px);
border-color: rgba(255,255,255,.32);
box-shadow: 0 20px 46px -14px rgba(0,0,0,.8), var(--fab-glow), inset 0 0 0 1px rgba(255,255,255,.08);
}
.lang-fab-btn:active{ transform: translateY(0) scale(.96); }
.lang-fab-btn:focus-visible{
outline: 2px solid rgba(129,140,248,.9);
outline-offset: 3px;
}
/* Aurora halo sitting behind the globe */
.lang-fab-aurora{
position: absolute;
inset: -35%;
background: conic-gradient(
from 0deg,
rgba(99,102,241,0) 0deg,
rgba(99,102,241,.55) 40deg,
rgba(168,85,247,.55) 140deg,
rgba(6,182,212,.55) 240deg,
rgba(99,102,241,0) 360deg
);
filter: blur(14px);
opacity: .6;
animation: langFabAurora 14s linear infinite;
z-index: 0;
pointer-events: none;
}
.lang-fab-btn:hover .lang-fab-aurora{ opacity: .95; animation-duration: 8s; }
@keyframes langFabAurora{ to{ transform: rotate(360deg); } }
/* Pulsing outer ring — subtle invitation to click */
.lang-fab-pulse{
position: absolute;
inset: 0;
border-radius: 50%;
pointer-events: none;
z-index: 0;
box-shadow: 0 0 0 0 rgba(168,85,247,.55);
animation: langFabPulse 3.2s ease-out infinite;
}
@keyframes langFabPulse{
0% { box-shadow: 0 0 0 0 rgba(168,85,247,.55); }
70% { box-shadow: 0 0 0 14px rgba(168,85,247,0); }
100% { box-shadow: 0 0 0 0 rgba(168,85,247,0); }
}
/* The globe itself */
.lang-fab-globe{
position: absolute;
inset: 4px;
border-radius: 50%;
overflow: hidden;
z-index: 1;
pointer-events: none;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.18),
inset 0 -10px 14px -8px rgba(0,0,0,.55);
background: #0a0a1a;
transition: transform .45s cubic-bezier(.2,.85,.2,1.2);
}
.lang-fab-btn:hover .lang-fab-globe{ transform: rotate(-8deg) scale(1.02); }
.lang-fab-flag{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
filter: saturate(1.1) contrast(1.02);
}
/* Globe grid: meridians + equator + latitude lines over the flag */
.lang-fab-grid{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
mix-blend-mode: overlay;
opacity: .85;
}
/* Specular highlight — top-left gloss that sells the sphere */
.lang-fab-gloss{
position: absolute;
inset: 0;
border-radius: 50%;
background:
radial-gradient(40% 40% at 30% 22%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
radial-gradient(120% 120% at 50% 120%, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 55%);
pointer-events: none;
}
/* Opening state: globe tucks away gently; the panel takes over visually */
.lang-fab[data-open="true"] .lang-fab-globe{ transform: rotate(-22deg) scale(.92); }
.lang-fab[data-open="true"] .lang-fab-pulse{ animation: none; opacity: 0; }
.lang-fab[data-open="true"] .lang-fab-aurora{ opacity: 1; animation-duration: 6s; }
/* ----- Dim / scrim ----- */
.lang-fab-dim{
position: fixed;
inset: 0;
background: rgba(5,5,16,0);
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
transition: background .35s ease, backdrop-filter .35s ease;
z-index: calc(var(--fab-z) - 1);
pointer-events: none;
}
.lang-fab[data-open="true"] .lang-fab-dim{
background: rgba(5,5,16,.55);
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
pointer-events: auto;
}
/* ----- Panel (desktop) ----- */
.lang-fab-panel{
position: absolute;
right: calc(var(--fab-size) * 0.5);
bottom: calc(var(--fab-size) * 0.5);
width: 300px;
max-height: min(540px, calc(100vh - 140px));
padding: 14px 12px 14px;
border-radius: 26px;
border: 1px solid var(--fab-ring);
background: var(--fab-surface);
backdrop-filter: blur(26px) saturate(1.25);
-webkit-backdrop-filter: blur(26px) saturate(1.25);
box-shadow:
0 28px 64px -14px rgba(0,0,0,.7),
inset 0 0 0 1px rgba(255,255,255,.05);
opacity: 0;
transform-origin: bottom right;
transform: translate(calc(var(--fab-size) * 0.5), calc(var(--fab-size) * 0.5)) scale(.2);
transition: opacity .28s ease, transform .45s cubic-bezier(.2,.85,.2,1.2);
overflow: hidden;
z-index: calc(var(--fab-z) + 1);
isolation: isolate;
}
.lang-fab--rtl .lang-fab-panel{
right: auto;
left: calc(var(--fab-size) * 0.5);
transform-origin: bottom left;
transform: translate(calc(var(--fab-size) * -0.5), calc(var(--fab-size) * 0.5)) scale(.2);
}
.lang-fab[data-open="true"] .lang-fab-panel{
opacity: 1;
transform: translate(0,0) scale(1);
}
/* Panel aurora — mirrors the button's, anchored at bottom-right so the
visual "mass" of the panel glows from the FAB corner outward */
.lang-fab-panel-aurora{
position: absolute;
right: -40px;
bottom: -40px;
width: 260px;
height: 260px;
background: conic-gradient(
from 180deg,
rgba(99,102,241,.4) 0deg,
rgba(168,85,247,.45) 100deg,
rgba(6,182,212,.4) 220deg,
rgba(99,102,241,.35) 360deg
);
filter: blur(40px);
opacity: .6;
pointer-events: none;
z-index: 0;
animation: langFabAurora 18s linear infinite reverse;
}
.lang-fab--rtl .lang-fab-panel-aurora{ right: auto; left: -40px; }
/* Sheet-head only visible on mobile */
.lang-fab-sheet-head{
display: none;
align-items: center;
justify-content: space-between;
padding: 4px 8px 12px;
position: relative;
z-index: 1;
}
.lang-fab-sheet-handle{
position: absolute;
top: 4px; left: 50%;
transform: translateX(-50%);
width: 46px; height: 4px;
border-radius: 4px;
background: rgba(255,255,255,.22);
}
.lang-fab-sheet-title{
font-size: 16px;
font-weight: 600;
color: #f7f7fb;
letter-spacing: -.01em;
}
.lang-fab-sheet-close{
display: grid;
place-items: center;
width: 34px; height: 34px;
border-radius: 11px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.04);
color: #dcdce6;
cursor: pointer;
transition: background .2s ease, border-color .2s ease;
}
.lang-fab-sheet-close:hover{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
/* ----- List ----- */
.lang-fab-list{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 2px;
max-height: 480px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.2) transparent;
position: relative;
z-index: 1;
}
.lang-fab-list::-webkit-scrollbar{ width: 6px; }
.lang-fab-list::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 6px; }
.lang-fab-item{
opacity: 0;
transform: translateY(6px);
transition: opacity .3s ease, transform .42s cubic-bezier(.2,.85,.25,1.1);
transition-delay: calc(var(--lang-i, 0) * 22ms + 90ms);
}
.lang-fab[data-open="true"] .lang-fab-item{
opacity: 1;
transform: translateY(0);
}
.lang-fab-opt{
display: flex;
align-items: center;
gap: 12px;
padding: 9px 10px;
border-radius: 14px;
text-decoration: none;
color: #f7f7fb;
background: transparent;
border: 1px solid transparent;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
position: relative;
}
.lang-fab-opt:hover,
.lang-fab-opt:focus-visible{
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.12);
outline: none;
transform: translateX(1px);
}
.lang-fab-opt:focus-visible{ box-shadow: 0 0 0 2px rgba(129,140,248,.75); }
.lang-fab-opt.is-active{
background:
linear-gradient(120deg, rgba(99,102,241,.18) 0%, rgba(168,85,247,.16) 50%, rgba(6,182,212,.18) 100%);
border-color: rgba(168,85,247,.5);
box-shadow: inset 0 0 0 1px rgba(168,85,247,.22);
}
.lang-fab-opt-flag{
position: relative;
flex: 0 0 30px;
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.14),
0 2px 10px rgba(0,0,0,.3);
}
.lang-fab-opt-flag img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 50%;
}
.lang-fab-opt.is-active .lang-fab-opt-flag{
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.22),
0 0 0 2px rgba(168,85,247,.55),
0 3px 14px rgba(168,85,247,.35);
}
.lang-fab-opt-text{
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 auto;
}
.lang-fab-opt-name{
font-size: 14.5px;
font-weight: 500;
letter-spacing: -.005em;
color: #f7f7fb;
line-height: 1.2;
}
.lang-fab-opt-code{
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
color: #8d8da3;
letter-spacing: .12em;
margin-top: 3px;
}
.lang-fab-opt-check{
flex: 0 0 16px;
color: #c4b5fd;
filter: drop-shadow(0 0 6px rgba(129,140,248,.7));
}
/* RTL alignment inside items */
.lang-fab--rtl .lang-fab-opt{ flex-direction: row-reverse; text-align: right; }
.lang-fab--rtl .lang-fab-opt-text{ align-items: flex-end; }
.lang-fab--rtl .lang-fab-opt:hover,
.lang-fab--rtl .lang-fab-opt:focus-visible{ transform: translateX(-1px); }
html.lang-fab-lock{ overflow: hidden; }
/* ----- Mobile bottom-sheet ----- */
@media (max-width: 640px){
.lang-fab{
--fab-size: 56px;
right: calc(16px + env(safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom));
}
.lang-fab--rtl{
right: auto;
left: calc(16px + env(safe-area-inset-left));
}
.lang-fab-panel{
position: fixed;
inset: auto 0 0 0;
right: 0 !important;
left: 0 !important;
bottom: 0;
width: auto;
max-height: 82vh;
padding: 22px 14px max(18px, env(safe-area-inset-bottom));
border-radius: 28px 28px 0 0;
transform-origin: bottom center;
transform: translateY(100%) scale(1);
}
.lang-fab[data-open="true"] .lang-fab-panel{ transform: translateY(0) scale(1); }
.lang-fab-sheet-head{ display: flex; }
.lang-fab-list{ max-height: calc(82vh - 70px); }
.lang-fab-opt{ padding: 11px 12px; }
.lang-fab-opt-name{ font-size: 15.5px; }
.lang-fab-panel-aurora{ right: -80px; bottom: -120px; width: 320px; height: 320px; }
}
/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce){
.lang-fab-aurora,
.lang-fab-panel-aurora,
.lang-fab-pulse{ animation: none; }
.lang-fab-btn,
.lang-fab-panel,
.lang-fab-item,
.lang-fab-globe,
.lang-fab-dim{
transition: none !important;
}
.lang-fab-item{ transition-delay: 0ms !important; }
}
/* ----- RTL page direction (generic helpers carried over) ----- */
html[dir="rtl"] body{ text-align: right; }
html[dir="rtl"] .nav a,
html[dir="rtl"] .hdr-right,
html[dir="rtl"] .mnav{ direction: rtl; }
html[dir="rtl"] .mnav{ left: 0; right: auto; transform: translateX(-100%); }
html[dir="rtl"] .mnav.is-open{ transform: translateX(0); }