/* /clients/faq: family CLIENTS "Light". Reuses /clients/financial-planning/assets/fp.css (hero, the How it works rail
   and its nodes, the close) WITHOUT fp.js. Every question is a lit node on one still rail of warm light that runs down
   the gutter from the first topic to the last; the answers read in plain sans beside it. This file adds the question
   and answer type, the topic list, the rail itself and Keep reading. Spectrum is light, never text colour. */

.faq .hero { min-height: 0; padding: 88px 0 110px; }
.faq .lede { max-width: min(32em, 64%); }

/* topics: plain links to each group on this page (navigation, not a call to action) */
.faq-toc { margin-top: 40px; }
.faq-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 4px; }
.faq-toc li { display: inline-flex; align-items: center; }
.faq-toc li:not(:last-child)::after { content: "/"; margin: 0 .55em; color: var(--ink-3); font: 400 14.5px/1 var(--sans); }
.faq-toc a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px; font: 500 15px/1 var(--sans); color: var(--ink);
  text-decoration: underline; text-decoration-color: rgba(29, 33, 38, .35); text-underline-offset: 6px;
}
.faq-toc a:hover { text-decoration-color: currentColor; }

/* ---- the groups: How it works, repeated per topic, with the section padding moved inside so the rail is unbroken ---- */
.faq .how { padding: 0; scroll-margin-top: 90px; }
.faq .how-in { padding: 110px 0 20px; }
.faq .how h2 { font-size: clamp(42px, 4.6vw, 72px); margin-bottom: 18px; }
.faq .how-in::before {
  /* the glow is in the gradient, not a box-shadow, because the fade masks below would clip a shadow */
  content: ""; position: absolute; z-index: -1; left: calc(9% - 36px); width: 72px; top: 0; bottom: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(246, 226, 190, 0), rgba(246, 226, 190, .07) 24%, rgba(246, 226, 190, .2) 40%,
    rgba(244, 221, 181, .62) 47%, #FFFDF8 49% 51%, rgba(244, 221, 181, .62) 53%, rgba(246, 226, 190, .2) 60%, rgba(246, 226, 190, .07) 76%, rgba(246, 226, 190, 0));
}
.faq .faq-g:first-of-type .how-in::before { -webkit-mask-image: linear-gradient(180deg, transparent, #000 120px); mask-image: linear-gradient(180deg, transparent, #000 120px); }
.faq #leaving .how-in::before { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 160px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 160px), transparent); }
.faq #leaving .how-in { padding-bottom: 40px; }

/* a question is the serif line beside its node; the answer drops to plain sans */
.faq-list > li { font-size: clamp(25px, 2.2vw, 32px); padding: 32px 0 30px 3%; }
.faq-list > li + li { border-top: 1px solid var(--line); }
.faq-list h3 { font: inherit; letter-spacing: -.008em; color: var(--ink); margin: 0; max-width: 24em; }
.faq-list .node { top: calc(32px + .61em); }
.faq-a { margin-top: 14px; max-width: 42em; font: 400 18px/1.66 var(--sans); color: var(--ink-2); }
.faq-a p { margin: 0 0 12px; }
.faq-a a, .faq-src a { color: var(--ink); text-decoration-color: rgba(29, 33, 38, .45); text-underline-offset: 3px; }
.faq-a a:hover, .faq-src a:hover { text-decoration-color: currentColor; }
.faq-dots { margin: 0 0 12px; padding-left: 1.2em; }
.faq-dots li { font: inherit; color: inherit; padding: 0; border: 0; margin: 0 0 8px; }
.faq-dots li::marker { color: var(--ink-3); }
.faq-src { margin: 4px 0 0; max-width: 42em; font: 500 13.5px/1.5 var(--sans); letter-spacing: .01em; color: var(--ink-3); }

/* the close sits a little nearer, since the rail lets go just above it */
.faq .close { padding: 170px 0 100px; }

/* ---- keep reading: sibling pages in the client area ---- */
.rel { position: relative; z-index: 1; display: block; padding: 24px 0 36px; }
.rel-in { border-top: 1px solid var(--line); padding-top: 30px; }
.rel-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 5%; }
.rel-list a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font: 400 clamp(26px, 2.2vw, 32px)/1.1 var(--serif);
  color: var(--ink); text-decoration: underline; text-decoration-color: rgba(29, 33, 38, .3); text-underline-offset: 6px;
}
.rel-list a::after { content: "\2192"; font: 400 18px/1 var(--sans); transition: transform .35s var(--ease); }
.rel-list a:hover { text-decoration-color: currentColor; }
.rel-list a:hover::after { transform: translateX(4px); }
.rel-list p { margin: 2px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }

/* ---- phone: the rail runs down the right side, as on the planning page ---- */
@media (max-width: 760px) {
  .faq .hero { padding: 52px 0 64px; }
  .faq .lede { max-width: none; }
  .faq-toc { margin-top: 24px; }
  .faq .how-in { padding: 72px 0 12px; }
  .faq .how-in::before { left: auto; right: -13px; }
  .faq .how h2 { font-size: clamp(36px, 10.4vw, 46px); }
  .faq-list > li { font-size: 23px; padding: 26px 0 24px; }
  .faq-list .node { top: calc(26px + .61em); }
  .faq-a { font-size: 16.5px; }
  .faq .close { padding: 120px 0 64px; }
  .rel-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}