.hero{width:100%;max-width:1920px;max-height:none;aspect-ratio:12/5;margin-inline:auto}.hero picture img{object-fit:contain}.hero-overlay-actions{flex-wrap:wrap;justify-content:flex-start}.hero-brand-title{flex-basis:100%;font-size:clamp(16px,2vw,34px);line-height:1.4;color:#ffd063;margin:0 0 8px;text-shadow:0 2px 8px #000;background:#08080899;padding:8px 14px;border-radius:8px;width:fit-content}.hero-overlay-actions .btn,.hero-overlay-actions .btn.alt{width:200px;min-height:46px;justify-content:center;background:linear-gradient(135deg,#ffd36a,#eaa522);color:#171109;border:1px solid #efb742;backdrop-filter:none}.game,.game .gamename{background:#12100d;color:#f8c45c}.game{border-color:#695024}.gamename b,.gamename small,.game .heart{color:#f8c45c}.article-media-grid img,.article-figure-inline img,.article-figure-lg img{width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important}.article-media-grid{align-items:start}.ambassador-crop{height:354px;width:354px;max-width:100%;margin:auto;overflow:hidden;position:relative;background:#050505}.ambassador-crop .brand-feature-image{width:100%;height:auto;max-height:none;position:relative;top:-32px;object-fit:contain}.ambsection .brand-half-content{display:flex;justify-content:center;align-items:center}.filterbar{display:none}.methodnote{display:none}@media(max-width:700px){.hero-brand-title{font-size:12px;margin-bottom:0;padding:4px 7px}.hero-overlay-actions{bottom:8px;gap:6px}.hero-overlay-actions .btn,.hero-overlay-actions .btn.alt{width:145px;min-height:32px;font-size:10px;padding:5px}.ambassador-crop{height:300px;width:330px}.ambassador-crop .brand-feature-image{top:-30px}}.ambassador-crop{height:322px}@media(max-width:700px){.ambassador-crop{height:300px}}
/* Center the hero copy in the empty left side. */
.hero-overlay-actions{left:4%;top:50%;bottom:auto;transform:translateY(-50%);width:43%;margin:0;display:flex;justify-content:center;align-items:center;gap:14px}
.hero-brand-title{flex-basis:100%;width:100%;margin:0 0 12px;padding:0;background:transparent;color:#fff;text-align:center;font-size:clamp(20px,2.25vw,42px);line-height:1.45;text-shadow:0 2px 12px #000,0 1px 3px #000;border-radius:0}
.hero-overlay-actions .btn,.hero-overlay-actions .btn.alt{width:min(200px,46%);min-height:46px}
@media(max-width:700px){.hero-overlay-actions{left:3%;top:48%;width:45%;gap:6px}.hero-brand-title{font-size:clamp(11px,2.8vw,20px);line-height:1.4;margin-bottom:4px}.hero-overlay-actions .btn,.hero-overlay-actions .btn.alt{width:100%;max-width:155px;min-height:26px;padding:4px;font-size:9px}}
.brand-half .brand-half-content{height:354px;min-height:354px;overflow:hidden}.brand-half .app-canvas{height:100%;min-height:0}.ambsection .brand-half-content{align-items:center}.article-media-grid img{height:320px!important;object-fit:cover!important;object-position:center top!important}.article-figure-inline img{max-height:460px!important;object-fit:contain!important;width:100%!important;height:auto!important}@media(max-width:700px){.brand-half .brand-half-content{height:330px;min-height:330px}.article-media-grid img{height:300px!important}}
/* Responsive hero: reserve the empty left 30% for text and controls. */
.hero-overlay-actions{left:2%;width:30%;top:48%;gap:10px;display:grid;grid-template-columns:1fr 1fr;justify-content:center}
.hero-brand-title{grid-column:1/-1;font-size:clamp(14px,1.7vw,32px);line-height:1.4;margin:0 0 8px;overflow-wrap:normal}
.hero-overlay-actions .btn,.hero-overlay-actions .btn.alt{width:100%;max-width:none;min-width:0;min-height:42px;padding:9px 6px;font-size:clamp(9px,.8vw,14px);white-space:nowrap}
@media(max-width:700px){.hero-overlay-actions{left:2%;width:30%;top:46%;gap:5px}.hero-brand-title{font-size:clamp(8px,1.9vw,13px);line-height:1.35;margin-bottom:2px}.hero-overlay-actions .btn,.hero-overlay-actions .btn.alt{width:100%;max-width:none;min-height:23px;padding:4px 2px;font-size:clamp(5px,1vw,7px);border-radius:5px}.hero-overlay-actions .btn span{display:none}}
.hero-brand-title{font-weight:700;letter-spacing:-.025em;color:#fff;text-shadow:0 2px 2px #000,0 4px 15px #000,0 0 24px #f4ba4355;position:relative;padding:13px 4px 14px;border-top:1px solid #efbd6366;border-bottom:1px solid #efbd6366;background:linear-gradient(90deg,transparent,#09080590,transparent)}
.hero-brand-title span{display:block;font-size:.66em;line-height:1.55;letter-spacing:.015em;margin-top:7px;color:#fff4d7;text-shadow:0 2px 6px #000}
.hero-brand-title::after{content:'';position:absolute;bottom:-1px;left:35%;width:30%;height:2px;background:linear-gradient(90deg,transparent,#ffdb89,transparent);box-shadow:0 0 12px #ffc451;animation:heroGlow 3s ease-in-out infinite}
@keyframes heroGlow{0%,100%{opacity:.55}50%{opacity:1}}
.article-media-grid img[src*='content-']{height:auto!important;aspect-ratio:3/2!important;object-fit:contain!important}.article-figure-inline img[src*='content-app']{height:auto!important;max-height:none!important;aspect-ratio:3/2!important}
@media(max-width:700px){.hero-brand-title{padding:5px 1px 6px}.hero-brand-title span{font-size:.72em;margin-top:3px;letter-spacing:0}}
@media(prefers-reduced-motion:reduce){.hero-brand-title::after{animation:none}}
.article-media-grid img[src*="content-"]{height:auto!important;object-fit:contain!important;aspect-ratio:auto!important}
/* Stronger banner typography and a dedicated contrast surface. */
.hero-overlay-actions{width:31%;left:1.5%;top:46%;padding:clamp(9px,1.5vw,28px);border-radius:16px;background:linear-gradient(135deg,#080808ef,#100c06d9);border:1px solid #dba74788;box-shadow:0 12px 40px #0006,inset 0 1px 0 #ffe2a033;gap:12px}
.hero-brand-title{font-size:clamp(16px,2.35vw,45px);line-height:1.22;letter-spacing:-.025em;padding:0 0 15px;margin:0 0 3px;border:0;background:none;color:#fff;text-shadow:0 2px 4px #000;font-weight:700}
.hero-brand-title span{font-size:.48em;line-height:1.65;letter-spacing:.01em;margin-top:14px;color:#ffdc8a;text-shadow:none}
.hero-brand-title::after{left:25%;width:50%;bottom:0;background:linear-gradient(90deg,transparent,#efbd56,transparent);box-shadow:none;animation:none}
.hero-overlay-actions .btn,.hero-overlay-actions .btn.alt{font-weight:700;min-height:44px;box-shadow:0 3px 12px #0006}
@media(max-width:700px){.hero-overlay-actions{width:31%;left:1.5%;top:47%;padding:7px 5px;gap:4px;border-radius:8px}.hero-brand-title{font-size:clamp(10px,2.65vw,18px);line-height:1.2;padding-bottom:7px;margin:0}.hero-brand-title span{font-size:.58em;line-height:1.45;margin-top:6px}.hero-overlay-actions .btn,.hero-overlay-actions .btn.alt{font-size:clamp(5px,.95vw,7px);min-height:22px;padding:4px 1px}}
/* Blend app and ambassador imagery into the section background. */
.brand-duo .brand-half-content,.brand-duo .app-canvas,.brand-duo .app-controls,.brand-duo .app-device-art,.brand-duo .ambassador-crop{border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
.brand-duo .brand-half-content{position:relative}
.brand-duo .app-device-art{mask-image:linear-gradient(to right,transparent 0%,#000 9%,#000 89%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 9%,#000 89%,transparent 100%)}
.brand-duo .ambassador-crop{mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%)}
.brand-duo .brand-half-content::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,#12100d 0%,transparent 8%,transparent 88%,#12100d 100%)}
/* Clean, sharp presentation on a continuous black section. */
.brand-duo{background:#050505!important;border:0!important}
.brand-duo .brand-half-content,.brand-duo .app-canvas,.brand-duo .app-controls,.brand-duo .app-device-art,.brand-duo .ambassador-crop{background:#050505!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.brand-duo .app-device-art,.brand-duo .ambassador-crop{mask-image:none!important;-webkit-mask-image:none!important}
.brand-duo .brand-half-content::after{display:none!important}
.brand-duo-grid{gap:36px;align-items:start}
.brand-duo .brand-half-content{height:354px;min-height:354px}
.brand-duo .app-canvas{align-items:center}
.brand-duo .sectitle{margin-bottom:24px}
@media(max-width:700px){.brand-duo-grid{gap:28px}.brand-duo .brand-half-content{height:330px;min-height:330px}}
.brand-duo .app-canvas{display:block;background:#050505 url('assets/duo-app-studio.webp') center/contain no-repeat!important;position:relative;height:100%;width:100%}
.brand-duo .app-device-art{display:none!important}
.brand-duo .app-controls{width:46%;height:100%;display:flex;flex-direction:column;justify-content:center;background:transparent!important;padding:20px 14px!important;gap:22px}
.brand-duo .studio-ambassador{display:block;width:100%;height:100%;object-fit:contain;border:0;border-radius:0}
.brand-duo .brand-half-content{height:auto!important;min-height:0!important;aspect-ratio:3/2}
.brand-duo .app-controls .download-platforms{gap:14px}
@media(max-width:700px){.brand-duo .app-controls{padding:8px!important;gap:9px}.brand-duo .app-standard-logo{width:90px}.brand-duo .platform-circle{width:36px;height:36px;margin-bottom:3px}.brand-duo .platform-icon{width:23px;height:23px}.brand-duo .download-platform p{font-size:7px}.brand-duo .app-download{min-height:24px;font-size:9px}.brand-duo .store-badge{padding:3px;min-height:22px}.brand-duo .store-badge strong{font-size:8px}.brand-duo .store-badge small{font-size:5px}.brand-duo .store-badge svg{width:12px}}
.app-download,.app-download:disabled{position:relative;overflow:hidden;pointer-events:auto;opacity:1;cursor:pointer;transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease;border:1px solid #ffc400}
.app-download:hover,.app-download:disabled:hover{background:#ffc400!important;color:#151009!important;box-shadow:0 0 18px #ffc40055;transform:translateY(-2px)}
.app-download::after{content:'';position:absolute;top:-50%;left:-75%;width:40%;height:200%;background:linear-gradient(90deg,transparent,#fff7,transparent);transform:skewX(-25deg);transition:left .45s ease;pointer-events:none}
.app-download:hover::after{left:135%}
@media(prefers-reduced-motion:reduce){.app-download,.app-download::after{transition:none}.app-download:hover{transform:none}}
/* Banner text without a card or frame. */
.hero-overlay-actions{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:clamp(8px,1.4vw,24px)}
.hero-brand-title{color:#fff;font-weight:700;text-shadow:0 2px 3px #000,0 4px 15px #000,0 0 28px #000b;background:none!important;border:0!important}
.hero-brand-title span{color:#ffe093;font-weight:700;text-shadow:0 2px 3px #000,0 3px 12px #000}
.hero-brand-title::after{display:none}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:7px 0 2px;color:#b9b3a9;font-size:12px;line-height:1.7}
.footer-bottom p{margin:0}.footer-bottom-links{display:flex;align-items:center;gap:12px}.footer-bottom-links a:hover{color:#ffcf70}
@media(max-width:700px){.footer-bottom{flex-direction:column;text-align:center;gap:7px;font-size:11px}.footer-bottom-links{justify-content:center;gap:9px}.hero-overlay-actions{padding:7px 5px}}
.hero-brand-title span{font-size:.58em;color:#fff;line-height:1.55;letter-spacing:0;font-weight:700;-webkit-text-stroke:.35px #20170b;paint-order:stroke fill;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,0 3px 6px #000;max-width:100%;text-wrap:balance}
@media(max-width:700px){.hero-brand-title span{font-size:.72em;line-height:1.45;-webkit-text-stroke:.2px #15100a;margin-top:6px}}
/* Bold angular title inspired by the supplied display typography. */
.hero-overlay-actions{width:32%;left:1%;top:46%;overflow:visible}
.hero-brand-title{font-size:clamp(17px,2.7vw,52px);font-style:italic;font-weight:700;line-height:1.15;letter-spacing:-.045em;transform:rotate(-3deg);color:#ffec9d;text-transform:uppercase;text-shadow:2px 2px 0 #38270a,3px 4px 0 #100b03,0 5px 10px #000;position:relative;isolation:isolate;padding:14px 5px}
.hero-brand-title::before{content:'';position:absolute;inset:0 -8px;z-index:-1;background:linear-gradient(100deg,#080b03e8,#0d1009d9);clip-path:polygon(4% 7%,100% 0,95% 91%,0 100%);border-top:2px solid #d2a232;border-bottom:2px solid #d2a232}
.hero-brand-title span{font-size:.49em;line-height:1.5;font-style:italic;letter-spacing:-.02em;color:#fff;text-transform:uppercase;margin-top:10px;transform:none;-webkit-text-stroke:0;text-shadow:1px 2px 0 #000,0 3px 6px #000;text-wrap:balance}
.hero-overlay-actions .btn,.hero-overlay-actions .btn.alt{margin-top:8px}
@media(max-width:700px){.hero-overlay-actions{width:32%;left:1%;top:46%}.hero-brand-title{font-size:clamp(10px,2.8vw,19px);padding:7px 2px;letter-spacing:-.035em}.hero-brand-title span{font-size:.65em;margin-top:5px;line-height:1.4}.hero-brand-title::before{inset:0 -3px}.hero-overlay-actions .btn,.hero-overlay-actions .btn.alt{margin-top:3px}}
@property --auth-border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.tophead .actions .btn{position:relative;isolation:isolate;border:2px solid transparent!important;border-radius:11px;background:linear-gradient(135deg,#ffd56b,#ecab2d) padding-box,conic-gradient(from var(--auth-border-angle),#ff55c8,#537bff,#42cfff,#ff55c8) border-box;animation:authBorderSpin 3s linear infinite;box-shadow:0 0 12px #688aff25;transition:box-shadow .2s ease,transform .2s ease}
.tophead .actions .btn.alt{background:linear-gradient(#15100d,#15100d) padding-box,conic-gradient(from var(--auth-border-angle),#ff55c8,#537bff,#42cfff,#ff55c8) border-box;color:#ffd06a}
.tophead .actions .btn:hover{box-shadow:0 0 12px #ff55c866,0 0 23px #428dff44;transform:translateY(-1px)}
@keyframes authBorderSpin{to{--auth-border-angle:360deg}}
@media(prefers-reduced-motion:reduce){.tophead .actions .btn{animation:none;transform:none}}
.footer-bottom{position:relative;display:flex;justify-content:center;align-items:center;min-height:80px;padding:24px 16px;text-align:center;background:#2b2435;color:#fff;font-size:13px;width:100vw;margin-left:calc(50% - 50vw);margin-bottom:-32px;border-top:1px solid #ffffff08}
.footer-bottom p{margin:0;line-height:1.6}.footer-bottom a{font-weight:700;color:#fff}.footer-bottom a:hover{color:#ffd16a}.copyright-mark{margin-left:3px;margin-right:3px;font-size:14px}
@media(max-width:700px){.footer-bottom{min-height:72px;font-size:12px;flex-direction:row;margin-bottom:-32px}}
.hero-brand-title span .hero-tagline-line{display:block;white-space:nowrap;font-size:1em;line-height:1.5;margin:0;letter-spacing:-.025em}.hero-brand-title>span{font-size:.45em}@media(max-width:700px){.hero-brand-title>span{font-size:.59em}}
@property --content-border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.intro-scroll{border:2px solid transparent!important;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--content-border-angle),#fff 0deg,#ffd45a 80deg,#c98c1e 150deg,#fff 210deg,#ffeab0 280deg,#fff 360deg) border-box!important;box-shadow:0 0 9px #ffd45a66,0 0 22px #f4c45833,inset 0 0 5px #fff8;animation:contentBorderSpin 5s linear infinite}
@keyframes contentBorderSpin{to{--content-border-angle:360deg}}
@media(prefers-reduced-motion:reduce){.intro-scroll{animation:none}}
.categorystrip .category{border:2px solid transparent!important;background:linear-gradient(135deg,#211b12,#12100d) padding-box,conic-gradient(from var(--content-border-angle),#fff 0deg,#ffd45a 90deg,#bb8626 160deg,#fff 220deg,#ffe4a0 300deg,#fff 360deg) border-box!important;animation:contentBorderSpin 5s linear infinite;box-shadow:none!important}
.categorystrip .category.selected,.categorystrip .category:hover{background:linear-gradient(135deg,#3a2c16,#241b10) padding-box,conic-gradient(from var(--content-border-angle),#fff,#ffd45a,#bb8626,#fff,#ffe4a0,#fff) border-box!important;box-shadow:none!important}
@media(prefers-reduced-motion:reduce){.categorystrip .category{animation:none}}
.intro-scroll{max-height:454px}
@media(max-width:700px){.intro-scroll{max-height:400px}}
/* Shared gold typography for section headings. */
.sectitle h1,.sectitle h2{color:#ad741b;background:linear-gradient(105deg,#ad741b 0%,#ce9229 27%,#e6b64f 43%,#fff0bd 49%,#d9a23b 56%,#ad741b 76%,#ce9229 100%);background-size:260% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:sectionGoldSweep 6s ease-in-out infinite;text-shadow:0 1px 0 #ba882015}
.sectitle::after{background:linear-gradient(90deg,#c58c27 0%,#e8bd5c 35%,#fff6d2 50%,#e8bd5c 65%,#c58c27 100%)!important;background-size:250% 100%!important;animation:sectionUnderlineSweep 6s ease-in-out infinite}
@keyframes sectionGoldSweep{0%,20%{background-position:100% 50%}65%,100%{background-position:0% 50%}}
@keyframes sectionUnderlineSweep{0%,20%{background-position:100% 50%}65%,100%{background-position:0% 50%}}
@media(prefers-reduced-motion:reduce){.sectitle h1,.sectitle h2,.sectitle::after{animation:none}}