/* game winning test site — responsive layer
   breakpoints: ≤1279 small desktop · ≤1023 tablet · ≤767 mobile · ≤479 small mobile */
html,body{margin:0;max-width:100%;overflow-x:hidden}
[data-rs]{width:100% !important;height:auto !important;min-height:100vh;box-sizing:border-box}
[data-rs] img{max-width:100%}
[data-g]>*{min-width:0}
.rs-burger{display:none}

/* ---------- grids ---------- */
@media (max-width:1279px){
  [data-g="5"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (max-width:1023px){
  [data-g="6"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  [data-g="4"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [data-g="8"]{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  [data-g="12"]{grid-template-columns:repeat(6,minmax(0,1fr)) !important}
  [data-g="12"]>*{grid-column:auto !important}
  [data-g="foot"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  [data-g="foot"]>:first-child,[data-g="foot"]>:last-child{grid-column:1/-1 !important}
  [data-g="split"]{grid-template-columns:minmax(0,1fr) !important}
  [data-g="split"]>*,[data-g="3"]>*,[data-g="4"]>*,[data-g="6"]>*{grid-column:auto !important;grid-row:auto !important}
}
@media (max-width:767px){
  [data-g="2"],[data-g="3"]{grid-template-columns:minmax(0,1fr) !important}
  [data-g="2"]>*,[data-g="3"]>*{grid-column:1/-1 !important}
  [data-g="12"]{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  [data-g="5"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:599px){
  [data-g="foot"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [data-g="8"],[data-g="6"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:479px){
  [data-g="4"],[data-g="5"]{grid-template-columns:minmax(0,1fr) !important}
}

/* ---------- website (g3) ---------- */
@media (max-width:1023px){
  .g3 .tri{display:none !important}
  .g3 .nav{height:96px;padding:0 clamp(16px,4vw,40px) !important;gap:12px}
  .g3 .nav .links{display:none !important}
  .g3 .nav>a:first-child{margin-right:auto}
  .g3 .nav>a:first-child img{height:44px !important}
  .rs-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(247,247,245,.45);align-items:center;flex:none}
  .rs-burger span{display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px}
  .g3 .row{flex-wrap:wrap;row-gap:16px}
}
@media (max-width:767px){
  [data-rs="web"] .nav{height:80px}
  .g3 .nav>a:first-child img{height:36px !important}
  .g3 .nav a[href="test-choose-role.html"]:not(.pill){display:none}
  .g3 .nav .pill{height:40px;padding:0 16px;font-size:14px}
  .g3 .hero{margin:6px;border-radius:20px}
}

/* website: extra tuning */
@media (max-width:1199px){
  .g3 .nav .links{display:none !important}
  .g3 .nav>a:first-child{margin-right:auto}
  .rs-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(247,247,245,.45);align-items:center;flex:none;margin-left:12px}
  .rs-burger span{display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px}
}
@media (max-width:767px){
  [data-rs="web"] [data-h]{height:calc(var(--h) * .72) !important}
  [data-rs="web"] .hero[data-h]{height:auto !important;min-height:460px}
  .g3 .tabs{flex-wrap:wrap;gap:8px 18px;font-size:20px}
  .g3 .cfg-tabs{font-size:17px}
  [data-g="4"]:has(>.pc){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px !important}
  .g3 .pc .im{height:clamp(180px,48vw,340px)}
  .g3 .pc .nm{flex-wrap:wrap;font-size:14px}
  .g3 .faq{flex-direction:column;gap:12px}
  .g3 table{display:block;overflow-x:auto}
  .g3 .ui{box-shadow:0 20px 40px rgba(0,0,0,.35)}
}

/* ---------- portal (desktop app) ---------- */
.app .t{max-width:100%}
@media (max-width:1279px){
  .app .search{width:220px}
}
@media (max-width:1199px){
  .app{flex-direction:column}
  .app>.side{width:auto;margin:6px 6px 0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px;border-radius:20px}
  .app>.side .logo{margin:0;height:32px}
  .app>.side .navlbl,.app>.side .foot{display:none}
  .app>.side .clubsw{margin:0 0 0 auto;padding:6px 10px}
  .app>.side>.row{margin:0 !important}
  .app>.side .nav{flex-basis:100%;display:flex;flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0;order:9}
  .app>.side .nav+.nav{flex-basis:auto}
  .app>.side .nav a{flex:none;white-space:nowrap;padding:0 14px;height:38px}
  .app>.side{row-gap:8px}
  .app .main{width:100%}
  .app .top{height:auto;min-height:72px;flex-wrap:wrap;padding:12px clamp(16px,3vw,40px);row-gap:10px}
  .app .content{padding:8px clamp(16px,3vw,40px) 48px}
  .app .content .row.between,.app .content .row{flex-wrap:wrap;row-gap:12px}
  .app .t{display:block;overflow-x:auto;white-space:nowrap}
  .app .modal{width:min(520px,calc(100vw - 32px))}
  .app .msg .bubble{max-width:85%}
}
@media (max-width:767px){
  .app .search{display:none}
  .app .top .crumb{flex-basis:100%;order:-1}
  .app .seg{max-width:calc(100vw - 48px);overflow-x:auto}
  .app .kv{grid-template-columns:110px minmax(0,1fr)}
  .app .h1{font-size:30px}
  .app>.side .clubsw .grow span{display:none}
}

/* trackers scroll sideways on small screens */
@media (max-width:767px){
  .jr,:has(>.st){overflow-x:auto;scrollbar-width:none}
  .jr>.js{min-width:78px}
  :has(>.st)>.st{min-width:66px}
  #gw-back{width:48px !important;height:48px !important;padding:0 !important;justify-content:center;right:14px !important;bottom:14px !important}
  #gw-back .rs-bt{display:none}
}

@media (max-width:479px){ [data-g="12"]{grid-template-columns:repeat(3,minmax(0,1fr)) !important} }
:has(>.st){flex-wrap:nowrap !important}
@media (max-width:767px){
  [data-rs="web"] .hero{display:flex;flex-direction:column}
  [data-rs="web"] .hero>div[style*="absolute"]{position:relative !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;padding:64px clamp(16px,5vw,40px) 40px !important;margin-top:auto !important;max-width:100% !important;width:auto !important}
  [data-rs="web"] .hero>img{display:none !important}
}

@media (max-width:900px){ [data-rs="web"] .hero>img{display:none !important} }

/* ---------- split screens: brand panels, wizards, sign-in ---------- */
@media (max-width:1023px){
  [data-g]>.gsurf{min-height:clamp(240px,46vw,400px)}
  [data-g="split"]>aside.gsurf{min-height:0;margin:6px 6px 0 !important;padding:22px clamp(16px,4vw,32px) !important;gap:14px !important}
  [data-g="split"]>aside.gsurf .h2{font-size:26px}
  [data-g="split"]>aside.gsurf .small{display:none}
  [data-g="split"]>aside.gsurf :has(>.stp){flex-direction:row !important;overflow-x:auto;gap:18px !important;scrollbar-width:none;padding-bottom:2px}
  [data-g="split"]>aside.gsurf .stp{flex:none}
  [data-g="split"]>aside.gsurf .stp .xs{display:none}
  [data-g="split"]>aside.gsurf>div:first-child{flex-direction:row !important;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px !important}
  [data-g="split"]>aside.gsurf>div:first-child>div{margin-top:0 !important}
  [data-g="split"]>:not(.gsurf){padding-left:clamp(16px,5vw,48px) !important;padding-right:clamp(16px,5vw,48px) !important}
}
@media (max-width:767px){
  [data-g="split"]>aside.gsurf .stp>span:last-child{display:none}
  [data-g="split"]>aside.gsurf :has(>.stp){gap:10px !important}
}

/* ---------- mobile-first screens (.m) on bigger screens ---------- */
.m[data-rs]{padding-bottom:96px}
.m[data-rs]:not(:has(.mnav)){padding-bottom:24px}
.m .mnav{position:fixed !important;left:50% !important;right:auto !important;transform:translateX(-50%);width:calc(min(100vw,560px) - 12px);bottom:6px !important;z-index:50}
body:has(.mnav) #gw-back{bottom:92px !important}
@media (min-width:600px){
  body:has(.m[data-rs]){background:#E2E2DF}
  .m[data-rs]{max-width:560px;margin:0 auto;box-shadow:0 0 0 1px #D6D6D2}
}
@media (max-width:1023px){
  [data-g]>div.gsurf{display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:24px clamp(18px,4vw,40px) 28px;min-height:clamp(300px,52vw,420px);margin:6px !important}
  [data-g]>div.gsurf>:not(img)[style*="absolute"]{position:relative !important;left:auto !important;top:auto !important;right:auto !important;bottom:auto !important;max-width:min(560px,70%) !important}
  [data-g]>div.gsurf>img[style*="absolute"][style*="bottom"]{height:115% !important;right:-8% !important;opacity:.55 !important}
  [data-g]>div.gsurf>img[style*="absolute"][style*="top"]{position:relative !important;left:auto !important;top:auto !important;align-self:flex-start;height:40px !important}
}
@media (max-width:767px){
  [data-g]>div.gsurf>:not(img)[style*="absolute"]{max-width:100% !important}
}

/* misc */
[data-rs] .bar{max-width:100%}
@media (max-width:1279px){
  [data-g="7"]{grid-template-columns:repeat(7,minmax(200px,1fr)) !important;overflow-x:auto;padding-bottom:8px}
}
@media (max-width:767px){
  [data-rs] .t{display:block;overflow-x:auto;white-space:nowrap}
  [data-rs]:not(.m) .row.g32,[data-rs]:not(.m) .row.g24,[data-rs]:not(.m) .row.g20,[data-rs]:not(.m) .row.g16{flex-wrap:wrap}
  [data-rs]:not(.m) .row.g16>.grow{min-width:0;flex-basis:100%}
}

/* tab strips and segmented controls scroll instead of squashing */
@media (max-width:1199px){
  .app .tabs,[data-rs]:not(.g3) .tabs{overflow-x:auto;scrollbar-width:none;max-width:100%}
  .app .tabs>*,[data-rs]:not(.g3) .tabs>*{flex:none;white-space:nowrap}
  .seg{max-width:calc(100vw - 48px);overflow-x:auto !important;scrollbar-width:none}
  .seg>*{flex:none;white-space:nowrap}
  .app>.side .rs-navs{flex-basis:100%;order:9;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
  .app>.side .rs-navs .nav{flex-basis:auto !important;flex:none;order:0}
}
@media (max-width:767px){ .panel .ph{flex-wrap:wrap;row-gap:10px} }
@media (max-width:767px){
  :is([style*="grid-template-columns: 200px 120px"],[style*="grid-template-columns:200px 120px"]){grid-template-columns:minmax(0,1fr) auto !important;width:100%}
  .panel>.row[style*="space-between"]{flex-wrap:wrap;row-gap:16px}
}
@media (min-width:600px){
  body:has([data-rs="webm"]){background:#E2E2DF}
  [data-rs="webm"]{max-width:480px;margin:0 auto}
}
.seg{max-width:calc(100vw - 48px)}
@media (max-width:1199px){
  [data-rs="full"] .row{flex-wrap:wrap;row-gap:10px}
}
@media (max-width:767px){
  .app .main .row{flex-wrap:wrap;row-gap:10px}
}
@media (max-width:767px){
  .panel .ph>.row{flex:1 1 100%;min-width:0}
  .app .panel .ph .seg{max-width:100%}
}

/* =========================================================
   MOBILE POLISH (≤767px) — type, spacing, tap targets
   ========================================================= */
@media (max-width:767px){
  /* --- website: hero --- */
  [data-rs="web"] .hero>div[style*="absolute"]{display:flex;flex-direction:column;padding:40px 20px 32px !important}
  [data-rs="web"] .hero>div[style*="absolute"]>div[style*="absolute"]{position:static !important;order:-1;margin:0 0 18px}
  [data-rs="web"] .hero>div[style*="absolute"]>div[style*="absolute"] span{font-size:13px !important;color:rgba(247,247,245,.75) !important}
  [data-rs="web"] .hero>div[style*="absolute"]>div:not([style*="absolute"]):not(.col){margin:14px 0 0 !important;font-size:19px !important;line-height:1.4;opacity:.9}
  [data-rs="web"] .hero .disp{font-size:clamp(46px,13.2vw,58px) !important;line-height:.9}
  [data-rs="web"] .hero p,[data-rs="web"] .hero .lead{font-size:17px !important;line-height:1.55}
  [data-rs="web"] .hero .chip{height:32px;font-size:13px;padding:0 14px}
  [data-rs="web"] .hero[data-h]{min-height:0}

  /* --- website: type scale --- */
  .g3 .h1{font-size:clamp(34px,10vw,42px) !important;line-height:1}
  .g3 .h2,.g3 h2{font-size:clamp(28px,8vw,34px) !important;line-height:1.05}
  .g3 .h3{font-size:20px !important}
  .g3 .lead{font-size:17px !important;line-height:1.55}
  .g3 .body{font-size:15.5px !important;line-height:1.6}
  .g3 .label{font-size:12.5px}
  .g3 .small{font-size:13px}

  .g3 .nav>a:first-child{flex:none}
  .g3 .nav>a:first-child img{width:auto !important;max-width:none}
  /* --- website: section rhythm --- */
  [data-rs="web"]>section{padding-left:20px !important;padding-right:20px !important}
  [data-rs="web"]>section:is([style*="padding: 0 10px"],[style*="padding:0 10px"]),[data-rs="web"]>section:is([style*="padding: 0 10px"],[style*="padding:0 10px"]),[data-rs="web"]>section:is([style*="padding: 0px 10px"],[style*="padding:0px 10px"]){padding-left:8px !important;padding-right:8px !important}
  [data-rs="web"] .gcard[style*="padding"]{padding:36px 22px !important}
  [data-rs="web"]>section .row[style*="space-between"][style*="flex-end"]{margin-bottom:24px !important}

  /* --- website: kill desktop min-heights that leave empty boxes --- */
  [data-rs="web"] :is([style*="min-height: 560px"],[style*="min-height:560px"]),[data-rs="web"] :is([style*="min-height: 250px"],[style*="min-height:250px"]),[data-rs="web"] :is([style*="min-height: 240px"],[style*="min-height:240px"]){min-height:0 !important}
  [data-rs="web"] :is([style*="min-height: 560px"],[style*="min-height:560px"])>:last-child{margin-top:28px !important}

  /* --- website: tall image cards --- */
  [data-rs="web"] .gcard[data-h],[data-rs="web"] .ic[data-h]{height:min(calc(var(--h) * .62),400px) !important}
  [data-rs="web"] [data-g="4"]>.gcard[data-h]{height:420px !important}
  [data-rs="web"] [data-g="split"] img[data-h],[data-rs="web"] [data-g="split"]>[data-h]{height:min(calc(var(--h) * .6),400px) !important}
  [data-rs="web"] .ic .cap{padding:18px 18px 20px}
  [data-rs="web"] .ic .cap b{font-size:18px}
  [data-rs="web"] .ic .cap span{font-size:13px}

  /* --- website: tab strips scroll in one line --- */
  .g3 .tabs{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;font-size:19px !important;gap:20px !important;padding-bottom:6px;margin-right:-20px;padding-right:20px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .g3 .tabs::-webkit-scrollbar{display:none}
  .g3 .tabs>*{flex:none;white-space:nowrap}
  .g3 .tabs .dot{display:none}
  .g3 .row:has(>.tabs){flex-direction:column;align-items:flex-start !important;row-gap:10px}
  .g3 .row:has(>.tabs)>.tabs{width:100%}

  /* --- website: tick / icon rows never split the icon from its text --- */
  .g3 .row:has(>span:first-child>svg:only-child),.g3 .row:has(>svg:first-child){flex-wrap:nowrap !important;align-items:flex-start}
  .g3 .row:has(>span>svg:only-child)>span:first-child{flex:none;margin-top:3px}

  /* --- website: product cards --- */
  .g3 .pc{gap:10px}
  .g3 .pc .nm{flex-direction:column;gap:2px;font-size:15px}
  .g3 .pc .nm>:last-child{font-size:13px;color:#6B6B66}
  .g3 .pc .ds{margin-top:-4px;font-size:12.5px}

  /* --- website: tap targets --- */
  .g3 .ulink{display:inline-block;padding:10px 0;margin:-10px 0}
  .g3 .pill{height:48px;padding:0 24px;font-size:15px}
  .g3 .pill.lg{height:52px}
  .g3 .nav .pill{height:40px;padding:0 16px;font-size:14px}
  .g3 footer .col>a,.g3 footer .col a{display:block;padding:7px 0}
  .g3 footer [data-g="foot"]{row-gap:28px !important}
  .g3 .faq{padding:20px 0}
  .g3 .dd-h{padding:16px}
  .g3 .sw{height:46px;padding:0 20px;font-size:15px}
  .g3 .inp{height:50px;font-size:16px}
  .g3 textarea,.g3 select,.g3 input{font-size:16px !important}

  /* --- portal: type --- */
  .app .h1{font-size:28px !important;line-height:1.08}
  .app .h2{font-size:22px}
  .app .xs{font-size:12px}
  .app .small{font-size:13.5px}
  .app .t{font-size:14px}
  .app .t td,.app .t th{padding-top:12px;padding-bottom:12px}
  .app .t th:first-child,.app .t td:first-child{padding-left:16px}

  /* --- portal: spacing --- */
  .app .content{gap:16px;padding-bottom:96px}
  .app .panel>.ph,.app .panel>div:first-child[class*="row"]{padding-left:18px !important;padding-right:18px !important}
  .app .panel .col:is([style*="padding: 28px 32px"],[style*="padding:28px 32px"]),.app .panel .col:is([style*="padding: 28px 32px"],[style*="padding:28px 32px"]){padding:22px 18px !important}

  /* --- portal: tap targets --- */
  .seg button,.seg a{height:38px}
  .app .btn{min-height:44px}
  .app .btn-sm{min-height:38px}
  .app .iconbtn{width:42px;height:42px}
  .app .t a:not(.btn):not(.iconbtn){display:inline-block;padding:6px 0}
  .app .inp{font-size:16px}

  /* --- portal: hero kit image panel --- */
  .app [data-g="split"]>div:first-child:has(>img){height:320px;overflow:hidden}
  .app [data-g="split"]>div:first-child>img{width:100% !important;margin:0 !important;height:100% !important;object-fit:cover}

  /* --- phone-first screens (.m) --- */
  .m .h1{font-size:28px}
  .m .xs{font-size:12px}
  .mnav a{font-size:11.5px}

  /* --- wizard/sign-in --- */
  [data-g="split"]>:not(.gsurf) .h1,[data-g="split"]>:not(.gsurf) .h2{font-size:clamp(28px,8vw,34px) !important}
  [data-g]>div.gsurf .disp{font-size:clamp(38px,11vw,46px) !important}
}
@media (max-width:379px){
  [data-rs="web"] .hero .disp{font-size:42px !important}
  .g3 .h1{font-size:32px !important}
  .g3 .h2,.g3 h2{font-size:26px !important}
  [data-rs="web"]>section{padding-left:16px !important;padding-right:16px !important}
}
@media (max-width:767px){
  .g3 .nav>a:first-child img{height:30px !important}
  .g3 .nav{gap:8px}
  .rs-burger{width:42px;height:42px;margin-left:4px}
  .g3 .ui,.g3 .ui *{white-space:normal}
  .g3 .ui .h2,.g3 .ui h2,.g3 .ui .h3{font-size:22px !important}
}
@media (max-width:767px){
  [data-rs="web"] :is([style*="min-height: 560px"],[style*="min-height:560px"]):is([style*="justify-content: center"],[style*="justify-content:center"]){min-height:0 !important;height:clamp(300px,92vw,400px) !important}
}
@media (max-width:767px){
  [data-rs="web"] [data-g="2"]{align-items:start !important}
  .g3 .ui a.row{flex-direction:column;align-items:flex-start !important;gap:6px}
  .g3 .ui a.row>*{min-width:0;max-width:100%;white-space:normal !important}
  .g3 .ui a.row>span:last-child{display:inline-flex !important;flex-direction:row !important;align-items:center}
  .g3 .ui .row:has(>.st){flex-direction:row !important}
  .g3 .faq{flex-direction:row !important;gap:16px}
}
/* portal tables become stacked rows on phones (except editable grids) */
@media (max-width:767px){
  .app .t:not(:has(select,input,textarea)){display:block;overflow:visible;white-space:normal}
  .app .t:not(:has(select,input,textarea)) thead{display:none}
  .app .t:not(:has(select,input,textarea)) tbody{display:block}
  .app .t:not(:has(select,input,textarea)) tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:14px 18px;border-bottom:1px solid var(--line)}
  .app .t:not(:has(select,input,textarea)) tr:last-child{border-bottom:0}
  .app .t:not(:has(select,input,textarea)) td{display:block;padding:0 !important;border:0 !important;white-space:normal;font-size:13px;color:var(--mute)}
  .app .t:not(:has(select,input,textarea)) td:first-child{flex:1 1 100%;font-size:15px;color:var(--ink)}
  .app .t:not(:has(select,input,textarea)) td:empty{display:none}
  .app .t:not(:has(select,input,textarea)) td:last-child:has(.btn,.iconbtn,a){margin-left:auto}
  .m .t td,.m .t th{white-space:normal}
}
@media (max-width:767px){
  .app .t:not(:has(select,input,textarea)) tr.hl,.app .t:not(:has(select,input,textarea)) tr.miss{background:rgba(44,106,40,.08)}
  .app .t:not(:has(select,input,textarea)) td{background:transparent !important}
  .app .t td .btn{white-space:nowrap;padding:0 16px;min-height:38px}
  .app .t td .bd{white-space:nowrap}
}
.mnav[data-g="4"]{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
.mnav[data-g="4"]>*{grid-column:auto !important}
@media (max-width:767px){ .app .btn{height:auto} .app .t td .btn{height:38px} }
@media (max-width:767px){ [data-rs="web"] .hero h1{overflow-wrap:break-word;hyphens:manual} }
@media (max-width:379px){ .g3 .tabs{margin-right:-16px;padding-right:16px} }
@media (max-width:767px){ .app .row:has(>.seg),.app .field:has(.seg){flex-wrap:wrap} .app .seg{max-width:100%} }
@media (max-width:767px){ .app .row>.field.grow{flex:1 1 100%;min-width:0} .app .field{flex-wrap:wrap} }
@media (max-width:767px){
  .mnav a,.mnav a span{font-size:12px !important}
  .js .sb,.js .lb{font-size:12px}
  .g3 .tabs>button,.g3 .tabs>a,.g3 .tabs .sc-interp{padding-top:6px;padding-bottom:6px}
}
/* order calendar: each month becomes one coloured tile on phones */
@media (max-width:767px){
  .g3 [data-g="12"]:has(.mo){grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:6px !important}
  .g3 [data-g="12"]>.col:has(>.mo){gap:2px !important;padding:12px 6px 10px;border-radius:14px;align-items:center;text-align:center;background:#E2E2DF;color:#6B6B66}
  .g3 [data-g="12"]>.col:has(>.mo.k){background:#2C6A28;color:#F7F7F5}
  .g3 [data-g="12"]>.col:has(>.mo.t){background:#161616;color:#F7F7F5}
  .g3 [data-g="12"]>.col:has(>.mo.w){background:#6B6B66;color:#F7F7F5}
  .g3 [data-g="12"]>.col:has(>.mo)>.small:first-child{order:-1;font-size:15px !important;font-weight:400;color:inherit !important}
  .g3 [data-g="12"]>.col:has(>.mo)>.mo{height:auto;background:none !important;color:inherit !important;font-size:12.5px;border-radius:0;padding:0}
  .g3 [data-g="12"]>.col:has(>.mo)>.small:last-child{font-size:11.5px !important;color:inherit !important;opacity:.7}
  .g3 [data-g="12"]:has(.mo)+.row{flex-wrap:wrap;gap:8px 18px !important;margin-top:16px !important}
}
/* hero photo scales with the window and stays in frame */
@media (min-width:768px){ [data-rs="web"] .hero[data-h]{min-height:600px} }
@media (min-width:901px) and (max-width:1199px){
  [data-rs="web"] .hero>img[style*="absolute"]{transform:translateX(16%)}
  [data-rs="web"] .hero>div[style*="absolute"]{z-index:3 !important}
}
@media (min-width:768px){ [data-rs="web"] .hero>div[style*="absolute"]{z-index:3 !important} }

/* ---------- Title Case copy: cancel the original lowercase transform ---------- */
html .g3,html .g3 *,html body,html body *{text-transform:none !important}
/* ---------- portal at small-desktop widths (1200–1365px) ---------- */
.tabs a,.tabs button,.seg button,.seg a{white-space:nowrap}
@media (min-width:1200px) and (max-width:1365px){.app>.side{width:212px}}
@media (max-width:1365px){
  .app .tabs{overflow-x:auto;scrollbar-width:none;max-width:100%}
  .app .tabs>*{flex:none}
  .app [data-px="r"]{grid-template-columns:minmax(0,1fr) !important}
  .app [data-px="r"]>*{grid-column:auto !important}
  .app [data-px="3"]{grid-template-columns:minmax(0,260px) minmax(0,1fr) !important}
  .app [data-px="3"]>:nth-child(3){grid-column:1/-1 !important}
  .app .top{flex-wrap:wrap;height:auto;min-height:88px;row-gap:10px;padding-top:12px;padding-bottom:12px}
  .app .content .row.between{flex-wrap:wrap;row-gap:12px}
}
@media (max-width:1023px){ .app [data-px="3"]{grid-template-columns:minmax(0,1fr) !important} }
.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg>*{flex:none}
.m .row.g8:has(>.bd){flex-wrap:wrap;row-gap:6px}
.app>.side .nav a span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1365px) and (min-width:1200px){ .app>.side{width:224px} }

/* ---------- Club Portal mock-up sections on smaller desktops and tablets ---------- */
/* split section (home, sport and landing pages): stack before the portal card gets squeezed */
@media (max-width:1199px){
  .g3 .gcard:has(.ui){grid-template-columns:minmax(0,1fr) !important;gap:clamp(32px,5vw,48px) !important}
  .g3 .gcard:has(.ui)>.col{max-width:720px}
  .g3 .gcard:has(.ui) .ui{max-width:680px}
  .g3 .gcard:has(.ui)>div:has(>.ui){width:100% !important;max-width:680px}
}
/* Clubs hero: the portal card sits below the headline instead of on top of it */
@media (max-width:1365px){
  [data-rs="web"] .hero:has(>div>.ui){display:flex;flex-direction:column;height:auto !important;min-height:0 !important}
  [data-rs="web"] .hero:has(>div>.ui)>div[style*="absolute"]{position:relative !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;max-width:100% !important}
  [data-rs="web"] .hero:has(>div>.ui)>div.col[style*="absolute"]{order:1;padding:clamp(48px,7vw,96px) clamp(20px,4.4vw,64px) 0 !important;max-width:900px !important}
  [data-rs="web"] .hero:has(>div>.ui)>div:has(>.ui){order:2;width:auto !important;max-width:680px !important;margin:clamp(32px,4vw,48px) clamp(20px,4.4vw,64px) clamp(32px,4.4vw,64px) !important;padding:0 !important}
}
.g3 .gcard:has(.ui) h2,[data-rs="web"] .hero:has(>div>.ui) h1{text-wrap:balance}
@media (min-width:1366px){ [data-rs="web"] .hero:has(>div>.ui)>div:has(>.ui){width:min(560px,39vw) !important} }
@media (max-width:767px){ [data-rs="web"] .hero:has(>div>.ui)>div:has(>.ui){margin:28px 12px 16px !important;max-width:none !important} }

/* ---------- hero photo stays on tablets and phones, always behind the text ---------- */
@media (max-width:900px){
  [data-rs="web"] .hero{position:relative;overflow:hidden;isolation:isolate}
  [data-rs="web"] .hero>header{position:relative;z-index:5}
  [data-rs="web"] .hero>div[style*="absolute"],[data-rs="web"] .hero>div.col{position:relative;z-index:3 !important}
  [data-rs="web"] .hero h1,[data-rs="web"] .hero .disp,[data-rs="web"] .hero p,[data-rs="web"] .hero .lead,[data-rs="web"] .hero .label{text-shadow:0 2px 22px rgba(4,16,6,.55)}
  [data-rs="web"] .hero>img[style*="absolute"],[data-rs="web"] .hero>img{display:block !important;position:absolute !important;left:auto !important;top:auto !important;right:-6% !important;bottom:0 !important;
    height:min(84%,640px) !important;width:auto !important;max-width:none !important;transform:none !important;z-index:1 !important;opacity:.8;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 40%);mask-image:linear-gradient(to right,transparent 0,#000 40%)}
  .g3 .hero-rot{display:block !important;top:auto !important;bottom:0 !important;right:-6% !important;height:min(84%,640px) !important;width:min(560px,78vw) !important;z-index:1 !important;opacity:.8;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 40%);mask-image:linear-gradient(to right,transparent 0,#000 40%)}
}
@media (max-width:600px){
  [data-rs="web"] .hero>img[style*="absolute"],[data-rs="web"] .hero>img{right:-22% !important;height:min(78%,520px) !important;opacity:.55}
  .g3 .hero-rot{right:-20% !important;width:92vw !important;height:min(78%,520px) !important;opacity:.55}
}
/* nav bar and hero copy always sit above the hero photo, at every width */
[data-rs="web"] .hero>header,.g3 .hero>header{position:relative;z-index:5}
[data-rs="web"] .hero>div[style*="absolute"]:not(:has(>.ui)),[data-rs="web"] .hero>div.col{z-index:3 !important}