/* K & A — faq.html page styles */

  /* Category filter */
  .cats {
    max-width: 900px; margin: 32px auto 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  }
  .cat {
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    padding: 10px 18px; border-radius: 999px;
    border: 1.5px solid var(--rule); background: var(--cream); color: var(--ink-2);
    cursor: pointer; transition: all 0.18s cubic-bezier(.22,.68,0,1); white-space: nowrap;
  }
  .cat:hover { border-color: var(--ink-2); }
  .cat.is-on { background: var(--pink); color: var(--cream); border-color: var(--pink); }

  /* FAQ list */
  .faqs { max-width: 920px; margin: 48px auto 0; padding: 0 40px 80px; }
  details.faq {
    background: var(--cream); border: 1px solid var(--rule); border-radius: 6px;
    margin-bottom: 14px; overflow: hidden; transition: border-color 0.18s, box-shadow 0.18s;
  }
  details.faq[open] { border-color: var(--ink); box-shadow: 0 8px 24px rgba(42,15,28,0.06); }
  details.faq summary {
    list-style: none; cursor: pointer; padding: 24px 28px;
    display: grid; grid-template-columns: auto 1fr auto auto; gap: 20px; align-items: center;
    transition: padding 0.18s;
  }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq[open] summary { padding-bottom: 14px; }
  details.faq .num { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--pink); min-width: 32px; }
  details.faq .q { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--pink); line-height: 1.3; }
  details.faq .q em { font-style: italic; font-weight: 400; color: var(--orange); }
  details.faq .pill-cat {
    font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange-d); padding: 4px 10px; border: 1px solid var(--orange-d); border-radius: 999px;
    white-space: nowrap;
  }
  details.faq .chev {
    width: 32px; height: 32px; border: 1.5px solid var(--rule); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0;
    transition: all 0.22s cubic-bezier(.22,.68,0,1);
  }
  details.faq[open] .chev { background: var(--pink); color: var(--cream); border-color: var(--pink); transform: rotate(180deg); }
  details.faq .a { padding: 0 28px 28px 80px; font-size: 16px; color: var(--ink-2); line-height: 1.7; }
  details.faq .a p { margin: 0; }
  details.faq .a p + p { margin-top: 12px; }
  details.faq .a strong { color: var(--ink); }
  details.faq .a a { color: var(--pink); border-bottom: 1.5px solid var(--pink); }
  details.faq.hidden { display: none; }

  /* Still got questions */
  .still { background: var(--green-pale); padding: 80px 40px; text-align: center; }
  .still h2 { font-size: 72px; letter-spacing: -0.02em; margin: 0 0 16px; }
  .still h2 em { font-style: italic; font-weight: 400; color: var(--orange); }
  .still p { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink-2); margin: 0 auto 32px; max-width: 50ch; }
  .still .ctas { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 768px) {
    .faqs { padding: 0 20px 56px; }
    .still { padding: 56px 20px; }
    .still h2 { font-size: 56px; }
    details.faq summary { grid-template-columns: auto 1fr auto; gap: 14px; }
    .pill-cat { display: none; }
    details.faq .a { padding: 0 20px 24px 52px; }
  }

  @media (max-width: 600px) {
    .faqs { padding: 0 12px 48px; }
    details.faq summary { padding: 20px 18px; gap: 12px; }
    details.faq .num { font-size: 13px; min-width: 24px; }
    details.faq .q { font-size: 18px; }
    details.faq .a { padding: 0 18px 20px 18px; font-size: 15px; }
    .still { padding: 48px 16px; }
    .still h2 { font-size: 44px; }
    .still p { font-size: 18px; }
    .still .ctas { flex-direction: column; align-items: stretch; }
    .still .ctas .btn { text-align: center; justify-content: center; }
    .cats { padding: 24px 16px 0; }
  }