/* cards.css: the index-card FAQ (home page, Support, Rahti Live). Loads after site.css. */

/* ============================================================ 12. FAQ: index cards in a drawer */
.faq{padding:clamp(72px,10vw,200px) var(--margin) 0}
.faq__in{max-width:1100px;margin:0 auto}
.faq h2{margin-bottom:clamp(28px,4vw,56px);font-size:var(--step-l)}
.cards{display:flex;flex-direction:column}
.card{--tab:0px;position:relative;margin-top:-1px;color:var(--cream);
  clip-path:polygon(var(--tab) 0,calc(var(--tab) + 200px) 0,calc(var(--tab) + 200px) 40px,100% 40px,100% 100%,0 100%,0 40px,var(--tab) 40px)}
.card:nth-child(1){--tab:0px}.card:nth-child(2){--tab:90px}.card:nth-child(3){--tab:180px}.card:nth-child(4){--tab:270px}.card:nth-child(5){--tab:180px}.card:nth-child(6){--tab:90px}.card:nth-child(7){--tab:0px}
.card>summary{list-style:none;cursor:pointer;padding:50px 64px 22px 28px;display:block;font-size:var(--step-lead);font-weight:600;line-height:1.3;position:relative}
.card>summary::-webkit-details-marker{display:none}
.card>summary .tab{position:absolute;left:calc(var(--tab) + 20px);top:0;height:40px;display:flex;align-items:center;font-size:var(--step-s);font-weight:600}
.card>summary::after{content:'+';content:'+' / '';position:absolute;right:26px;top:52px;font-size:26px;line-height:1;transition:transform var(--t-ui) var(--ease-out)}
.card[open]>summary::after{transform:rotate(45deg)}
.card__a{padding:0 28px 30px;max-width:62ch}
.card:nth-child(3n+1){background:var(--f-gold);--cream:#181206;--cream-dim:#3B2F1B;--gold-text:#181206}
.card:nth-child(3n+2){background:var(--f-night-3);--cream:#F1ECE2;--cream-dim:#A39C8C;--gold-text:#D4AF8F}
.card:nth-child(3n+3){background:var(--f-gold-lt);--cream:#181206;--cream-dim:#3B2F1B;--gold-text:#181206}
@media (max-width:860px){
  .card:nth-child(n){--tab:0px}
  .card:nth-child(2){--tab:40px}.card:nth-child(3){--tab:80px}.card:nth-child(4){--tab:120px}.card:nth-child(5){--tab:80px}.card:nth-child(6){--tab:40px}
  .card{clip-path:polygon(var(--tab) 0,calc(var(--tab) + 150px) 0,calc(var(--tab) + 150px) 40px,100% 40px,100% 100%,0 100%,0 40px,var(--tab) 40px)}
}
/* Keyboard focus: the notched clip-path cuts any outline drawn outside the card, so the ring is drawn inside the body, in the card's own text colour. */
.card>summary:focus-visible{outline:none}
.card>summary:focus-visible::before{content:'';position:absolute;inset:42px 8px 6px 8px;border:2px solid currentColor;pointer-events:none}
.card__a a:focus-visible{outline:2px solid currentColor;outline-offset:3px}