/* ============================================================
   FAQ PAGE — Standalone FAQ with editorial hero + categories
   ============================================================ */

/* ── Hero ─────────────────────────────────── */
/*
   Inner-page rule: nav is 64px fixed above content.
   Top padding = nav height + editorial breathing room.
   At 1440px: 64 + 68 = 132px (home page equivalent was 220px — 88px saved).
*/
.faq-hero {
  background: var(--bone);
  padding: calc(64px + clamp(44px,5vw,68px)) var(--gutter) clamp(44px,5vw,68px);
  border-bottom: 1px solid rgba(10,10,10,.07);
}
.faq-hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(40px,6vw,100px);
  align-items: end;
}
.faq-hero__left { /* title + label column */ }
.faq-hero__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase;
  opacity: .35; margin-bottom: clamp(14px,2vw,24px);
}
.faq-hero__title {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(38px,6vw,86px);
  line-height: .92; letter-spacing: -.04em;
  margin-bottom: 0;
  max-width: 14ch;
}
.faq-hero__right { /* sub + meta column */ padding-bottom: 6px; }
.faq-hero__sub {
  font-size: clamp(15px,1.2vw,18px); line-height: 1.65;
  opacity: .65; max-width: 52ch;
  margin-bottom: clamp(16px,2vw,28px);
}
.faq-hero__meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; opacity: .28;
}
@media (max-width: 900px) {
  .faq-hero__inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Intro note ───────────────────────────── */
.faq-intro {
  background: var(--bone);
  padding: clamp(48px,6vw,80px) var(--gutter);
  border-bottom: 1px solid rgba(10,10,10,.07);
}
.faq-intro__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px,6vw,100px);
  align-items: center;
}
.faq-intro__side {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase;
  opacity: .25;
}
.faq-intro__text {
  font-size: clamp(17px,2vw,24px); line-height: 1.55;
  letter-spacing: -.01em; font-weight: 300;
  opacity: .8; max-width: 56ch;
}
@media (max-width: 700px) {
  .faq-intro__inner { grid-template-columns: 1fr; gap: 12px; }
  .faq-intro__side { display: none; }
}

/* ── FAQ section (all groups) ─────────────── */
.faq-body {
  background: var(--bone);
  padding: 0 var(--gutter) clamp(80px,10vw,140px);
}
.faq-body__inner {
  max-width: var(--max);
  margin: 0 auto;
}

/* ── Single category group ────────────────── */
.faq-group {
  padding-top: clamp(60px,7vw,100px);
  border-top: 1px solid rgba(10,10,10,.09);
  margin-top: clamp(60px,7vw,100px);
}
.faq-group:first-child {
  margin-top: 0;
  border-top: none;
}
.faq-group__head {
  display: flex; align-items: baseline; gap: 20px;
  margin-bottom: clamp(28px,3.5vw,48px);
}
.faq-group__n {
  font-family: var(--font-serif); font-weight: 300; font-style: italic;
  font-size: clamp(48px,7vw,96px); line-height: 1;
  letter-spacing: -.05em; opacity: .1; flex-shrink: 0;
}
.faq-group__title {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(24px,3vw,40px); letter-spacing: -.03em;
}
.faq-group__intro {
  font-size: 14px; line-height: 1.6; opacity: .5;
  max-width: 52ch; margin-top: 4px;
}

/* ── Accordion items ──────────────────────── */
/* Override misc.css's .faq for the dedicated page */
.faq-body .faq__list {
  margin-top: 0;
}
.faq-body .faq__item {
  border-top: 1px solid rgba(10,10,10,.1);
}
.faq-body .faq__item:last-child {
  border-bottom: 1px solid rgba(10,10,10,.1);
}
.faq-body .faq__q {
  padding: clamp(20px,2.5vw,30px) 0;
  gap: 24px;
}
.faq-body .faq__q h3 {
  font-size: clamp(17px,1.9vw,23px);
  max-width: 65ch;
}
.faq-body .faq__ico {
  width: 32px; height: 32px; flex-shrink: 0;
}

/* Fade + rise on answer inner */
.faq-body .faq__a-inner {
  padding-top: 0;
  padding-bottom: clamp(20px,2.5vw,32px);
  font-size: var(--t-base); line-height: 1.7;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity  420ms var(--ease) 80ms,
    transform 420ms var(--ease) 80ms;
  max-width: 68ch;
}
.faq-body .faq__item.is-open .faq__a { max-height: 560px; }
.faq-body .faq__item.is-open .faq__a-inner {
  opacity: .68;
  transform: translateY(0);
}

/* ── Premium CTA ending ───────────────────── */
.faq-cta {
  background: var(--ink); color: var(--bone);
  padding: clamp(90px,12vw,180px) var(--gutter);
  text-align: center; position: relative; overflow: hidden;
}
.faq-cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(195,247,58,.05) 0%, transparent 68%);
}
.faq-cta__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.faq-cta__label {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .22em; text-transform: uppercase; opacity: .3;
  margin-bottom: clamp(20px,3vw,36px);
}
.faq-cta__title {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(28px,5vw,68px);
  line-height: 1.0; letter-spacing: -.04em;
  margin-bottom: clamp(20px,3vw,36px);
  max-width: 22ch; margin-left: auto; margin-right: auto;
}
.faq-cta__title em { font-style: italic; opacity: .55; }
.faq-cta__body {
  font-size: clamp(15px,1.2vw,18px); line-height: 1.6;
  opacity: .5; max-width: 52ch; margin: 0 auto clamp(32px,4vw,52px);
}
.faq-cta__actions {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}