/* /advisors/faq. Family ADVISORS "Structure": a thin page layer over the family stylesheet
   /advisors/join/assets/join.css (hero, drafting ground, spec sheet, the stacked-edge solid, the join band).
   It adds the CTA row, the topic index, the question rows on the sheet and related links. Every answer is open:
   no accordion, no script. */
.page-faq { background: var(--pearl); }

/* ---------- hero additions ---------- */
.page-faq .hero { padding-bottom: 8px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0 calc(clamp(60px, 9.2vw, 150px) * 1.04); }
.faq-solid { grid-column: 9 / -1; grid-row: 1; align-self: end; justify-self: end; margin: 0 32px 40px 0; z-index: 1; }

/* ---------- topic index + the sheets ---------- */
.faq-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 48px; align-items: start; padding: 96px 0 0; }
.faq-nav { position: sticky; top: calc(var(--head) + 32px); }
.faq-nav h2 { font: 600 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.faq-nav ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.faq-nav li { border-bottom: 1px solid var(--hair-2); }
.faq-nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; text-decoration: none; color: var(--ink); font: 400 21px/1.15 var(--serif); }
.faq-nav a:hover span:first-child, .faq-nav a:focus-visible span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.faq-nav .n { font: 600 12px/1 var(--sans); letter-spacing: .14em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.faq-nav p { margin: 18px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.faq-nav p a { display: inline; min-height: 0; font: inherit; text-decoration: underline; text-underline-offset: 3px; }

.faq-topic { scroll-margin-top: calc(var(--head) + 24px); }
.faq-topic + .faq-topic { margin-top: 72px; }
.page-faq .sheet { margin-left: 0; }
.page-faq .sheet-head { padding: 40px 40px 26px 88px; }
.page-faq .sheet-head::after { left: 88px; }
.page-faq .sheet-head h2 { font-size: clamp(34px, 3.4vw, 50px); }
.t-no { font: 600 13px/1 var(--sans); letter-spacing: .22em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.faq-list { list-style: none; margin: 0; padding: 0; }
.faq-list > li { display: grid; grid-template-columns: 88px minmax(0, 1fr); border-bottom: 1px solid var(--hair); scroll-margin-top: calc(var(--head) + 24px); }
.faq-list > li:last-child { border-bottom: 0; }
.page-faq .q-ix { align-items: flex-start; padding-top: 36px; }
.faq-a { padding: 28px 44px 28px 32px; }
.faq-a h3 { font: 400 clamp(24px, 2.2vw, 31px)/1.2 var(--serif); letter-spacing: -.005em; margin: 0 0 14px; max-width: 26em; }
.faq-a p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); max-width: 42em; }
.faq-a p + p { margin-top: 10px; }
.faq-a a { color: var(--ink); text-underline-offset: 3px; }
.faq-a .a-go { margin-top: 12px; }
.faq-a .a-go a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.faq-a .a-go a::after { content: " \2192"; white-space: pre; }
.faq-a .a-src { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }
.faq-list > li:target .faq-a { background: linear-gradient(90deg, rgba(127, 214, 242, .14), transparent 70%); }

/* ---------- the join band (family .join grammar, with copy and buttons where the form sits) ---------- */
.page-faq .join { padding: 120px 0 64px; }
.band-body { padding-top: 12px; }
.band-body > p:not(.fineprint) { margin: 0; font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 30em; }
.band-body .cta-row { margin: 30px 0 0; }
.band-body .fineprint a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- related pages ---------- */
.rel { position: relative; z-index: 2; padding: 24px 0 140px; }
.rel h2 { font: 600 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.rel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair-2); }
.rel li { border-bottom: 1px solid var(--hair); }
.rel a { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 88px; padding: 14px 18px 14px 0; text-decoration: none; }
.rel a:hover .rel-n, .rel a:focus-visible .rel-n { text-decoration: underline; text-underline-offset: 4px; }
.rel-n { font: 400 24px/1.1 var(--serif); color: var(--ink); }
.rel-n::after { content: " \2192"; font: 500 16px/1 var(--sans); }
.rel-d { font-size: 14px; line-height: 1.45; color: var(--ink-3); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .faq-solid { display: none; }
  .faq-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .faq-nav { position: relative; top: auto; }
  .faq-nav ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .rel ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .cta-row { margin: 26px 0 0; }
  .cta-row .btn { flex: 1 1 auto; }
  .faq-solid { display: none; }
  .faq-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-top: 64px; }
  .faq-nav { position: relative; top: auto; }
  .faq-topic + .faq-topic { margin-top: 48px; }
  .page-faq .sheet-head { padding: 30px 20px 22px; }
  .page-faq .sheet-head::after { left: 20px; width: 120px; }
  .page-faq .sheet-head h2 { font-size: clamp(32px, 9vw, 40px); }
  .faq-list > li { grid-template-columns: 44px minmax(0, 1fr); }
  .page-faq .q-ix { padding-top: 26px; font-size: 12px; letter-spacing: .12em; }
  .faq-a { padding: 20px 16px 22px 16px; }
  .faq-a h3 { font-size: 23px; }
  .faq-a p { font-size: 16px; }
  .page-faq .join { padding: 80px 0 40px; }
  .band-body > p:not(.fineprint) { font-size: 17px; }
  .rel { padding-bottom: 96px; }
  .rel ul { grid-template-columns: minmax(0, 1fr); }
  .rel a { min-height: 72px; }
}