/* ── Skip link ── */
.skip-link {
  position:absolute; top:-100%; left:0;
  background:var(--cocoa); color:var(--cream);
  padding:8px 16px; font-size:13px; z-index:9999;
  border-radius:0 0 8px 0;
}
.skip-link:focus { top:0 }

/* ── Main content above fixed background ── */
main { position:relative; z-index:3 }

/* ── Hero ── */
.faq-hero {
  padding:120px 24px 72px;
  text-align:center;
}
.faq-hero .wrap { max-width:680px; margin:0 auto }
.tag {
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Geist Mono"; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cocoa); padding:6px 14px; border-radius:999px; margin-bottom:24px;
  background:color-mix(in oklab,var(--caramel) 10%,transparent);
  border:1px solid color-mix(in oklab,var(--caramel) 20%,transparent);
}
.faq-hero h1 {
  font-size:clamp(34px,5vw,60px);
  font-weight:500; letter-spacing:-0.04em; line-height:1.08; margin-bottom:20px;
}
.faq-hero p {
  font-size:17px; line-height:1.65; color:var(--ink-2); max-width:50ch; margin:0 auto 36px;
}

/* ── Search ── */
.faq-search {
  display:flex; align-items:center; gap:12px;
  max-width:400px; margin:0 auto;
  background:var(--glass); backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid var(--glass-b);
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset, 0 4px 16px -8px rgba(90,55,30,.12);
  border-radius:999px; padding:10px 20px; cursor:text;
  transition:box-shadow .2s, border-color .2s;
}
.faq-search:focus-within {
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset, 0 0 0 3px rgba(191,130,92,.25), 0 4px 16px -8px rgba(90,55,30,.15);
  border-color:rgba(191,130,92,.5);
}
.faq-search i { color:var(--ink-4); font-size:13px; flex-shrink:0; width:14px }
.faq-search input {
  flex:1; font-size:14px; color:var(--ink); background:transparent; border:none; outline:none; min-width:0;
}
.faq-search input::placeholder { color:var(--ink-4) }

/* ── Body ── */
.faq-body { max-width:760px; margin:0 auto; padding:0 24px 80px }
.faq-category { margin-bottom:56px }
.faq-category-head {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:20px; margin-bottom:12px;
  border-bottom:2px solid var(--line);
}
.faq-category-head h2 { font-size:18px; font-weight:600; letter-spacing:-0.025em; color:var(--ink) }
.faq-count { font-family:"Geist Mono"; font-size:11px; letter-spacing:.1em; color:var(--ink-4); text-transform:uppercase }
.faq-list { display:flex; flex-direction:column; gap:8px }

/* ── FAQ items ── */
.faq-item {
  background:var(--glass); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--glass-b);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 8px -4px rgba(90,55,30,.1);
  border-radius:16px; overflow:hidden;
  transition:box-shadow .2s;
}
.faq-item:hover { box-shadow:0 1px 0 rgba(255,255,255,.75) inset, 0 8px 24px -8px rgba(90,55,30,.16) }
.faq-item summary {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px; cursor:pointer; list-style:none;
  font-size:14.5px; font-weight:500; letter-spacing:-0.015em; color:var(--ink);
}
.faq-item summary::-webkit-details-marker { display:none }
.faq-arrow {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:rgba(167,108,78,.08); border:1px solid rgba(167,108,78,.12);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-3); font-size:10px;
  transition:background .25s, transform .3s var(--ease), color .2s;
}
.faq-item[open] .faq-arrow {
  background:linear-gradient(180deg,var(--caramel),var(--cocoa));
  border-color:transparent; color:#FEF7E3;
  transform:rotate(180deg);
}
.faq-answer {
  padding:14px 20px 20px; border-top:1px solid var(--line);
  font-size:14px; line-height:1.7; color:var(--ink-2);
}
.faq-answer p + p { margin-top:8px }
.faq-answer a { color:var(--cocoa); text-decoration:underline; text-underline-offset:2px }
.faq-answer a:hover { color:var(--ink) }
.faq-answer strong { color:var(--ink); font-weight:600 }

/* ── CTA ── */
.faq-cta {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
  padding:32px; border-radius:24px; margin-top:16px;
  background:color-mix(in oklab,var(--caramel) 7%,transparent);
  border:1px dashed color-mix(in oklab,var(--caramel) 25%,transparent);
}
.faq-cta h3 { font-size:17px; font-weight:600; margin-bottom:6px }
.faq-cta p  { font-size:14px; color:var(--ink-2); line-height:1.55; max-width:44ch }
.btn-sm {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 20px; border-radius:999px; font-size:13.5px; font-weight:500;
  background:linear-gradient(180deg,var(--caramel),var(--cocoa)); color:var(--cream);
  white-space:nowrap;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 6px 18px -8px rgba(167,108,78,.5);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-sm:hover {
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 10px 24px -8px rgba(167,108,78,.65);
}
