:root{
--navy1:#031B40;--navy2:#061F48;--navy3:#082957;--navy4:#0B3A78;
--gold1:#A96E08;--gold2:#F5D66F;--gold3:#CB8B12;--gold:#D89A17;--gold4:#FFD970;
--goldg:linear-gradient(135deg,#A96E08,#F5D66F 45%,#CB8B12);
--navyg:linear-gradient(160deg,#082957,#061F48 55%,#02132F);
--bg:#FAF8F2;--bg2:#FFFDF7;--card:#FFFFFF;
--green:#148431;--green2:#20923B;--red:#D41019;--red2:#C81520;
--purple:#7926BA;--magenta:#A31572;
--txt:#101621;--txt2:#555A63;--line:rgba(16,22,33,.08);
--gline:rgba(201,150,39,.30);
--sh:0 4px 14px rgba(0,0,0,.10);
--sh2:0 10px 30px rgba(3,27,64,.16);
--r:18px;--r2:14px;
--tab:74px;
/* --gutter is the page side padding AND the amount the full-bleed elements
   (.hero/.topbar/.lg-hero) pull back by. At desktop widths it grows into the
   centring pad, which is what keeps those elements bleeding edge to edge. */
--gutter:16px;--maxw:1180px;
}
[data-theme=dark]{
--bg:#080B12;--bg2:#0E1320;--card:#121828;
--txt:#F2F4FA;--txt2:#A7B0C2;--line:rgba(255,255,255,.09);
--green:#31C55C;--green2:#2BB552;--red:#FF5A5A;--red2:#F04A4A;
--sh:0 4px 14px rgba(0,0,0,.5);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
background:var(--bg);color:var(--txt);
font-family:Poppins,'Segoe UI',Roboto,system-ui,sans-serif;font-size:14px;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
transition:background .35s,color .35s;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:var(--txt);background:transparent;border:0;outline:none;width:100%}
.spr{position:absolute;width:0;height:0;overflow:hidden}
.num{font-variant-numeric:tabular-nums}
.ctr{text-align:center}

.shell{
min-height:100%;padding:0 var(--gutter) calc(var(--tab) + 74px);
opacity:0;transform:translateY(14px) scale(.994);
transition:opacity .34s ease,transform .38s cubic-bezier(.2,.8,.25,1);
}
.shell.in{opacity:1;transform:none}
.shell.leaving{opacity:0;transform:translateY(-10px) scale(.99);transition-duration:.2s}
.shell.flush{padding-left:0;padding-right:0}
.shell.flush>*:not(.hero):not(.ticker):not(.tabbar):not(.copy){margin-left:var(--gutter);margin-right:var(--gutter)}

@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes sweep{0%{transform:translateX(0) skewX(-16deg)}55%,100%{transform:translateX(64px) skewX(-16deg)}}
@keyframes shimmer{0%{background-position:-220% 0}100%{background-position:220% 0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.2px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes swing{0%,100%{transform:rotate(0)}25%{transform:rotate(11deg)}75%{transform:rotate(-11deg)}}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes grow{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes ringPulse{0%{transform:scale(.86);opacity:.85}70%{transform:scale(1.12);opacity:0}100%{opacity:0}}
@keyframes marq{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
@keyframes glow{0%,100%{opacity:.35}50%{opacity:.85}}
@keyframes dash{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:var(--off)}}
@keyframes upFlash{0%{background:rgba(20,132,49,.42)}100%{background:rgba(20,132,49,.14)}}
@keyframes dnFlash{0%{background:rgba(212,16,25,.42)}100%{background:rgba(212,16,25,.14)}}
@keyframes slideL{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}

.ic{width:100%;height:100%;display:block;overflow:visible}
.ic-line{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-metal .shine,.ic-coin .shine,.ic-rupee .shine{animation:sweep 3.6s ease-in-out infinite}
.ic-coin{animation:floaty 3.2s ease-in-out infinite}
.ic-chart .bars rect{fill:currentColor;transform-origin:50% 100%;animation:grow 1.5s ease-in-out infinite alternate}
.ic-chart .bars rect:nth-child(2){animation-delay:.18s}
.ic-chart .bars rect:nth-child(3){animation-delay:.36s}
.ic-chart .bars rect:nth-child(4){animation-delay:.54s}
.ic-trade .up{animation:bob 1.6s ease-in-out infinite}
.ic-trade .dn{animation:bob 1.6s ease-in-out infinite reverse}
.ic-msg .dots circle{animation:blink 1.4s infinite}
.ic-msg .dots circle:nth-child(2){animation-delay:.2s}
.ic-msg .dots circle:nth-child(3){animation-delay:.4s}
.ic-pending .hand{transform-origin:17.4px 16.6px;animation:spin 4.5s linear infinite}
.ic-bell .swing{transform-origin:12px 4px;animation:swing 2.4s ease-in-out infinite}
.ic-phone{animation:swing 2.8s ease-in-out infinite}
.ic-wa .ring{animation:ringPulse 2.2s ease-out infinite;transform-origin:50% 50%}
.ic-share .n1,.ic-share .n2,.ic-share .n3{animation:floaty 2.4s ease-in-out infinite}
.ic-share .n2{animation-delay:.25s}.ic-share .n3{animation-delay:.5s}
.ic-float{animation:floaty 3s ease-in-out infinite}
.ic-sun .rays{transform-origin:12px 12px;animation:spin 12s linear infinite}
.ic-spin{animation:spin 1.4s linear infinite}
.ic-arr{animation:bob 1.4s ease-in-out infinite}
.ic-arr.up{color:#25C05B}.ic-arr.dn{color:#FF4D4D}
.ic-menu path{transform-origin:left center}
.ic-menu .m1{animation:slideL .5s ease both}
.ic-menu .m2{animation:slideL .5s .06s ease both}
.ic-menu .m3{animation:slideL .5s .12s ease both}

.hero{
position:relative;margin:0 calc(var(--gutter) * -1);padding:26px 22px 78px;overflow:hidden;
background:var(--navyg);border-radius:0 0 26px 26px;
animation:fadeIn .5s ease both;
}
.hero:before{
content:'';position:absolute;inset:0;opacity:.9;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='46' viewBox='0 0 40 46'%3E%3Cpath d='M20 0l17.3 10v20L20 40 2.7 30V10z' fill='none' stroke='%23D89A17' stroke-opacity='.14'/%3E%3C/svg%3E"),
radial-gradient(circle at 18% 12%,rgba(216,154,23,.20),transparent 42%),
radial-gradient(circle at 84% 8%,rgba(245,214,111,.16),transparent 40%);
}
.hero-d{position:absolute;top:0;width:160px;height:160px;pointer-events:none}
.hero-d.l{left:0}
.hero-d.r{right:0;transform:scaleX(-1)}
.hero-d:before,.hero-d:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#FFE9A6,#E8B62C 45%,#A96E08)}
.hero-d:before{clip-path:polygon(0 0,96px 0,0 96px)}
.hero-d:after{clip-path:polygon(116px 0,132px 0,0 132px,0 116px);opacity:.92}
.hero-in{position:relative;text-align:center}
.crest{width:52px;height:auto;margin:0 auto 4px;display:block;animation:floaty 4s ease-in-out infinite}
.brand{
font-family:Cinzel,'Playfair Display',Georgia,serif;font-weight:700;letter-spacing:2.5px;
font-size:31px;line-height:1.1;text-transform:uppercase;
background:linear-gradient(100deg,#B87B0B,#FFF0BE 30%,#F3C84B 48%,#FFF6D6 62%,#C4870F);
background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
animation:shimmer 5.5s linear infinite;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))
}
.divide{display:flex;align-items:center;justify-content:center;gap:7px;margin:9px 0 8px}
.divide i{height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--gold4))}
.divide i+i{background:linear-gradient(90deg,var(--gold4),transparent)}
.divide b{width:7px;height:7px;background:var(--gold4);transform:rotate(45deg);box-shadow:0 0 9px var(--gold4);animation:glow 2.6s ease-in-out infinite}
.tagline{color:#EAF0FA;font-size:11.5px;letter-spacing:3px;text-transform:uppercase}

.summary{
margin-top:-56px;position:relative;background:var(--card);border-radius:20px;
box-shadow:var(--sh2);display:grid;grid-template-columns:repeat(3,1fr);
padding:14px 6px;animation:rise .55s .1s ease both;
}
.summary>div+div{border-left:1px solid var(--line)}
.sm{display:flex;align-items:center;gap:8px;padding:0 8px;min-width:0}
.sm-ic{width:42px;height:42px;flex:0 0 42px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.2))}
.sm-b{min-width:0;flex:1}
.sm-n{font-size:10.5px;font-weight:600;color:var(--txt2);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-v{font-size:17px;font-weight:700;letter-spacing:-.3px;padding:1px 4px;border-radius:6px;display:inline-block;transition:background .5s}
.sm-s{font-size:10px;color:var(--txt2);font-weight:500}
.sm-l{height:3px;border-radius:3px;margin-top:4px;width:42px}
.sm-l.gold{background:var(--goldg)}
.sm-l.silver{background:linear-gradient(135deg,#9AA3B1,#E3E8EF,#8C95A4)}
.sm-l.rupee,.sm-l.dollar{background:linear-gradient(135deg,#0B3A78,#02163A)}
.sm-l.coin{background:var(--goldg)}

.ribbon{display:flex;justify-content:center;margin:16px 0 -14px;position:relative;z-index:3}
.ribbon span{
position:relative;background:linear-gradient(165deg,#0B3A78,#03204A);color:#fff;
font-size:14px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
padding:9px 30px;border-radius:8px;box-shadow:0 6px 16px rgba(3,27,64,.35),inset 0 0 0 1px rgba(243,200,75,.35);
animation:pop .45s .16s ease both;
}
.ribbon span:before,.ribbon span:after{
content:'';position:absolute;top:8px;width:16px;height:100%;background:#03204A;z-index:-1;
border-radius:4px;box-shadow:inset 0 0 0 1px rgba(243,200,75,.25);
}
.ribbon span:before{left:-11px;transform:skewY(22deg)}
.ribbon span:after{right:-11px;transform:skewY(-22deg)}

.rates{
background:var(--bg2);border:1px solid var(--gline);border-radius:var(--r);
box-shadow:var(--sh);overflow:hidden;animation:rise .55s .2s ease both;
}
.rt-head{display:grid;grid-template-columns:40% 30% 30%;background:var(--navyg);color:#fff}
.rt-head div{padding:13px 10px;font-size:11.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:5px;justify-content:center}
.rt-head div:first-child{justify-content:flex-start;padding-left:14px}
.rt-head i{width:14px;height:14px;display:inline-block}
.rt-row{display:grid;grid-template-columns:40% 30% 30%;animation:rise .4s ease both}
.rt-row+.rt-row .rt-p,.rt-row+.rt-row .rt-c{border-top:1px solid rgba(255,255,255,.07)}
.rt-row+.rt-row .rt-c{border-top-color:var(--line)}
.rt-p{background:var(--navyg);color:#fff;display:flex;align-items:center;gap:9px;padding:11px 8px 11px 12px;min-height:62px}
.rt-p .ic-w{width:30px;height:30px;flex:0 0 30px}
.rt-p span{font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.2px}
.rt-c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:8px 4px;background:transparent}
.rt-v{font-size:17.5px;font-weight:700;letter-spacing:-.3px;padding:2px 7px;border-radius:7px;transition:background .55s ease}
.rt-v.buy{color:var(--green)}
.rt-v.sell{color:var(--red)}
.rt-x{font-size:11.5px;color:var(--txt2);font-weight:500}
.up{animation:upFlash .6s ease forwards}
.dn{animation:dnFlash .6s ease forwards}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.panel{background:var(--bg2);border:1px solid var(--gline);border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh);animation:rise .55s .26s ease both}
.panel.b{animation-delay:.32s}
.pn-head{padding:9px 10px;text-align:center;font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#fff}
.pn-head.gold{background:linear-gradient(135deg,#E1A62A,#C6871A)}
.pn-head.purple{background:linear-gradient(135deg,#7822B4,#A31572)}
.pn-head.navy{background:var(--navyg)}
.ft-head{display:grid;grid-template-columns:40% 30% 30%;background:rgba(216,154,23,.09);font-size:9.5px;font-weight:600;letter-spacing:.6px;color:var(--txt2);text-transform:uppercase}
.ft-head div{padding:7px 4px;text-align:center;display:flex;align-items:center;justify-content:center;gap:3px}
.ft-head div:first-child{justify-content:flex-start;padding-left:9px}
.ft-head i{width:11px;height:11px;display:inline-block}
.ft-row{display:grid;grid-template-columns:40% 30% 30%;align-items:center;padding:8px 0;animation:rise .4s ease both}
.ft-row+.ft-row{border-top:1px solid var(--line)}
.ft-p{display:flex;align-items:center;gap:6px;padding-left:8px;min-width:0}
.ft-p .ic-w{width:22px;height:22px;flex:0 0 22px}
.ft-p span{font-size:9.5px;font-weight:700;color:var(--txt);line-height:1.15;text-transform:uppercase}
.ft-c{text-align:center;display:flex;flex-direction:column;gap:1px}
.ft-v{font-size:13px;font-weight:700;padding:1px 4px;border-radius:5px;transition:background .55s}
.ft-v.buy{color:var(--green)}.ft-v.sell{color:var(--red)}
.ft-x{font-size:8.5px;color:var(--txt2)}

.qa{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.qa button{background:var(--bg2);padding:11px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;transition:transform .16s,background .2s}
.qa button:active{transform:scale(.96)}
.qa-ic{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(3,27,64,.06)}
.qa-ic>*{width:20px;height:20px}
.qa-ic.navy{color:var(--navy1)}
.qa-ic.green{background:rgba(37,211,102,.12)}
.qa-ic.blue{color:#1B5FBF;background:rgba(27,95,191,.10)}
.qa-ic.wine{color:#A3122C;background:rgba(163,18,44,.10)}
.qa-t{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.qa-s{font-size:9px;color:var(--txt2)}

.trust{
margin-top:14px;background:var(--bg2);border:1px solid var(--gline);border-radius:var(--r2);
box-shadow:var(--sh);display:grid;grid-template-columns:repeat(4,1fr);padding:11px 2px;position:relative;overflow:hidden;
animation:rise .55s .38s ease both;
}
.trust:after{content:'';position:absolute;right:-22px;top:-20%;width:34px;height:140%;border-radius:50%;background:var(--goldg);opacity:.9}
.trust>div+div{border-left:1px solid var(--line)}
.tr{display:flex;align-items:center;gap:6px;padding:0 6px;justify-content:center}
.tr-ic{width:22px;height:22px;flex:0 0 22px;color:var(--navy1)}
[data-theme=dark] .tr-ic{color:var(--gold4)}
.tr b{display:block;font-size:11px;line-height:1.15}
.tr small{font-size:9.5px;color:var(--txt2)}

.ticker{
position:fixed;left:0;right:0;bottom:var(--tab);height:26px;background:var(--goldg);
display:flex;align-items:center;overflow:hidden;z-index:40;box-shadow:0 -2px 8px rgba(0,0,0,.12)
}
.ticker-in{white-space:nowrap;animation:marq 22s linear infinite;font-size:11.5px;font-weight:600;color:#231703}
.ticker-in *{display:inline!important;margin:0!important;font-size:11.5px!important;color:#231703!important;background:none!important}

.tabbar{
position:fixed;left:8px;right:8px;bottom:8px;height:var(--tab);background:var(--navyg);
border-radius:20px;display:grid;grid-template-columns:repeat(5,1fr);z-index:45;
box-shadow:0 -6px 24px rgba(3,27,64,.35),inset 0 0 0 1px rgba(243,200,75,.22);padding-bottom:2px
}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#F2F4FA;position:relative;transition:transform .16s}
.tab+.tab:before{content:'';position:absolute;left:0;top:20%;height:60%;width:1px;background:linear-gradient(180deg,transparent,rgba(243,200,75,.35),transparent)}
.tab:active{transform:scale(.94)}
.tab-ic{width:23px;height:23px;opacity:.9}
.tab-t{font-size:10px;font-weight:500;letter-spacing:.2px}
.tab.on{color:#fff}
.tab.on .tab-ic{color:var(--gold4);opacity:1;filter:drop-shadow(0 0 7px rgba(255,217,112,.6))}
.tab.on .tab-t{font-weight:700}
.tab.on:after{content:'';position:absolute;bottom:6px;width:26px;height:3px;border-radius:3px;background:var(--goldg);animation:pop .3s ease both}
.copy{position:fixed;bottom:0;left:0;right:0;text-align:center;font-size:9px;color:var(--gold);padding:2px 0;z-index:44;pointer-events:none}

.topbar{display:flex;align-items:center;gap:8px;margin:0 calc(var(--gutter) * -1);padding:10px 14px;background:var(--navyg);border-radius:0 0 20px 20px;position:relative;overflow:hidden}
.topbar:before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 90% 0,rgba(216,154,23,.25),transparent 45%)}
.tb-btn{width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:rgba(255,255,255,.10);color:#fff;padding:8px;position:relative;transition:transform .16s}
.tb-btn:active{transform:scale(.92)}
.tb-brand{flex:1;text-align:center;position:relative}
.page-title{display:flex;justify-content:center;margin:14px 0 12px}
.page-title span{background:var(--goldg);color:#26190A;font-size:12.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:8px 26px;border-radius:9px;box-shadow:var(--sh);animation:pop .4s ease both}

.sidenav{position:fixed;inset:0;background:rgba(2,10,26,.6);backdrop-filter:blur(3px);z-index:60;opacity:0;pointer-events:none;transition:opacity .28s}
.sidenav.on{opacity:1;pointer-events:auto}
.sn-card{position:absolute;left:0;top:0;bottom:0;width:min(86%,340px);background:var(--navyg);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .34s cubic-bezier(.2,.8,.25,1);box-shadow:8px 0 30px rgba(0,0,0,.4)}
.sidenav.on .sn-card{transform:none}
.sn-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 8px}
.sn-head .modal-x{width:32px;height:32px;padding:7px;color:#fff;background:rgba(255,255,255,.1);border-radius:10px}
.sn-user{display:flex;align-items:center;gap:10px;padding:10px 16px 14px;color:#fff;border-bottom:1px solid rgba(243,200,75,.22)}
.sn-av{width:40px;height:40px;border-radius:50%;background:var(--goldg);color:#221602;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;flex:0 0 40px}
.sn-user b{font-size:13.5px;display:block}
.sn-user small{font-size:10.5px;color:#C9D3E5}
.sn-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:14px}
.sn-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px;border-radius:12px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(243,200,75,.18);color:#EEF2FA;font-size:9.5px;font-weight:500;text-align:center;line-height:1.15;animation:rise .4s var(--d) ease both;transition:transform .16s,background .2s}
.sn-item:active{transform:scale(.94);background:rgba(243,200,75,.18)}
.sn-ic{width:24px;height:24px;color:var(--gold4)}
.sn-foot{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 12px 16px;border-top:1px solid rgba(243,200,75,.22)}
.sn-act{display:flex;flex-direction:column;align-items:center;gap:4px;color:#EEF2FA;font-size:9px;padding:6px 2px;border-radius:10px}
.sn-act>svg{width:20px;height:20px}
.sn-act:active{background:rgba(255,255,255,.1)}

.fab{position:fixed;bottom:calc(var(--tab) + 36px);width:44px;height:44px;border-radius:50%;z-index:42;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.28);transition:transform .18s}
.fab:active{transform:scale(.9)}
.fab>svg{width:22px;height:22px}
.fab-l{left:12px;background:#fff}
.fab-r{right:12px;background:var(--navyg);color:#fff}

.modal{position:fixed;inset:0;background:rgba(2,10,26,.62);backdrop-filter:blur(3px);z-index:80;display:flex;align-items:center;justify-content:center;padding:22px;opacity:0;transition:opacity .26s}
.modal.on{opacity:1}
.modal-card{width:100%;max-width:360px;background:var(--card);border-radius:18px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.4);transform:translateY(18px) scale(.96);transition:transform .3s cubic-bezier(.2,.8,.25,1);max-height:86vh;display:flex;flex-direction:column}
.modal.on .modal-card{transform:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--navyg);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:1.4px}
.modal-x{width:26px;height:26px;padding:5px;border-radius:8px;background:rgba(255,255,255,.12)}
.modal-body{padding:16px;overflow-y:auto;font-size:13px;line-height:1.55;color:var(--txt)}
.modal-body *{max-width:100%}
.modal-foot{display:flex;gap:8px;padding:0 14px 14px}
.mbtn{flex:1;padding:11px;border-radius:11px;font-size:12px;font-weight:700;letter-spacing:1px;background:rgba(3,27,64,.07);transition:transform .16s}
.mbtn:active{transform:scale(.96)}
.mbtn.primary{background:var(--goldg);color:#241703}
.mbtn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--txt2)}
.fixmsg .modal-body,.fm{text-align:center}
.fm-welcome{font-weight:700;color:var(--gold3);margin-bottom:8px}

.sheet{position:fixed;inset:0;background:rgba(2,10,26,.6);z-index:80;opacity:0;transition:opacity .26s;display:flex;align-items:flex-end}
.sheet.on{opacity:1}
.sheet-card{width:100%;background:var(--card);border-radius:22px 22px 0 0;max-height:80vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.25,1)}
.sheet.on .sheet-card{transform:none}
.sheet-grip{width:44px;height:4px;border-radius:4px;background:var(--line);margin:9px auto 2px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 10px;font-size:12.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;border-bottom:1px solid var(--line)}
.sheet-head .modal-x{background:rgba(3,27,64,.08)}
.sheet-body{overflow-y:auto;padding:8px 0 18px}
.pick{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);animation:rise .3s ease both}
.pick:active{background:rgba(216,154,23,.1)}
.pick .ic-w{width:28px;height:28px;flex:0 0 28px}
.pick b{font-size:12.5px;flex:1}
.pick span{font-size:11.5px;color:var(--txt2)}

.toast{position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(var(--tab) + 40px);background:var(--navyg);color:#fff;padding:12px 14px;border-radius:13px;font-size:12.5px;text-align:center;z-index:90;box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 0 0 1px rgba(243,200,75,.3);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .26s,transform .26s}
.toast.show{opacity:1;transform:none}
.toast.ok{box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 0 0 1px rgba(37,192,91,.6)}
.toast.err{box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,77,77,.6)}

.loader{display:flex;gap:6px;justify-content:center;padding:26px}
.loader span{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:blink 1s infinite}
.loader span:nth-child(2){animation-delay:.15s}
.loader span:nth-child(3){animation-delay:.3s}
.empty{text-align:center;color:var(--txt2);padding:26px 10px;font-size:12.5px}

.card{background:var(--bg2);border:1px solid var(--gline);border-radius:var(--r2);box-shadow:var(--sh);padding:14px;margin-top:12px;animation:rise .45s ease both}
.cdn{background:var(--bg2);border:1px solid var(--gline);border-radius:var(--r2);box-shadow:var(--sh);padding:12px;font-size:13px;line-height:1.6;overflow-x:auto}
.cdn.reveal{animation:rise .5s ease both}
.cdn img{max-width:100%;height:auto!important}
.cdn table{width:100%!important;border-collapse:separate;border-spacing:0 6px}
.cdn td{color:var(--txt)!important;padding:8px!important}
.cdn tr[style]{background:var(--navyg)!important;border-radius:10px}
.cdn tr[style] td{color:#EEF2FA!important}
.cdn tr[style] td:first-child span{color:var(--gold4)!important;font-weight:600!important}
.cdn a{color:var(--gold3)!important;font-weight:600}
.cdn p{color:var(--txt)!important}
.cdn .fa{font-style:normal;color:var(--gold3)}

.msg{display:flex;gap:10px;background:var(--bg2);border:1px solid var(--gline);border-radius:var(--r2);box-shadow:var(--sh);padding:12px;margin-top:10px;animation:rise .45s var(--d,0s) ease both}
.msg-ic{width:34px;height:34px;flex:0 0 34px;border-radius:11px;background:var(--navyg);color:var(--gold4);padding:7px}
.msg-b{flex:1;min-width:0}
.msg-b p{font-size:12.5px;line-height:1.5}
.msg-b small{display:block;margin-top:5px;font-size:10.5px;color:var(--gold3);font-weight:600}

.tabs2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.tabs2 a{padding:11px;border-radius:12px;text-align:center;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--gline);color:var(--txt2);transition:transform .16s}
.tabs2 a:active{transform:scale(.97)}
.tabs2 a.on{background:var(--goldg);color:#241703;box-shadow:var(--sh)}

.seg{display:flex;background:rgba(3,27,64,.07);border-radius:13px;padding:4px;margin-top:12px;gap:4px}
.seg button{flex:1;padding:9px;border-radius:10px;font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--txt2);transition:.2s}
.seg button.on{background:var(--card);color:var(--txt);box-shadow:var(--sh)}
.seg.bs button.on[data-v=BUY]{background:var(--green);color:#fff}
.seg.bs button.on[data-v=SELL]{background:var(--red);color:#fff}

.field{margin-top:11px}
.field label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--txt2);margin-bottom:5px}
.field .box{display:flex;align-items:center;gap:9px;background:var(--card);border-radius:13px;padding:12px 13px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .22s}
.field .box:focus-within{box-shadow:inset 0 0 0 1.6px var(--gold)}
.field .box>svg{width:19px;height:19px;flex:0 0 19px;color:var(--gold3)}
.field .box .ic-w{width:26px;height:26px;flex:0 0 26px}
.field input,.field select{font-size:14px;font-weight:600}
.field select{appearance:none}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px;padding:14px;border-radius:14px;background:var(--goldg);color:#241703;font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;box-shadow:0 8px 20px rgba(216,154,23,.32);transition:transform .16s}
.btn:active{transform:scale(.97)}
.btn.navy{background:var(--navyg);color:#fff;box-shadow:0 8px 20px rgba(3,27,64,.3)}
.btn.green{background:linear-gradient(135deg,#20A344,#0F6E27);color:#fff;box-shadow:0 8px 20px rgba(20,132,49,.3)}
.btn.red{background:linear-gradient(135deg,#E5262F,#A80D14);color:#fff;box-shadow:0 8px 20px rgba(212,16,25,.3)}
.btn>svg{width:19px;height:19px}
.hint{text-align:center;font-size:11px;color:var(--txt2);margin-top:12px}

.quote{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.qcell{background:var(--bg2);border-radius:var(--r2);box-shadow:var(--sh),inset 0 0 0 1px var(--gline);padding:12px;text-align:center;animation:pop .4s ease both}
.qcell label{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--txt2)}
.qcell .v{font-size:24px;font-weight:700;letter-spacing:-.6px;padding:2px 8px;border-radius:9px;display:inline-block;margin-top:3px;transition:background .55s}
.qcell .v.buy{color:var(--green)}.qcell .v.sell{color:var(--red)}
.qcell small{display:block;font-size:10.5px;color:var(--txt2)}

.ord{background:var(--bg2);border:1px solid var(--gline);border-radius:var(--r2);box-shadow:var(--sh);padding:12px;margin-top:10px;animation:rise .42s var(--d,0s) ease both}
.ord-t{display:flex;align-items:center;gap:9px}
.ord-t .ic-w{width:32px;height:32px;flex:0 0 32px}
.ord-t b{flex:1;font-size:13px}
.side{font-size:9.5px;font-weight:800;letter-spacing:1px;padding:4px 9px;border-radius:20px;color:#fff}
.side.BUY{background:var(--green)}.side.SELL{background:var(--red)}
.ord-g{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.ord-g div{background:rgba(3,27,64,.05);border-radius:10px;padding:7px}
.ord-g label{display:block;font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--txt2)}
.ord-g b{font-size:12.5px}
.ord-f{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.ord-f small{font-size:10px;color:var(--txt2)}
.chip{font-size:9.5px;font-weight:700;letter-spacing:.8px;padding:4px 9px;border-radius:20px;text-transform:uppercase}
.chip.Pending{background:rgba(216,154,23,.16);color:var(--gold3)}
.chip.Cancelled{background:rgba(212,16,25,.13);color:var(--red)}
.link-x{font-size:10.5px;font-weight:700;color:var(--red);letter-spacing:.6px}

.gauge{width:150px;height:150px;margin:6px auto 0;position:relative;display:flex;align-items:center;justify-content:center}
.gauge svg{position:absolute;inset:0;transform:rotate(-90deg)}
.gauge .bgr{fill:none;stroke:rgba(3,27,64,.10);stroke-width:11}
.gauge .fgr{fill:none;stroke:url(#gGold);stroke-width:11;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--off);animation:dash 1.3s .15s cubic-bezier(.2,.8,.25,1) both}
.gauge .in{text-align:center}
.gauge .in b{display:block;font-size:30px;font-weight:700;letter-spacing:-1px}
.gauge .in small{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--txt2)}
.signal{text-align:center;margin-top:10px}
.signal span{display:inline-block;font-size:14px;font-weight:800;letter-spacing:2px;padding:8px 26px;border-radius:11px;color:#fff;animation:pop .4s ease both}
.signal span.Buy{background:linear-gradient(135deg,#20A344,#0F6E27)}
.signal span.Sell{background:linear-gradient(135deg,#E5262F,#A80D14)}
.signal span.NA{background:var(--navyg)}
.kv{margin-top:12px;border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh);border:1px solid var(--gline)}
.kv div{display:flex;justify-content:space-between;gap:10px;padding:11px 13px;background:var(--bg2);font-size:12.5px;animation:rise .35s var(--d,0s) ease both}
.kv div+div{border-top:1px solid var(--line)}
.kv label{color:var(--txt2);font-weight:600;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase}
.kv b{font-weight:700;text-align:right}
.kv div.wide{flex-direction:column;gap:4px}
.kv div.wide b{text-align:left;font-weight:500;line-height:1.5}

.bill{margin-top:14px;border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh);border:1px solid var(--gline)}
.bill div{display:flex;justify-content:space-between;padding:11px 13px;font-size:12.5px;background:var(--bg2)}
.bill div:nth-child(odd){background:rgba(216,154,23,.10)}
.bill div.tot{background:var(--navyg);color:#fff;font-size:14px;font-weight:700}
.bill div.tot b{color:var(--gold4)}
.bill label{color:var(--txt2);text-transform:uppercase;font-size:11px;letter-spacing:.6px;font-weight:600}
.bill div.tot label{color:#DCE4F2}

.rc{background:var(--bg2);border:2px solid var(--gline);border-radius:12px;box-shadow:var(--sh);overflow:hidden;margin-top:11px;animation:rise .42s var(--d,0s) ease both}
.rc-h{display:flex;align-items:center;gap:8px;padding:9px 11px;background:var(--goldg);color:#241703}
.rc-h .ic-w{width:24px;height:24px;flex:0 0 24px}
.rc-h b{font-size:12.5px;letter-spacing:.6px;text-transform:uppercase}
.rc-b{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.rc-c{background:var(--bg2);padding:10px;text-align:center}
.rc-c label{font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--txt2)}
.rc-c .v{font-size:21px;font-weight:700;padding:1px 7px;border-radius:8px;display:inline-block;transition:background .55s}
.rc-c .v.buy{color:var(--green)}.rc-c .v.sell{color:var(--red)}
.rc-c small{display:block;font-size:10px;color:var(--txt2)}

.lg-hero{text-align:center;background:var(--navyg);margin:0 calc(var(--gutter) * -1);border-radius:0 0 26px 26px;padding:28px 16px 20px;position:relative;overflow:hidden}
.lg-hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(216,154,23,.22),transparent 55%)}
.lg-hero .logo-crop{position:relative}
.lg-hero p{color:#D9E2F2;font-size:11px;letter-spacing:2.4px;text-transform:uppercase;margin-top:8px;position:relative}

.logo-crop{display:block;width:100%;overflow:hidden;margin:0 auto}
.logo-crop img{display:block;width:100%;height:auto;margin:-39.6% 0 -49%}
.logo-crop.navy img{mix-blend-mode:screen}
.logo-crop.gold img{filter:brightness(1.06) sepia(.92) saturate(5.4) hue-rotate(-10deg) contrast(1.06) drop-shadow(0 3px 10px rgba(0,0,0,.5))}

.field .box>span{flex:0 0 22px;width:22px;height:22px;color:var(--gold3);display:block}
.field .box>span.ic-w{flex:0 0 26px;width:26px;height:26px}
.field .box>b{flex:1}
.btn>span{width:19px;height:19px;display:block}
.qcell .v.num{min-height:30px}

.summary,.trust{grid-template-columns:repeat(3,minmax(0,1fr))}
.trust{grid-template-columns:repeat(4,minmax(0,1fr))}
.summary>div,.trust>div,.qa>button,.grid2>section{min-width:0}
.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.qa{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tabbar{grid-template-columns:repeat(5,minmax(0,1fr))}
.tab{min-width:0}
.tab-t{white-space:nowrap;font-size:9.5px}
.tr>.tr{min-width:0}
.tr span{min-width:0}
.tr b,.tr small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-s,.sm-n,.sm-v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-p span{word-break:break-word}
.ft-v,.ft-x{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-v,.rt-x{white-space:nowrap}

.crest{width:44px;margin-bottom:8px}

.sm{gap:6px;padding:0 6px}
.sm-ic{width:32px;height:32px;flex:0 0 32px}
.sm-n{font-size:9.5px}
.sm-v{font-size:15px;letter-spacing:-.4px;padding:1px 3px}
.sm-s{font-size:9.5px}
.sm-l{width:34px;height:3px;margin-top:3px}
.summary{padding:13px 4px}

.trust{padding:11px 14px 11px 2px}
.tr{gap:5px;padding:0 4px}
.tr-ic{width:20px;height:20px;flex:0 0 20px}
.tr b{font-size:10.5px}
.tr small{font-size:9px}

.ft-p .ic-w{width:20px;height:20px;flex:0 0 20px}
.ft-p{gap:5px;padding-left:7px}
.ft-p span{font-size:8.5px;letter-spacing:-.1px}
.ft-v{font-size:11.5px;padding:1px 2px}
.ft-x{font-size:8px}
.ft-head div{padding:6px 2px;font-size:8.5px}
.ft-head div:first-child{padding-left:7px}
.pn-head{font-size:10.5px;letter-spacing:.9px}
.qa button{padding:10px 3px}
.qa-ic{width:34px;height:34px}
.qa-t{font-size:9.5px}
.qa-s{font-size:8.5px}

.hero-d{width:120px;height:120px}
.hero-d:before{clip-path:polygon(0 0,66px 0,0 66px)}
.hero-d:after{clip-path:polygon(82px 0,94px 0,0 94px,0 82px);opacity:.88}
.hero{padding-bottom:76px}

.ticker{bottom:calc(var(--tab) + 12px)}
.fab{bottom:calc(var(--tab) + 48px)}
.toast{bottom:calc(var(--tab) + 52px)}
.copy{position:static;padding:16px 0 0;font-size:9.5px;color:var(--gold3);letter-spacing:.6px}
.hero .logo-crop{width:94%;max-width:344px}
.tb-brand .logo-crop{width:180px}
.sn-head .logo-crop{width:168px}
.lg-hero .logo-crop{width:88%;max-width:326px}
.rc-c label,.qcell label{display:block}

.cdn .fa{color:var(--gold3)!important;display:inline-block;animation:floaty 3s ease-in-out infinite}
.cdn td{vertical-align:middle!important}
.cdn br+br{display:none}
.cdn table.bkingdesk td:first-child span{padding:4px!important;font-size:26px!important}
.cdn>div>div:first-child p:empty{display:none}

/* ==========================================================================
   WEB CHROME
   Components that only exist on the website build. All default to hidden so
   the phone layout above is untouched; the breakpoints below switch them on.
   ========================================================================== */

.skip{
position:fixed;left:50%;top:-64px;transform:translateX(-50%);z-index:100;
background:var(--goldg);color:#241703;font-size:12.5px;font-weight:700;letter-spacing:.6px;
padding:10px 20px;border-radius:0 0 11px 11px;box-shadow:var(--sh2);transition:top .2s
}
.skip:focus{top:0}
.shell:focus{outline:none}

.topnav{display:none;position:sticky;top:0;z-index:50;background:var(--navyg);box-shadow:0 2px 16px rgba(3,27,64,.30)}
.topnav:before{content:'';position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(circle at 88% 0,rgba(216,154,23,.26),transparent 55%)}
.tn-in{position:relative;display:flex;align-items:center;gap:14px;padding:0 var(--gutter);height:66px}
.tn-logo{flex:0 0 auto;display:block}
.tn-logo .logo-crop{width:140px}
.tn-links{flex:1;display:flex;align-items:center;justify-content:center;gap:2px}
.tn-link{
display:inline-flex;align-items:center;padding:9px 11px;border-radius:10px;
color:#D6DFEF;font-size:12px;font-weight:600;letter-spacing:.4px;white-space:nowrap;
transition:background .2s,color .2s
}
.tn-link.on{color:#fff;background:rgba(243,200,75,.16);box-shadow:inset 0 0 0 1px rgba(243,200,75,.34)}
.tn-drop{position:relative;display:inline-flex}
.tn-more:after{
content:'';width:5px;height:5px;margin-left:6px;flex:0 0 5px;
border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
transform:rotate(45deg) translateY(-1px);transition:transform .22s
}
.tn-drop.on .tn-more:after{transform:rotate(-135deg) translateY(-2px)}
.tn-menu{
position:absolute;right:0;top:calc(100% + 9px);min-width:236px;padding:8px;
background:var(--card);border-radius:14px;display:grid;gap:2px;
box-shadow:0 18px 46px rgba(0,0,0,.30),inset 0 0 0 1px var(--gline);
opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .2s
}
.tn-drop.on .tn-menu{opacity:1;transform:none;pointer-events:auto}
.tn-menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
font-size:12.5px;font-weight:500;color:var(--txt);transition:background .18s}
.tn-menu a.on{background:rgba(216,154,23,.14);font-weight:700}
.tn-mi{width:19px;height:19px;flex:0 0 19px;color:var(--gold3);display:block}
.tn-act{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.tn-btn{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:rgba(255,255,255,.10);color:#fff;padding:9px;transition:background .2s}
.tn-btn>span{display:block;width:100%;height:100%}
.tn-user{display:flex;align-items:center;gap:8px;padding:5px;border-radius:22px;
background:rgba(255,255,255,.10);color:#fff;font-size:12.5px;font-weight:600;transition:background .2s}
.tn-user .sn-av{width:30px;height:30px;flex:0 0 30px;font-size:13px}
.tn-un{display:none;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sitefoot{
display:grid;margin-top:24px;padding:22px 0 4px;border-top:1px solid var(--gline);
grid-template-columns:1fr 1fr;gap:20px
}
.sf-col{min-width:0}
.sf-brand{grid-column:1/-1}
.sf-brand .logo-crop{width:172px;margin:0}
.sitefoot address{font-style:normal;font-size:11.5px;line-height:1.75;color:var(--txt2);margin-top:8px;max-width:290px}
.sitefoot h2{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold3);margin-bottom:10px}
.sitefoot ul{list-style:none}
.sitefoot li+li{margin-top:7px}
.sitefoot a{font-size:12.5px;color:var(--txt2);transition:color .18s}

/* pointer affordances the touch build never needed */
.rt-row,.pick,#wcRate,#cvRate,.tn-more,.modal-x,.sn-act,.link-x{cursor:pointer}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tn-link:focus-visible,.tab:focus-visible,.sn-item:focus-visible{outline-offset:-2px}

@media(hover:hover){
.tn-link:hover{background:rgba(255,255,255,.10);color:#fff}
.tn-menu a:hover{background:rgba(216,154,23,.12)}
.tn-btn:hover,.tb-btn:hover,.modal-x:hover{background:rgba(255,255,255,.22)}
.tn-user:hover{background:rgba(255,255,255,.18)}
.tab:hover{color:#fff}
.tab:hover .tab-ic{opacity:1;color:var(--gold4)}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.mbtn:hover{filter:brightness(1.06)}
.mbtn.ghost:hover{background:rgba(216,154,23,.10)}
.qa button:hover{background:rgba(216,154,23,.07)}
.rt-row:hover .rt-c{background:rgba(216,154,23,.08)}
.rc:hover{border-color:var(--gold)}
.pick:hover{background:rgba(216,154,23,.10)}
.sn-item:hover{background:rgba(243,200,75,.16)}
.sn-act:hover{background:rgba(255,255,255,.12)}
.tabs2 a:hover:not(.on){box-shadow:inset 0 0 0 1.6px var(--gold)}
.seg button:hover:not(.on){color:var(--txt)}
.fab:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.34)}
.sitefoot a:hover,.cdn a:hover,.hint a:hover,.link-x:hover{color:var(--gold3);text-decoration:underline}
}

/* ---- small phones ---------------------------------------------------- */
@media(max-width:370px){
:root{--gutter:12px}
.brand{font-size:26px;letter-spacing:1.6px}
.rt-v{font-size:16px}
.sn-grid{grid-template-columns:1fr 1fr}
.tab-t{font-size:9px}
}

/* ---- notch / home-indicator insets ----------------------------------- */
@supports(padding:env(safe-area-inset-bottom)){
.tabbar{bottom:calc(8px + env(safe-area-inset-bottom))}
.ticker{bottom:calc(var(--tab) + 12px + env(safe-area-inset-bottom))}
.fab{bottom:calc(var(--tab) + 48px + env(safe-area-inset-bottom))}
.toast{bottom:calc(var(--tab) + 52px + env(safe-area-inset-bottom))}
.shell{padding-bottom:calc(var(--tab) + 96px + env(safe-area-inset-bottom))}
.topbar{padding-top:calc(10px + env(safe-area-inset-top))}
.hero{padding-top:calc(26px + env(safe-area-inset-top))}
}

/* ---- large phones / tablets ------------------------------------------ */
@media(min-width:640px){
:root{--gutter:24px}
body{font-size:15px}

.sn-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sn-item{font-size:10.5px;padding:13px 6px}
.sn-ic{width:26px;height:26px}
.sn-card{width:min(70%,400px)}

.summary{padding:16px 10px}
.sm{gap:9px;padding:0 10px}
.sm-ic{width:46px;height:46px;flex:0 0 46px}
.sm-n{font-size:11px}
.sm-v{font-size:19px}
.sm-s{font-size:10.5px}

.rt-p{min-height:66px}
.rt-p span{font-size:14px}
.rt-v{font-size:19px}
.rt-x{font-size:12px}

.qa{grid-template-columns:repeat(4,minmax(0,1fr))}
.qa-ic{width:42px;height:42px}
.qa-t{font-size:11px}
.qa-s{font-size:9.5px}

.tr{gap:8px}
.tr-ic{width:24px;height:24px;flex:0 0 24px}
.tr b{font-size:12px}
.tr small{font-size:10px}

.ft-p span{font-size:10.5px}
.ft-v{font-size:14px}
.ft-head div{font-size:9.5px}

/* flat card lists become fluid grids instead of one tall column */
#rcList,#ordList,#msgList{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:12px}
#rcList>*,#ordList>*,#msgList>*{margin-top:0}
#rcList>.empty,#ordList>.empty,#msgList>.empty,#rcList>.loader,#msgList>.loader{grid-column:1/-1}

.modal-card{max-width:430px}
.sheet{align-items:center;padding:24px}
.sheet-card{max-width:440px;margin:0 auto;border-radius:20px;max-height:72vh}
.sheet-grip{display:none}

.sitefoot{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:24px;margin-top:28px;padding-top:26px}
.sf-brand{grid-column:auto}
}

/* ---- desktop: app chrome off, website chrome on ---------------------- */
@media(min-width:900px){
:root{
/* --gutter becomes the centring pad, so the full-bleed negative margins
   above keep reaching the viewport edge with no extra rules. */
--gutter:max(28px, calc((100vw - var(--maxw)) / 2));
/* zeroing --tab unwinds every calc(var(--tab) + n) offset at once */
--tab:0px;
}
html,body{height:auto;min-height:100%}
/* clip (unlike hidden) does not make body a scroll container, which is what
   lets .topnav stick reliably */
@supports(overflow:clip){body{overflow-x:clip}}

.topnav{display:block}
.topbar,.tabbar,.sidenav{display:none}

.shell{min-height:0;padding-bottom:24px}
.ticker{bottom:0;height:30px}
.ticker-in{font-size:12.5px}
.fab{bottom:54px}
.toast{left:auto;right:var(--gutter);bottom:58px;max-width:380px}
.copy{padding:16px 0 46px;font-size:10.5px}

.page-title{margin:24px 0 16px}
.page-title span{font-size:14px;padding:10px 34px}

/* form and prose pages get a readable measure instead of stretching */
.shell{--inner:100%}
body[data-page=trade] .shell,
body[data-page=login] .shell,
body[data-page=calc] .shell,
body[data-page=calc1] .shell,
body[data-page=goldtrend] .shell,
body[data-page=silvertrend] .shell,
body[data-page=disclaimer] .shell,
body[data-page=privacy] .shell,
body[data-page=bank] .shell,
body[data-page=booking] .shell,
body[data-page=about] .shell{--inner:640px}

.shell>.field,.shell>.quote,.shell>.seg,.shell>.card,.shell>.cdn,.shell>.bill,
.shell>.rc,.shell>.tabs2,.shell>.hint,.shell>.btn,.shell>.page-title,
.shell>#rcList,.shell>#ordList,.shell>#msgList{
max-width:var(--inner);margin-left:auto;margin-right:auto
}
body[data-page=rates] .shell>.seg,
body[data-page=pending] .shell>.seg{max-width:580px}
body[data-page=rates] .shell>.btn{max-width:420px}

.hero{padding:38px 22px 88px}
.hero .logo-crop{width:88%;max-width:400px}
.crest{width:50px}
.tagline{font-size:12.5px;letter-spacing:3.4px}
.ribbon span{font-size:15px;padding:10px 36px}

.summary{padding:18px 14px;margin-top:-58px}
.sm-ic{width:50px;height:50px;flex:0 0 50px}
.sm-v{font-size:21px}

.rt-head,.rt-row{grid-template-columns:36% 32% 32%}
.rt-head div{font-size:12.5px;padding:15px 12px}
.rt-p{min-height:70px;padding-left:18px}
.rt-p .ic-w{width:34px;height:34px;flex:0 0 34px}
.rt-p span{font-size:15px}
.rt-v{font-size:21px}

.qcell .v{font-size:28px}
.gauge{width:180px;height:180px}
.gauge .in b{font-size:34px}
.trust{padding:14px 8px}
.cdn{padding:20px 22px;font-size:14px}
.msg-b p{font-size:13.5px}

#rcList,#ordList,#msgList{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
}

/* ---- wide desktop: two-column home ---------------------------------- */
@media(min-width:1100px){
.tn-logo .logo-crop{width:158px}
.tn-link{padding:9px 13px;font-size:12.5px}
.tn-un{display:block}

body[data-page=home] .shell{
display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
column-gap:24px;align-items:start
}
body[data-page=home] .hero,
body[data-page=home] .summary,
body[data-page=home] .ribbon,
body[data-page=home] .trust,
body[data-page=home] .sitefoot,
body[data-page=home] .copy{grid-column:1/-1}
body[data-page=home] .rates{grid-column:1}
body[data-page=home] .grid2{grid-column:2;grid-template-columns:minmax(0,1fr);margin-top:0;gap:14px}
body[data-page=home] .qa{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ---- reduced motion -------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
*,*:before,*:after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important
}
.shell{opacity:1;transform:none}
.ticker-in{animation:none;transform:none;padding-left:12px}
}