/* ==========================================================================
   BIGO Diamond: staging design (premium UX pass, 2026-09-30)
   Built on the finalized design-preview: same hero structure, Dino, gem, logo,
   recharge journey, package anatomy and checkout layout.

   Colour roles come from the logo itself:
     blue   = the brand and every action: CTAs, selection, focus, active steps.
              The logo's electric blue (#078795), lit by bigodiamond.com's azure
              (#0CB5BB) and teal (#05C7C7) where there is no text.
     yellow = the product only: the gem the Dino holds and every diamond icon.
   One light theme. Logical properties, so Arabic and Persian mirror without a
   second layout. BIGO IDs, amounts and prices stay left-to-right.
   ========================================================================== */

/* Readex Pro, served from this site (SIL Open Font License 1.1; assets/fonts/OFL-NOTICE.txt): the page preloads the
   subsets its language needs, so the font is there for the first frame. "optional": if it is ever late, that one page
   keeps the system font instead of reflowing under the visitor (the next page has it from cache). */
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:300 700;font-display:optional;src:url(/assets/fonts/readex-pro-arabic.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:300 700;font-display:optional;src:url(/assets/fonts/readex-pro-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:300 700;font-display:optional;src:url(/assets/fonts/readex-pro-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#F5F8FC; --bg-2:#EDF3FA; --surface:#FFFFFF;
  --ink:#0D1A33; --ink-2:#28354E; --muted:#56657C; --faint:#687589;
  --line:#E0ECED; --line-2:#CBDDDF;
  /* brand blue */
  --blue:#078795; --blue-deep:#047481; --blue-ink:#026671; --blue-night:#03606B;
  --azure:#0CB5BB; --teal:#05C7C7;
  --blue-50:#EDF9FA; --blue-100:#DBF2F4; --blue-200:#B4E5EA; --blue-300:#68CFD9;
  --ring:rgba(7,135,149,.20);
  --on-blue:#FFFFFF; --on-blue-2:#E6F6F8;
  /* the product: the gem */
  --gem:#FFC21A; --gem-soft:#FFF7DD; --gem-edge:#F2C85A; --gem-text:#FFD447;
  /* states */
  --good:#0A7A4C; --good-soft:#E8F6EF; --good-edge:#AEDFC8;
  --warn:#8A5300; --warn-soft:#FFF5E1; --warn-edge:#F0D39A;
  --danger:#C22D18; --danger-soft:#FDEFEC; --danger-edge:#F4C0B6;
  --r-xs:8px; --r-s:12px; --r:16px; --r-l:22px; --r-xl:32px;
  --e1:0 1px 2px rgba(13,26,51,.05);
  --e2:0 1px 2px rgba(13,26,51,.04),0 8px 22px -14px rgba(13,26,51,.20);
  --e3:0 2px 4px rgba(13,26,51,.04),0 26px 56px -30px rgba(13,26,51,.34);
  --e-blue:0 12px 24px -12px rgba(7,135,149,.55);
  --font:"Readex Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-h2:32px; --t-h3:18px; --t-lead:17px; --t-body:15.5px; --t-label:14.5px; --t-small:13px;
  --wrap:1200px;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-padding-top:88px;-webkit-text-size-adjust:100%;accent-color:var(--blue);scrollbar-color:#B7C6D9 transparent}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--t-body);line-height:1.55;-webkit-font-smoothing:antialiased}
::selection{background:#C2E9EE;color:var(--ink)}
input{caret-color:var(--blue)}
img{display:block;max-width:100%}
a{color:var(--blue-deep);text-underline-offset:3px;text-decoration-thickness:1.5px}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
[hidden]{display:none!important}
.tnum{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.gm{display:block;flex:none;overflow:visible}
[data-ic]{display:inline-flex;flex:none;align-items:center;justify-content:center}
.i{display:block;width:20px;height:20px;flex:none}
html[dir=rtl] .arr .i,html[dir=rtl] .flip .i{transform:scaleX(-1)}
/* long translated words wrap instead of widening cards */
p,.help,.hint,.stat,.note,.s-note,.trust-line span,.pv-t,.err-box span,.m-title,.field-label,.nm,.id,.proof span,.ticks span,.why-list h3,.svc h3,.soon h4,.pay-row .name,.cu-text h3,.st-dl dd{overflow-wrap:anywhere}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--r-s);border:1.5px solid transparent;font:inherit;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s,transform .1s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn .i{width:18px;height:18px}
.btn .arr .i{width:18px;height:18px;transition:transform .18s}
.btn-cta{background:linear-gradient(180deg,#078795,#047481);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,30,90,.22),var(--e-blue)}
.btn-cta:hover{background:linear-gradient(180deg,#057E8B,#056A76)}
.btn-cta:hover .arr .i{transform:translateX(3px)}
html[dir=rtl] .btn-cta:hover .arr .i{transform:scaleX(-1) translateX(3px)}
.btn-cta:active{background:linear-gradient(180deg,#047481,#03626D);box-shadow:inset 0 1px 2px rgba(0,30,90,.35)}
.btn-cta[disabled],.btn-cta[aria-disabled=true]{background:#E6ECF3;color:#76839A;box-shadow:none;cursor:not-allowed}
.btn-cta[aria-disabled=true] .arr{display:none}
.btn-cta.is-loading,.btn-cta.is-loading[disabled]{background:linear-gradient(180deg,#078795,#047481);color:#fff;cursor:progress;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--e-blue)}
.btn-line{background:#fff;border-color:var(--line-2);color:var(--ink)}
.btn-line:hover{border-color:var(--blue-300);color:var(--blue-ink)}
.btn-soft{background:var(--blue-50);border-color:var(--blue-200);color:var(--blue-ink)}
.btn-soft:hover{background:var(--blue-100)}
.btn-white{background:#fff;color:var(--blue-deep);box-shadow:0 12px 24px -14px rgba(3,20,70,.55)}
.btn-white:hover{background:var(--blue-50)}
.btn-onblue{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);color:#fff}
.btn-onblue:hover{background:rgba(255,255,255,.18)}
.btn-lg{height:56px;font-size:16.5px;border-radius:14px}
.btn-block{width:100%}
.btn-sm{height:38px;padding:0 12px;font-size:14px;border-radius:10px}
.link{background:none;border:0;padding:4px 2px;font:inherit;font-weight:600;font-size:14px;color:var(--blue-deep);cursor:pointer;text-decoration:none}
.link:hover{text-decoration:underline}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;display:none;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.lbl-busy{display:none}
.is-loading .lbl-idle{display:none}
.is-loading .lbl-busy{display:inline}
.is-loading .spin{display:block}

/* ---------- header: logo · nav · country & language · notifications · account · recharge ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.hdr-row{height:68px;display:flex;align-items:center;gap:22px}
.logo img{height:38px;width:auto}
.nav{display:flex;gap:2px}
.nav a{position:relative;padding:8px 11px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:500;font-size:15px;white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--bg)}
.nav a[aria-current]{color:var(--ink);font-weight:600}
.nav a[aria-current]::after{content:"";position:absolute;inset-inline:11px;bottom:-15px;height:2.5px;border-radius:2px;background:var(--blue)}
.hdr-end{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.hdr-pop{position:relative}
.flag{display:block;flex:none;width:20px;height:13px;border-radius:2.5px;object-fit:cover;box-shadow:0 0 0 1px rgba(13,26,51,.10)}
.flag.globe{box-shadow:none;width:auto;height:auto;color:var(--muted)}
.flag.globe .i{width:18px;height:18px}
.locale{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 10px 0 12px;border-radius:12px;border:1px solid var(--line-2);background:#fff;font:inherit;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:border-color .15s,box-shadow .15s}
html[dir=rtl] .locale{padding:0 12px 0 10px}
.locale:hover{border-color:var(--blue-300)}
.locale[aria-expanded=true]{border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
.locale .cn{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.locale .lc{font-weight:600;letter-spacing:.02em}
.locale .div{width:1px;height:16px;background:var(--line-2)}
.chev .i{width:16px;height:16px;color:var(--muted);transition:transform .2s}
[aria-expanded=true] > .chev .i{transform:rotate(180deg)}

/* popovers: one family for country/language, notifications and the account menu */
.pop{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:60;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 2px 6px rgba(13,26,51,.05),0 30px 60px -26px rgba(13,26,51,.42)}
.pop:not([hidden]){animation:pop-open .18s cubic-bezier(.2,.8,.2,1)}
@keyframes pop-open{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.loc-pop{width:356px;padding:10px}
.loc-pop .mk-list{max-height:min(318px,calc(100vh - 380px));min-height:120px;overflow:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px}
.lp-sec + .lp-sec{margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.lp-h{margin:4px 8px 8px;font-size:12px;font-weight:600;color:var(--muted)}
.mk-auto,.mk-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.3}
.mk-auto:hover,.mk-item:hover{background:var(--blue-50)}
.mk-auto .mk-ic{width:32px;height:32px;border-radius:10px;background:var(--blue-50);color:var(--blue)}
.mk-auto .mk-ic .i{width:18px;height:18px}
.mk-t{flex:1;min-width:0}
.mk-t b{display:block;font-weight:600;font-size:14.5px}
.mk-t small,.mk-s{display:block;font-size:12.5px;color:var(--muted);font-weight:400}
.mk-item .flag{width:24px;height:15px}
.mk-n{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-s{flex:none;text-align:end}
.ck{visibility:hidden;color:var(--blue);flex:none}
.ck .i{width:18px;height:18px}
[aria-current] > .ck{visibility:visible}
.mk-auto[aria-current],.mk-item[aria-current]{background:var(--blue-50);box-shadow:inset 0 0 0 1.5px var(--blue-200)}
.mk-item[aria-current] .mk-n{color:var(--blue-ink);font-weight:600}
.mk-search{display:flex;align-items:center;gap:8px;height:40px;margin:8px 2px 4px;padding:0 12px;border:1.5px solid var(--line-2);border-radius:12px;color:var(--muted);transition:border-color .15s,box-shadow .15s}
.mk-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
.mk-search .i{width:17px;height:17px}
.mk-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:inherit;font-size:14.5px;color:var(--ink)}
.mk-search input::placeholder{color:var(--faint)}
.mk-search input::-webkit-search-cancel-button{cursor:pointer}
.mk-list{display:grid;gap:1px}
.mk-g{margin:10px 10px 4px;font-size:11.5px;font-weight:600;color:var(--faint)}
.mk-none{margin:8px 10px;font-size:13.5px;color:var(--muted)}
.lp-langs{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px 2px}
.lp-lang,.m-lang{display:inline-flex;align-items:center;height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);text-decoration:none;font-weight:500;font-size:14px}
.lp-lang:hover{border-color:var(--blue-300);background:var(--blue-50)}
.lp-lang .ck,.m-lang .ck{display:none}
.lp-lang[aria-current],.m-lang[aria-current]{border-color:var(--blue);background:var(--blue-50);color:var(--blue-deep);font-weight:600}
.lp-note{display:flex;gap:8px;align-items:flex-start;margin:10px 4px 2px;padding:10px 8px 2px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.45}
.lp-note .i{width:16px;height:16px;margin-top:1px}

.icon-btn{width:44px;height:44px;display:none;place-items:center;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;position:relative;transition:border-color .15s,color .15s,box-shadow .15s}
.icon-btn:hover{border-color:var(--blue-300);color:var(--blue-deep)}
.icon-btn .i{width:20px;height:20px}
.icon-btn[aria-expanded=true]{border-color:var(--blue);color:var(--blue-deep);box-shadow:0 0 0 3px var(--ring)}
.icon-btn.bell{display:grid}
.badge{position:absolute;top:-6px;inset-inline-end:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#D92D20;color:#fff;font-size:11.5px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 0 0 2px #fff}
.bell.has-new [data-ic] .i{animation:bell-nudge .9s ease-out 1.2s 1;transform-origin:50% 12%}
@keyframes bell-nudge{0%,100%{transform:none}20%{transform:rotate(14deg)}45%{transform:rotate(-10deg)}70%{transform:rotate(5deg)}}

/* notifications: real order updates */
.ntf-pop{width:384px;padding:0;overflow:hidden}
.ntf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.ntf-head h2{margin:0;font-size:15.5px;font-weight:600}
.ntf-head .link{font-size:13px}
.ntf-list{list-style:none;margin:0;padding:6px;max-height:min(420px,calc(100vh - 220px));overflow:auto;overscroll-behavior:contain}
.ntf-item a{display:grid;grid-template-columns:36px minmax(0,1fr) 10px;gap:12px;align-items:start;padding:10px;border-radius:12px;color:var(--ink);text-decoration:none}
.ntf-item a:hover{background:var(--blue-50)}
.ntf-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--tone-soft,var(--blue-50));color:var(--tone,var(--blue))}
.ntf-ic .i{width:18px;height:18px}
.ntf-t{min-width:0}
.ntf-t b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.ntf-t span{display:block;font-size:13px;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
.ntf-t time{display:block;margin-top:2px;font-size:12px;color:var(--faint)}
.ntf-dot{width:9px;height:9px;margin-top:6px;border-radius:50%;background:transparent}
.ntf-item.is-new .ntf-dot{background:var(--blue)}
.ntf-item[data-tone=good],.ntf-empty{--tone:var(--good);--tone-soft:var(--good-soft)}
.ntf-item[data-tone=warn]{--tone:var(--warn);--tone-soft:var(--warn-soft)}
.ntf-item[data-tone=bad]{--tone:var(--danger);--tone-soft:var(--danger-soft)}
.ntf-item[data-tone=blue],.ntf-empty{--tone:var(--blue);--tone-soft:var(--blue-50)}
.ntf-empty{display:grid;justify-items:center;gap:6px;padding:34px 24px 30px;text-align:center}
.ntf-empty .ntf-ic{width:52px;height:52px;margin-bottom:6px}
.ntf-empty .ntf-ic .i{width:24px;height:24px}
.ntf-empty b{font-size:15px}
.ntf-empty p{margin:0;font-size:13.5px;color:var(--muted);max-width:30ch}
.ntf-foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-top:1px solid var(--line);font-size:14px;font-weight:600;text-decoration:none}
.ntf-foot .i{width:16px;height:16px}

/* account menu */
.acct-btn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 8px 0 4px;border-radius:999px;border:1px solid var(--line-2);background:#fff;cursor:pointer;font:inherit;transition:border-color .15s,box-shadow .15s}
html[dir=rtl] .acct-btn{padding:0 4px 0 8px}
.acct-btn:hover{border-color:var(--blue-300)}
.acct-btn[aria-expanded=true]{border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:linear-gradient(158deg,#41CFCF,#078795);color:#fff;font-weight:700;font-size:15px}
.av.lg{width:44px;height:44px;font-size:18px}
.acct-pop{width:292px;padding:8px}
.ap-head{display:flex;align-items:center;gap:12px;padding:10px 10px 12px}
.ap-who{min-width:0}
.ap-who b{display:block;font-size:15px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-who small{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-bal{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 6px;padding:11px 12px;border-radius:12px;background:var(--blue-50);color:var(--ink-2);text-decoration:none;font-size:13.5px}
.ap-bal b{font-size:16px;color:var(--ink)}
.ap-links{display:grid;gap:1px;padding:4px 0;border-top:1px solid var(--line)}
.ap-links a,.ap-out{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500}
.ap-links a .i,.ap-out .i{width:19px;height:19px;color:var(--muted)}
.ap-links a:hover,.ap-out:hover{background:var(--blue-50)}
.ap-links a[aria-current]{color:var(--blue-deep);font-weight:600}
.ap-links a[aria-current] .i{color:var(--blue)}
.ap-out{border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:2px;color:var(--danger)}
.ap-out .i{color:var(--danger)}
.hdr-cta{height:42px;padding:0 16px}
.hdr-cta .i{width:17px;height:17px}

/* mobile menu (≤1100) */
.menu-btn[aria-expanded=true]{border-color:var(--blue);color:var(--blue-deep);box-shadow:0 0 0 3px var(--ring)}
.m-nav{border-top:1px solid var(--line);background:#fff;max-height:calc(100vh - 60px);overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 40px -30px rgba(13,26,51,.35)}
.m-nav:not([hidden]){animation:sheet-in .22s cubic-bezier(.2,.8,.2,1)}
@keyframes sheet-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.m-nav .wrap{padding-top:6px;padding-bottom:20px}
.m-links{display:grid}
.m-links a{display:block;padding:14px 2px;font-size:17px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.m-links a[aria-current]{color:var(--blue-deep)}
.m-sec{margin-top:18px}
.m-h{display:block;margin:0 2px 10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.m-langs{display:flex;flex-wrap:wrap;gap:8px}
.m-lang{height:40px;padding:0 14px;font-size:14.5px}
.m-acct{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--blue-50)}
.m-acct b{display:block;font-size:15px}
.m-acct small{display:block;font-size:13px;color:var(--muted)}
.m-acct-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.m-acct-links a{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500}
.m-market{border:1px solid var(--line-2);border-radius:14px}
.m-market summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
.m-market summary::-webkit-details-marker{display:none}
.m-market summary .m-h{margin:0}
.m-cur{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;min-width:0}
.m-cur > span:not(.chev){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-market[open] .chev .i{transform:rotate(180deg)}
.m-mk{padding:0 6px 8px;border-top:1px solid var(--line)}
.m-mk .mk-list{max-height:none}
.m-wa{margin-top:18px}

/* ---------- hero (hero pass, 2026-10-01) ----------
   Left: a compact product message and ONE recharge path. The panel starts as a single field (the BIGO ID, looked up
   automatically, no Verify button) and grows only when there is something to show: the account, the diamonds, the
   price. Right: the Dino as the emotional anchor, smaller, in a warm-white studio light with a soft blue haze, the
   brand's diamond drawn in hairlines, a light pedestal and a contact shadow. No panel, no rate plaque.
   --dino-h is the Dino's visual height per viewport (tuned in the hero's own breakpoints below). */
.hero{position:relative;overflow:hidden;overflow:clip;background:linear-gradient(180deg,#FFFFFF 0%,#FEFEFC 58%,var(--bg) 100%);--dino-h:400px;--t-hero:50px}
.hero-atmo{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(520px 440px at 76% 47%,rgba(255,249,232,.95),rgba(255,249,232,0) 70%),
  radial-gradient(700px 540px at 79% 42%,rgba(12,181,187,.09),rgba(12,181,187,0) 72%),
  radial-gradient(460px 300px at 98% 0%,rgba(7,135,149,.06),rgba(7,135,149,0) 70%)}
html[dir=rtl] .hero-atmo{transform:scaleX(-1)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);column-gap:40px;align-items:start;padding-top:40px;padding-bottom:12px}
.hero-main{min-width:0;padding-top:6px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink)}
html[dir=rtl] .hero-eyebrow{letter-spacing:0;font-size:14px}
.ey-gem{display:block;width:16px;line-height:0}
.ey-gem .gm{width:16px;height:auto}
.hero h1{font-size:var(--t-hero);line-height:1.06;font-weight:700;letter-spacing:-.032em;margin:0;text-wrap:balance;overflow-wrap:break-word}
.hero h1 em{font-style:normal;color:var(--blue)}
html[dir=rtl] .hero h1{letter-spacing:0;line-height:1.24}
.hero-lead{font-size:var(--t-lead);line-height:1.55;color:var(--muted);margin:16px 0 0;max-width:44ch;text-wrap:pretty}
.hh-art{display:none}

/* the recharge panel: field → account → diamonds → price; the card surface appears with the content (::before) */
.rx{position:relative;isolation:isolate;max-width:500px;margin-top:30px}
.rx::before{content:"";position:absolute;inset:-20px -22px -22px;z-index:-1;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--e3);opacity:0;transform:scale(.985);transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.rx.is-open::before{opacity:1;transform:none}
.rx-label{display:block;margin:0 0 8px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.rx-field{position:relative}
.rx-input{display:block;width:100%;height:60px;padding:0 54px 0 20px;border:1.5px solid var(--line-2);border-radius:16px;background:#fff;font:inherit;font-size:18px;font-weight:500;color:var(--ink);direction:ltr;text-align:left;box-shadow:0 1px 2px rgba(13,26,51,.04),0 16px 30px -24px rgba(13,26,51,.38);transition:border-color .2s,box-shadow .2s}
html[dir=rtl] .rx-input{text-align:right;padding:0 20px 0 54px}
.rx-input::placeholder{color:var(--faint);font-weight:400}
.rx-input:hover{border-color:var(--blue-300)}
.rx-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--ring),0 16px 30px -24px rgba(13,26,51,.38)}
.rx[data-state=ok] .rx-input{border-color:#9FD8BE}
.rx[data-state=ok] .rx-input:focus{border-color:var(--good);box-shadow:0 0 0 4px rgba(10,122,76,.14)}
.rx[data-state=error] .rx-input{border-color:var(--danger);box-shadow:0 0 0 4px rgba(194,45,24,.10)}
.rx-state{position:absolute;top:50%;inset-inline-end:18px;width:24px;height:24px;margin-top:-12px;display:grid;place-items:center;pointer-events:none}
.rx-state > *{grid-area:1/1;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.rx-state .spin{display:block;width:20px;height:20px;border-width:2.5px;color:var(--blue)}
.rx-state .st-ok{width:24px;height:24px;border-radius:50%;background:var(--good);color:#fff;display:grid;place-items:center}
.rx-state .st-ok .i{width:14px;height:14px}
.rx-state .st-bad{color:var(--danger)}
.rx-state .st-bad .i{width:22px;height:22px}
.rx[data-state=loading] .rx-state .spin,.rx[data-state=ok] .rx-state .st-ok,.rx[data-state=error] .rx-state .st-bad{opacity:1;transform:none}
.rx-msg{display:flex;align-items:flex-start;flex-wrap:wrap;gap:4px 7px;min-height:21px;margin:10px 2px 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.rx-mi{display:flex;flex:none}
.rx-msg [data-rx-msg]{flex:1 1 220px;min-width:0}
.rx-mi:empty{display:none}
.rx-mi .i{width:16px;height:16px;margin-top:2px}
.rx[data-state=ok] .rx-msg{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rx-ok{display:none;align-items:center;gap:5px;flex:none;font-size:12.5px;font-weight:600;color:var(--good)}
.rx-ok .i{width:15px;height:15px}
.rx[data-state=ok] .rx-ok{display:inline-flex}
.rx[data-state=error] .rx-msg{color:var(--danger);font-weight:500}
.rx-retry{padding:0;font-size:13.5px}

/* progressive disclosure: rows open with the content (grid 0fr → 1fr), the content settles in after */
.rx-more,.rx-pay,.rx-dia-w{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1)}
.rx-more.is-open,.rx-pay.is-open,.rx-dia-w.is-open{grid-template-rows:1fr}
.rx-more-in,.rx-pay-in,.rx-dia-in{min-height:0;overflow:hidden;margin:0 -6px;padding:0 6px}
.rx-acct,.rx-dia,.rx-pay-in > *{opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.rx-more.is-open .rx-acct,.rx-dia-w.is-open .rx-dia,.rx-pay.is-open .rx-pay-in > *{opacity:1;transform:none}
.rx-more.is-open .rx-acct{transition-delay:.06s}
.rx-dia-w.is-open .rx-dia{transition-delay:.12s}
.rx-acct{position:relative;display:flex;align-items:center;gap:12px;margin-top:12px;padding:11px 14px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
/* while the ID changes, the last account dims; when the new ID has no account, it and its name in the price line go */
.rx[data-state=none] .rx-acct,.rx[data-state=loading] .rx-acct{opacity:.45}
.rx[data-state=error] .rx-acct{display:none}
/* the lookup is taking a moment: the account's shape (avatar, name, ID, status) stands where the account will be */
.sk-acct{position:absolute;inset:0;display:none;align-items:center;gap:12px;padding:11px 14px;pointer-events:none}
.rx.is-looking .rx-acct{opacity:1}
.rx.is-looking .rx-acct > :not(.sk-acct){visibility:hidden}
.rx.is-looking .sk-acct{display:flex}
.rx[data-state=error] .pay-line .for,.rx[data-state=none] .pay-line .for,.rx[data-state=loading] .pay-line .for{visibility:hidden}
.rx-acct .avw{position:relative;flex:none;line-height:0}
.rx-acct .tick{position:absolute;inset-inline-end:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:var(--good);border:2px solid #fff;display:grid;place-items:center;color:#fff}
.rx-acct .tick .i{width:9px;height:9px}
.rx-acct .who{flex:1;min-width:0}
.rx-acct .nm{font-weight:600;font-size:16px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-acct .id{font-size:13px;color:var(--muted)}
.rx-dia{padding-top:18px}
.rx-dh{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-bottom:10px}
.qlinks{display:flex;gap:4px 14px;flex-wrap:wrap}
.qlinks .link{padding:2px 0;font-size:13.5px}
/* narrow phones: the label and its two links stack in every language (whether they fit on one line depended on the
   language, so the panel's height did too) */
@media (max-width:440px){.rx-dh{flex-direction:column;align-items:flex-start}}
.field-label{display:block;font-weight:600;font-size:var(--t-label);margin:0}
.rx-pay-in{padding-bottom:4px}
.rx-pay-in > .pay-line{padding-top:18px}

/* quick package picks */
.picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pick{position:relative;display:block;cursor:pointer}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick .in{display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 6px 10px;border:1.5px solid var(--line);border-radius:14px;background:#fff;transition:border-color .15s,background-color .15s,box-shadow .15s}
.pick .amt{display:flex;align-items:center;gap:6px;font-weight:700;font-size:17px;line-height:1.2}
.pick .pr{font-size:13px;color:var(--muted);font-weight:500}
.pick:hover .in{border-color:var(--blue-200)}
.pick input:checked + .in{border-color:var(--blue);background:var(--blue-50);box-shadow:0 0 0 3px var(--ring)}
.pick input:checked + .in .pr{color:var(--blue-ink);font-weight:600}
.pick input:focus-visible + .in{outline:2.5px solid var(--blue);outline-offset:2px}

.pay-line{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:0 0 14px}
.pay-line .k{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:4px}
.pay-line .v{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1}
.pay-line .x{display:block;font-size:13px;color:var(--muted);margin-top:5px}
.pay-line .for{font-size:13px;color:var(--muted);text-align:end;line-height:1.35;min-width:0}
.pay-line .for b{display:block;color:var(--ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* shared with other pages: the API page's field and the checkout's recipient box */
.input{flex:1;min-width:0;height:52px;padding:0 16px;border:1.5px solid var(--line-2);border-radius:14px;font:inherit;font-size:17px;font-weight:500;color:var(--ink);background:#fff;direction:ltr;text-align:left;transition:border-color .15s,box-shadow .15s}
html[dir=rtl] .input{text-align:right}
.input::placeholder{color:var(--faint);font-weight:400}
.input:hover{border-color:var(--blue-300)}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--ring)}
.found{display:none;margin-top:12px;border-radius:14px;border:1.5px solid var(--good-edge);background:linear-gradient(180deg,var(--good-soft),#fff 140%);padding:10px 12px 12px}
.found-static{display:block;margin-top:0}
.found-top{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--good);margin-bottom:8px}
.found-top .i{width:16px;height:16px}
.found-row{display:flex;align-items:center;gap:12px}
.found .avw{position:relative;flex:none}
.found .avw .tick{position:absolute;inset-inline-end:-2px;bottom:-2px;width:17px;height:17px;border-radius:50%;background:var(--good);border:2px solid #fff;display:grid;place-items:center;color:#fff}
.found .avw .tick .i{width:9px;height:9px}
.found .who{flex:1;min-width:0}
.found .nm{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.found .id{font-size:13px;color:var(--muted)}

/* the stage: four layers with their own depth (--d); the pointer moves them a few pixels at most */
.stage{position:relative;min-height:calc(var(--dino-h) + 24px);--px:0;--py:0;--fig-w:calc(var(--dino-h) * 1.0675)}
.st-l{position:absolute;inset:0;pointer-events:none;transform:translate3d(calc(var(--px) * var(--d,1) * -7px),calc(var(--py) * var(--d,1) * -5px),0);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
/* new artwork (2026-10-09): a soft blue field behind the Dino, a restrained warm accent behind the stone it holds, one
   faint ring; the artwork brings its own podium, swirl and stones */
.st-aura{position:absolute;left:50%;top:50%;width:calc(var(--dino-h) * 1.5);aspect-ratio:1;margin:calc(var(--dino-h) * -.75) 0 0 calc(var(--dino-h) * -.75);border-radius:50%;
  background:radial-gradient(closest-side,rgba(193,233,238,.95) 0%,rgba(210,239,242,.78) 42%,rgba(227,245,247,.38) 70%,rgba(236,248,250,0) 100%)}
.st-warm{position:absolute;left:calc(50% - var(--fig-w) * .2);top:calc(50% - var(--dino-h) * .06);width:calc(var(--dino-h) * .62);aspect-ratio:1;margin:calc(var(--dino-h) * -.31) 0 0 calc(var(--dino-h) * -.31);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,206,64,.30),rgba(255,214,90,.12) 55%,rgba(255,214,90,0))}
.st-ring{position:absolute;left:50%;top:50%;width:calc(var(--dino-h) * 1.18);aspect-ratio:1;margin:calc(var(--dino-h) * -.59) 0 0 calc(var(--dino-h) * -.59);border-radius:50%;
  border:1px solid rgba(7,135,149,.10);box-shadow:inset 0 0 0 10px rgba(255,255,255,.35)}
html[dir=rtl] .st-warm{left:calc(50% + var(--fig-w) * .2)}
.st-fig{position:absolute;left:50%;top:50%;width:var(--fig-w);margin:calc(var(--dino-h) * -.5) 0 0 calc(var(--fig-w) / -2)}

/* the figure: the Dino and the light on the diamond it holds (clipped to the stone by a mask of the artwork) */
.fig{display:block;line-height:0}
.fig-dino{display:block;width:100%;height:auto;aspect-ratio:1123/1052;filter:drop-shadow(0 14px 18px rgba(10,34,84,.10))}
.gem-light{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask:url(/assets/dp/dino-hero-gem-mask.png) 0 0/100% 100% no-repeat;mask:url(/assets/dp/dino-hero-gem-mask.png) 0 0/100% 100% no-repeat}
.gl-sweep,.gl-flash{position:absolute;top:0;bottom:0;left:-10%;width:120%;background:linear-gradient(104deg,rgba(255,255,255,0) 41%,rgba(255,255,250,.55) 46%,rgba(255,255,255,.86) 50%,rgba(255,255,250,.55) 54%,rgba(255,255,255,0) 59%);transform:translateX(-100%)}
.gl-sweep{opacity:.75}
.gl-bloom{position:absolute;inset:0;background:radial-gradient(70% 60% at 30% 40%,rgba(255,255,240,.9),rgba(255,248,200,.35));opacity:0}
.gem-halo{position:absolute;left:31%;top:49%;width:62%;aspect-ratio:1;margin:-39% 0 0 -39%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(255,206,64,.42),rgba(255,214,90,.16) 52%,rgba(255,214,90,0))}

/* motion. The entrance (atmosphere → headline → recharge → Dino → light → trust) runs once from CSS; the class is
   set in <head> unless reduced motion is on. Idle loops are slow, pause while the panel has focus or the hero is
   off screen; nothing moves under reduced motion. */
@keyframes hero-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}
@keyframes fig-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fig-float{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@keyframes shadow-float{from{transform:scale(1);opacity:1}to{transform:scale(.94);opacity:.82}}
@keyframes gl-idle{0%{transform:translateX(-100%)}9%{transform:translateX(100%)}100%{transform:translateX(100%)}}
@keyframes gl-pass{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes gl-bloom{0%{opacity:0}28%{opacity:.26}100%{opacity:0}}
@keyframes gem-halo{0%{opacity:0;transform:scale(.62)}32%{opacity:1}100%{opacity:0;transform:scale(1.14)}}
.hero-anim .hero-atmo,.hero-anim .st-aura{animation:hero-fade .9s ease both}
.hero-anim .hero-eyebrow,.hero-anim .hero h1{animation:hero-up .7s cubic-bezier(.16,1,.3,1) .08s both}
.hero-anim .hero-lead,.hero-anim .rx{animation:hero-up .7s cubic-bezier(.16,1,.3,1) .2s both}
.hero-anim .st-warm,.hero-anim .st-ring{animation:hero-fade 1s ease .3s both}
.hero-anim .st-fig,.hero-anim .hh-fig{animation:fig-in .9s cubic-bezier(.16,1,.3,1) .32s both,fig-float 7s ease-in-out 1.5s infinite alternate}
.hero-anim .hh-aura{animation:hero-fade 1.1s ease .5s both}
.hero-anim .proof{animation:hero-fade .6s ease .75s both}
.hero-anim .gl-sweep{animation:gl-idle 12s cubic-bezier(.45,0,.2,1) 2.6s infinite}
.hero[data-found] .gl-flash{animation:gl-pass .6s cubic-bezier(.45,0,.2,1) .04s both}
.hero[data-found] .gl-bloom{animation:gl-bloom .65s ease both}
.hero[data-found] .gem-halo{animation:gem-halo .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes em-lit{0%{opacity:0}38%{opacity:1}100%{opacity:0}}
.hero:focus-within .st-fig,.hero:focus-within .hh-fig{animation-play-state:running,paused}
.hero:focus-within .gl-sweep{animation-play-state:paused}
[data-hero-off] .st-fig,[data-hero-off] .hh-fig{animation-play-state:running,paused}
[data-hero-off] .gl-sweep{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .rx::before,.rx-more,.rx-pay,.rx-dia-w,.rx-acct,.rx-dia,.rx-pay-in > *,.st-l{transition:none}
}
.rx.no-anim::before,.rx.no-anim .rx-more,.rx.no-anim .rx-pay,.rx.no-anim .rx-dia-w,.rx.no-anim .rx-acct,.rx.no-anim .rx-dia,.rx.no-anim .rx-pay-in > *{transition:none}

/* proof strip: the hero's last line, the reasons to trust it */
.proof{list-style:none;margin:0;padding:20px 0 30px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;border-top:1px solid var(--line)}
.proof li,.proof a{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--ink-2);line-height:1.35;text-decoration:none}
.proof a:hover{color:var(--blue-deep)}
.proof .ic{display:flex;flex:none;color:var(--blue)}
.proof .ic .i{width:18px;height:18px}

/* hero sizes: the Dino's visual height and the headline per viewport */
@media (min-width:1600px){ .hero{--dino-h:440px;--t-hero:56px} .hero-grid{padding-top:56px;grid-template-columns:minmax(0,580px) minmax(0,1fr)} }
@media (max-width:1299px){ .rx::before{inset:-18px -14px -18px} }
@media (max-width:1279px){ .hero{--dino-h:360px;--t-hero:46px} .hero-grid{column-gap:32px;padding-top:36px} }
@media (max-width:1099px){ .hero{--dino-h:310px;--t-hero:42px} .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)} .proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:960px){
  .hero{--t-hero:40px}
  .stage{display:none}
  .hero-grid{grid-template-columns:minmax(0,1fr);padding-top:30px;padding-bottom:8px}
  .hero-atmo{background:radial-gradient(420px 320px at 86% 14%,rgba(255,249,232,.95),rgba(255,249,232,0) 70%),radial-gradient(460px 340px at 90% 12%,rgba(12,181,187,.12),rgba(12,181,187,0) 70%)}
  /* the Dino joins the headline: same light, sized so the BIGO ID stays in the first screen */
  .hero-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text art";align-items:end;column-gap:16px}
  .hh-text{grid-area:text}
  .hh-art{grid-area:art;display:block;position:relative;--dino-m:172px;width:calc(var(--dino-m) * 1.0675);height:calc(var(--dino-m) + 4px);margin:-6px -6px -4px 0}
  html[dir=rtl] .hh-art{margin:-8px 0 -6px -6px}
  .hh-aura{position:absolute;inset:-8% -14% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(193,233,238,.9) 0%,rgba(210,239,242,.6) 48%,rgba(227,245,247,0) 100%)}
  .hh-fig{position:absolute;left:50%;bottom:0;width:calc(var(--dino-m) * 1.0675);margin-left:calc(var(--dino-m) * -.53375)}
  .hero-lead{max-width:52ch}
  .rx{max-width:560px}
}
@media (max-width:640px){
  .hero{--t-hero:30px}
  .hero-grid{padding-top:18px}
  .hero-head{grid-template-areas:"eye eye" "h1 art";align-items:center;column-gap:12px}
  .hh-text{display:contents}
  .hero-eyebrow{grid-area:eye}
  .hero h1{grid-area:h1}
  .hero-eyebrow{margin-bottom:10px;font-size:11.5px;gap:7px}
  .hh-art{--dino-m:112px}
  .hero-lead{font-size:15px;margin-top:14px}
  .rx{margin-top:22px}
  .rx::before{inset:-14px -12px -14px;border-radius:22px}
  .rx-input{height:56px;font-size:17px;padding-inline-start:16px}
  .picks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pick .in{padding:10px 6px 9px}
  .pay-line .v{font-size:27px}
  .proof{gap:12px 14px;padding-top:18px;padding-bottom:16px}
  .proof li,.proof a{font-size:13px;gap:8px}
  .proof .ic .i{width:17px;height:17px}
}
@media (min-width:481px) and (max-width:640px){ .hero{--t-hero:32px} .hh-art{--dino-m:128px} }
/* narrow phones: the found state reads from the field's check and the avatar's tick; the words stay for screen readers */
@media (max-width:400px){ .rx-ok [data-t]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} }
@media (max-width:374px){ .hero{--t-hero:28px} .hh-art{--dino-m:104px} .hero-lead{font-size:14.5px} }

/* ---------- sections ---------- */
.sec{padding:64px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px}
.sec h2{font-size:var(--t-h2);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 0 8px}
html[dir=rtl] .sec h2,html[dir=rtl] .final h2{letter-spacing:0;line-height:1.3}
.sec-head p{margin:0;color:var(--muted);max-width:70ch;font-size:15.5px}
.lead{font-size:17px;color:var(--muted);margin:0}
.market{display:inline-flex;align-items:center;gap:8px;min-height:38px;max-width:100%;padding:6px 12px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:500;flex-shrink:0}
.market img{width:18px;height:12px;border-radius:2px}
.ticks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.ticks .i{width:20px;height:20px;color:var(--blue);margin-top:1px}
.ticks.sm{gap:8px;margin-top:14px}
.ticks.sm li{font-size:14px}
.ticks.sm .i{width:18px;height:18px}

/* ---------- packages ---------- */
#packages{padding-top:48px}
.pkg-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.pkg{position:relative;display:block;cursor:pointer;border-radius:var(--r)}
.pkg input{position:absolute;opacity:0;pointer-events:none}
.pkg .card{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 10px 14px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);box-shadow:var(--e1);transition:border-color .18s,box-shadow .18s,transform .18s,background-color .18s}
.pkg .gw{width:60px;height:50px;display:grid;place-items:center;margin-bottom:6px;border-radius:14px;transition:background-color .2s,box-shadow .2s}
.pkg .amt{font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.1}
.pkg .qty{display:contents}   /* amount, then its unit on the next line (phones and desktop) */
.pkg .unit{font-size:12.5px;color:var(--muted);margin-top:2px}
.pkg .rule{width:100%;height:1px;background:var(--line);margin:12px 0 10px}
.pkg .price{font-size:17px;font-weight:700;color:var(--ink);line-height:1.15}
.pkg .est{font-size:12px;color:var(--muted);margin-top:3px}
.pkg .sp{margin-top:8px;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--good-soft);color:var(--good);font-size:11.5px;font-weight:600;white-space:nowrap}
.pkg:hover .card{border-color:var(--blue-200);transform:translateY(-2px);box-shadow:var(--e2)}
.pkg input:focus-visible + .card{outline:2.5px solid var(--blue);outline-offset:3px}
.pkg input:checked + .card{border:2px solid var(--blue);padding:17.5px 9.5px 13.5px;background:linear-gradient(180deg,var(--blue-50) 0%,#fff 62%);box-shadow:0 0 0 4px var(--ring),var(--e2);transform:none}
.pkg input:checked + .card .gw{background:#fff;box-shadow:0 0 0 1px var(--blue-200),0 8px 16px -10px rgba(7,135,149,.45)}
.pkg input:checked + .card .rule{background:var(--blue-100)}
.pkg input:checked + .card .price{color:var(--blue-deep)}
.pkg input:checked + .card .gm{animation:gem-tap .5s ease-out}
@keyframes gem-tap{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-7deg)}100%{transform:scale(1)}}

/* custom amount: its own module, same selection language as the packages */
.custom{margin-top:16px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto auto;align-items:center;gap:18px 28px;padding:20px 22px;background:#fff;border:1.5px solid var(--line);border-radius:20px;box-shadow:var(--e1);transition:border-color .18s,box-shadow .18s,background-color .18s}
.custom.is-active{border:2px solid var(--blue);padding:19.5px 21.5px;background:linear-gradient(90deg,var(--blue-50),#fff 55%);box-shadow:0 0 0 4px var(--ring),var(--e2)}
html[dir=rtl] .custom.is-active{background:linear-gradient(270deg,var(--blue-50),#fff 55%)}
.cu-text{display:flex;align-items:center;gap:14px;min-width:0}
.cu-gem{position:relative;flex:none;width:60px;height:52px;border-radius:14px;background:var(--blue-50);display:grid;place-items:center}
.cu-gem .plus{position:absolute;inset-inline-end:3px;bottom:3px;width:19px;height:19px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.cu-gem .plus .i{width:11px;height:11px}
.cu-text h3{font-size:17px;font-weight:700;margin:0;line-height:1.25}
.cu-text p{margin:3px 0 0;font-size:13.5px;color:var(--muted);line-height:1.45}
.cu-input{display:flex;align-items:center;gap:10px;height:54px;padding:0 14px;border:1.5px solid var(--line-2);border-radius:14px;background:#fff;transition:border-color .15s,box-shadow .15s;cursor:text}
.cu-input:hover{border-color:var(--blue-300)}
.cu-input:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--ring)}
.cu-input input{flex:1;min-width:0;height:100%;border:0;outline:0;padding:0;font:inherit;font-weight:700;font-size:20px;color:var(--ink);background:transparent;direction:ltr;text-align:left}
html[dir=rtl] .cu-input input{text-align:right}
.cu-input input::placeholder{color:var(--faint);font-weight:500}
.cu-unit{font-size:13.5px;color:var(--muted);white-space:nowrap}
.cu-help{margin:7px 2px 0;font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:0 6px}
.cu-help.warn [data-cu-max]{color:var(--warn);font-weight:600}
.cu-price{text-align:end;line-height:1.2;min-width:112px}
.cu-price .k{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.cu-price b{display:block;font-size:24px;font-weight:700;letter-spacing:-.015em}
.custom.is-active .cu-price b{color:var(--blue-deep)}
.cu-price small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.cu-cta{min-width:148px}
.note{margin:14px 0 0;font-size:13px;color:var(--muted)}

/* sticky selection bar */
.sel-bar{position:fixed;left:50%;bottom:16px;z-index:30;width:min(720px,calc(100% - 32px));transform:translate(-50%,150%);transition:transform .25s ease;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 16px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px -20px rgba(13,26,51,.45)}
html[dir=rtl] .sel-bar{padding:10px 16px 10px 10px}
[data-pkg=yes] .site-footer:not(.compact){padding-bottom:110px}
[data-pkg=yes][data-qrv=no] .sel-bar{transform:translate(-50%,0)}
[data-nav-open] .sel-bar,[data-nav-open] .co-cta-mobile{visibility:hidden}
.sel-bar .t{flex:1;min-width:0;line-height:1.25}
.sel-bar .t b{display:block;font-size:16px}
.sel-bar .t span{font-size:13px;color:var(--muted)}
.sel-bar .btn{min-width:150px}

/* ---------- payment methods ---------- */
.sec-pay{padding-top:24px}
.pay-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.pay-list{display:grid;gap:10px}
.pay-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--e1)}
.pay-row .logo{width:60px;height:46px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden}
.pay-row .logo img{max-width:48px;max-height:30px;object-fit:contain}
.pay-row .logo.wallet img{max-width:42px;max-height:42px}
.pay-row .name{font-weight:600;font-size:15.5px;line-height:1.3}
.pay-row .stat{font-size:13.5px;color:var(--muted)}
.pay-row .link{white-space:nowrap}
.tag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--blue-50);color:var(--blue-ink);white-space:nowrap}
.pay-off{display:flex;justify-content:space-between;align-items:center;gap:14px 20px;flex-wrap:wrap;padding:14px 16px;border:1.5px dashed var(--line-2);border-radius:16px}
.pay-off b{font-size:14.5px;font-weight:600}
.pay-off p{margin:2px 0 0;font-size:13px;color:var(--muted)}
.pay-off .lg{display:flex;flex-wrap:wrap;gap:6px}
.pay-off .lg span{height:32px;padding:0 9px;border-radius:9px;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.pay-off .lg img{max-height:16px;max-width:64px;object-fit:contain}

/* ---------- why BIGO Diamond ---------- */
.sec-why{background:#fff;border-block:1px solid var(--line)}
.why-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.why-intro .lead{font-size:19px;line-height:1.6;color:var(--ink-2)}
.why-art{width:136px;height:auto;margin-top:26px;filter:drop-shadow(0 14px 16px rgba(13,26,51,.14))}
.why-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 36px}
.why-list li{padding-top:20px;border-top:1px solid var(--line)}
.why-list .ic{width:42px;height:42px;border-radius:12px;background:var(--blue-50);color:var(--blue);margin-bottom:14px}
.why-list .ic .i{width:21px;height:21px}
.why-list h3{font-size:17px;font-weight:600;margin:0 0 6px;line-height:1.3}
.why-list p{margin:0;color:var(--muted);font-size:14.5px}

/* ---------- learn: diamonds + BIGO LIVE ---------- */
.sec-learn{background:linear-gradient(180deg,var(--blue-50) 0%,var(--bg) 100%)}
.learn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.learn-grid h2{font-size:26px}
.learn-grid p{margin:10px 0 0;color:var(--ink-2);max-width:60ch}
.learn-art{display:grid;place-items:center;width:84px;height:72px;margin-bottom:16px;border-radius:18px;background:#fff;box-shadow:0 12px 26px -16px rgba(7,135,149,.45)}
.learn-art.live{background:linear-gradient(158deg,var(--azure),var(--blue));color:#fff;box-shadow:var(--e-blue)}
.learn-art.live .i{width:32px;height:32px}
.uses{list-style:none;padding:0;margin:16px 0 4px;display:flex;flex-wrap:wrap;gap:8px}
.uses li{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--blue-100);font-size:14px;font-weight:500;color:var(--ink-2)}
.uses .i{width:17px;height:17px;color:var(--blue)}

/* ---------- business & API ---------- */
.biz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.svc{display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--e2)}
.svc .ic{width:50px;height:50px;border-radius:14px;background:linear-gradient(158deg,var(--azure),var(--blue));color:#fff;box-shadow:var(--e-blue)}
.svc .ic .i{width:24px;height:24px}
.svc h3{font-size:19px;font-weight:700;margin:18px 0 6px}
.svc > p{margin:0;color:var(--muted)}
.svc-cta{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-weight:600;color:var(--blue-deep);text-decoration:none}
.svc-cta .i{width:18px;height:18px;transition:transform .18s}
.svc-cta:hover{text-decoration:underline}
.svc-cta:hover .arr .i{transform:translateX(3px)}
html[dir=rtl] .svc-cta:hover .arr .i{transform:scaleX(-1) translateX(3px)}
.soon{margin-top:16px;padding:20px 24px;border:1.5px dashed var(--blue-200);border-radius:20px;background:linear-gradient(180deg,rgba(237,249,250,.7),rgba(255,255,255,.5))}
.soon-h{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;height:28px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--blue-100);font-size:13px;font-weight:600;color:var(--blue-ink)}
.soon-h .i{width:16px;height:16px}
.soon-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px}
.soon-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.soon-list .ic{width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--blue-100);color:var(--blue)}
.soon-list .ic .i{width:21px;height:21px}
.soon h4{margin:0 0 3px;font-size:15.5px;font-weight:600;line-height:1.3}
.soon p{margin:0;font-size:14px;color:var(--muted)}

/* ---------- final call to action ---------- */
.final{padding:40px 0 80px}
.final-band{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding:48px 52px;border-radius:var(--r-xl);color:#fff;
  background:radial-gradient(45% 90% at 86% 10%,rgba(135,223,219,.7),rgba(135,223,219,0) 70%),linear-gradient(112deg,#03606B 0%,#057B88 55%,#05ABB5 100%);
  box-shadow:0 40px 80px -50px rgba(3,96,107,.8)}
html[dir=rtl] .final-band{background:radial-gradient(45% 90% at 14% 10%,rgba(135,223,219,.7),rgba(135,223,219,0) 70%),linear-gradient(248deg,#03606B 0%,#057B88 55%,#05ABB5 100%)}
.final h2{font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:0 0 12px;color:#fff}
.final p{margin:0 0 26px;max-width:52ch;font-size:16.5px;color:var(--on-blue-2)}
.final-acts{display:flex;flex-wrap:wrap;gap:12px}
.final-dino{width:300px;height:auto;aspect-ratio:1194/1018;margin:-104px -12px -20px 0;filter:drop-shadow(0 18px 22px rgba(2,20,70,.30))}
html[dir=rtl] .final-dino{margin:-104px 0 -20px -12px}

/* ---------- footer ---------- */
.site-footer{background:#fff;border-top:1px solid var(--line);padding:52px 0 26px}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:32px}
.ft-brand p{margin:14px 0 16px;color:var(--muted);font-size:14px;max-width:34ch;text-wrap:balance}
.wa-btn{height:42px;border-radius:12px;font-size:14.5px}
.wa-btn .i{width:18px;height:18px}
.wa-num{margin:8px 2px 0;font-size:13px;color:var(--muted)}
.ft-col h2{margin:4px 0 14px;font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:0}
.ft-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ft-col a,.ft-lang{color:var(--muted);text-decoration:none;font-size:14px}
.ft-col a:hover,.ft-lang:hover{color:var(--blue-deep)}
.ft-langs{display:flex;flex-wrap:wrap;gap:8px 16px}
.ft-langs.col{flex-direction:column;gap:10px}
.ft-lang .ck{display:none}
.ft-lang[aria-current]{color:var(--ink);font-weight:600}
.ft-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap}
.ft-rights{margin:0;font-size:13px;color:var(--muted)}
.ft-pay{display:flex;flex-wrap:wrap;gap:6px}
.ft-market{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:#fff;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:border-color .15s}
.ft-market:hover{border-color:var(--blue-300)}
.ft-market .sep{color:var(--faint)}
.ft-market .ch{color:var(--blue-deep);font-weight:600}
.ft-c-end{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.ft-pay span{height:30px;padding:0 8px;border-radius:8px;border:1px solid var(--line);background:#fff;display:grid;place-items:center}
.ft-pay img{max-height:15px;max-width:54px;object-fit:contain}
.site-footer.compact{padding:24px 0}
.ft-compact{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap}
.ft-c-help{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ft-c-help .wa-num{margin:0}

/* ---------- checkout ---------- */
.page-head{padding:26px 0 6px}
.crumbs{font-size:13.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--blue-deep)}
.crumbs .sl .i{width:14px;height:14px}
html[dir=rtl] .crumbs .sl .i{transform:scaleX(-1)}
.page-head h1{font-size:32px;font-weight:700;margin:6px 0 14px;letter-spacing:-.02em}
.steps{display:flex;gap:10px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.steps li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--muted)}
.steps li + li::before{content:"";width:28px;height:1.5px;background:var(--line-2)}
.steps .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:#fff;border:1.5px solid var(--line-2);color:var(--muted)}
.steps .n .i{width:12px;height:12px}
.steps .done .n{background:var(--good);border-color:var(--good);color:#fff}
.steps .done{color:var(--ink-2)}
.steps .now .n{background:var(--blue);border-color:var(--blue);color:#fff}
.steps .now{color:var(--ink)}
.co-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:28px;align-items:start;padding:18px 0 72px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--e2);padding:24px}
.block + .block{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.block-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:12px}
.block-head h2{font-size:var(--t-h3);font-weight:600;margin:0}
.hint{margin:-4px 0 14px;font-size:13.5px;color:var(--muted)}
.m-group + .m-group{margin-top:18px}
.m-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 8px}
.m-title .ic{display:flex;color:var(--blue)}
.pay-g{display:flex;align-items:center;gap:7px;margin:4px 2px 2px;font-size:13px;font-weight:600;color:var(--muted)}
.pay-g + .pay-row{margin-top:0}
.pay-row + .pay-g{margin-top:12px}
.pay-g .i{width:15px;height:15px;color:var(--blue)}
.pref h3.with-logo{display:flex;align-items:center;gap:8px}
.pref h3.with-logo img{height:16px;width:auto;max-width:44px;object-fit:contain}
.m-title .ic .i{width:15px;height:15px}
/* "How it works": one guided pattern for every provider (same type, spacing and numbering) */
.howto{margin-top:14px}
.howto .ht{margin:0 0 8px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.howto ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.howto li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.howto .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--blue-50);color:var(--blue-ink);font-size:12px;font-weight:700;margin-top:-1px}
.m-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,264px),1fr));gap:10px}
.m-pick > .pm:only-child{grid-column:1/-1}
.pm{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:var(--r)}
.pm input{position:absolute;opacity:0;pointer-events:none}
.pm .card{flex:1 0 auto;display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
.pm .logo{flex:none;width:52px;height:52px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden}
.pm .logo img{max-width:44px;max-height:30px;object-fit:contain}
.pm .logo.wallet img{max-width:46px;max-height:46px}
.pm .body{flex:1;min-width:0}
.pm .name{display:block;font-weight:600;font-size:15px;line-height:1.25}
.pm .stat{font-size:12.5px;color:var(--muted);margin-top:2px}
.pm .tag{margin-top:5px}
.pm .bal{font-size:12.5px;font-weight:600;margin-top:3px}
.pm .bal.ok{color:var(--good)} .pm .bal.short{color:var(--danger)}
.pm .rd{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;align-self:flex-start;background:#fff;color:#fff;transition:background-color .15s,border-color .15s}
.pm .rd .i{width:12px;height:12px;opacity:0}
.pm:hover .card{border-color:var(--blue-200)}
.pm:has(> input:checked){grid-column:1/-1;box-shadow:0 0 0 4px var(--ring)}
.pm input:checked + .card{border:2px solid var(--blue);border-bottom-width:0;padding:13.5px 13.5px 15.5px;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(180deg,var(--blue-50),#fff)}
.pm .more{display:none}
.pm input:checked ~ .more{display:block;border:2px solid var(--blue);border-top:0;border-radius:0 0 var(--r) var(--r);background:#fff;padding:0 16px 16px}
.pm .more h3{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px;padding-top:12px;border-top:1px dashed var(--blue-200)}
.pm .more p{margin:0;font-size:14px;color:var(--ink-2)}
.pm input:checked + .card .rd{background:var(--blue);border-color:var(--blue)}
.pm input:checked + .card .rd .i{opacity:1}
.pm input:focus-visible + .card{outline:2.5px solid var(--blue);outline-offset:2px}
.pm input:disabled + .card{cursor:not-allowed;background:var(--bg)}
.pm input:disabled + .card .logo img{filter:grayscale(1);opacity:.55}
.pm input:disabled + .card .name{color:var(--faint)}
.pm input:disabled + .card .rd{opacity:.4}
.fund{margin-top:8px}
.d-rows{display:grid;gap:6px;font-size:14px}
.d-rows div{display:flex;justify-content:space-between}
.d-rows .k{color:var(--muted)}
.d-rows .tot{padding-top:6px;border-top:1px solid var(--line-2);font-weight:700}
.d-rows .tot.ok{color:var(--good)} .d-rows .tot.short{color:var(--danger)}
.nets{display:flex;gap:8px;margin-top:10px}
.net{position:relative;flex:1}
.net input{position:absolute;opacity:0}
.net span{display:flex;flex-direction:column;align-items:center;padding:10px 8px;border-radius:12px;border:1.5px solid var(--line-2);background:#fff;font-weight:600;font-size:14px;cursor:pointer}
.net small{font-size:11.5px;color:var(--muted);font-weight:500}
.net input:checked + span{border:2px solid var(--blue);padding:9.5px 7.5px;background:var(--blue-50)}
.net input:focus-visible + span{outline:2.5px solid var(--blue);outline-offset:2px}
.offline{margin-top:16px;border-radius:12px;border:1px dashed var(--line-2);background:transparent}
.offline summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:13px;color:var(--muted)}
.offline summary::-webkit-details-marker{display:none}
.offline summary .lg{display:flex;gap:4px;margin-inline-start:auto}
.offline summary .lg img{height:14px;width:auto;max-width:40px;object-fit:contain;filter:grayscale(1);opacity:.45}
.offline summary .chev .i{width:14px;height:14px;transition:transform .2s}
.offline[open] summary .chev .i{transform:rotate(180deg)}
.offline ul{list-style:none;margin:0;padding:0 12px 12px;display:flex;flex-wrap:wrap;gap:6px}
.offline li{font-size:12.5px;color:var(--muted);padding:4px 9px;border-radius:8px;background:var(--bg)}
.trust-line{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding:12px 14px;border-radius:12px;background:var(--good-soft);font-size:13.5px;color:var(--ink-2)}
.trust-line .i{width:18px;height:18px;color:var(--good);margin-top:1px}
.summary{position:sticky;top:88px}
.summary h2{font-size:var(--t-h3);font-weight:600;margin:0 0 6px}
.s-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.s-row .k{color:var(--muted)}
.s-row .v{font-weight:600;text-align:end;display:flex;align-items:center;gap:8px;justify-content:flex-end;min-width:0}
.s-total{display:flex;justify-content:space-between;align-items:flex-end;padding:16px 0 4px}
.s-total .k{font-weight:600}
.s-total .v{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1;text-align:end}
.s-total .x{display:block;text-align:end;font-size:13px;color:var(--muted);margin-top:5px}
.summary .btn{margin-top:16px}
/* long translated labels wrap instead of overflowing; single-line height is unchanged */
.summary .btn,.rx .btn-block,.pm .fund{white-space:normal;height:auto;padding-block:6px;text-align:center;line-height:1.3;max-width:100%;text-wrap:balance}
.summary .btn,.rx .btn-block{min-height:56px} .pm .fund{min-height:38px}
.pay-err{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--danger-soft);border:1px solid var(--danger-edge);color:var(--danger);font-size:13.5px;font-weight:500}
.s-note{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:var(--muted);margin:12px 0 0;text-align:center}
.s-note .i{width:14px;height:14px}
.s-help{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;font-weight:600;text-decoration:none}
.s-help .i{width:17px;height:17px}
.mini-sum,.co-cta-mobile{display:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;max-width:calc(100% - 32px)}

/* ---------- order status ---------- */
.st-page{padding-top:34px;padding-bottom:64px;display:grid;justify-items:center}
.st-card{--tone:var(--blue);--tone-soft:var(--blue-50);width:min(640px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--e3);padding:34px 32px 30px}
.st-card[data-tone=good]{--tone:var(--good);--tone-soft:var(--good-soft)}
.st-card[data-tone=warn]{--tone:var(--warn);--tone-soft:var(--warn-soft)}
.st-card[data-tone=bad]{--tone:var(--danger);--tone-soft:var(--danger-soft)}
.st-card[data-tone=muted]{--tone:var(--muted);--tone-soft:var(--bg-2)}
.st-hero{text-align:center}
.st-icon{width:76px;height:76px;border-radius:50%;display:inline-grid;place-items:center;margin-bottom:16px;background:var(--tone-soft);color:var(--tone)}
.st-icon .i{width:36px;height:36px}
.st-hero h1{font-size:28px;font-weight:700;margin:0 0 8px;letter-spacing:-.02em;line-height:1.2}
.st-hero p{margin:0 auto;max-width:48ch;color:var(--muted)}
.st-track{list-style:none;margin:26px 0 24px;padding:0;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.st-track li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--muted)}
.st-track li + li::before{content:"";width:28px;height:1.5px;background:var(--line-2)}
.st-track .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:#fff;border:1.5px solid var(--line-2)}
.st-track .n .i{width:13px;height:13px}
.st-track .done,.st-track .now,.st-track .warn,.st-track .bad{color:var(--ink)}
.st-track .done .n{background:var(--good);border-color:var(--good);color:#fff}
.st-track .now .n{background:var(--blue);border-color:var(--blue);color:#fff}
.st-track .warn .n{background:var(--warn);border-color:var(--warn);color:#fff}
.st-track .bad .n{background:var(--danger);border-color:var(--danger);color:#fff}
.st-dl{margin:0;border-top:1px solid var(--line)}
.st-dl > div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.st-dl dt{color:var(--muted);flex:none}
.st-dl dd{margin:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;font-weight:600;text-align:end;min-width:0}
.st-dl .who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;min-width:0}
.st-dl .who b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-dl .who .ltr{font-weight:400;font-size:12.5px;color:var(--muted)}
.st-dl .logo{width:40px;height:28px;flex:none;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;background:#fff}
.st-dl .logo img{max-width:34px;max-height:20px;object-fit:contain}
.st-dl .ref{letter-spacing:.02em}
.st-dl .copy{font-size:13px;padding:2px 4px}
.st-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.st-acts .btn{min-width:210px}
.st-help{margin:18px 0 0;text-align:center}
.st-help a{display:inline-flex;align-items:center;gap:8px;max-width:100%;font-weight:600;text-decoration:none;text-align:start}
.st-help .i{width:18px;height:18px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
}
@media (max-width:1100px){
  .nav{display:none}
  .menu-btn{display:grid}
  .ft-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft-brand{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 24px}
  .ft-brand p{margin:0;max-width:none}
  .ft-brand .wa-num{grid-column:3;margin:0;text-align:end}
  .ft-brand .wa-btn{grid-column:3;grid-row:1}
}
@media (max-width:960px){
  .pkg-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .custom{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t t" "f f" "p c"}
  .cu-text{grid-area:t} .cu-field{grid-area:f} .cu-price{grid-area:p;text-align:start} .cu-cta{grid-area:c}
  .pay-grid,.why-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .why-art{display:none}
  .final-dino{width:250px;margin:-84px -8px -16px 0}
  .co-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .summary{position:static;order:-1}
}
@media (max-width:720px){
  .pkg-grid{grid-template-columns:repeat(2,minmax(0,196px));justify-content:center;gap:12px}
  /* phones: a portrait card of its own, the same in both directions: the gem on a soft warm glow, the amount, "diamonds"
     as a quiet caption, a short hairline with room around it, then the price */
  .pkg .card{padding:20px 12px 18px}
  .pkg input:checked + .card{padding:19.5px 11.5px 17.5px}
  .pkg .gw{width:60px;height:52px;margin-bottom:12px;border-radius:16px;background:radial-gradient(closest-side,rgba(255,196,0,.17),rgba(255,196,0,0))}
  .pkg .gw .gm{width:40px;height:auto}
  .pkg .amt{font-size:23px;letter-spacing:-.02em}
  .pkg .unit{margin-top:3px;letter-spacing:.01em}
  .pkg .rule{width:44%;margin:15px auto 13px}
  .pkg .price{font-size:18px;letter-spacing:-.01em}
  .pkg .est{margin-top:4px;font-size:11.5px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px}
  .learn-grid,.biz-grid,.soon-list{grid-template-columns:minmax(0,1fr)}
  .learn-grid{gap:40px}
  /* stacked: text on the deep top of the gradient (contrast), the light azure behind the Dino */
  .final-band,html[dir=rtl] .final-band{grid-template-columns:minmax(0,1fr);padding:36px 28px 0;overflow:hidden;background:radial-gradient(70% 45% at 50% 100%,rgba(135,223,219,.75),rgba(135,223,219,0) 75%),linear-gradient(180deg,#03606B 0%,#057B88 58%,#05ABB5 100%)}
  .final-dino,html[dir=rtl] .final-dino{justify-self:center;width:240px;margin:6px 0 -14px}
}
@media (max-width:640px){
  :root{--t-h2:26px}
  .wrap{padding:0 16px}
  .hdr-row{height:60px;gap:10px}
  .logo img{height:32px}
  .sec{padding:44px 0}
  #packages{padding-top:34px}
  .sec-pay{padding-top:8px}
  .custom{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "f" "p" "c";padding:16px;gap:14px}
  .custom.is-active{padding:15.5px}
  .cu-price{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .cu-price .k{margin:0}
  .cu-price small{flex-basis:100%;text-align:end}
  .cu-cta{width:100%}
  .pay-row{grid-template-columns:auto minmax(0,1fr);padding:12px}
  .pay-row .tag,.pay-row .link{grid-column:2;justify-self:start}
  .why-intro .lead{font-size:17px}
  .why-list{grid-template-columns:minmax(0,1fr);gap:18px}
  .why-list li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;padding-top:16px}
  .why-list .ic{grid-row:span 2;margin:0}
  .learn-grid h2{font-size:22px}
  .soon{padding:18px 16px}
  .final{padding:20px 0 56px}
  .final-band{padding:30px 20px 0;border-radius:24px}
  .final h2{font-size:28px}
  .final p{font-size:15px}
  .final-acts .btn{width:100%;white-space:normal;height:auto;min-height:56px;padding-block:8px;text-align:center;line-height:1.3;text-wrap:balance}
  .site-footer{padding:40px 0 22px}
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .ft-col ul{gap:2px}
  .ft-col a,.ft-langs.col .ft-lang{display:inline-flex;align-items:center;min-height:34px}
  .ft-langs.col{gap:2px}
  .ft-brand{display:block}
  .ft-brand p{margin:12px 0 14px}
  .ft-brand .wa-num{text-align:start;margin-top:8px}
  .ft-bottom{flex-direction:column;align-items:flex-start}
  .sel-bar{bottom:0;width:100%;border-radius:18px 18px 0 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .sel-bar .btn{min-width:0;padding:0 18px}
  .page-head{padding-top:14px}
  .page-head h1{font-size:24px;margin:2px 0 10px}
  .crumbs{display:none}
  .steps .lbl{display:none}
  .steps li + li::before{width:18px}
  .panel{padding:16px;border-radius:18px}
  .m-pick{grid-template-columns:minmax(0,1fr)}
  .pm .card{padding:12px}
  .pm input:checked + .card{padding:11.5px 11.5px 13.5px}
  .pm input:checked ~ .more{padding:0 12px 14px}
  .offline summary .lg{display:none}
  .co-grid{padding-bottom:24px}
  .summary{display:none}
  .mini-sum{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:12px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--e2)}
  .mini-sum .m{flex:1;min-width:0;line-height:1.25}
  .mini-sum .m b{display:block;font-size:16px}
  .mini-sum .m a{font-size:13px;font-weight:600;text-decoration:none}
  .mini-sum .tot{text-align:end;line-height:1.2}
  .mini-sum .tot b{display:block;font-size:19px}
  .mini-sum .tot small{font-size:12px;color:var(--muted)}
  body[data-page=checkout] .site-footer{padding-bottom:112px}
  .co-cta-mobile{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:12px;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -12px 30px -20px rgba(13,26,51,.35)}
  .co-cta-mobile .t{line-height:1.2}
  .co-cta-mobile .t small{display:block;font-size:12px;color:var(--muted)}
  .co-cta-mobile .t b{font-size:20px}
  .co-cta-mobile .btn{flex:1;min-width:0;height:auto;min-height:56px;padding:6px 14px;white-space:normal;line-height:1.25;text-align:center;text-wrap:balance}
  .co-cta-mobile .pay-err{position:absolute;left:12px;right:12px;bottom:calc(100% + 8px);margin:0;box-shadow:0 12px 24px -14px rgba(13,26,51,.45)}
  .ft-compact{flex-direction:column;align-items:flex-start}
  .st-page{padding-top:18px;padding-bottom:40px}
  .st-card{padding:26px 18px 22px;border-radius:20px}
  .st-hero h1{font-size:24px}
  .st-dl > div{font-size:14px}
  .st-acts .btn{width:100%;min-width:0;white-space:normal;height:auto;min-height:56px;padding-block:8px;text-align:center;line-height:1.3;text-wrap:balance}
}
@media (max-width:480px){
  .st-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .st-track li{flex-direction:column;gap:6px;font-size:12.5px;text-align:center}
  .st-track li + li::before{display:none}
}
@media (max-width:374px){
  .pick .in{flex-direction:column;align-items:center;gap:0;padding:9px 6px}
  .pick .amt{font-size:16px}
  .found .nm{white-space:normal}
  .pkg .card{padding:18px 10px 16px}
  .pkg input:checked + .card{padding:17.5px 9.5px 15.5px}
  .pkg .gw{width:54px;height:46px;margin-bottom:10px;border-radius:14px}
  .pkg .gw .gm{width:36px}
  .pkg .amt{font-size:21px}
  .pkg .rule{margin:13px auto 11px}
  .pkg .price{font-size:16.5px}
  .ft-grid{grid-template-columns:minmax(0,1fr)}
}
/* ==========================================================================
   Master pass components (2026-09-30). Same tokens, radii and type as above.
   ========================================================================== */

/* ---------- home: currencies, market, empty market ---------- */
.market .i{width:16px;height:16px;color:var(--blue)}
.ccys{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.cc{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--bg);border:1px solid var(--line);font-size:11px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.pay-market{display:flex;align-items:center;gap:12px;margin-top:22px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--e1);max-width:420px}
.pay-market .flag{width:28px;height:18px}
.pay-market div{flex:1;min-width:0;line-height:1.3}
.pay-market small{display:block;font-size:12.5px;color:var(--muted)}
.pay-market b{font-size:15.5px}
.pay-none{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:16px;background:var(--blue-50);border:1px solid var(--blue-100)}
.pay-none > .ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:#fff;color:var(--blue)}
.pay-none .ic .i{width:21px;height:21px}
.pay-none b{display:block;font-size:15.5px;line-height:1.35}
.pay-none p{margin:4px 0 0;color:var(--muted);font-size:14px}
.pn-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:12px}

/* ---------- floating WhatsApp (home) ---------- */
.wa-fab{position:fixed;inset-inline-end:22px;bottom:22px;z-index:35;display:flex;align-items:center;gap:10px;text-decoration:none;
  opacity:0;transform:translateY(16px) scale(.92);pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),bottom .3s ease}
.wa-fab.is-in{opacity:1;transform:none;pointer-events:auto}
.wa-fab.is-away,.wa-fab.is-typing,.wa-fab.is-clear,[data-nav-open] .wa-fab{opacity:0;transform:translateY(16px) scale(.92);pointer-events:none}
[data-pkg=yes][data-qrv=no] .wa-fab{bottom:104px}
/* a utility, not a second focal point: it waits until the hero's recharge panel is off screen (the hero has its own
   "Help on WhatsApp" line), and steps aside at the footer, while typing and while the menu is open */
[data-qrv=yes] .wa-fab{opacity:0;transform:translateY(16px) scale(.92);pointer-events:none}
.wa-fab-b{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:#0F8A4B;box-shadow:0 0 0 1px rgba(13,26,51,.07),0 12px 26px -14px rgba(13,26,51,.45);transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.wa-fab-b .i{width:26px;height:26px}
.wa-fab-l{order:-1;padding:9px 14px;border-radius:12px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 14px 30px -16px rgba(13,26,51,.6);
  opacity:0;transform:translateX(8px);transition:opacity .2s,transform .2s;pointer-events:none}
html[dir=rtl] .wa-fab-l{transform:translateX(-8px)}
.wa-fab:hover .wa-fab-b,.wa-fab:focus-visible .wa-fab-b{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(13,26,51,.06),0 22px 40px -16px rgba(13,26,51,.5)}
.wa-fab:hover .wa-fab-l,.wa-fab:focus-visible .wa-fab-l{opacity:1;transform:none}
.wa-fab:focus-visible{outline:none}
.wa-fab:focus-visible .wa-fab-b{outline:2.5px solid var(--blue);outline-offset:3px}

/* ---------- checkout: currency, network, what is charged, the hand-off ---------- */
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;max-width:100%;padding:4px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.seg label{position:relative;min-width:0;max-width:100%;flex:1 1 auto}
/* when long names wrap ("Dollar des États-Unis"), each option fills its row, so a stacked option still reads as a button */
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;align-items:center;justify-content:center;text-align:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}
.seg span:hover{color:var(--blue-ink)}
.seg input:checked + span{background:#fff;color:var(--blue-deep);box-shadow:0 1px 2px rgba(13,26,51,.08),0 0 0 1.5px var(--blue)}
.seg input:focus-visible + span{outline:2.5px solid var(--blue);outline-offset:2px}
.wccy{margin-top:12px}
.wccy .k{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--muted)}
.wccy p{margin:8px 0 0;font-size:13px;color:var(--muted)}
.more .sendline{margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.pm .short-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.pm .short-cta small{font-size:12.5px;color:var(--muted)}
.s-row.charge .v{color:var(--blue-deep)}
.handoff{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;background:rgba(13,26,51,.34);backdrop-filter:blur(3px)}
.handoff:not([hidden]){animation:fade-in .2s ease-out}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.ho-card:focus{outline:none}
.ho-card{width:min(420px,100%);padding:28px 26px 24px;border-radius:24px;background:#fff;box-shadow:0 40px 80px -30px rgba(13,26,51,.55);text-align:center}
.ho-card:not([hidden]){animation:pop-open .25s cubic-bezier(.2,.8,.2,1)}
.ho-logos{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:18px}
.ho-logos .me{width:52px;height:52px;border-radius:14px;background:var(--blue-50);display:grid;place-items:center}
.ho-logos .me img{width:40px;height:auto}
.ho-logos .logo{width:64px;height:52px;border-radius:14px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden}
.ho-logos .logo img{max-width:52px;max-height:32px;object-fit:contain}
.ho-logos .logo.wallet img{max-width:46px;max-height:46px}
.ho-dots{display:flex;gap:5px}
.ho-dots i{width:6px;height:6px;border-radius:50%;background:var(--blue-300);animation:dot 1.1s ease-in-out infinite}
.ho-dots i:nth-child(2){animation-delay:.15s}.ho-dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:translateY(-3px)}}
.ho-card h2{margin:0 0 8px;font-size:21px;font-weight:700;letter-spacing:-.01em}
.ho-card p{margin:0 auto;max-width:36ch;color:var(--muted);font-size:14.5px}
.ho-card .ho-lock{display:inline-flex;align-items:center;gap:6px;max-width:none;margin-top:16px;font-size:12.5px;color:var(--muted)}
.ho-card .ho-lock .i{width:14px;height:14px}
[data-handoff-open] body{overflow:hidden}

/* ---------- order status + payment journey ---------- */
.st-dl .net{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:var(--bg);border:1px solid var(--line);font-size:12px;font-weight:600}
.pj-card .st-icon.spin-ic{position:relative}
.pj-card .st-icon.spin-ic::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:3px solid var(--blue-100);border-top-color:var(--blue);animation:spin 1s linear infinite}
.pj-sum{display:flex;align-items:center;gap:14px;margin:24px 0 0;padding:14px 16px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.pj-sum .logo{width:52px;height:40px;flex:none;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden}
.pj-sum .logo img{max-width:42px;max-height:26px;object-fit:contain}
.pj-sum .logo.wallet img{max-width:36px;max-height:36px}
.pj-sum .m{flex:1;min-width:0;line-height:1.35}
.pj-sum .m b{display:block;font-size:15px}
.pj-sum .m small{display:block;font-size:12.5px;color:var(--muted)}
.pj-sum .a{text-align:end;line-height:1.3}
.pj-sum .a small{display:block;font-size:12px;color:var(--muted)}
.pj-sum .skb::before{content:"";display:inline-block;vertical-align:middle;width:7em;max-width:100%;height:.7em;border-radius:6px;background:var(--sk)}
.pj-sum .a .skb::before{width:4.5em}
.pj-sum .a b{font-size:18px}
.pj-slow{margin:14px 0 0;text-align:center;font-size:13.5px}

/* ---------- account pages ---------- */
.acc-page{padding-top:28px;padding-bottom:72px}
.acc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin-bottom:18px}
.acc-head h1{margin:0;font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.acc-head p{margin:6px 0 0;color:var(--muted);font-size:15.5px}
/* one Recharge CTA per screen: the header's above 1100px, this one where the header hides its own */
.acc-head>.btn{display:none}
html[dir=rtl] .acc-head h1{letter-spacing:0}
.acc-tabs{margin:0 0 22px;border-bottom:1px solid var(--line)}
.acc-tabs-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.acc-tabs-in::-webkit-scrollbar{display:none}
.acc-tabs a{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;padding:12px 14px 14px;color:var(--muted);text-decoration:none;font-weight:500;font-size:15px;white-space:nowrap}
.acc-tabs a .i{width:18px;height:18px}
.acc-tabs a:hover{color:var(--ink)}
.acc-tabs a[aria-current]{color:var(--ink);font-weight:600}
.acc-tabs a[aria-current] .i{color:var(--blue)}
.acc-tabs a[aria-current]::after{content:"";position:absolute;inset-inline:10px;bottom:-1px;height:2.5px;border-radius:2px;background:var(--blue)}
.acc-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:20px;align-items:start}
.acc-col{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;min-width:0}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--e2);padding:22px}
.box-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.box-h h2{margin:0;font-size:17px;font-weight:600;display:flex;align-items:center;gap:10px}
.box-h h2 .ic{width:32px;height:32px;border-radius:10px;background:var(--blue-50);color:var(--blue)}
.box-h h2 .ic .i{width:17px;height:17px}
.box-h .link{font-size:14px;white-space:nowrap}
.box-sub{margin:-8px 0 14px;font-size:13.5px;color:var(--muted)}

.profile{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.profile .av{width:64px;height:64px;font-size:26px;box-shadow:0 10px 22px -12px rgba(7,135,149,.6)}
.profile .who{flex:1;min-width:0}
.profile h2{margin:0;font-size:21px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.profile .meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;font-size:13.5px;color:var(--muted)}
.idchip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;max-width:100%;margin-top:10px;min-height:34px;padding:3px 6px 3px 12px;border-radius:18px;background:var(--bg);border:1px solid var(--line);font-size:13px}
html[dir=rtl] .idchip{padding:0 12px 0 6px}
.idchip .k{color:var(--muted)}
.idchip b{font-weight:700;letter-spacing:.02em}
.copybtn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font:inherit;font-size:12.5px;font-weight:600;color:var(--blue-deep);cursor:pointer}
.copybtn .i{width:14px;height:14px}
.copybtn.is-done{border-color:var(--good-edge);color:var(--good);background:var(--good-soft)}
.dealer{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--gem-soft);border:1px solid var(--gem-edge);color:#7A5600;font-size:12.5px;font-weight:600}
.dealer .gm{width:16px;height:auto}
.profile .acts{display:flex;gap:8px}
.dealer-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.dealer-line .box-sub{margin:0}

.wallet-card{position:relative;overflow:hidden;color:#fff;border:0;
  background:radial-gradient(60% 120% at 100% 0%,rgba(135,223,219,.55),rgba(135,223,219,0) 70%),linear-gradient(135deg,#03606B 0%,#057B88 60%,#0699A5 100%);
  box-shadow:0 30px 60px -36px rgba(3,96,107,.8)}
html[dir=rtl] .wallet-card{background:radial-gradient(60% 120% at 0% 0%,rgba(135,223,219,.55),rgba(135,223,219,0) 70%),linear-gradient(225deg,#03606B 0%,#057B88 60%,#0699A5 100%)}
.wallet-card .wc-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.wallet-card .lbl{font-size:14px;color:var(--on-blue-2)}
.wallet-card .bal{margin:6px 0 2px;font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.wallet-card .est{font-size:14px;color:var(--on-blue-2)}
.wallet-card .d{margin:14px 0 0;font-size:14px;color:var(--on-blue-2);max-width:40ch}
.wallet-card .wc-art{width:118px;height:auto;aspect-ratio:1164/1167;margin:-14px -8px -14px 0;filter:drop-shadow(0 12px 16px rgba(2,20,70,.30))}
html[dir=rtl] .wallet-card .wc-art{margin:-14px 0 -14px -8px}
.wallet-card .wc-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.wallet-card .btn{height:44px}

.recips{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px}
.recip{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.recip:hover{border-color:var(--blue-200);box-shadow:var(--e2);transform:translateY(-1px)}
.recip .av{width:40px;height:40px;font-size:16px}
.recip .t{flex:1;min-width:0;line-height:1.3}
.recip .t b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recip .t small{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recip .go{flex:none;display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px;border-radius:999px;background:var(--blue-50);font-size:13px;font-weight:600;color:var(--blue-deep)}
.recip .go .i{width:15px;height:15px}
.empty-note{margin:0;padding:14px;border-radius:14px;background:var(--bg);border:1px dashed var(--line-2);font-size:14px;color:var(--muted)}

/* order and wallet rows (account overview, orders page, wallet activity) */
.rows{list-style:none;margin:0;padding:0;display:grid}
.orow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 4px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;border-radius:12px;transition:background-color .15s}
.rows li:first-child .orow{border-top:0}
.orow:hover{background:var(--blue-50)}
.orow .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--tone-soft,var(--blue-50));color:var(--tone,var(--blue))}
.orow .ic .i{width:19px;height:19px}
.orow .ic .gm{width:24px;height:auto}
.orow .t{min-width:0;line-height:1.35}
.orow .t b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px}
.orow .t small{display:block;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orow .e{text-align:end;line-height:1.35}
.orow .e b{display:block;font-size:15px}
.orow .e small{display:block;font-size:12.5px;color:var(--muted)}
.orow .e .plus{color:var(--good)}
.orow[data-tone=good],.pill[data-tone=good]{--tone:var(--good);--tone-soft:var(--good-soft)}
.orow[data-tone=warn],.pill[data-tone=warn]{--tone:var(--warn);--tone-soft:var(--warn-soft)}
.orow[data-tone=bad],.pill[data-tone=bad]{--tone:var(--danger);--tone-soft:var(--danger-soft)}
.orow[data-tone=muted],.pill[data-tone=muted]{--tone:var(--muted);--tone-soft:var(--bg-2)}
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;background:var(--tone-soft,var(--blue-50));color:var(--tone,var(--blue-ink));font-size:12px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* preferences */
.prefs{display:grid;gap:0}
.pref{padding:16px 0;border-top:1px solid var(--line)}
.pref:first-child{padding-top:2px;border-top:0}
.pref h3{margin:0 0 4px;font-size:14.5px;font-weight:600}
.pref p{margin:0 0 10px;font-size:13.5px;color:var(--muted)}
.pref .cur{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pref .cur .flag{width:26px;height:17px}
.pref .cur b{font-size:15px}
.pref .cur small{flex-basis:100%;font-size:12.5px;color:var(--muted)}
.pref .dev{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--faint)}
.pref .dev .i{width:13px;height:13px}
.pref .ph-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.pref .lp-langs{padding:0}

.side-card p{margin:0 0 14px;font-size:14px;color:var(--muted)}
.side-card .btn{width:100%}
.box .btn,.bal-strip .btn,.si-opts .btn,.pn-acts .btn,.wc-acts .btn{white-space:normal;height:auto;min-height:44px;padding-block:8px;text-align:center;line-height:1.3}
.side-card .btn + .btn{margin-top:8px}
.side-card .num{display:block;margin-top:10px;text-align:center;font-size:13px;color:var(--muted)}

/* orders + wallet activity toolbars */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip > span{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 8px 0 14px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:border-color .15s,background-color .15s,color .15s}
html[dir=rtl] .chip > span{padding:0 14px 0 8px}
.chip > span:hover{border-color:var(--blue-300)}
.chip input:checked + span{border-color:var(--blue);background:var(--blue-50);color:var(--blue-deep);font-weight:600}
.chip input:focus-visible + span{outline:2.5px solid var(--blue);outline-offset:2px}
.chip .n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bg);font-size:11.5px;font-weight:700;color:var(--muted)}
.chip input:checked + span .n{background:#fff;color:var(--blue-deep)}
.search{display:flex;align-items:center;gap:8px;height:42px;min-width:min(100%,300px);padding:0 14px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;color:var(--muted);transition:border-color .15s,box-shadow .15s}
.search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
.search .i{width:17px;height:17px}
.search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:inherit;font-size:14.5px;color:var(--ink)}
.search input::placeholder{color:var(--faint)}
/* where the filters and the search only sometimes fit on one line (it depends on the language), the search always takes
   its own line: the layout does not change when the labels arrive */
@media (min-width:721px) and (max-width:1179px){.toolbar .search{flex:1 1 100%}}
.count{margin:10px 2px 4px;font-size:13px;color:var(--muted)}
.more-row{display:flex;justify-content:center;margin-top:14px}
.empty{display:grid;justify-items:center;gap:8px;padding:44px 20px 40px;text-align:center}
.empty img{width:120px;height:auto;margin-bottom:8px;filter:drop-shadow(0 12px 14px rgba(13,26,51,.14))}
.empty b{font-size:17px}
.empty p{margin:0 0 8px;color:var(--muted);max-width:36ch}

.bal-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 18px;margin-bottom:18px;border-radius:18px;background:var(--blue-50);border:1px solid var(--blue-100)}
.bal-strip .k{font-size:13.5px;color:var(--muted)}
.bal-strip b{display:block;font-size:26px;letter-spacing:-.01em}
@media (max-width:480px){.bal-strip{flex-direction:column;align-items:flex-start}}   /* phones: the badge sits under the balance in every language */

/* add funds */
.dep-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:dep}
.dep-steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.dep-steps li:first-child{border-top:0;padding-top:4px}
.dep-steps .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:700}
.dep-steps h3{margin:4px 0 4px;font-size:15.5px;font-weight:600}
.dep-steps p{margin:0;font-size:14px;color:var(--muted)}
.soon-badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--blue-100);font-size:13px;font-weight:600;color:var(--blue-ink)}
.soon-badge .i{width:15px;height:15px}
.where{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--bg);font-size:13.5px;color:var(--ink-2)}
.where .i{width:18px;height:18px;color:var(--blue);margin-top:1px}
.where.warn{background:var(--warn-soft);border:1px solid var(--warn-edge)}
.where.warn .i{color:var(--warn)}

/* ---------- sign-in ---------- */
.si-page{padding-top:40px;padding-bottom:72px;display:grid;justify-items:center}
.si-card{width:min(460px,100%);padding:32px 30px 26px;border-radius:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--e3);text-align:center}
.si-art{width:118px;height:auto;margin:-4px auto 8px;filter:drop-shadow(0 14px 16px rgba(13,26,51,.16))}
.si-card h1{margin:0 0 6px;font-size:28px;font-weight:700;letter-spacing:-.02em}
.si-card > p{margin:0 auto 22px;max-width:34ch;color:var(--muted)}
.si-opts{display:grid;gap:10px;text-align:start}
.si-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:10px 16px;border-radius:14px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);font:inherit;font-weight:600;font-size:15.5px;text-decoration:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.si-opt .i{width:22px;height:22px}
.si-opt .x{margin-inline-start:auto;font-size:12.5px;font-weight:500;color:var(--muted)}
.si-opt:hover{border-color:var(--blue-300);box-shadow:var(--e1)}
.si-opt.primary{border-color:var(--blue);box-shadow:0 0 0 3px var(--ring)}
.si-opt[aria-disabled=true]{cursor:not-allowed;background:var(--bg);color:var(--faint);border-style:dashed}
.si-opt[aria-disabled=true] .i{opacity:.55}
.si-note{margin:10px 0 0;font-size:12.5px;color:var(--muted);text-align:center}
.si-foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.stg-box{width:min(460px,100%);margin-top:16px;padding:16px 18px;border-radius:18px;background:#111;color:#fff;font:13px/1.45 system-ui,sans-serif;text-align:start}
.stg-box b.tag{display:inline-block;background:#FFC21A;color:#111;padding:1px 7px;border-radius:5px;font-size:12px;margin-bottom:8px}
.stg-box p{margin:0 0 10px;color:#ddd}
.stg-box .u{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin-top:8px;border-radius:12px;background:#1f1f1f;color:#fff;text-decoration:none;border:1px solid #333}
.stg-box .u:hover{border-color:#FFC21A}
.stg-box .u small{color:#bbb}

/* ---------- API documentation ---------- */
.api-hero{padding:44px 0 26px;background:radial-gradient(640px 320px at 85% 0%,rgba(12,181,187,.14),rgba(12,181,187,0) 70%)}
.api-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}
.api-hero h1{margin:0 0 10px;font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
html[dir=rtl] .api-hero h1{letter-spacing:0;line-height:1.25}
.api-hero p{margin:0;max-width:52ch;font-size:17px;color:var(--muted)}
.api-hero .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
@media (max-width:480px){.api-hero .acts .btn.btn-lg{flex:1 1 100%}}   /* phones: the two actions stack in every language */
.api-hero .code-mark{width:132px;height:132px;border-radius:32px;display:grid;place-items:center;background:linear-gradient(158deg,var(--azure),var(--blue));color:#fff;box-shadow:var(--e-blue)}
.api-hero .code-mark .i{width:60px;height:60px;stroke-width:1.5}
.api-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start;padding-bottom:72px}
.api-sec{margin-bottom:20px}
.api-sec h2{margin:0 0 8px;font-size:21px;font-weight:700}
.api-sec > p{margin:0 0 12px;color:var(--ink-2)}
.fields{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.fields li{display:flex;gap:10px;align-items:baseline;font-size:14.5px}
.fields code{flex:none}
.fields li{flex-wrap:wrap}
.fields li > span,.notes li > span{min-width:0;overflow-wrap:anywhere}
code,.code{font-family:ui-monospace,SFMono-Regular,"Cascadia Code",Consolas,monospace}
p code,li code,.fields code{padding:2px 7px;border-radius:7px;background:var(--bg);border:1px solid var(--line);font-size:13px;color:var(--blue-ink);direction:ltr;unicode-bidi:isolate}
.endpoint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:14px;background:#0D1A33;color:#E2F1F2;font-size:13.5px;direction:ltr}
.endpoint .verb{padding:2px 8px;border-radius:6px;background:#12B981;color:#052E1F;font-weight:700;font-size:12px}
.endpoint code{overflow-wrap:anywhere}
.code-block{position:relative;margin:10px 0 0;border-radius:16px;background:#0D1A33;color:#E2F1F2;overflow:hidden}
.code-block .cb-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12.5px;color:#9FB2CC}
.code-block .cb-h .copybtn{background:transparent;border-color:rgba(255,255,255,.2);color:#E2F1F2}
.code-block pre{margin:0;padding:14px 16px;overflow:auto;font-size:13px;line-height:1.6;direction:ltr;text-align:left}
.code-block pre:focus-visible{outline:2.5px solid var(--azure);outline-offset:-3px;border-radius:12px}
.code-block .k{color:#87DFDB}.code-block .s{color:#B5F0C7}.code-block .n{color:#FFD447}.code-block .c{color:#7F93B0}
.notes{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.notes li{display:flex;gap:10px;font-size:14.5px}
.notes .i{width:18px;height:18px;color:var(--blue);margin-top:2px}
.try .row{display:flex;gap:8px}
.try .input{height:48px}
.try .status{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:13px;color:var(--muted)}
.try .status .dot{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.try .status.ok .dot{background:var(--good)}
.try .status.err .dot{background:var(--danger)}
.try .status.busy .dot{background:var(--blue);animation:dot 1s ease-in-out infinite}
.try .note{margin-top:12px;font-size:12.5px}
.try pre{min-height:120px}

/* ---------- responsive: new components ---------- */
@media (max-width:1100px){
  .locale .cn{max-width:110px}
  .hdr-cta{display:none}
  .acc-head>.btn{display:inline-flex}
  .acc-grid{grid-template-columns:minmax(0,1fr)}
  .api-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  .api-hero .code-mark{display:none}
  .api-hero .wrap{grid-template-columns:minmax(0,1fr)}
  .api-hero h1{font-size:36px}
}
@media (max-width:640px){
  .hdr-end{gap:6px}
  .hdr-end .signin{display:none}
  .icon-btn.acct-guest{display:grid}
  .locale{height:40px;padding:0 8px;gap:6px}
  .locale .cn,.locale .div{display:none}
  .acct-btn{height:40px;padding:0 4px}
  .acct-btn .chev{display:none}
  .acct-btn .av{width:32px;height:32px;font-size:14px}
  .icon-btn{width:40px;height:40px}
  .pop{position:fixed;top:66px;inset-inline:10px;width:auto;max-height:calc(100vh - 84px);overflow:auto}
  .ntf-pop{width:auto}
  .wa-fab{inset-inline-end:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
  [data-pkg=yes][data-qrv=no] .wa-fab{bottom:calc(96px + env(safe-area-inset-bottom))}
  .wa-fab-b{width:48px;height:48px}
  .wa-fab-b .i{width:24px;height:24px}
  .wa-fab-l{display:none}
  .acc-page{padding-top:18px;padding-bottom:48px}
  .acc-head h1{font-size:26px}
  .acc-head>.btn{display:none}
  .box{padding:16px;border-radius:18px}
  .wallet-card .bal{font-size:34px}
  .wallet-card .wc-art{width:76px}
  .wallet-card .wc-acts .btn{flex:1 1 140px}
  .profile .acts{width:100%}
  .profile .acts .btn{flex:1}
  .orow{grid-template-columns:36px minmax(0,1fr) auto;gap:12px;padding:12px 2px}
  .orow .ic{width:36px;height:36px}
  .toolbar{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .search{min-width:0}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .si-page{padding-top:18px;padding-bottom:40px}
  .si-card{padding:24px 18px 20px;border-radius:22px}
  .api-hero{padding:26px 0 16px}
  .api-hero h1{font-size:30px}
  .api-hero .acts .btn{flex:1 1 auto;white-space:normal;height:auto;min-height:56px;padding-block:8px;text-align:center;line-height:1.3}
  .try .row{flex-direction:column}
  .pay-market{max-width:none}
  .ho-card{padding:24px 18px 20px}
}
@media (max-width:374px){
  .locale .lc{display:none}
  .wallet-card .wc-art{display:none}
}
@media (min-width:641px){ .icon-btn.acct-guest{display:none} }


/* ==========================================================================
   Final pass (2026-10-01): skeletons, live order status, the settings list,
   a method the chosen country does not offer, the hand-off amount.
   ========================================================================== */

/* ---------- skeletons ----------
   A placeholder has the shape of what it stands in for: the same card, bars where its lines will be, a circle where
   the avatar will be. One neutral surface and one slow light sweep; still under reduced motion; replaced by the content
   itself, so it never keeps running behind real content. */
:root{--sk:#E1EDEE;--sk-hi:#F7FAFD}
.sk{display:block;flex:none;max-width:100%;border-radius:7px;
  background:linear-gradient(100deg,rgba(248,251,254,0) 30%,var(--sk-hi) 50%,rgba(248,251,254,0) 70%) 130% 0/240% 100% no-repeat,var(--sk);
  animation:sk 1.6s cubic-bezier(.4,0,.2,1) infinite}
html[dir=rtl] .sk{animation-name:sk-rtl}
@keyframes sk{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes sk-rtl{from{background-position:-30% 0}to{background-position:130% 0}}
.sk-t{flex:1;min-width:0;display:flex;flex-direction:column}
.sk-pkg,.sk-pm,.sk-row,.sk-orow,.sk-recip{pointer-events:none;cursor:default}
/* the account being found (hero) */
.sk-acct .sk-t{gap:8px}
.sk-acct .sk-av{width:44px;height:44px;border-radius:50%}
.sk-acct .sk-l1{width:min(150px,64%);height:13px}
.sk-acct .sk-l2{width:min(104px,46%);height:10px}
.sk-acct .sk-pill{width:96px;height:22px;border-radius:999px}
/* a package card */
.sk-pkg .card{box-shadow:none}
.sk-pick{pointer-events:none}
.sk-pick .skb::before{content:"";display:inline-block;vertical-align:middle;width:3.4em;height:.7em;border-radius:6px;background:var(--sk)}
.sk-pick .pr .skb::before{width:4em}
.sk-pkg .sk-gem{width:40px;height:36px;border-radius:11px}
.sk-pkg .sk-amt{width:54px;height:17px;margin:3.6px 0}
.sk-pkg .sk-unit{width:46px;height:9px;margin:7.2px 0 5.2px}
.sk-pkg .sk-price{width:60px;height:14px;margin:2.8px 0}
/* a payment method (checkout card, home row) */
.sk-logo{width:52px;height:52px;border-radius:12px}
.sk-pm .sk-l1{width:min(132px,70%);height:13px;margin:3px 0 4px}
.sk-pm .sk-l2{width:min(176px,86%);height:10px;margin:6px 0 5px}
.sk-pm .sk-l3{width:78px;height:20px;border-radius:6px;margin-top:8px}
.sk-rd{width:22px;height:22px;border-radius:50%;align-self:flex-start}
.pay-row.sk-row .sk-logo{width:60px;height:46px}
.sk-row .sk-l1{width:min(150px,62%);height:13px;margin:3.5px 0}
.sk-row .sk-l2{width:min(210px,82%);height:10px;margin:5.5px 0 3.5px}
.sk-tag{width:98px;height:22px;border-radius:999px}
/* an order or wallet row, a recent BIGO account */
.sk-orow .sk-ic{width:40px;height:40px;border-radius:12px}
.sk-orow .sk-e{display:flex;flex-direction:column;align-items:flex-end}
.sk-orow .sk-t .sk-l1{width:min(170px,72%);height:12px;margin:6px 0 7px}
.sk-orow .sk-t .sk-l2{width:min(230px,92%);height:9px;margin:4px 0}
.sk-orow .sk-e .sk-l1{width:58px;height:12px;margin:4px 0 7px}
.sk-orow .sk-e .sk-l2{width:70px;height:9px;margin:4px 0}
.sk-recip .sk-t{gap:7px}
.sk-recip .sk-av{width:40px;height:40px;border-radius:50%}
.sk-recip .sk-l1{width:min(120px,72%);height:11px}
.sk-recip .sk-l2{width:min(72px,46%);height:9px}
.sk-go{width:86px;height:30px;border-radius:999px}
@media (max-width:720px){
  .sk-pkg .gw{background:none}
  .sk-pkg .sk-gem{width:40px;height:34px;border-radius:11px}
  .sk-pkg .sk-amt{width:56px;height:16px;margin:4.65px 0}
  .sk-pkg .sk-price{width:60px;height:14px;margin:3.35px 0}
}
@media (max-width:640px){
  .sk-row .sk-tag{grid-column:2;justify-self:start}
  .sk-orow .sk-ic{width:36px;height:36px}
}
@media (max-width:400px){ .sk-acct .sk-pill{width:24px;height:24px;border-radius:50%} }
/* narrow phones: a recent account keeps its name; its "Recharge" pill keeps the arrow (the whole row is the link) */
@media (max-width:374px){
  .recip .go{padding:0 9px}
  .recip .go > :not(.arr){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sk-go{width:34px}
}

/* labels the page script has not written yet (a slow connection) show as bars, drawn INSIDE the line box the text
   will take (a ::before bar on an empty element keeps its real line height), so nothing moves when the words arrive.
   Multi-line blocks reserve their usual number of lines. The closing #bd-end script marks the page ready. */
html:not(.bd-ready) :is([data-t],[data-th],[data-b],[data-pv],[data-usd],[data-st-title],[data-st-desc],[data-pj-title],[data-pj-desc],[data-pk-lead],[data-acc-hi],[data-cu-max],[data-ccy-note],[data-nick]):empty::before{
  content:"";display:inline-block;vertical-align:middle;width:min(var(--skw,5.5em),calc(100vw - 32px));max-width:100%;height:.7em;border-radius:6px;background:var(--sk)}   /* never wider than a phone */
html:not(.bd-ready) :is(h1,h2,h3,p,div,label):empty{--skw:12em}
html:not(.bd-ready) .wallet-card :empty::before{background:rgba(255,255,255,.22)}
html:not(.bd-ready) .hero h1:empty{min-height:calc(var(--t-hero) * 2.12)}
html:not(.bd-ready) .hero h1:empty::before{width:min(9em,86%);height:calc(var(--t-hero) * 1.95);vertical-align:top;margin-top:calc(var(--t-hero) * .12);background:repeating-linear-gradient(180deg,var(--sk) 0 .72em,transparent .72em 1.06em)}
html:not(.bd-ready) .hero-lead:empty{min-height:3.1em}
html:not(.bd-ready) .hero-lead:empty::before{width:min(24em,92%);height:2.6em;vertical-align:top;margin-top:.4em;background:repeating-linear-gradient(180deg,var(--sk) 0 .7em,transparent .7em 1.55em)}
html:not(.bd-ready) :is(.st-hero p,.pj-card .st-hero p,.sec-head p):empty{min-height:3.1em}
html:not(.bd-ready) .acc-head p:empty{min-height:3.1em}
/* account pages: the lead is one line from tablet up, two on phones; the order count is one line */
@media (min-width:721px){html:not(.bd-ready) .acc-head p:empty{min-height:1.55em;min-height:1lh}}
html:not(.bd-ready) .count:empty{min-height:20px;min-height:1lh}
/* the small avatar beside a BIGO account (checkout summary, order status): its shape, on the same baseline as the drawn one */
html:not(.bd-ready) [data-avatar-s]:empty::before{content:"";display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--sk)}
/* order status + payment journey: the progress track, and the actions the screen will offer (one row on desktop, one
   per row on phones) */
html:not(.bd-ready) .st-track:empty{min-height:26px}
@media (max-width:480px){html:not(.bd-ready) .st-track:empty{min-height:51px}}
html:not(.bd-ready) .st-card .st-acts:empty{min-height:calc(min(var(--n,0),1) * 56px)}
@media (max-width:640px){html:not(.bd-ready) .st-card .st-acts:empty{min-height:calc(var(--n,0) * 66px - min(var(--n,0),1) * 10px)}}
html:not(.bd-ready) body[data-page=account] .acc-head p:empty{min-height:1.55em;min-height:1lh}   /* the greeting: one line everywhere */
html:not(.bd-ready) .wallet-card .d:empty{min-height:4.65em;min-height:3lh}   /* the wallet's description: three lines */
/* API page: a two-line lead (three on phones); the Arabic title takes two lines on phones */
html:not(.bd-ready) .api-hero p:empty{min-height:3.1em;min-height:2lh}
@media (max-width:480px){html:not(.bd-ready) .api-hero p:empty{min-height:4.65em;min-height:3lh}html[lang=ar]:not(.bd-ready) .api-hero h1:empty{min-height:2lh}}
@media (max-width:640px){
  html:not(.bd-ready) .hero h1:empty{min-height:calc(var(--t-hero) * 3.18)}
  html:not(.bd-ready) .hero h1:empty::before{height:calc(var(--t-hero) * 3.0)}
  html:not(.bd-ready) .hero-lead:empty{min-height:4.65em}
  html:not(.bd-ready) .hero-lead:empty::before{height:4.15em}
  html:not(.bd-ready) .st-hero h1:empty{min-height:2.4em}
  html:not(.bd-ready) :is(.st-hero p,.sec-head p):empty{min-height:4.65em}
}

/* ---------- home: the custom amount before there is one ---------- */
.cu-price b.is-empty::before{content:"—";color:var(--line-2);font-weight:500}

/* ---------- hero, phones: the found moment also warms the light around the Dino ---------- */
.hh-aura::after{content:"";position:absolute;inset:14% 18%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,206,72,.42),rgba(255,214,90,0));opacity:0}
.hero[data-found] .hh-aura::after{animation:em-lit .7s cubic-bezier(.3,.6,.3,1) both}

/* ---------- checkout: a method the chosen country does not offer; the hand-off ---------- */
.m-gone{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:var(--warn-soft);border:1px solid var(--warn-edge);font-size:14px;font-weight:500;color:var(--ink-2)}
.m-gone .i{width:18px;height:18px;margin-top:1px;color:var(--warn)}
.ho-card .ho-amt{max-width:none;margin:2px 0 10px;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.ho-card .ho-keep{margin-top:14px;font-size:12.5px;color:var(--faint)}
html[dir=rtl] .ho-card .ho-amt{letter-spacing:0}

/* ---------- order status: the page checks for a change by itself ---------- */
.st-hero .st-live{display:inline-flex;align-items:center;gap:8px;max-width:none;margin-top:14px;padding:5px 12px 5px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--muted)}
.st-live .dot{width:7px;height:7px;border-radius:50%;background:var(--tone)}
.st-live.is-asking .dot{animation:live-ping .9s ease-out}
@keyframes live-ping{0%{box-shadow:0 0 0 0 rgba(7,135,149,.4)}100%{box-shadow:0 0 0 7px rgba(7,135,149,0)}}

/* ---------- account: one settings list; each row says its current value and opens to change it ---------- */
details.pref{padding:0;border-top:1px solid var(--line)}
details.pref:first-child{padding:0;border-top:0}
.pref summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px 12px;min-height:56px;padding:10px 2px;list-style:none;cursor:pointer;border-radius:10px}
.pref summary::-webkit-details-marker{display:none}
.pref summary:hover .pk{color:var(--blue-ink)}
.pref .pk{display:flex;align-items:center;gap:8px;min-width:0;font-size:14.5px;font-weight:600;color:var(--ink);transition:color .15s}
.pref .pk img{height:16px;width:auto;max-width:44px;object-fit:contain}
.pref .pv{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;font-size:14px;font-weight:500;color:var(--ink-2);text-align:end}
.pref .pv b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pref .pv .flag{width:22px;height:14px}
.pref[open] > summary .chev .i{transform:rotate(180deg)}
.pref-in{padding:0 2px 16px}
.pref-in > p{margin:0 0 10px}
.pref-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.more-toggle{margin-top:10px;font-size:14px}
@media (min-width:641px){ .more-toggle{display:none} }
@media (max-width:640px){
  .recips.is-capped .recip:nth-child(n+4),.box-orders .rows li:nth-child(n+4){display:none}
  .profile .acts{flex-basis:100%;display:flex;justify-content:flex-end;margin-top:-4px}
  .profile .acts .btn{flex:none;height:36px;padding:0 12px;font-size:13.5px}
}
@media (max-width:400px){
  .wallet-card .wc-acts .btn{flex-basis:100%}
  .pref summary{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k c" "v c"}
  .pref .pk{grid-area:k} .pref .chev{grid-area:c}
  .pref .pv{grid-area:v;justify-content:flex-start;text-align:start}
}

@media (min-width:1101px){.m-nav{display:none!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* the "Show all" line under the recent accounts, while they load (phones only, like the real one) */
.sk-more{display:block;width:max-content;height:30px;padding-top:9.5px}
.sk-more .sk{width:96px;height:11px}

/* ---------- Phase 1 (2026-10-08): recipient picture, staging test label, custom-amount limit, undetected country ---------- */
/* the picture covers the initial at the same size; if it never loads (onerror removes it) the initial stays */
.av-pic{position:relative;display:inline-block;flex:none;line-height:0;border-radius:50%;overflow:hidden;vertical-align:middle}
.av-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;background:#fff}
.test-tag{display:inline-block;margin-inline-start:8px;padding:0 7px;border-radius:999px;background:#FFF4D6;color:#6E4A00;border:1px solid #EFD38A;font-size:11.5px;font-weight:600;line-height:1.6;white-space:nowrap;vertical-align:1px}
.test-tag[hidden]{display:none}
.cu-help .cu-err-ic{display:inline-flex;align-items:center;color:var(--danger)}
.cu-help .cu-err-ic[hidden]{display:none}
.cu-help .cu-err-ic .i{width:15px;height:15px}
.cu-help.is-err{color:var(--danger);font-weight:600;flex-wrap:nowrap;align-items:flex-start}
.cu-help.is-err [data-cu-max]{min-width:0}
.cu-help.is-err .cu-err-ic{margin-top:2px;flex:none}
.cu-input:has(input[aria-invalid=true]){border-color:var(--danger)}
.cu-input:has(input[aria-invalid=true]):focus-within{box-shadow:0 0 0 4px var(--danger-soft)}
.mk-undet{display:flex;align-items:flex-start;flex-wrap:wrap;gap:4px 8px;margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#FFF8E6;border:1px solid #F2DDA2;color:var(--ink-2);font-size:13.5px;line-height:1.5}
.mk-undet[hidden]{display:none}
.mk-undet .ic{display:inline-flex;color:#8A5300;margin-top:2px}
.mk-undet .ic .i{width:16px;height:16px}
.mk-undet > span:not(.ic){flex:1 1 220px;min-width:0}
.mk-undet .link{padding:0;font-size:13.5px}
.locale .undet{flex:none;width:7px;height:7px;border-radius:50%;background:#E7A400;box-shadow:0 0 0 2px #fff;margin-inline-start:-4px}

/* ---------- Phase 2 (2026-10-09): saved accounts, one amount picker, sign-in summary, checkout step labels ---------- */
.rx [hidden],.si-sum [hidden]{display:none!important}
/* saved accounts: chips above the BIGO ID field (choose = the normal lookup); Edit shows the remove buttons */
.sv{margin:0 0 14px}
.sv-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin-bottom:8px}
.sv-t{font-size:13px;font-weight:600;color:var(--ink-2)}
.sv-where{font-size:12.5px;color:var(--muted)}
.sv-edit{margin-inline-start:auto;font-size:13px;padding:8px 2px;min-height:32px}
.sv-list{display:flex;gap:8px;list-style:none;margin:0;padding:2px 2px 6px;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}
.sv-list li{position:relative;flex:none;display:flex}
.sv-chip{display:flex;align-items:center;gap:8px;min-height:48px;max-width:220px;padding:6px 14px 6px 8px;border:1.5px solid var(--line);border-radius:14px;background:#fff;font:inherit;color:var(--ink);text-align:start;cursor:pointer;transition:border-color .15s,background-color .15s}
.sv-chip:hover{border-color:var(--blue-200)}
.sv-chip:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px}
.sv-chip[aria-pressed=true]{border-color:var(--blue);background:var(--blue-50)}
.sv-tx{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.sv-tx b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.sv-tx small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.sv.is-edit .sv-chip{padding-inline-end:44px}
.sv-x{position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--danger);cursor:pointer}
.sv-x:hover{background:var(--danger-soft)}
.sv-x:focus-visible{outline:2.5px solid var(--danger);outline-offset:-2px}
.sv-x .i{width:16px;height:16px}
/* save the found account: one line under the account preview */
.rx-save{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:8px;font-size:13.5px;color:var(--ink-2)}
.rx-save .q{flex:1 1 200px;min-width:0}
.sv-save{display:inline-flex;align-items:center;gap:6px;min-height:40px}
.sv-save [data-save-ic]{display:inline-flex}
.sv-save .i{width:16px;height:16px}
.sv-save.is-saved{color:var(--good);border-color:var(--good-edge);background:var(--good-soft)}
.sv-no{font-size:13px;min-height:40px}
.sv-msg{flex:1 1 100%;font-size:13px;color:var(--ink-2)}
.sv-msg:empty{display:none}
/* the amount step: Packages | Custom amount, then the picks (8, the rest one tap away) or the custom field */
.rx-tabs{display:flex;width:100%;margin:2px 0 10px}
.rx-tabs label{flex:1 1 0}
.rx-mode.cu-field{margin-top:2px}
.picks-more{display:block;margin:8px auto 0;font-size:13.5px;min-height:36px}
.pk-custom{margin:14px 0 0;text-align:center}
.pk-custom .link{font-size:14.5px;min-height:40px}
.pk-custom .btn{min-height:48px;gap:8px;max-width:100%;white-space:normal;text-align:center}
/* the one Continue says what is still missing (no ID yet, checking, ID not found) */
/* notifications: kind label; the full list page; the item a link points to */
.ntf-k{display:block;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);margin-bottom:2px}
.ntf-item[data-k=offer] .ntf-k{color:var(--good,#0F7B4F)}
.ntf-page .ntf-list{max-height:none;overflow:visible;padding:4px 0 0}
.ntf-page .ntf-item.is-target a{background:var(--blue-50);box-shadow:inset 0 0 0 1px var(--line)}
.ntf-page .ntf-t > span:not(.ntf-k){white-space:normal}
.ft-legal{display:flex;flex-wrap:wrap;gap:6px 18px;padding:14px 0 4px;font-size:14px}
.ft-legal a{color:var(--ink-2);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.ft-legal a:hover{color:var(--blue);text-decoration:underline}
/* policy pages */
.legal{padding-top:28px;padding-bottom:72px;max-width:880px}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.legal-nav a{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;min-height:40px;display:inline-flex;align-items:center}
.legal-nav a[aria-current=page]{background:var(--blue-50);border-color:var(--blue);color:var(--blue-ink)}
.legal-doc{padding:28px 32px}
.legal-doc h1{margin:0 0 6px;font-size:32px;line-height:1.15}
.legal-meta{margin:0 0 14px;color:var(--ink-2);font-size:14px}
.legal-draft,.legal-only{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:12px 14px;border-radius:12px;background:#FFF8E6;border:1px solid #F5D98B;color:#6B4E00;font-size:14px}
.legal-only{background:var(--blue-50);border-color:var(--line);color:var(--ink)}
.legal-sec{padding:16px 0;border-top:1px solid var(--line)}
.legal-sec h2{margin:0 0 8px;font-size:19px;line-height:1.3}
.legal-sec p,.legal-sec li{margin:0 0 8px;line-height:1.65;color:var(--ink);overflow-wrap:anywhere}
.legal-sec ul{margin:0;padding-inline-start:20px}
mark.owner{display:inline-block;vertical-align:middle;margin-inline-start:6px;padding:2px 8px;border-radius:999px;background:#FFF1C2;color:#6B4E00;font-size:12px;font-weight:600}
@media (max-width:640px){ .legal-doc{padding:20px 16px} .legal-doc h1{font-size:26px} }
/* API documentation: numbered sections and their navigation */
.api-doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start;padding-bottom:72px}
.api-nav{position:sticky;top:96px}
.api-nav ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.api-nav a{position:relative;z-index:1;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14.5px;min-height:44px}
.api-nav a .no{font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:13px}
.api-nav a[aria-current=true]{color:var(--blue-ink)}
.api-nav a[aria-current=true] .no{color:var(--blue-ink)}
.api-nav a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.api-ind{position:absolute;left:0;top:0;width:var(--w,0);height:var(--h,0);transform:translate(var(--x,0),var(--y,0));border-radius:12px;background:var(--blue-50);box-shadow:inset 3px 0 0 var(--blue);transition:transform .35s cubic-bezier(.16,1,.3,1),width .35s,height .35s;pointer-events:none}
[dir=rtl] .api-ind{box-shadow:inset -3px 0 0 var(--blue)}
.api-body > .api-auth{display:flex;gap:10px;align-items:center;margin:0 0 18px;padding:12px 14px;border-radius:12px;background:var(--blue-50);font-size:14.5px}
.api-part{scroll-margin-top:96px;margin-bottom:28px}
.api-h{display:flex;gap:12px;align-items:baseline;margin:0 0 14px;font-size:24px}
.api-h .no{color:var(--blue-ink);font-variant-numeric:tabular-nums;font-size:16px;font-weight:700}
.api-part.box h3,.api-part .api-sec h3{margin:16px 0 8px;font-size:17px}
.api-part .api-grid{padding-bottom:0}
.verb.post{background:#E8F7EF;color:#0F7B4F}
.api-gap{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:10px 12px;border-radius:12px;background:var(--bg);color:var(--ink-2);font-size:14px}
.api-pending{margin-top:12px;padding:14px 16px;border-radius:12px;background:#FFF8E6;border:1px solid #F5D98B}
.api-pending b{display:block;margin-bottom:4px;color:#6B4E00}
.api-pending p{margin:0;color:var(--ink)}
@media (max-width:960px){
  .api-doc{grid-template-columns:minmax(0,1fr);gap:12px}
  /* phones: the four numbered sections as a compact 2 x 2 grid above the content (all visible, nothing off-screen) */
  .api-nav{position:relative;top:auto}
  .api-nav ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .api-nav a{padding:8px 10px;border:1px solid var(--line);background:#fff;font-size:13.5px;line-height:1.25}
}
@media (prefers-reduced-motion:reduce){ .api-ind{transition:none} }
.cta-hint{margin:8px 0 0;font-size:13.5px;color:var(--ink-2);text-align:center}
/* checkout steps: a word for every step (completed steps lead back to their choice) */
.steps li > a{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;border-radius:8px;min-height:32px}
.steps li > a:hover .lbl{text-decoration:underline}
.steps li > a:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px}
@media (max-width:640px){
  .steps{gap:6px}
  .steps .lbl{display:inline;font-size:12.5px}
  .steps li{gap:6px;font-size:12.5px}
  .steps li > a{gap:6px}
  .steps li + li::before{width:10px}
  .sv-tx b,.sv-tx small{max-width:120px}
}
/* sign-in: what is being bought, before the sign-in options */
.si-sum{margin:14px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--bg);text-align:start}
.si-sum-h{margin:0 0 8px;font-size:12.5px;font-weight:600;color:var(--muted);text-transform:none}
.si-sum-row{display:flex;align-items:center;gap:10px}
.si-sum-row .who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.si-sum-row .who b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si-sum-row .who small{font-size:12.5px;color:var(--muted)}
.si-sum-row .amt{display:flex;flex-direction:column;align-items:flex-end;text-align:end;line-height:1.3}
.si-sum-row .amt b{font-size:15px}
.si-sum-row .amt span{font-size:14px;font-weight:600;color:var(--blue-ink)}
.si-sum-note{margin:10px 0 0;font-size:13px;color:var(--ink-2)}
.si-card.has-sum .si-art{width:96px;height:auto}
/* the summary column (961px and wider): the Dino stage, then the price and the one Continue */
.hero-side{display:flex;flex-direction:column;min-width:0}
/* hero background (owner: empty white around the Dino): the mascot column fills the hero's height and the stage sits in
   its middle until the price card takes the space below it; a soft brand glow (blue + diamond yellow) replaces flat white */
@media (min-width:961px){
  .hero-grid > .hero-side{align-self:stretch;justify-content:center}
  .hero-side:has(.side-pay .rx-pay.is-open){justify-content:flex-start}
  .hero{background:radial-gradient(42% 58% at 76% 42%,rgba(7,135,149,.085),rgba(7,135,149,0) 72%),radial-gradient(24% 30% at 74% 56%,rgba(255,196,0,.11),rgba(255,196,0,0) 70%),linear-gradient(180deg,#FFFFFF 0%,#FAFCFF 58%,var(--bg) 100%)}
}
.side-pay:empty{display:none}
#packages{scroll-margin-top:200px}
.rx.is-browse .rx-acct{display:none}   /* the picker, with the BIGO ID field above it in view */
.side-pay .rx-pay-in{margin-top:-28px;padding:16px 18px 18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(13,26,51,.08);position:relative;z-index:2}
html:not([data-verify=ok]) .side-pay .pay-line .for{visibility:hidden}
@media (max-width:960px){ .hero-side{display:block} }
.side-pay .rx-pay-in > :first-child{margin-top:0}
.side-pay .pay-line{padding-top:0;border-top:0}
/* no valid amount yet: the closed price box is hidden once it has folded, so its Continue is neither seen nor reachable by Tab
   (and the side card leaves no empty strip); opening shows it at once */
.rx-pay:not(.is-open) > .rx-pay-in{visibility:hidden;transition:visibility 0s .55s}
@media (max-width:640px){
  .rx-save .q{flex:1 1 100%}
  .si-sum-row{flex-wrap:wrap}
  .si-sum-row .amt{flex:1 1 100%;flex-direction:row;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
}

/* ---------- the interactive hero Dino (approved hero, 2026-10-09; references/staging-review/bigo-hero-handoff) ----------
   The scene: soft light, a pale faceted crystal, two orbit trails, a glass podium, small decorative LIVE and gift motifs
   (decoration only: no broadcast, reward or endorsement is implied), the Dino (waiting / holding poses) and one movable
   diamond. Behaviour in assets/dp/mascot.js. Desktop: in the stage beside the form; narrower: beside the headline. */
.side-pay .rx-pay-in{margin-top:-8px}
.stage .mascot{position:absolute;inset:0}
.mascot{position:relative;width:100%;height:100%;isolation:isolate;touch-action:pan-y;--gem:86px}
.m-ambient{position:absolute;inset:-2% -4% 4%;pointer-events:none;background:radial-gradient(ellipse at 60% 40%,rgba(182,235,231,.24),transparent 63%),radial-gradient(ellipse at 30% 62%,rgba(255,240,164,.2),transparent 52%)}
.m-crystal{position:absolute;left:8%;right:7%;top:0;bottom:14%;clip-path:polygon(24% 4%,76% 4%,98% 30%,50% 98%,2% 30%);background:linear-gradient(155deg,rgba(175,229,231,.6),rgba(215,243,242,.31) 39%,rgba(107,200,202,.46) 80%,rgba(197,237,237,.42));transform:rotate(-7deg);pointer-events:none}
.m-crystal-core{position:absolute;inset:2px;clip-path:polygon(24% 4%,76% 4%,98% 30%,50% 98%,2% 30%);opacity:.9;background:conic-gradient(from -39deg at 50% 30%,#fafdff 0deg 42deg,#f1f8ff 42deg 84deg,#fcfdff 84deg 139deg,#ECF9F9 139deg 195deg,#fafcfe 195deg 267deg,#EBF9F9 267deg 322deg,#fbfdff 322deg)}
.m-crystal .f{position:absolute;height:1px;background:rgba(175,216,250,.4);transform-origin:0 50%}
.m-crystal .f1{width:100%;left:0;top:30%}.m-crystal .f2{width:86%;left:24%;top:4%;transform:rotate(74deg)}
.m-crystal .f3{width:86%;left:76%;top:4%;transform:rotate(106deg)}.m-crystal .f4{width:68%;left:50%;top:30%;transform:rotate(90deg)}
.m-live{position:absolute;left:1%;top:7%;z-index:1;display:flex;gap:6px;align-items:center;padding:8px 10px;border:1px solid #D8EDEE;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(238,249,249,.95));box-shadow:0 9px 24px rgba(0,109,116,.05),inset 0 1px 0 #fff;color:#376284;font-size:11px;font-weight:700;letter-spacing:1.4px;transform:rotate(-8deg);pointer-events:none}
.m-live .i{width:16px;height:16px;color:#0FA9B0}.m-live .dot{width:5px;height:5px;border-radius:50%;background:#0DAFB4;box-shadow:0 0 0 4px rgba(89,200,201,.12)}
.m-gift{position:absolute;right:1%;bottom:24%;z-index:1;width:56px;height:56px;display:grid;place-items:center;border:1px solid #f5e7b5;border-radius:16px;background:linear-gradient(140deg,#fffefa,#fff8dc);box-shadow:0 8px 22px rgba(203,184,121,.08),inset 0 1px 0 #fff;transform:rotate(11deg);pointer-events:none}
.m-gift .i{width:26px;height:26px;color:#b79236}
.m-gift .spark{position:absolute;right:-5px;top:-5px;width:7px;height:7px;background:#ffe08a;transform:rotate(45deg);box-shadow:0 0 14px rgba(255,229,154,.55)}
html[dir=rtl] .m-live{left:auto;right:1%;transform:rotate(8deg)}
html[dir=rtl] .m-gift{right:auto;left:1%;transform:rotate(-11deg)}
.m-depth{position:absolute;inset:0;z-index:2;transform:translate3d(calc(var(--px,0) * -6px),calc(var(--py,0) * -4px),0);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
html[dir=rtl] .m-depth{scale:-1 1}
.m-rail{position:absolute;z-index:3;left:2%;right:1%;top:24%;height:49%;border-radius:50%;border:2px solid transparent;border-top-color:rgba(142,224,221,.7);border-bottom-color:rgba(44,199,207,.6);transform:rotate(-24deg)}
.m-rail>span{position:absolute;left:16%;top:4%;width:8px;height:8px;border-radius:50%;background:#a8ecff;box-shadow:0 0 9px #0EBFC4,0 0 16px #96e4ff}
.m-rail-b{left:5%;right:5%;top:29%;height:41%;opacity:.58;transform:rotate(29deg)}
.m-rail-b>span{left:78%;top:83%;width:6px;height:6px}
.m-ground{position:absolute;z-index:1;left:20%;right:16%;bottom:5%;height:8%;border-radius:50%;background:radial-gradient(ellipse,rgba(33,113,112,.16),transparent 70%);filter:blur(6px)}
.m-base{position:absolute;z-index:2;left:19%;right:15%;bottom:7%;height:12%;border-radius:50%;border:1px solid rgba(68,206,208,.4);background:linear-gradient(180deg,rgba(237,250,255,.72),rgba(181,232,255,.68) 35%,rgba(10,155,168,.5) 68%,rgba(179,238,255,.68));box-shadow:0 10px 24px rgba(8,119,129,.09),inset 0 -7px 8px rgba(2,138,153,.2)}
.m-base>span{position:absolute;inset:5% 2% 35%;border:2px solid #b7edff;border-radius:50%;box-shadow:0 0 8px rgba(78,209,208,.44)}
.m-arrive{position:absolute;z-index:4;left:17%;right:14%;top:3%;bottom:11%;transform-origin:50% 88%}
.m-idle,.m-lean{position:absolute;inset:0;display:block;transform-origin:50% 88%}
.m-lean{transition:transform .25s ease-out}
.m-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 15px 12px rgba(4,122,124,.11));user-select:none;-webkit-user-drag:none;transition:opacity .18s linear}
.m-hold{opacity:0}.m-holding .m-wait{opacity:0}.m-holding .m-hold{opacity:1}
.m-glint{position:absolute;z-index:6;font-size:20px;line-height:1;color:#56C7C8}
.m-glint.g1{left:9%;top:52%}.m-glint.g2{right:10%;top:22%;font-size:15px}.m-glint.g3{right:13%;top:74%;font-size:17px}
.m-burst{position:absolute;z-index:3;left:50%;top:55%;width:38%;aspect-ratio:1;border:2px solid rgba(69,207,208,.66);border-radius:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.m-flash{position:absolute;z-index:6;inset:12%;background:radial-gradient(ellipse at 35% 62%,rgba(255,234,148,.44),transparent 58%);opacity:0;pointer-events:none}
.m-react{position:absolute;inset:0;z-index:6;pointer-events:none}
.m-react .r{position:absolute;width:22px;height:22px;opacity:0;color:#54BFC1;line-height:1}
.m-react .r .i{width:100%;height:100%}
.m-react .r1{left:14%;top:60%;--dx:-8px;--rot:-14deg}.m-react .r2{right:16%;top:55%;--dx:12px;--rot:13deg}.m-react .r3{right:12%;top:30%;--dx:8px;--rot:20deg;color:#cfab42;font-size:20px}
/* the hands light up while the stone comes near (positioned on the rendered pose by mascot.js) */
.m-hands{position:absolute;z-index:6;left:0;top:0;width:calc(var(--gem) * 1.55);aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.7);
  background:radial-gradient(closest-side,rgba(255,214,90,.55),rgba(255,214,90,.16) 58%,rgba(255,214,90,0));box-shadow:0 0 0 2px rgba(255,196,40,.32);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.m-drag .m-hands{opacity:.4;transform:translate(-50%,-50%) scale(.85)}
.m-near .m-hands{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
/* the movable diamond: its own glow, a grab cursor and a small lift on hover */
.m-gem{position:absolute;z-index:8;left:0;top:0;width:var(--gem);height:var(--gem);margin:calc(var(--gem) / -2) 0 0 calc(var(--gem) / -2);padding:0;border:0;border-radius:22px;background:none;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.m-gem:active,.m-drag .m-gem{cursor:grabbing}
.m-gem:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.m-gem-glow{position:absolute;inset:-30%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,212,60,.55),rgba(255,224,120,.22) 56%,rgba(255,224,120,0))}
.m-gem-lift,.m-gem-in{position:absolute;inset:0;display:block}
.m-gem-lift{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.m-gem-in img{display:block;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 8px 10px rgba(208,157,21,.32))}
@media (hover:hover){ .m-gem:hover .m-gem-lift{transform:translateY(-4px) scale(1.06)} }
.m-drag .m-gem-lift{transform:scale(1.08)}
.m-gem.is-given{opacity:0}
.m-hint{position:absolute;z-index:7;left:50%;top:0;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid #DAEAEB;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 3px 10px rgba(1,82,91,.05);color:#455d76;font-size:12.5px;font-weight:500;line-height:1.3;white-space:nowrap;pointer-events:none;transition:opacity .2s}
.m-hint svg{width:15px;height:15px;flex:none;color:#628aac}
.m-hint::before{content:"";position:absolute;left:50%;top:-5px;width:8px;height:8px;margin-left:-4px;background:inherit;border-left:1px solid #DAEAEB;border-top:1px solid #DAEAEB;transform:rotate(45deg)}
.m-msg{position:absolute;z-index:7;left:0;right:0;bottom:0;text-align:center;color:#426282;font-size:12.5px;font-weight:600;pointer-events:none}
/* motion: entrance once per tab session (.m-seen after that), gentle idle, slow stone rotation, celebration on a catch */
.m-arrive{animation:m-arrive 1.4s cubic-bezier(.19,1,.22,1) both}
.m-base{animation:m-base 1.2s ease-out both}
.m-seen .m-arrive,.m-seen .m-base{animation:none}
.m-idle{animation:m-float 4.6s ease-in-out 1.4s infinite}
.m-seen .m-idle{animation-delay:0s}
.m-rail-a{animation:m-rail-a 21s linear infinite}.m-rail-b{animation:m-rail-b 26s linear infinite}
.m-gem-in{animation:m-gem-spin 6s ease-in-out infinite}
.m-gem-glow{animation:m-glow 5.5s ease-in-out 1s infinite}
.m-glint{animation:m-spark 3.4s ease-in-out infinite}.m-glint.g2{animation-delay:1.5s}.m-glint.g3{animation-delay:.7s}
.m-drag .m-idle,.m-drag .m-gem-in{animation-play-state:paused}
.m-cele .m-idle{animation:m-cele 1.25s ease-out both}
.m-cele .m-burst{animation:m-burst 1.3s ease-out both}
.m-cele .m-flash{animation:m-flash 1.1s ease-out both}
.m-cele .m-react .r{animation:m-react 1.15s ease-out both}.m-cele .m-react .r2{animation-delay:.14s}.m-cele .m-react .r3{animation-delay:.26s}
.m-cele .m-gift{animation:m-pop .8s cubic-bezier(.2,.8,.2,1) both}
.m-cele .m-crystal{animation:m-charge 1.2s ease-out both}
.m-typing .m-idle,.m-typing .m-rail,.m-typing .m-gem-in,.m-typing .m-gem-glow,.m-typing .m-glint,.m-typing .m-mini{animation-play-state:paused}
/* decorative mini gems around the orbit trails: smaller and quieter than the movable stone; never interactive */
.m-minis{position:absolute;inset:0;z-index:5;pointer-events:none}
.m-mini{position:absolute;display:block;height:auto;opacity:.82;filter:drop-shadow(0 4px 5px rgba(208,157,21,.22));user-select:none;-webkit-user-drag:none;animation:m-mini 7s ease-in-out infinite}
.m-mini.n1{width:30px;left:7%;top:31%;--r:-14deg}
.m-mini.n2{width:20px;left:20%;top:80%;--r:10deg;animation-delay:-2.4s;opacity:.7}
.m-mini.n3{width:24px;right:7%;top:52%;--r:16deg;animation-delay:-4.6s;opacity:.75}
html[dir=rtl] .m-mini.n1{left:auto;right:7%}html[dir=rtl] .m-mini.n2{left:auto;right:20%}html[dir=rtl] .m-mini.n3{right:auto;left:7%}
@keyframes m-mini{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-6px) rotate(calc(var(--r) * -.6))}}
.m-off *,.m-hidden *{animation-play-state:paused!important}
@keyframes m-arrive{0%{opacity:0;transform:translateY(-40px) scale(.9) rotate(-4deg)}25%{opacity:1}62%{transform:translateY(5px) scale(1.02,.98) rotate(1deg)}82%{transform:translateY(-6px) scale(1) rotate(-.5deg)}100%{opacity:1;transform:none}}
@keyframes m-base{0%{opacity:.2;scale:.8}100%{opacity:1;scale:1}}
@keyframes m-float{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-8px) rotate(.5deg)}}
@keyframes m-rail-a{from{transform:rotate(-24deg)}to{transform:rotate(336deg)}}
@keyframes m-rail-b{from{transform:rotate(29deg)}to{transform:rotate(-331deg)}}
@keyframes m-gem-spin{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(7deg) translateY(-5px)}}
@keyframes m-glow{0%,72%,100%{opacity:.55;transform:scale(.94)}84%{opacity:1;transform:scale(1.1)}}
@keyframes m-spark{0%,100%{opacity:.2;transform:scale(.65)}50%{opacity:.85;transform:scale(1.1)}}
@keyframes m-cele{0%,100%{transform:none}32%{transform:translateY(-22px) rotate(-4deg)}56%{transform:translateY(4px) rotate(2deg)}80%{transform:translateY(-6px)}}
@keyframes m-burst{0%{opacity:.85;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.7)}}
@keyframes m-flash{0%,100%{opacity:0}30%{opacity:1}}
@keyframes m-react{0%{opacity:0;transform:translate(0,12px) scale(.6)}20%{opacity:.85}100%{opacity:0;transform:translate(var(--dx),-90px) rotate(var(--rot)) scale(1.2)}}
@keyframes m-pop{0%,100%{scale:1}38%{scale:1.13}65%{scale:.97}}
@keyframes m-charge{0%,100%{filter:none}30%{filter:drop-shadow(0 0 13px rgba(4,198,203,.34))}}
@media (prefers-reduced-motion:reduce){
  .mascot *,.mascot{animation:none!important;transition:none!important}
  .m-react{display:none}
  .m-depth{transform:none}
}
/* narrower screens: the scene sits beside the headline, compact; the stone stays easy to tap */
@media (max-width:960px){
  .hh-art{width:min(46vw,260px);height:204px;margin:-4px -8px 0 0}
  html[dir=rtl] .hh-art{margin:-4px 0 0 -8px}
  .hh-art .mascot{--gem:54px}
  .m-live{left:-2%;top:1%;padding:4px 6px;gap:3px;border-radius:8px;font-size:9px;letter-spacing:.8px}
  html[dir=rtl] .m-live{right:-2%;left:auto}
  .m-live .i{width:11px;height:11px}.m-live .dot{width:3px;height:3px;box-shadow:none}
  .m-gift,html[dir=rtl] .m-gift{width:26px;height:26px;border-radius:9px}
  .m-gift{right:auto;left:-1%;bottom:16%}
  html[dir=rtl] .m-gift{left:auto;right:-1%}
  .m-mini.n1{width:17px;left:3%;top:34%}.m-mini.n2{width:13px;left:6%;top:58%}.m-mini.n3{display:none}
  html[dir=rtl] .m-mini.n1{left:auto;right:3%}html[dir=rtl] .m-mini.n2{left:auto;right:6%}
  .m-gift .i{width:16px;height:16px}.m-gift .spark{width:4px;height:4px;right:-3px;top:-3px}
  .m-rail{border-width:1px}.m-rail>span{width:5px;height:5px}
  .m-base>span{border-width:1px}
  .m-glint{font-size:11px!important}
  .m-react .r{width:13px;height:13px}.m-react .r3{font-size:13px}
  .m-hint{font-size:11px}
  .m-msg{bottom:-8px;font-size:11px}
  .m-hint{padding:4px 9px;gap:5px}.m-hint svg{width:12px;height:12px}
}
@media (max-width:640px){ .hh-art{height:184px} }
@media (max-width:374px){ .hh-art{height:172px;width:48vw} }

/* simplification (2026-10-09): secondary help in expandable sections */
.more{margin-top:18px;border-top:1px solid var(--line,#E1EDED);padding-top:6px}
.more>summary,.learn-q>summary,.soon>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px}
.more>summary::-webkit-details-marker,.learn-q>summary::-webkit-details-marker,.soon>summary::-webkit-details-marker{display:none}
.more>summary{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.more .ticks{margin-top:6px}
.more-chev{display:inline-flex;margin-inline-start:auto;color:var(--ink-2);transition:transform .2s}
.more-chev svg{width:18px;height:18px}
details[open]>summary .more-chev{transform:rotate(180deg)}
.more>summary:focus-visible,.learn-q>summary:focus-visible,.soon>summary:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:8px}
.learn-q>summary{gap:16px}
.learn-q>summary .learn-art{flex:none;width:56px;height:48px;margin:0;border-radius:14px}
.learn-q>summary .learn-art svg{max-width:40px;max-height:40px}
.learn-grid .learn-q>summary h2{margin:0;font-size:21px}
.learn-q[open]>summary{margin-bottom:6px}
.soon>summary .soon-h{margin:0}
.soon[open]>summary{margin-bottom:14px}
.learn-grid{row-gap:20px}
@media (prefers-reduced-motion:reduce){.more-chev{transition:none}}
.legal-toc{margin:14px 0 4px}
.legal-toc ol{margin:4px 0 8px;padding-inline-start:22px;display:grid;gap:6px}
.legal-toc a{color:var(--ink-2)}
.legal-sec{scroll-margin-top:84px}
.sec.sec-learn{padding-block:40px}