/* Shared fixes for the redesigned pages on the real site (the mockups ran inside a canvas frame) */
[hidden]{display:none!important}
/* The phone menu covers the screen, not the page (the canvas frame used absolute positioning) */
body.rd .hp-scrim,body.rd .hp-drawer{position:fixed}
body.rd .hp-drawer{overflow-y:auto}
body.rd a.hp-langitem{text-decoration:none}
body.rd a.hp-langitem:hover{background:#f7f5fa;color:#1f1633}
form.hp-short{margin:0}
.hp-short__btn[disabled]{opacity:.7;cursor:progress}
/* Payout methods: as many as the admin has switched on (the mockup had 6); lines drawn per tile so a short last
   row stays white */
body.rd .hp-paystrip{background:#ffffff;gap:0}
body.rd .hp-pay{box-shadow:1px 0 0 #e5e7eb,0 1px 0 #e5e7eb}
@media (min-width:992px){body.rd .hp-paystrip{grid-template-columns:repeat(var(--pay-cols,6),minmax(0,1fr))}}
/* Phone menu and language list, shared by every public page (copied from the home mockup) */
.hp-scrim{position:absolute;inset:0;z-index:40;background:rgba(21,15,35,.55);border:0;padding:0;margin:0;cursor:pointer}
.hp-drawer{position:absolute;z-index:41;top:0;left:0;bottom:0;width:86%;max-width:340px;background:#ffffff;color:#1f1633;box-shadow:0 16px 40px rgba(21,15,35,.28);animation:hp-slide .22s ease-out}
.hp-drawer__in{display:flex;flex-direction:column;gap:20px;padding:14px 16px 28px}
.hp-drawer__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hp-drawer__close{width:44px;height:44px;display:grid;place-items:center;border:1px solid #e5e7eb;border-radius:10px;background:#ffffff;color:#1f1633;cursor:pointer;padding:0}
.hp-drawer__links{display:grid;border-top:1px solid #e5e7eb}
.hp-drawer__links a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 4px;border-bottom:1px solid #e5e7eb;color:#1f1633;text-decoration:none;font-size:17px;font-weight:500}
.hp-drawer__links a svg{color:#6b6475}
.hp-drawer__btns{display:grid;gap:10px}
.hp-drawer__btns .sm-btn{width:100%;box-sizing:border-box}
@keyframes hp-slide{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.hp-drawer{animation:none}}
.hp-lang{position:relative}
.hp-langbtn{display:inline-flex;align-items:center;gap:6px;height:44px;min-width:44px;justify-content:center;padding:0 10px;border:1px solid #362d59;border-radius:10px;background:transparent;color:#ffffff;cursor:pointer;font:500 14px/1 Rubik,system-ui,sans-serif;box-sizing:border-box}
.hp-langbtn:hover{background:rgba(255,255,255,.08)}
.hp-langbtn__code{display:none}
.hp-langmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;list-style:none;margin:0;padding:6px;min-width:200px;display:grid;gap:2px;background:#ffffff;color:#1f1633;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 32px rgba(21,15,35,.18)}
.hp-langitem{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#1f1633;font:400 15px/1.2 Rubik,system-ui,sans-serif;text-align:left;cursor:pointer}
.hp-langitem:hover{background:#f7f5fa}
.hp-langitem[aria-pressed="true"]{font-weight:500}
@media (min-width:576px){.hp-langbtn__code{display:inline}}
@media (min-width:992px){.hp-drawer,.hp-scrim{display:none}}
/* Text pages without an "On this page" list: one readable column */
body.rd .tp.tp--single{display:block;max-width:760px;margin:0 auto}
/* Tables inside page and blog text: the site's table look; scroll sideways on narrow phones */
body.rd .tp-body table{width:100%;border-collapse:separate;border-spacing:0;margin:16px 0 24px;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;font-size:15px;font-variant-numeric:tabular-nums}
body.rd .tp-body th{background:#f4eff9;color:#1f1633;font-weight:500;text-align:left;padding:10px 14px}
body.rd .tp-body td{padding:10px 14px;border-top:1px solid #e5e7eb;vertical-align:top}
@media (max-width:575px){body.rd .tp-body table{display:block;overflow-x:auto;white-space:nowrap}}
/* Flash messages (sign-in, account and public pages) */
.rd-flash{display:block;margin:0 0 12px;padding:12px 14px;border-radius:10px;font-size:15px;line-height:1.5;border:1px solid transparent}
.rd-flash--error{background:#fdecea;color:#b42318;border-color:#f6c9c4}
.rd-flash--success{background:#e6f4ec;color:#1e7a46;border-color:#bfe3cc}
.rd-flash--warning{background:#fff3d6;color:#8a5300;border-color:#f3dca5}
.rd-flash--info{background:#f0eefb;color:#3e3591;border-color:#d9d4f2}
body.rd > .rd-flash{max-width:1152px;margin:12px auto;box-sizing:border-box}
/* Sign-in pages: small forms used as links (two-step "Email me a code"), links styled like the mockup's buttons */
form.au-inline{margin:0;display:contents}
.au-other a{display:flex;align-items:center;gap:10px;min-height:44px;color:#1f1633;font:500 15px/1.2 Rubik,system-ui,sans-serif;text-decoration:none}
.au-other a svg{color:#6b6475;flex:none}
.au-other a:hover,.au-other button:hover{text-decoration:underline}
.au-google{text-decoration:none;box-sizing:border-box}
.au-card > .rd-flash{margin:0}
/* Danger button (account lock-down), in the design system's danger colours */
.sm-btn.sm-btn--danger{background:#b42318;border-color:#b42318;color:#ffffff}
.sm-btn.sm-btn--danger:hover{background:#912018;border-color:#912018;color:#ffffff}
form.sl-actions{margin:0}
/* Older page parts shown inside the new sign-in card (two-step setup): the design system's look */
.au-card .alert{padding:12px 14px!important;border-radius:10px;font-size:15px;margin:0 0 12px}
.au-card .alert-info{background:#f0eefb;color:#3e3591}
.au-card .alert-warning{background:#fff3d6;color:#8a5300}
.au-card .alert-danger{background:#fdecea;color:#b42318}
.au-card .alert-success{background:#e6f4ec;color:#1e7a46}
.au-card .form-control{display:block;width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid #cfcfdb;border-radius:8px;font:400 16px/1.4 Rubik,system-ui,sans-serif;color:#1f1633}
.au-card .form-group{margin:0 0 14px}
.au-card .form-group label{display:block;font-size:14px;font-weight:500;margin:0 0 6px}
.au-card .btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border:1px solid #cfcfdb;border-radius:8px;background:#ffffff;color:#1f1633;font:500 14px/1 Rubik,system-ui,sans-serif;cursor:pointer;text-transform:uppercase;letter-spacing:.3px}
.au-card .btn-primary{background:#150f23;border-color:#150f23;color:#ffffff}
.au-card .btn-block{display:flex;width:100%;min-height:48px}
.au-card .btn[disabled]{opacity:.5;cursor:not-allowed}
.au-card .text-muted{color:#6b6475}
.au-card .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.au-card .checkbox label{display:flex;align-items:center;gap:8px;font-size:15px}
.au-card .ts-steps span.on{background:#150f23!important}
/* Segmented controls made of links (filters that change the address) look like the button ones */
.sm-seg a{border:0;background:transparent;color:var(--muted,#6b6475);font:500 14px/1.29 Rubik,system-ui,sans-serif;padding:7px 12px;border-radius:6px;cursor:pointer;min-height:36px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.sm-seg a[aria-pressed="true"]{background:var(--accent,#fbbf24);color:var(--primary,#150f23);font-weight:600}

/* QA: tablets and small laptops (768–1179px) can't fit the full menu (the mockups only show 390 and 1440), so the menu button stays and
   the links live in the slide-out menu; Sign in / Sign up stay in the bar */
@media (min-width:768px) and (max-width:1179px){
body.rd .pg-navlinks,body.rd .hp-navlinks{display:none}
body.rd .pg-menubtn,body.rd .hp-menubtn{display:inline-grid}
body.rd .hp-drawer,body.rd .hp-scrim{display:block}
}
body.rd .pg-navlinks a,body.rd .hp-navlinks a,body.rd .pg-actions .sm-btn,body.rd .hp-actions .sm-btn{white-space:nowrap}
/* QA: the open language list sat under the home hero (clicks went to the hero). The top bars get their own layer,
   above the page and below the slide-out menu (40/41) */
body.rd .hp-nav,body.rd .pg-nav{position:relative;z-index:35}
/* QA: below 992px the payment methods wrap; an odd last row is centred instead of leaving one tile beside an empty
   box (4 a row on tablets, 3 on phones) */
@media (max-width:991px){
body.rd .hp-paystrip{display:flex;flex-wrap:wrap;justify-content:center}
body.rd .hp-pay{flex:0 0 33.333%;box-sizing:border-box;box-shadow:none}
}
@media (min-width:576px) and (max-width:991px){body.rd .hp-pay{flex-basis:25%}}
/* Language menus: round flag next to each language (owner's reference, 12 Nov); the chosen one in the accent colour */
.lang-flag{position:relative;width:22px;height:22px;border-radius:50%;overflow:hidden;display:inline-block;flex:none;box-shadow:0 0 0 1px rgba(21,15,35,.14);background:#e5e7eb;vertical-align:middle}
.lang-flag__svg{position:absolute;top:0;left:50%;height:100%;width:auto;transform:translateX(-50%);display:block}
.hp-langbtn .lang-flag,.au-lang .lang-flag,.m-lang .lang-flag{width:20px;height:20px}
.hp-langitem__name{flex:1 1 auto;text-align:left}
body.rd .hp-langitem[aria-current="true"]{color:#3e3591;font-weight:600}
.hp-langitem svg{flex:none}
.hp-logolink{display:inline-flex;align-items:center;flex:none}
/* QA (owner, 12 Nov): the open language list takes the width it needs (it was held to the narrow button's width, so
   the flags stuck out of the box on the sign-in pages) */
body.rd .hp-langmenu{width:max-content;min-width:210px;max-width:calc(100vw - 24px);box-sizing:border-box}
body.rd .hp-langitem{white-space:nowrap;box-sizing:border-box}
/* Mascots in motion (element mascot; owner, 13 Nov): Linky waves, Coin runs, Dart flies, all blink */
.mz{display:block;height:auto;overflow:visible}
@keyframes mz-blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
@keyframes mz-wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-18deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-14deg)}}
@keyframes mz-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes mz-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes mz-legA{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}
@keyframes mz-legB{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes mz-armA{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}}
@keyframes mz-armB{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-20deg)}}
@keyframes mz-fly{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(8px,-16px) rotate(3deg)}}
@keyframes mz-trail{to{stroke-dashoffset:-44}}
@keyframes mz-speed{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:no-preference){
.mz .mz-eye{animation:mz-blink 4.2s infinite;transform-box:fill-box;transform-origin:center}
.mz-linky .mz-body{animation:mz-sway 3s ease-in-out infinite;transform-box:view-box;transform-origin:100px 220px}
.mz-linky .mz-wave{animation:mz-wave 1.8s ease-in-out infinite;transform-box:view-box;transform-origin:144px 140px}
.mz-coin .mz-run{animation:mz-bob .5s ease-in-out infinite}
.mz-coin .mz-legA{animation:mz-legA .5s ease-in-out infinite;transform-box:view-box;transform-origin:86px 162px}
.mz-coin .mz-legB{animation:mz-legB .5s ease-in-out infinite;transform-box:view-box;transform-origin:118px 162px}
.mz-coin .mz-armA{animation:mz-armA .5s ease-in-out infinite;transform-box:view-box;transform-origin:42px 112px}
.mz-coin .mz-armB{animation:mz-armB .5s ease-in-out infinite;transform-box:view-box;transform-origin:162px 100px}
.mz-coin .mz-speed{animation:mz-speed .5s ease-in-out infinite}
.mz-dart .mz-fly{animation:mz-fly 4s ease-in-out infinite}
.mz-dart .mz-trail{animation:mz-trail 1.4s linear infinite}
}
/* Public header: when the menu doesn't fit (longer languages), use the menu button as on tablets (js/site.js
   adds html.rd-navfit; owner, 13 Nov) */
html.rd-navfit .hp-navlinks,html.rd-navfit .pg-navlinks,html.rd-navfit .hp-actions .hp-signin,html.rd-navfit .pg-actions .pg-signin{display:none!important}
html.rd-navfit .hp-menubtn,html.rd-navfit .pg-menubtn{display:inline-grid!important}
html.rd-navfit .hp-drawer,html.rd-navfit .hp-scrim{display:block!important}
/* Public phone menu: dark like the member sidebar (owner, 13 Nov) */
body.rd .hp-drawer{background:#1f1633;color:#ece9f3;box-shadow:0 16px 40px rgba(0,0,0,.45)}
body.rd .hp-drawer__close{background:transparent;border-color:#362d59;color:#ffffff}
body.rd .hp-drawer__close:hover{background:rgba(255,255,255,.08)}
body.rd .hp-drawer__links{border-top-color:#362d59}
body.rd .hp-drawer__links a{color:#ece9f3;border-bottom-color:#362d59}
body.rd .hp-drawer__links a:hover{background:rgba(255,255,255,.06)}
body.rd .hp-drawer__links a[aria-current="page"]{color:#fbbf24}
body.rd .hp-drawer__links a svg{color:#a39db0}
body.rd .hp-drawer .sm-btn--secondary{background:#fbbf24;border-color:#fbbf24;color:#150f23}
body.rd .hp-drawer .sm-btn--secondary:hover{background:#f5b30c;border-color:#f5b30c;color:#150f23}
body.rd .hp-drawer .sm-btn--primary{background:#ffffff;border-color:#ffffff;color:#150f23}
body.rd .hp-drawer .sm-btn--primary:hover{background:#f0f0f0;color:#150f23}
body.rd .hp-drawer :focus-visible{outline-color:#fbbf24}