/* ===================================================================
   rizzfr — guide.css
   Guide page only: onboarding steps + FAQ accordion.
=================================================================== */

.steps{display:flex;flex-direction:column;}
.step-item{
  display:grid;grid-template-columns:56px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);
}
.step-item:first-child{padding-top:0;}
.step-item:last-child{border-bottom:none;}
.step-num{
  width:40px;height:40px;border-radius:50%;
  background:var(--crimson-100);color:var(--crimson-600);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;font-weight:700;
}
.step-item h3{font-size:18px;margin-bottom:6px;}
.step-item p{font-size:14.5px;color:var(--muted);}

/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:none;border:0;padding:22px 4px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--body);font-weight:700;font-size:16px;color:var(--ink);
}
.faq-q .plus{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--crimson-600);color:var(--crimson-600);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.faq-item.open .faq-q .plus{transform:rotate(135deg);background:var(--crimson-600);color:var(--paper);}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .35s var(--ease);
}
.faq-a p{padding:0 4px 22px;font-size:14.5px;color:var(--muted);max-width:640px;}

/* ===================================================================
   Channels (moved here from the home page)
=================================================================== */
.h-scroll > .card{flex:0 0 82%;}
@media (min-width:560px){
  .h-scroll > .card{flex:0 0 46%;}
}
@media (min-width:900px){
  .h-scroll > .card{flex:0 0 31%;}
}
.card{
  border-radius:10px;
  padding:26px;
  transition:transform .35s var(--ease-spring), box-shadow .3s var(--ease-out);
}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 34px -22px rgba(0,0,0,0.3);}
.card:hover .vidcard-tint{border-color:var(--crimson-500);}
.card .icon{width:40px;height:40px;margin-bottom:18px;color:var(--crimson-600);transition:transform .3s var(--ease);}
.card:hover .icon{transform:scale(1.12) rotate(-4deg);}
.card h3{font-size:18px;margin-bottom:8px;}
.card p{font-size:14px;color:var(--muted);}
.card .tag{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10.5px;color:var(--crimson-600);letter-spacing:0.05em;text-transform:uppercase;}