.wrap{width:100%;max-width:1000px}

    .header{
      display:flex;gap:20px;align-items:center;margin-bottom:18px
    }
   
    h1{font-size:22px;margin:0}
    p.lead{margin:0;color:var(--muted);font-size:14px}


    .faq-grid{display:grid;grid-template-columns:1fr 360px;gap:22px}

    .card{
        background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
        border:1px solid rgba(255,255,255,0.04);
        padding:18px;border-radius:var(--radius);
        box-shadow:0 6px 30px rgba(2,6,23,0.6);
        width: 80%;
        margin-left: 12%;
        margin-right: 12%;
    }

    /* Accordion list */
    .accordion{display:flex;flex-direction:column;gap:10px}

    .item{border-radius:12px;overflow:hidden;background:transparent}
    .item > button{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px;border:0;background:transparent;color:inherit;font-size:15px;cursor:pointer;outline:none
    }
    .item > button:focus{box-shadow:0 0 0 4px rgba(110,231,183,0.08);border-radius:10px}

    .meta{display:flex;gap:10px;align-items:center}
    
    .chev{width:36px;height:36px;display:grid;place-items:center;border-radius:10px}

    /* panel (collapsible content) */
    .panel{
      max-height:0;
      overflow:hidden;
      padding:0 14px;
      transition:all 320ms cubic-bezier(.2,.9,.3,1);
      font-size:15px;
      color:var(--muted);line-height:1.5;margin-bottom:4px;
      text-align: left;
    }
    .item[aria-expanded="true"] .panel{max-height:400px;padding:12px 14px}

    /* empty state */
    .empty{padding:24px;text-align:center;color:var(--muted)}

    /* responsive */
    @media (max-width:880px){
      .faq-grid{grid-template-columns:1fr;}
      .sidebar{order:2}
    }