/* Xsolla case: editorial compositions built from selected Figma exports. */
.xs-case{--xs-cyan:#77e5f4;--xs-purple:#8d6aff}
.xs-intro{padding:62px 0 40px}
.xs-intro .back-link{margin-bottom:42px}
.xs-intro h1{font-size:clamp(48px,6vw,88px);line-height:1.03;max-width:980px;margin:19px 0 22px}
.xs-lead{font-size:clamp(17px,1.8vw,21px);line-height:1.55;color:#bcbcc5;max-width:720px}
.xs-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px}
.xs-tags span{font-size:11px;letter-spacing:.04em;border:1px solid #3b3d43;border-radius:100px;padding:7px 13px;color:#bfc4c9}
.xs-hero{position:relative;height:620px;overflow:hidden;border-radius:26px;background:#10191c;border:1px solid #ffffff12;isolation:isolate}
.xs-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 60% 35%,#23657540,transparent 50%),linear-gradient(125deg,#15132b 0%,#14242a 70%);z-index:-1}
.xs-hero::after{content:"";position:absolute;inset:42% 0 0;background:linear-gradient(0deg,#10191c 0%,#10191c99 32%,transparent 100%);pointer-events:none;z-index:4}
.xs-hero-desktop{position:absolute;width:73%;top:54px;left:28%;transform:rotate(-4deg);border:5px solid #263337;border-radius:19px;overflow:hidden;box-shadow:0 30px 90px #000a;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.xs-hero-desktop img{width:100%;height:auto}
.xs-hero-phone{position:absolute;width:21%;min-width:180px;filter:drop-shadow(0 26px 22px #000a);z-index:2;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.xs-hero-phone img{width:100%;height:auto}
.xs-hero-phone--black{left:7%;top:112px;transform:rotate(-11deg)}
.xs-hero-phone--scifi{right:6%;top:148px;transform:rotate(10deg)}
.xs-hero-note{position:absolute;bottom:31px;left:34px;font-size:24px;line-height:1.2;letter-spacing:-.04em;z-index:5}
.xs-section{margin-top:100px}
.xs-index{color:#898993;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.xs-section h2{font-size:clamp(32px,3.8vw,52px);line-height:1.08;letter-spacing:-.045em}
.xs-approach{display:grid;grid-template-columns:1fr 1fr;gap:7%;border-top:1px solid var(--line);padding-top:36px}
.xs-approach>p,.xs-section-heading>p{font-size:17px;line-height:1.75;color:#a9a9b3;max-width:560px}
.xs-section-heading{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:end;margin-bottom:32px}
.xs-world{display:grid;grid-template-columns:27% 1fr;gap:22px;align-items:center;min-width:0;overflow:hidden;border-radius:24px;padding:34px 34px 26px;margin-top:16px;border:1px solid #ffffff12}
.xs-world--black{background:radial-gradient(circle at 74% 48%,#35306a 0%,#151029 58%,#0d0a1a 100%)}
.xs-world--blacksite{background:radial-gradient(circle at 72% 42%,#50472c 0%,#252720 50%,#141818 100%)}
.xs-world--scifi{background:radial-gradient(circle at 70% 45%,#155264 0%,#112c35 51%,#0e1b20 100%)}
.xs-world--luminary{background:radial-gradient(circle at 75% 40%,#315b91 0%,#1a3c66 47%,#10253e 100%)}
.xs-world--launcher{display:block;background:radial-gradient(circle at 72% 28%,#244345 0%,#17292c 51%,#10191b 100%)}
.xs-world-copy{align-self:center}
.xs-world-copy p{font-size:11px;letter-spacing:.13em;color:#b9aafd;margin-bottom:18px}
.xs-world--blacksite .xs-world-copy p{color:#f1d361}
.xs-world--blacksite .xs-world-copy span{color:#d0cbbc}
.xs-world--scifi .xs-world-copy p{color:#93eafa}
.xs-world--luminary .xs-world-copy p{color:#b9ddff}
.xs-world--launcher .xs-world-copy p{color:#9ddde2}
.xs-world-copy h3{font-size:clamp(27px,2.8vw,39px);line-height:1.1;margin-bottom:15px}
.xs-world-copy span{display:block;color:#b7b4c8;font-size:14px;line-height:1.65;max-width:225px}
.xs-world--scifi .xs-world-copy span{color:#bed0d3}
.xs-world--luminary .xs-world-copy span{color:#d2e0f0}
.xs-world--launcher .xs-world-copy{display:grid;grid-template-columns:240px 1fr;column-gap:24px;align-items:start;margin-bottom:24px}
.xs-world--launcher .xs-world-copy p{grid-column:1/-1}
.xs-world--launcher .xs-world-copy span{max-width:550px;color:#c8d1cc}
.xs-phone-row{display:flex;justify-content:space-evenly;gap:12px;min-width:0}
.xs-phone-row figure{margin:0;min-width:0;width:27%;max-width:220px;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 18px 20px #0008);transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.xs-phone-row img{width:100%;height:auto}
.xs-phone-row figcaption{font-size:11px;color:#c1c0ca;margin-top:11px;text-align:center}
.xs-launcher-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.xs-launcher-row figure{min-width:0;margin:0;border:1px solid #ffffff20;border-radius:14px;background:#122326;overflow:hidden}
.xs-launcher-row a{display:block}
.xs-launcher-row img{display:block;width:100%;height:auto;object-fit:contain}
.xs-launcher-row a:focus-visible{outline:2px solid #9ddde2;outline-offset:-3px}
.xs-launcher-row figcaption{padding:12px 14px;border-top:1px solid #ffffff20;color:#d7dcdd;font-size:11px}
.xs-desktop-grid{display:grid;gap:32px;justify-items:center}
.xs-desktop-grid figure{margin:0;width:min(100%,980px);border:1px solid #3a4443;border-radius:20px;overflow:hidden;background:#101a1d}
.xs-desktop-grid figure a{display:block;overflow:hidden}
.xs-desktop-grid img{width:100%;height:auto;transition:transform .45s ease}
.xs-desktop-grid a:hover img{transform:scale(1.015)}
.xs-desktop-grid figcaption{display:flex;justify-content:space-between;gap:20px;color:#b8b9c1;font-size:12px;padding:15px 20px;border-top:1px solid #ffffff19}
.xs-details{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.xs-detail{margin:0;border:1px solid #ffffff12;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.xs-detail--dark{background:#141026}.xs-detail--warm{background:#222d2e}
.xs-detail img{width:100%;height:auto;object-fit:contain;display:block}
.xs-detail figcaption{color:#b9b9c0;font-size:12px;padding:15px 18px;margin-top:auto;border-top:1px solid #ffffff17}
.xs-case .source-link-row{margin-top:65px}
.xs-section:not(.xs-approach){border-top:1px solid var(--line);padding-top:36px}
.xs-approach{align-items:start}
.xs-desktop-web .xs-section-heading,.xs-mobile-web .xs-section-heading,.xs-system .xs-section-heading{display:block}
.xs-desktop-feature,.xs-desktop-pair figure{min-width:0;margin:0;overflow:hidden;border:1px solid #ffffff1a;border-radius:22px;background:#172024}
.xs-desktop-feature img{display:block;width:100%;height:min(45vw,500px);object-fit:cover;object-position:top}
.xs-desktop-feature figcaption,.xs-desktop-pair figcaption{padding:16px 20px;border-top:1px solid #ffffff1a;color:#c6c9cf;font-size:12px}
.xs-desktop-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.xs-desktop-pair figure{display:flex;min-height:350px;flex-direction:column;justify-content:space-between}
.xs-desktop-pair figure:first-child img{display:block;width:100%;height:340px;object-fit:cover;object-position:top}
.xs-desktop-pair figure:last-child{justify-content:center;background:radial-gradient(circle at 50% 45%,#284146,#17292c 70%,#111d20)}
.xs-desktop-pair figure:last-child img{display:block;width:100%;height:auto;margin:auto 0}
.xs-desktop-web .xs-world--launcher{margin-top:18px}
.xs-mobile-web .xs-world{margin-top:18px}
/* Homepage cover, matching the existing full-width card format. */
.preview-xsolla{background:#111c20!important}
.preview-xsolla::before{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(0deg,#111c20 0%,#111c20cf 20%,transparent 60%);pointer-events:none}
.preview-xsolla .concept-label{color:#d0ecef}
.preview-xsolla .visual-arrow{z-index:4}
.preview-xsolla .visual-label{z-index:4;background:none!important}
.preview-xsolla .visual-label p{color:#bdd4d6}
.xs-cover-desktop{position:absolute;width:72%;left:27%;top:52px;transform:rotate(-5deg);border:4px solid #284146;border-radius:16px;overflow:hidden;box-shadow:0 22px 70px #0009;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.xs-cover-desktop img{width:100%;height:auto}
.xs-cover-phone{position:absolute;width:19%;min-width:168px;right:10%;top:100px;transform:rotate(10deg);filter:drop-shadow(0 20px 22px #000a);z-index:2;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.xs-cover-phone img{width:100%;height:auto}
/* Follow the exported device outline without cutting into its rounded black frame. */
.xs-hero-phone img,.xs-phone-row img,.xs-cover-phone img{clip-path:polygon(19.013% 0.056%,80.987% 0.056%,82.671% 0.113%,83.875% 0.169%,85.439% 0.282%,86.522% 0.394%,87.726% 0.563%,89.29% 0.845%,90.373% 1.127%,92.298% 1.69%,93.742% 2.254%,94.946% 2.817%,95.909% 3.38%,97.473% 4.507%,98.556% 5.634%,99.158% 6.761%,99.398% 7.887%,99.639% 9.014%,99.759% 10.141%,99.759% 89.859%,99.639% 90.986%,99.398% 92.113%,99.158% 93.239%,98.556% 94.366%,97.473% 95.493%,95.909% 96.62%,94.946% 97.183%,93.742% 97.746%,92.298% 98.31%,90.373% 98.873%,89.29% 99.155%,87.726% 99.437%,86.522% 99.606%,85.439% 99.718%,83.875% 99.831%,82.671% 99.887%,80.987% 99.944%,19.013% 99.944%,17.329% 99.887%,16.125% 99.831%,14.561% 99.718%,13.478% 99.606%,12.274% 99.437%,10.71% 99.155%,9.627% 98.873%,7.702% 98.31%,6.258% 97.746%,5.054% 97.183%,4.091% 96.62%,2.527% 95.493%,1.444% 94.366%,0.842% 93.239%,0.602% 92.113%,0.361% 90.986%,0.241% 89.859%,0.241% 10.141%,0.361% 9.014%,0.602% 7.887%,0.842% 6.761%,1.444% 5.634%,2.527% 4.507%,4.091% 3.38%,5.054% 2.817%,6.258% 2.254%,7.702% 1.69%,9.627% 1.127%,10.71% 0.845%,12.274% 0.563%,13.478% 0.394%,14.561% 0.282%,16.125% 0.169%,17.329% 0.113%,19.013% 0.056%)}
@media(hover:hover){
 .preview-xsolla:hover .xs-cover-desktop,.preview-xsolla:focus-visible .xs-cover-desktop{transform:rotate(-3deg) translateY(-10px) scale(1.01)}
 .preview-xsolla:hover .xs-cover-phone,.preview-xsolla:focus-visible .xs-cover-phone{transform:rotate(7deg) translate(-8px,-17px)}
 .xs-hero:hover .xs-hero-desktop{transform:rotate(-2deg) translateY(-9px)}
 .xs-hero:hover .xs-hero-phone--black{transform:rotate(-8deg) translate(-6px,-12px)}
 .xs-hero:hover .xs-hero-phone--scifi{transform:rotate(7deg) translate(6px,-14px)}
 .xs-phone-row figure:hover{transform:translateY(-9px)}
}
@media(max-width:1000px){.xs-hero{height:540px}.xs-hero-desktop{width:84%;left:24%}.xs-hero-phone{width:23%}.xs-world{grid-template-columns:1fr;gap:26px}.xs-world-copy span{max-width:100%}.xs-phone-row{justify-content:center;gap:20px}.xs-phone-row figure{width:28%}.xs-world--launcher .xs-world-copy{grid-template-columns:1fr;gap:8px}.xs-world--launcher .xs-world-copy p{margin-bottom:0}}
@media(max-width:760px){
 .xs-intro{padding:34px 0 30px}.xs-intro .back-link{margin-bottom:26px}.xs-intro h1{font-size:clamp(42px,10vw,62px)}.xs-lead{font-size:16px}.xs-tags{margin-top:20px}
 .xs-hero{height:600px;border-radius:20px}.xs-hero-desktop{width:118%;left:12%;top:44px;border-width:3px;border-radius:12px;transform:rotate(-5deg)}.xs-hero-phone{min-width:0;width:clamp(150px,40%,230px)}.xs-hero-phone--black{left:5%;top:165px}.xs-hero-phone--scifi{right:3%;top:190px}.xs-hero-note{display:none}
 .xs-section{margin-top:68px}.xs-section-heading,.xs-approach{grid-template-columns:1fr;gap:18px}.xs-approach{padding-top:27px}.xs-approach>p,.xs-section-heading>p{font-size:15px;line-height:1.65}.xs-section-heading{margin-bottom:24px}
 .xs-world{display:block;padding:26px 0 18px;margin-top:14px;border-radius:20px}.xs-world-copy{padding:0 22px 20px}.xs-world-copy p{margin-bottom:10px}.xs-world-copy h3{font-size:31px;margin-bottom:8px}.xs-world-copy span{font-size:13px}
 .xs-phone-row{justify-content:flex-start;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 22px 10px;scrollbar-width:thin;scrollbar-color:#ffffff55 transparent}.xs-phone-row figure{flex:0 0 190px;width:190px;max-width:none;scroll-snap-align:center}.xs-phone-row figcaption{margin-top:5px}
 .xs-world--launcher{padding:26px 0 18px}.xs-world--launcher .xs-world-copy{padding:0 22px;margin-bottom:20px}.xs-launcher-row{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:3px 22px 10px}.xs-launcher-row figure{flex:0 0 280px;scroll-snap-align:center}.xs-launcher-row figcaption{font-size:11px}
 .xs-desktop-grid{gap:18px}.xs-desktop-grid figure{border-radius:16px}.xs-desktop-grid figcaption{font-size:11px;padding:12px 14px}
 .xs-details{grid-template-columns:1fr;gap:14px}.xs-detail{border-radius:15px}.xs-detail figcaption{font-size:11px;padding:12px 14px}
 .xs-cover-desktop{width:118%;left:7%;top:72px}.xs-cover-phone{width:39%;min-width:0;right:8%;top:155px}.preview-xsolla .visual-label{z-index:4}
}
@media(max-width:760px){
 .xs-section:not(.xs-approach){padding-top:27px}
 .xs-desktop-feature,.xs-desktop-pair figure{border-radius:17px}
 .xs-desktop-feature img{height:300px}
 .xs-desktop-pair{grid-template-columns:1fr;gap:14px;margin-top:14px}
 .xs-desktop-pair figure{min-height:0}.xs-desktop-pair figure:first-child img{height:290px}
 .xs-desktop-pair figure:last-child img{min-height:170px;object-fit:contain}
 .xs-desktop-feature figcaption,.xs-desktop-pair figcaption{padding:13px 15px;font-size:11px}
}
@media(max-width:420px){.xs-hero{height:495px}.xs-hero-phone--black{top:194px}.xs-hero-phone--scifi{top:210px}.xs-phone-row figure{flex-basis:170px;width:170px}.xs-cover-phone{top:154px}}
@media(prefers-reduced-motion:reduce){.xs-desktop-grid img,.xs-launcher-row img,.xs-cover-desktop,.xs-cover-phone,.xs-hero-desktop,.xs-hero-phone,.xs-phone-row figure{transition:none}.xs-desktop-grid a:hover img,.xs-launcher-row a:hover img{transform:none}.preview-xsolla:hover .xs-cover-desktop,.preview-xsolla:focus-visible .xs-cover-desktop{transform:rotate(-5deg)}.preview-xsolla:hover .xs-cover-phone,.preview-xsolla:focus-visible .xs-cover-phone{transform:rotate(10deg)}.xs-hero:hover .xs-hero-desktop{transform:rotate(-4deg)}.xs-hero:hover .xs-hero-phone--black{transform:rotate(-11deg)}.xs-hero:hover .xs-hero-phone--scifi{transform:rotate(10deg)}.xs-phone-row figure:hover{transform:none}}