/* ==========================================================================
   FAQ: "Questions. Answered."
   Same identity as before (satin ribbon, red/green atmosphere, glass, mono
   indexes) on a compact two-column layout: a sticky rail for search and
   topics, and an accordion that animates its height in CSS.
   ========================================================================== */

.qa-page{
  --qa-hair:rgba(255,255,255,.09);
  --qa-hair-hi:rgba(255,255,255,.2);
  --qa-surface:rgba(255,255,255,.03);
  --qa-surface-hi:rgba(255,255,255,.07);
  --qa-mark:rgba(255,255,255,.2);
  position:relative;
  overflow:clip;
  isolation:isolate;
  padding-bottom:20px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, #050506 0%, #080809 46%, #050506 100%);
}
html[data-theme='light'] .qa-page{
  --qa-hair:rgba(17,19,22,.1);
  --qa-hair-hi:rgba(17,19,22,.24);
  --qa-surface:rgba(17,19,22,.025);
  --qa-surface-hi:rgba(17,19,22,.05);
  --qa-mark:rgba(17,19,22,.12);
  background:var(--void);
}
.qa-page > *{ position:relative; z-index:1; }
.qa-page h1,
.qa-page h2{ text-wrap:balance; }
.qa-page p{ text-wrap:pretty; }

.qa-atmosphere{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 14%, rgba(151,27,41,.12), transparent 30%),
    radial-gradient(circle at 88% 46%, rgba(0,66,37,.13), transparent 36%),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size:auto, auto, 128px 128px, 128px 128px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}
html[data-theme='light'] .qa-atmosphere{ opacity:.6; }

/* The satin ribbon, now a single drawn path behind the hero. */
.qa-ribbon{
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  width:100%;
  height:min(820px, 100vh);
  pointer-events:none;
  opacity:.62;
  translate:calc(var(--rx, 0) * -22px) calc(var(--ry, 0) * -14px);
  transition:translate 1.2s var(--ease-luxe);
  animation:qa-drift 14s ease-in-out infinite alternate;
}
.qa-ribbon path{ stroke-linecap:round; stroke-linejoin:round; }
.qa-ribbon__shadow{ stroke:rgba(0,0,0,.42); stroke-width:78; transform:translateY(12px); filter:blur(10px); }
.qa-ribbon__satin{ stroke-width:44; }
.qa-ribbon__thread{
  stroke:rgba(255,255,255,.28);
  stroke-width:1.2;
  stroke-dasharray:1 14;
  animation:qa-thread 9s linear infinite;
}
html[data-theme='light'] .qa-ribbon{ opacity:.5; }
html[data-theme='light'] .qa-ribbon stop{ stop-color:#8d9299; }
html[data-theme='light'] .qa-ribbon__shadow{ stroke:rgba(17,19,22,.08); }
html[data-theme='light'] .qa-ribbon__thread{ stroke:rgba(17,19,22,.3); }
@keyframes qa-drift{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-2%,14px,0); }
}
@keyframes qa-thread{ to{ stroke-dashoffset:-150; } }

/* ---------- hero ---------- */
.qa-hero{
  padding-top:min(24vh,210px);
  padding-bottom:clamp(48px,8vh,96px);
}
.qa-kicker{ color:var(--ink-dimmer); }
.qa-hero-title{
  margin-top:10px;
  font-size:clamp(56px,10vw,150px);
  line-height:.92;
  letter-spacing:-.035em;
  text-shadow:0 0 58px rgba(255,255,255,.08);
}
html[data-theme='light'] .qa-hero-title{ text-shadow:none; }
.qa-hero-copy{
  max-width:600px;
  margin-top:28px;
  color:var(--ink-dim);
  font-size:clamp(17px,1.9vw,21px);
  line-height:1.55;
}
.qa-stats{
  display:flex;
  flex-wrap:wrap;
  margin-top:40px;
  border-top:1px solid var(--qa-hair);
  border-bottom:1px solid var(--qa-hair);
  width:fit-content;
}
.qa-stats > div{ padding:16px 28px 16px 0; margin-right:28px; border-right:1px solid var(--qa-hair); }
.qa-stats > div:last-child{ border-right:0; margin-right:0; }
.qa-stats dt{ color:var(--ink-dimmer); margin-bottom:6px; }
.qa-stats dd{
  font-family:'Sora',sans-serif;
  font-size:26px;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

@keyframes qa-enter{
  from{ opacity:0; transform:translateY(18px); filter:blur(6px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}
.qa-hero > *{ animation:qa-enter .9s var(--ease-luxe) both; }
.qa-hero > :nth-child(2){ animation-delay:.06s; }
.qa-hero > :nth-child(3){ animation-delay:.14s; }
.qa-hero > :nth-child(4){ animation-delay:.22s; }

/* ---------- layout ---------- */
.qa-layout{
  display:grid;
  grid-template-columns:minmax(250px,320px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
  padding-bottom:clamp(64px,10vh,130px);
}
.qa-rail-inner{
  position:sticky;
  top:112px;
  display:grid;
  gap:18px;
}

.qa-search{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 12px 0 16px;
  border-radius:16px;
  cursor:text;
  transition:border-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.qa-search > *{ position:relative; z-index:2; }
.qa-search i{ font-size:20px; color:var(--ink-dimmer); transition:color .25s var(--ease-soft); }
.qa-search input{
  flex:1;
  min-width:0;
  height:50px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:15px;
}
.qa-search input::placeholder{ color:var(--ink-dimmer); }
.qa-search input::-webkit-search-cancel-button{ filter:grayscale(1) brightness(1.6); cursor:pointer; }
.qa-search kbd{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:1px solid var(--qa-hair-hi);
  border-radius:7px;
  color:var(--ink-dimmer);
  font-size:11px;
  transition:opacity .2s var(--ease-soft);
}
.qa-search:focus-within{
  border-color:var(--qa-hair-hi);
  box-shadow:0 0 0 4px rgba(255,255,255,.05);
}
.qa-search:focus-within i{ color:var(--ink); }
.qa-search:focus-within kbd{ opacity:0; }

.qa-filters{ display:flex; flex-wrap:wrap; gap:8px; }
.qa-filter{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border:1px solid var(--qa-hair);
  border-radius:999px;
  background:var(--qa-surface);
  color:var(--ink-dim);
  font-size:13px;
  cursor:pointer;
  transition:background-color .25s var(--ease-soft), color .25s var(--ease-soft), border-color .25s var(--ease-soft), transform .2s var(--ease-soft);
}
.qa-filter .mono{ font-size:10px; color:var(--ink-dimmer); letter-spacing:.08em; transition:color .25s var(--ease-soft); }
.qa-filter:hover{ color:var(--ink); border-color:var(--qa-hair-hi); }
.qa-filter:active{ transform:scale(.96); }
.qa-filter[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--void); }
.qa-filter[aria-pressed="true"] .mono{ color:inherit; opacity:.55; }

.qa-status{ color:var(--ink-dimmer); font-variant-numeric:tabular-nums; }

.qa-rail-card{ padding:22px; border-radius:20px; }
.qa-rail-card > *{ position:relative; z-index:2; }
.qa-rail-card .section-eyebrow{ margin-bottom:10px; }
.qa-rail-card p{ color:var(--ink-dim); font-size:14px; line-height:1.6; }
.qa-rail-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  margin-top:10px;
  color:var(--ink);
  font-size:13.5px;
  overflow-wrap:anywhere;
}
.qa-rail-link i{ font-size:17px; color:var(--ink-dim); transition:transform .35s var(--ease-luxe); }
.qa-rail-link:hover i{ transform:translateX(-2px) rotate(-8deg); }

/* ---------- accordion ---------- */
.qa-list{ display:grid; gap:12px; }
.qa-item{
  border-radius:22px;
  scroll-margin-top:120px;
  transition:border-color .35s var(--ease-soft), background-color .35s var(--ease-soft), box-shadow .45s var(--ease-soft);
}
.qa-item[hidden]{ display:none; }
.qa-item > *{ position:relative; z-index:2; }
.qa-item.is-open{
  border-color:var(--qa-hair-hi);
  box-shadow:0 30px 70px -48px rgba(0,0,0,.9);
}
.qa-heading{ margin:0; font:inherit; letter-spacing:normal; line-height:inherit; }
.qa-question{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 40px;
  align-items:center;
  gap:16px;
  width:100%;
  min-height:76px;
  padding:18px 22px 18px 24px;
  border:0;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  border-radius:22px;
}
.qa-question:focus-visible{ outline:2px solid var(--ink-dim); outline-offset:-4px; }
.qa-index{ color:var(--ink-dimmer); font-size:10.5px; font-variant-numeric:tabular-nums; }
.qa-question-text{
  font-family:'Sora',sans-serif;
  font-size:clamp(17px,1.6vw,21px);
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.3;
  color:var(--ink-dim);
  transition:color .3s var(--ease-soft);
}
.qa-question:hover .qa-question-text,
.qa-item.is-open .qa-question-text{ color:var(--ink); }
.qa-question-text mark{
  padding:0 2px;
  border-radius:4px;
  background:var(--qa-mark);
  color:var(--ink);
}

/* Plus that turns into a minus, inside a ring that fills when open. */
.qa-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid var(--qa-hair);
  border-radius:50%;
  transition:background-color .35s var(--ease-soft), border-color .35s var(--ease-soft), transform .5s cubic-bezier(.34,1.56,.64,1);
}
.qa-icon i{
  position:absolute;
  width:12px;
  height:1.5px;
  border-radius:2px;
  background:var(--ink-dim);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), background-color .3s var(--ease-soft);
}
.qa-icon i:last-child{ transform:rotate(90deg); }
.qa-question:hover .qa-icon{ border-color:var(--qa-hair-hi); transform:rotate(90deg); }
.qa-question:active .qa-icon{ transform:scale(.9); }
.qa-item.is-open .qa-icon{ background:var(--ink); border-color:var(--ink); transform:rotate(180deg); }
.qa-item.is-open .qa-icon i{ background:var(--void); }
.qa-item.is-open .qa-icon i:last-child{ transform:rotate(180deg) scaleX(0); }

.qa-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease-luxe);
}
.qa-item.is-open .qa-answer{ grid-template-rows:1fr; }
.qa-answer-inner{
  min-height:0;
  overflow:hidden;
  padding:0 24px 0 calc(24px + 72px + 16px);
  opacity:0;
  transform:translateY(-6px);
  filter:blur(4px);
  visibility:hidden;
  transition:opacity .25s var(--ease-soft), transform .35s var(--ease-soft), filter .25s var(--ease-soft), visibility 0s linear .35s;
}
.qa-item.is-open .qa-answer-inner{
  opacity:1;
  transform:none;
  filter:none;
  visibility:visible;
  transition:opacity .45s var(--ease-soft) .1s, transform .55s var(--ease-luxe) .08s, filter .45s var(--ease-soft) .08s, visibility 0s;
}
.qa-answer-inner p{
  max-width:66ch;
  color:var(--ink-dim);
  font-size:16px;
  line-height:1.72;
}
.qa-answer-inner p a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--ink-dimmer);
  text-underline-offset:3px;
  transition:text-decoration-color .3s var(--ease-soft);
}
.qa-answer-inner p a:hover{ text-decoration-color:var(--ink); }
.qa-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:20px;
  padding:16px 0 22px;
  border-top:1px solid var(--qa-hair);
}
.qa-tags{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; }
.qa-tags li{
  padding:6px 10px;
  border:1px solid var(--qa-hair);
  border-radius:999px;
  color:var(--ink-dimmer);
  font-size:10px;
}
.qa-permalink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--ink-dimmer);
  cursor:pointer;
  transition:color .25s var(--ease-soft), border-color .25s var(--ease-soft), background-color .25s var(--ease-soft), transform .2s var(--ease-soft);
}
.qa-permalink i{ font-size:15px; transition:transform .4s var(--ease-luxe); }
.qa-permalink:hover{ color:var(--ink); border-color:var(--qa-hair); }
.qa-permalink:hover i{ transform:rotate(-45deg); }
.qa-permalink:active{ transform:scale(.95); }
.qa-permalink.is-copied{ color:var(--ink); border-color:var(--qa-hair-hi); background:var(--qa-surface-hi); }

/* Arriving from a link to one answer: a single soft pulse marks it. */
.qa-item.is-linked{ animation:qa-linked 1.6s var(--ease-soft) 1; }
@keyframes qa-linked{
  0%,100%{ box-shadow:0 30px 70px -48px rgba(0,0,0,.9); }
  30%{ box-shadow:0 0 0 1px var(--qa-hair-hi), 0 0 0 8px var(--qa-surface-hi), 0 30px 70px -48px rgba(0,0,0,.9); }
}

.qa-empty{
  display:grid;
  justify-items:start;
  gap:10px;
  padding:28px;
  border-radius:22px;
}
.qa-empty[hidden]{ display:none; }
.qa-empty > *{ position:relative; z-index:2; }
.qa-empty p{ color:var(--ink-dim); font-size:16px; line-height:1.6; }
.qa-reset{
  min-height:40px;
  margin-top:6px;
  padding:0 16px;
  border:1px solid var(--qa-hair-hi);
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background-color .25s var(--ease-soft), transform .2s var(--ease-soft);
}
.qa-reset:hover{ background:var(--qa-surface-hi); }
.qa-reset:active{ transform:scale(.96); }

/* ---------- closing ---------- */
.qa-closing{ padding-bottom:clamp(70px,12vh,150px); }
.qa-closing .qa-cta-panel{ min-height:0; }
.qa-cta-panel h2{ font-size:clamp(36px,5.6vw,72px); }
.qa-cta-copy{ max-width:480px; color:var(--ink-dim); font-size:16px; line-height:1.65; }
.qa-cta-copy a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--ink-dimmer);
  text-underline-offset:3px;
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .qa-layout{ grid-template-columns:1fr; gap:22px; }
  .qa-rail-inner{ position:static; gap:14px; }
  .qa-rail-card{ display:none; }
  .qa-filters{
    flex-wrap:nowrap;
    margin:0 calc(-1 * var(--mobile-gutter, 22px));
    padding:2px var(--mobile-gutter, 22px);
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
    mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
  }
  .qa-filters::-webkit-scrollbar{ display:none; }
  .qa-filter{ flex:0 0 auto; min-height:42px; }
  .qa-search kbd{ display:none; }
}
@media (max-width:640px){
  .qa-hero{ padding-top:min(20vh,140px); }
  .qa-hero-title{ font-size:clamp(52px,16vw,84px); }
  .qa-stats{ width:100%; }
  .qa-stats > div{ flex:1; padding-right:12px; margin-right:12px; }
  .qa-stats dd{ font-size:22px; }
  .qa-question{
    grid-template-columns:minmax(0,1fr) 40px;
    gap:6px 14px;
    padding:18px 16px 18px 18px;
  }
  .qa-index{ grid-column:1; grid-row:1; }
  .qa-question-text{ grid-column:1; grid-row:2; font-size:17px; }
  .qa-icon{ grid-column:2; grid-row:1 / span 2; }
  .qa-answer-inner{ padding:0 18px; }
  .qa-answer-inner p{ font-size:15.5px; }
  .qa-ribbon{ opacity:.4; height:620px; }
}

@media (prefers-reduced-motion: reduce){
  .qa-ribbon,
  .qa-ribbon__thread,
  .qa-hero > *{ animation:none; }
}