/* Markup added by the storefront Worker (render.js) that store.css does not style yet.
   Loaded right after store.css; safe to merge into store.css as is. */

/* ── series page: full-width cinematic hero (.sh2-) ── */
.sh2{position:relative;min-height:clamp(440px,60vh,700px);display:flex;overflow:hidden;background:#000;border-bottom:1px solid var(--line);isolation:isolate}
.sh2-bg{position:absolute;inset:0;z-index:-2}
.sh2-img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.sh2-phart{position:absolute;inset:0;background:radial-gradient(60% 80% at 78% 30%,hsla(var(--h,290),95%,58%,.55),transparent 70%),radial-gradient(50% 70% at 20% 0%,hsla(calc(var(--h,290) + 40),90%,55%,.35),transparent 70%),linear-gradient(135deg,#0b0d18,#05060c)}
.sh2-phart::after{content:"";position:absolute;right:max(24px,calc((100vw - var(--max)) / 2 + 40px));top:50%;transform:translateY(-50%);width:clamp(160px,22vw,320px);aspect-ratio:1;background:url(/assets/images/X-RAVE_LOGO-160.webp) center/contain no-repeat;opacity:.14;filter:grayscale(.2)}
.sh2-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(4,5,10,.82) 0%,rgba(4,5,10,.55) 36%,rgba(4,5,10,.12) 64%,transparent 82%),linear-gradient(0deg,rgba(4,5,10,.96) 0%,rgba(4,5,10,.45) 30%,transparent 56%),linear-gradient(180deg,rgba(4,5,10,.55) 0%,transparent 18%)}
.sh2-noimg .sh2-scrim{background:linear-gradient(0deg,rgba(4,5,10,.9) 0%,transparent 55%)}
.sh2-in{position:relative;width:100%;max-width:var(--max);margin:0 auto;padding:18px 24px clamp(32px,5vh,56px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.sh2-crumbs{margin:0}.sh2-crumbs a{color:rgba(255,255,255,.72)}.sh2-crumbs span{color:#fff}
.sh2-copy{width:min(680px,100%);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.sh2 .bd{font-size:12px;padding:5px 11px}
.sh2-title{font-size:clamp(34px,4.6vw,68px);line-height:.98;letter-spacing:-.045em;font-weight:900;text-shadow:0 4px 30px rgba(0,0,0,.45);text-wrap:balance}
.sh2-sub{font-size:clamp(15px,1.3vw,18px);font-weight:600;color:#fff;max-width:58ch;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.sh2-desc{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.8);max-width:62ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.sh2-facts{font-size:13px;color:rgba(255,255,255,.7);letter-spacing:.01em}
.sh2-buy{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.sh2-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sh2-row .price.big{font-size:clamp(28px,2.6vw,38px);text-shadow:0 2px 14px rgba(0,0,0,.5)}
.sh2-row .btn-buy.big{width:auto;min-width:220px}
.sh2-hint{font-size:12.5px;color:rgba(255,255,255,.66)}.sh2-hint a{color:rgba(255,255,255,.82);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}.sh2-hint a:hover{color:#fff}
@media(max-width:860px){.sh2{min-height:0}.sh2-in{padding:14px 16px 26px}}
@media(max-width:640px){
  .sh2{background:var(--bg)}
  .sh2-bg{bottom:auto;height:62vw}
  .sh2-img{object-position:50% 50%}
  .sh2-in{padding-top:12px;gap:calc(62vw - 76px)}
  .sh2-scrim{background:linear-gradient(180deg,rgba(4,5,10,.6) 0%,transparent 16%,transparent calc(62vw - 120px),rgba(4,5,10,.85) calc(62vw - 30px),var(--bg) 62vw)}
  .sh2-noimg .sh2-scrim{background:linear-gradient(180deg,transparent 40%,var(--bg) 62vw)}
  .sh2-phart::after{right:16px;width:120px;top:20vw}
  .sh2-title{font-size:30px}.sh2-desc{font-size:13.5px;-webkit-line-clamp:2}
  .sh2-row{gap:12px}.sh2-row .btn-buy.big{min-width:0;flex:1 1 100%}
}

/* ── next-drop countdown strip (.drop) — home below the hero, /membership ── */
.drop{display:flex;align-items:center;gap:14px;margin-top:18px;padding:10px 10px 10px 18px;border-radius:999px;min-height:56px}
.drop-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 rgba(255,47,155,.6);animation:dropPulse 2s infinite}
@keyframes dropPulse{0%{box-shadow:0 0 0 0 rgba(255,47,155,.55)}70%{box-shadow:0 0 0 10px rgba(255,47,155,0)}100%{box-shadow:0 0 0 0 rgba(255,47,155,0)}}
.drop-txt{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:14px;color:var(--soft)}
.drop-title{color:#fff;font-weight:800;letter-spacing:-.01em;max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-in{color:var(--muted)}
.drop-cd{display:inline-flex;gap:6px;font-variant-numeric:tabular-nums}
.drop-cd span{display:inline-flex;align-items:baseline;gap:2px;padding:3px 8px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.drop-cd b{font-size:15px;font-weight:900;color:#fff;background:var(--cta);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.drop-cd small{font-size:11px;font-weight:700;color:var(--muted)}
.drop-early{color:var(--muted);font-size:13px}.drop-early::before{content:"·";margin-right:12px;color:var(--dim)}
.drop-cta{flex:none;height:38px}
.drop-done .drop-txt{color:#fff;font-weight:800}
.info .drop{margin:0 0 26px}
@media(max-width:760px){
  .drop{flex-wrap:wrap;border-radius:var(--r);padding:12px 14px;gap:10px 12px;align-items:flex-start}
  .drop-dot{margin-top:7px}
  .drop-txt{gap:6px 10px;font-size:13px}
  .drop-title{max-width:100%;flex-basis:100%}
  .drop-early{flex-basis:100%;font-size:12.5px}.drop-early::before{display:none}
  .drop-cta{width:100%;height:42px}
}
@media(prefers-reduced-motion:reduce){.drop-dot{animation:none}}

/* ── trust row (home) and trust line (product buy box) ── */
.trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:14px 0 0;padding:12px 18px;border:1px solid var(--line);border-radius:var(--r);background:rgba(13,16,26,.55)}
.trust li{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.trust li b{color:#fff;font-weight:900;font-variant-numeric:tabular-nums}
.trust svg{width:16px;height:16px;color:var(--cyan);flex:none}
.trust .num svg{color:var(--pink)}
.trust .rc a{display:inline-flex;align-items:center;gap:8px;color:var(--soft);font-weight:700}.trust .rc a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.trustline{display:flex;flex-wrap:wrap;gap:2px 0;font-size:12.5px;color:var(--muted);margin-top:-2px}
.trustline span:not(:last-child)::after{content:"·";margin:0 7px;color:var(--dim)}
.trustline b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
@media(max-width:640px){.trust{justify-content:flex-start;gap:8px 18px;padding:12px 14px}.trust li{font-size:12.5px}}

/* ── 找回我的下载 (/recover) ── */
.rcgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:start}
.rcform{border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:14px}
.rcfields label{display:block;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--soft);margin-bottom:8px}
.rcrow{display:flex;gap:10px}
.rcrow input{flex:1;min-width:0;height:50px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);background:rgba(4,5,10,.6);color:#fff;font:inherit;font-size:15.5px;outline:none;transition:border-color .15s,box-shadow .15s}
.rcrow input::placeholder{color:var(--dim)}
.rcrow input:focus{border-color:rgba(217,0,255,.7);box-shadow:0 0 0 4px rgba(217,0,255,.18)}
.rcrow input[aria-invalid=true]{border-color:#ff5f7a}
.rcrow .btn-buy{height:50px;padding:0 24px;font-size:14.5px}
.rcrow .btn-buy:disabled{opacity:.7;cursor:progress}
.rchp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.rcmsg{min-height:1.2em;margin-top:8px;font-size:13px;color:#ff8da0}
.rcmsg:empty{min-height:0;margin:0}
.rcdone{display:flex;gap:14px;align-items:flex-start}
.rcdone[hidden],.rcfields[hidden]{display:none}
.rcdone>svg{flex:none;width:40px;height:40px;padding:9px;border-radius:50%;background:var(--cta);color:#fff}
.rcdone b{display:block;font-size:17px;line-height:1.4;color:#fff;outline:none}
.rcdone p{font-size:13.5px;color:var(--muted);margin:4px 0 14px;line-height:1.6}
.rcagain:disabled{opacity:.6;cursor:default}
.rcpriv{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--dim);line-height:1.5;border-top:1px solid var(--line);padding-top:14px}
.rcpriv svg{width:15px;height:15px;flex:none;color:var(--green);margin-top:1px}
.rchow h2{margin:4px 0 14px}
.rchow .steps{grid-template-columns:1fr;gap:10px}
.rchow .steps li{display:grid;grid-template-columns:32px 1fr;column-gap:14px;padding:16px 18px}
.rchow .steps li::before{grid-row:span 2;margin:0}
.rccall{display:flex;align-items:center;gap:16px;margin-top:26px;padding:18px 20px;border-radius:var(--r)}
.rccall>svg{flex:none;width:28px;height:28px;color:var(--pink)}
.rccall div{flex:1;min-width:0}.rccall b{display:block;font-size:15px}.rccall p{font-size:13.5px;color:var(--muted)}
.nfrc{font-size:13.5px;margin-top:6px}.nfrc a{color:var(--cyan);font-weight:700}.nfrc a:hover{text-decoration:underline}
@media(max-width:860px){.rcgrid{grid-template-columns:1fr}}
@media(max-width:560px){.rcform{padding:18px}.rcrow{flex-direction:column}.rcrow input{flex:none;width:100%}.rcrow .btn-buy{width:100%}.rccall{flex-wrap:wrap}.rccall .pill{width:100%}}
.trustline a{color:var(--soft);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}.trustline a:hover{color:#fff}

/* ── homepage hero: admin banners (2560×1100, about 21:9) are shown whole on desktop ── */
@media (min-width:861px) and (min-height:561px){
  .hero.wide{height:clamp(440px,calc(100vw * 1100 / 2560),calc(100 * var(--vh) - 84px))}
}
.hero .hbg.hfit{object-fit:contain;transform:none}
.hero .hbg.hblur{filter:blur(28px) brightness(.55) saturate(1.2);transform:scale(1.15)}
.slide.on .hbg.hblur{transform:scale(1.15)}
.hero .hbg.hf-top{object-position:50% 12%}
.hero .hbg.hf-bottom{object-position:50% 88%}
/* picture-only slide: no title block, just a light scrim so the button and controls stay readable */
.slide.notext .hscrim{background:linear-gradient(0deg,rgba(4,5,10,.55) 0%,transparent 28%)}
@media(max-width:640px){.slide.notext .hscrim{background:linear-gradient(0deg,rgba(4,5,10,.8) 0%,transparent 34%)}}

/* ── homepage first row ("bento"): carousel over two card columns + two spotlight cards ──
   The carousel takes the card row's height, so the picture is about 2:1 (admin: 2000×1000). */
.home-layout{margin-top:22px}
.bento{align-items:stretch}
.bento>.hero.inbento{grid-column:span 2;justify-self:stretch;width:auto;height:auto;min-height:0;min-width:0;aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--r);container-type:inline-size;isolation:isolate}
.inbento .hbg{object-position:50% 50%}
.inbento .hcopy{left:5cqw;right:auto;bottom:clamp(18px,6cqw,52px);width:min(58cqw,520px);gap:clamp(5px,1.1cqw,10px)}
.inbento.al-right .hcopy,.inbento .al-right .hcopy{left:auto;right:5cqw}
.inbento .al-center .hcopy{left:50%}
.inbento .htitle{font-size:clamp(18px,4.3cqw,40px);line-height:1.02;letter-spacing:-.035em}
.inbento .hsub{font-size:clamp(11.5px,1.6cqw,14px);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.inbento .hprice .price.big{font-size:clamp(18px,2.9cqw,28px)}
.inbento .hcta .btn-buy.big{min-height:38px;height:38px;min-width:0;padding:0 16px;font-size:13.5px}
.inbento .hcta .pill{display:none}
.inbento .bd{font-size:11px;padding:4px 9px}
.inbento .hctl{right:14px;bottom:14px;gap:6px}
.inbento .hctl .hpause{display:none}
.inbento .hdots{height:36px;padding:0 6px}
.inbento .harrow{width:36px;height:36px}
/* spotlight cards shown per column count: 5 columns → 3, 4 → 2, 3 → 1, phones/tablets → 2 */
.bento>article:nth-of-type(3){display:none}
@media (min-width:1920px){.bento>article:nth-of-type(3){display:flex}}
@media (max-width:1360px) and (min-width:861px){.bento>article:nth-of-type(n+2){display:none}}
/* tablets and phones: carousel on its own row, spotlight cards below */
@media (max-width:860px){
  .home-layout{margin-top:14px}
  .bento>.hero.inbento{grid-column:1/-1}
  .inbento .hcopy{bottom:56px}
}
@media (max-width:640px){
  .bento>.hero.inbento{aspect-ratio:4/3;border-radius:16px}
  .inbento .hcopy{left:14px!important;right:14px!important;width:auto;bottom:56px}
  /* lighter than the full-screen hero's scrim: only the lower half darkens, behind the text */
  .inbento .hscrim,.inbento .al-right .hscrim,.inbento .al-center .hscrim{background:linear-gradient(0deg,rgba(4,5,10,.92) 0%,rgba(4,5,10,.7) 30%,rgba(4,5,10,.25) 55%,transparent 72%)}
  .inbento .hsub{display:none}
  .inbento .hctl{left:50%;right:auto;transform:translateX(-50%);bottom:10px}
}

/* one slide: no dots or arrows, so the text sits at the bottom instead of above an empty control row */
.inbento.single .hcopy{bottom:clamp(14px,4.5cqw,40px)}
@media (max-width:860px){.inbento.single .hcopy{bottom:16px}}
@media (max-width:640px){.inbento.single .hcopy{bottom:14px}}

/* ── carousel controls in the first row: small and quiet — ‹ ● ━ ● › along the bottom edge ── */
.inbento .hctl{left:12px;right:12px;bottom:12px;transform:none;justify-content:space-between;pointer-events:none;gap:0}
.inbento .hctl>*{pointer-events:auto}
.inbento .harrow.prev{order:0}.inbento .hdots{order:1}.inbento .harrow.next{order:2}
.inbento .harrow{display:grid!important;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;background:rgba(8,10,18,.38);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);box-shadow:none;transition:background .2s,border-color .2s,transform .2s}
.inbento .harrow svg{width:15px;height:15px}
.inbento .harrow:hover{background:rgba(8,10,18,.6);border-color:rgba(255,255,255,.5);transform:none}
.inbento .harrow:active{transform:scale(.92)}
.inbento .hdots{height:22px;padding:0 6px;gap:0;border-radius:999px;background:rgba(8,10,18,.32);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none}
.inbento .hdots button{width:14px;height:22px}
.inbento .hdots button::before,.inbento .hdots i{top:8px;left:4px;right:4px;height:6px}
.inbento .hdots button::before{background:rgba(255,255,255,.4)}
.inbento .hdots button[aria-current="true"]{width:28px}
.inbento .hdots i{left:4px}
@media (pointer:coarse){.inbento .hdots button{height:22px}.inbento .hdots button::before,.inbento .hdots i{top:8px}}
/* the title block sits above the control row when there is more than one slide */
.inbento:not(.single) .hcopy{bottom:54px}
@media (max-width:640px){.inbento:not(.single) .hcopy{bottom:50px}.inbento .hctl{left:10px;right:10px;bottom:10px}}
/* switching: the new picture slides in a little from the side it comes from while it fades in */
@keyframes hslidein{from{transform:translateX(var(--dx,6%));opacity:.4}to{transform:none;opacity:1}}
/* no slow zoom on the first-row carousel (the full-screen hero's 8 s zoom fought the slide-in and made the
   picture jump in and out); pictures stay at their real size, only the slide-in moves them */
.inbento .hbg,.inbento .slide.on .hbg{transform:none;transition:none}
.inbento .hbg.hblur,.inbento .slide.on .hbg.hblur{transform:scale(1.15)}
.inbento.moved .slide.on .hbg:not(.hblur){animation:hslidein .75s cubic-bezier(.2,.8,.2,1)}
.inbento .slide{transition:opacity .55s ease,visibility 0s linear .55s}
.inbento .slide.on{transition:opacity .55s ease}
@media (prefers-reduced-motion:reduce){.inbento .slide.on .hbg{animation:none}}

/* ── /faq and /contact ── */
.faqjump{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.faqjump .pill{height:36px;font-size:13.5px}
.faqsec{scroll-margin-top:96px}
.helpinfo .ihero .pill.grad svg{width:18px;height:18px;margin-right:6px;vertical-align:-3px}
.contactgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;margin-top:26px;align-items:start}
.ccard{padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.ccard.glass{background:linear-gradient(160deg,rgba(255,47,155,.07),rgba(157,0,255,.05) 60%,transparent),var(--panel)}
.helpinfo .ccard h2{margin:0 0 10px;font-size:19px}
.ccard h3{font-size:14px;margin:20px 0 10px;color:var(--text)}
.ccard p{font-size:14px;color:var(--muted);line-height:1.65}
.cmail{display:inline-block;margin-top:8px;font-size:18px;font-weight:800;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,47,155,.6)}
.cmail:hover{border-bottom-color:#fff}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.checks svg{flex:none;width:16px;height:16px;margin-top:3px;color:#7ee2a8}
.qlinks{display:grid;gap:8px}
.qlink{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--text);transition:border-color .2s,background .2s}
.qlink b{font-size:14.5px}.qlink span{grid-column:1;font-size:12.5px;color:var(--muted)}
.qlink svg{grid-column:2;grid-row:1/3;align-self:center;width:16px;height:16px;color:var(--muted)}
.qlink:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.03)}
@media (max-width:860px){.contactgrid{grid-template-columns:1fr}.ccard{padding:18px}}
/* phone spec table (2 columns): an odd last cell spans the row instead of leaving an empty grey box */
@media (max-width:640px){.spectable div:last-child:nth-child(odd){grid-column:1/-1}}

/* scrollbars and native dropdown lists in the site palette */
html{scrollbar-color:rgba(255,255,255,.18) #05060c}
.side,.pop,.mnav,.lang .pop{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,47,155,.55);border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-button{display:none;width:0;height:0}
select option{background:#12152a;color:#eef0f8}

/* The whole slide opens the slide's page (same link as the title); text, buttons and controls stay on top. */
.hero .hlink{position:absolute;inset:0;z-index:1;cursor:pointer}
.hero .hcopy{z-index:2;pointer-events:none}
.hero .hcopy a,.hero .hcopy button{pointer-events:auto}