/* Interactive referral ranks for the public FAQ. */
.faq-ranks .faq-ranks__grid{align-items:stretch}
.faq-ranks .faq-rank{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-top:5px solid var(--rank);background:linear-gradient(145deg,var(--rank-accent),color-mix(in srgb,var(--rank-accent) 78%,#fff));box-shadow:0 8px 18px rgba(0,0,0,.14);transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease,background .32s ease;will-change:transform}
.faq-ranks .faq-rank:before{position:absolute;z-index:-1;top:-68%;right:-44%;width:145%;height:145%;content:"";border-radius:50%;background:radial-gradient(circle,var(--rank) 0 2%,transparent 3% 100%);opacity:0;transform:scale(.65);transition:opacity .35s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.faq-ranks .faq-rank:after{position:absolute;right:18px;bottom:15px;content:"↗";color:var(--rank);font-size:22px;font-weight:900;opacity:.24;transform:translate(-7px,7px);transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.2,1)}
.faq-ranks .faq-rank>*{position:relative;z-index:1}
.faq-ranks .faq-rank__name{font-weight:900;letter-spacing:-.02em}
.faq-ranks .faq-rank strong{display:inline-block;line-height:1;transition:transform .32s cubic-bezier(.2,.8,.2,1),letter-spacing .32s ease}
.faq-ranks .faq-rank__requirement{max-width:190px;line-height:1.35;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s ease}
.faq-ranks .faq-rank:focus-visible{outline:3px solid var(--acid);outline-offset:4px}
@media(hover:hover) and (pointer:fine){.faq-ranks .faq-rank:hover{z-index:2;border-color:var(--rank);background:linear-gradient(145deg,#fff,var(--rank-accent));box-shadow:0 19px 34px rgba(0,0,0,.28);transform:translateY(-9px) rotate(-.45deg)}.faq-ranks .faq-rank:hover:before{opacity:.14;transform:scale(1)}.faq-ranks .faq-rank:hover:after{opacity:1;transform:translate(0,0)}.faq-ranks .faq-rank:hover strong{letter-spacing:.02em;transform:translateY(-3px) scale(1.08)}.faq-ranks .faq-rank:hover .faq-rank__requirement{opacity:.84;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.faq-ranks .faq-rank,.faq-ranks .faq-rank:before,.faq-ranks .faq-rank:after,.faq-ranks .faq-rank strong,.faq-ranks .faq-rank__requirement{transition:none}.faq-ranks .faq-rank:hover{transform:none}}

@media(max-width:700px){
  .faq-ranks{padding:56px 14px;overflow:hidden}
  .faq-ranks .faq-ranks__head h2{margin:10px 0 16px;font-size:clamp(38px,12vw,54px);line-height:.92;overflow-wrap:anywhere}
  .faq-ranks .faq-ranks__head>p:last-child{margin:0;color:#b8c1ba;font-size:14px;line-height:1.55}
  .faq-ranks .faq-ranks__grid{grid-template-columns:1fr;gap:10px;margin-top:26px}
  .faq-ranks .faq-rank{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:repeat(2,auto);align-content:center;align-items:center;gap:7px 16px;width:100%;min-width:0;min-height:0;padding:16px 17px;border-top:1px solid color-mix(in srgb,var(--rank) 55%,transparent);border-left:5px solid var(--rank);border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
  .faq-ranks .faq-rank__name{grid-column:1;grid-row:1;min-width:0;font-size:16px;overflow-wrap:anywhere}
  .faq-ranks .faq-rank strong{grid-column:2;grid-row:1;justify-self:end;font-size:30px;white-space:nowrap}
  .faq-ranks .faq-rank__requirement{grid-column:1;grid-row:2;max-width:none;padding-right:4px;font-size:10px;line-height:1.45;overflow-wrap:anywhere}
  .faq-ranks .faq-rank:after{right:10px;bottom:7px;font-size:14px;opacity:.12;transform:none}
}