/* FAQ: image hero with a glass counter, then topic tabs (each with a real picture) over .faq accordions with a live search that spans every topic; each topic is headed by a game photo, a game screen or an app screen. */
.faq-hero { min-height: 78svh; }
.faq-hero .phero__bg img { object-position: center 62%; }
.faq-hero .glass .stats > div { border-bottom: 0; }
.faq-hero__jump { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--ink-line); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-2); transition: color .3s, background-color .3s; }
.faq-hero__jump svg { width: 16px; height: 16px; transition: transform .5s var(--ease); }
.faq-hero__jump:hover { color: var(--on-ink); background: rgba(255, 255, 255, .04); }
.faq-hero__jump:hover svg { transform: translateY(3px); }

/* search */
.faq-search { position: relative; width: 100%; }
.faq-search > svg { position: absolute; left: 20px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.faq-search .input { height: 60px; padding: 0 54px; border-radius: 999px; background: var(--white); font-size: 16px; box-shadow: 0 20px 40px -30px rgba(11, 18, 14, .35); }
.faq-search .input::placeholder { color: var(--faint); }
.faq-search .input:focus { border-color: var(--lime-ink); box-shadow: 0 0 0 4px rgba(255, 46, 120, .14); }
.faq-search .input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.faq-search__clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--mute); transition: background-color .3s, color .3s; }
.faq-search__clear:hover { background: var(--paper-2); color: var(--on-paper); }
.faq-search__clear[hidden] { display: none; }
.faq-search__clear svg { width: 16px; height: 16px; }
.faq-count { min-height: 1.3em; padding-left: 22px; }

/* tabs: each topic with a small real picture; while searching they dim and the topics with a match get a dot */
.faq-tabs { margin-bottom: clamp(30px, 5vh, 56px); gap: 30px; }
.faq-tabs button { display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; }
.faq-tab__img { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; background: var(--ink-3); box-shadow: 0 0 0 2px transparent; transition: box-shadow .3s; }
.faq-tab__img img { width: 100%; height: 100%; object-fit: cover; }
.faq-tab__img--app img { object-position: center 18%; transform: scale(1.5); transform-origin: center 10%; }
.faq-tab__img--kit { background: var(--paper-2); }
.faq-tab__img--kit img { object-fit: contain; transform: scale(1.3); }
.faq-tabs button[aria-selected="true"] .faq-tab__img { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--lime-ink); }
.faq-tabs button.has-hit::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime-ink); align-self: center; }
.is-searching .faq-tabs button { opacity: .45; }
.is-searching .faq-tabs button.has-hit { opacity: .9; }
.is-searching .faq-tabs .tabs__bar { opacity: 0; }
.faq-results { margin: -18px 0 28px; }
.faq-results[hidden], .faq-empty[hidden], .faq-panel[hidden], .faq-panel details[hidden] { display: none; }

/* each topic: a sticky heading with a real picture of it on the left, the answers on the right */
.faq-panels { display: grid; gap: clamp(48px, 8vh, 80px); }
.faq-panel { display: grid; gap: 22px; align-items: start; }
@media (min-width: 1000px) { .faq-panel { grid-template-columns: 340px minmax(0, 1fr); gap: 60px; } .faq-panel__head { position: sticky; top: 120px; } }
.faq-panel__head { display: grid; gap: 12px; justify-items: start; }
.faq-panel__head > figure { margin: 0 0 10px; width: 100%; }
.faq-media { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--ink); }
.faq-media img { width: 100%; height: 100%; object-fit: cover; }
.faq-media--phone { display: grid; place-items: end center; padding-top: 26px; background: linear-gradient(160deg, #1b2027, #0b0e12); }
.faq-media--phone img { width: 52%; height: auto; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .45); }
.faq-media--screen::after { display: none; }
.faq-panel__head .h-2 { font-size: clamp(30px, 2.8vw, 44px); }
.faq-panel .faq { min-width: 0; }
.faq-panel details { scroll-margin-top: 110px; }
.faq .a b { color: var(--on-paper); }
.faq .a .tlink { text-decoration: none; color: var(--on-paper); justify-self: start; }
@media (max-width: 999px) { .faq-panel__head > figure { max-width: 560px; } .faq-media { aspect-ratio: 16 / 9; } .faq-media--phone { aspect-ratio: 16 / 9; } .faq-media--phone img { width: 34%; } }
@media (max-width: 600px) { .faq .a { padding-right: 0; } .faq summary { padding: 22px 0; font-size: 17.5px; } .faq summary i { width: 34px; height: 34px; } }

.faq-empty { padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg); border: 1px dashed var(--paper-line); background: var(--white); display: grid; gap: 14px; justify-items: start; }

/* still a question? */
.ask-card { min-height: 280px; }
.ask-card .feat__img { aspect-ratio: 16 / 7; }
.ask-card__mail { font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.03em; font-variation-settings: "wdth" 86; background: var(--ride); -webkit-background-clip: text; background-clip: text; color: transparent; justify-self: start; overflow-wrap: anywhere; }

/* closing band */
.band .btn--line { border-color: rgba(255, 255, 255, .55); color: #fff; }
.band .eyebrow::before { background: #fff; }