/* /clients/selection-of-other-advisers: family CLIENTS "Light". Reuses /clients/financial-planning/assets/fp.css (hero,
   numbered areas, How it works, the close) WITHOUT fp.js: the pools, the rail nodes and the closing glow are set lit in
   the markup (.is-lit), and one still rail of warm light runs down the gutter from the last area into How it works.
   This file adds only what fp.css does not have: the filings, the fees, the limits and conflicts, and Keep reading.
   Spectrum is light, never text colour. */

/* hero: shorter than the planning page, which needs its height for the moving line */
.soa .hero { min-height: 0; padding: 88px 0 120px; }
.soa .stage-in { min-height: clamp(400px, 54vh, 540px); }

/* ---- the still rail: centred on the left numeral column (9% of the wrap), under every word ---- */
.soa .stage-in::before, .soa-in::before, .soa .how-in::before {
  /* the glow is in the gradient, not a box-shadow, because the fade masks below would clip a shadow */
  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));
}
.soa .stage:last-child .stage-in::before, .soa-in::before, .soa .how-in::before { content: ""; }
/* it leaves the last numeral, and lets go above the close */
.soa .stage:last-child .stage-in::before { top: 50%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 90px); mask-image: linear-gradient(180deg, transparent, #000 90px); }
.soa .how-in::before { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 140px), transparent); }
.soa .how { padding: 0; }
.soa .how-in { padding: 140px 0 60px; }

/* ---- the reading sections: the same 18% gutter as How it works, so the rail never crosses a word ---- */
.soa-sec { position: relative; }
.soa-in { position: relative; display: grid; grid-template-columns: 18% minmax(0, 1fr); padding: 120px 0 24px; }
.soa-in > * { grid-column: 2; margin-left: 3%; }
.soa-in h2 { font: 400 clamp(42px, 4.6vw, 72px)/1.02 var(--serif); letter-spacing: -.016em; margin: 0 0 36px; max-width: 13em; }
.soa-body { max-width: 46em; }
.soa-body p { font-size: 19px; line-height: 1.62; color: var(--ink-2); margin: 0 0 18px; }
.soa-body .soa-big { font: 400 clamp(26px, 2.4vw, 36px)/1.28 var(--serif); color: var(--ink); margin-bottom: 8px; }
.soa-src, .soa-body .soa-src { font-size: 15px; line-height: 1.6; color: var(--ink-3); margin: 22px 0 0; }
.soa-in a { color: var(--ink); text-decoration-color: rgba(29, 33, 38, .45); text-underline-offset: 3px; }
.soa-in a:hover { text-decoration-color: currentColor; }

/* the filings, quoted: the words sit on pearl, the light is a glow at their edge */
.soa-q { margin: 30px 0; padding: 6px 0 6px 28px; position: relative; }
.soa-q::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(195, 237, 219, .9), rgba(246, 226, 190, 1) 50%, rgba(245, 196, 215, .9));
  box-shadow: 0 0 12px 2px rgba(246, 226, 190, .45);
}
.soa-q blockquote { margin: 0; }
.soa-q blockquote p { font: italic 400 clamp(24px, 2.2vw, 32px)/1.3 var(--serif); color: var(--ink); margin: 0; }
.soa-q figcaption { margin-top: 12px; font: 500 13.5px/1.4 var(--sans); letter-spacing: .02em; color: var(--ink-3); }

/* fees: three short terms under the lead sentence */
.soa-terms { margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 5%; border-top: 1px solid var(--line); }
.soa-terms > div { padding-top: 20px; }
.soa-terms dt { font: 600 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; }
.soa-terms dd { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }

/* limits and conflicts: two columns */
.soa-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 6%; border-top: 1px solid var(--line); max-width: 62em; }
.soa-col { padding-top: 22px; }
.soa-col h3 { font: 400 clamp(28px, 2.4vw, 36px)/1.1 var(--serif); margin: 0 0 14px; }
.soa-col p { font-size: 17px; line-height: 1.62; color: var(--ink-2); margin: 0 0 14px; }

/* the close sits a little nearer, since the rail lets go just above it */
.soa .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 through every area, as on the planning page ---- */
@media (max-width: 760px) {
  .soa .hero { padding: 52px 0 72px; }
  .soa .stage-in { min-height: 0; }
  .soa .stage-in::before { content: ""; }
  .soa .stage-in::before, .soa-in::before, .soa .how-in::before { left: auto; right: -13px; }
  .soa .stage:last-child .stage-in::before { top: 0; -webkit-mask-image: none; mask-image: none; }
  .soa .stages .stage:first-child .stage-in::before { -webkit-mask-image: linear-gradient(180deg, transparent, #000 70px); mask-image: linear-gradient(180deg, transparent, #000 70px); }
  .soa-in { grid-template-columns: minmax(0, 1fr) 46px; padding: 72px 0 16px; }
  .soa-in > * { grid-column: 1; margin-left: 0; }
  .soa-in h2 { font-size: clamp(36px, 10.4vw, 46px); margin-bottom: 24px; }
  .soa-body p { font-size: 17px; }
  .soa-q { padding-left: 20px; }
  .soa-terms, .soa-cols { grid-template-columns: minmax(0, 1fr); }
  .soa .how-in { padding: 80px 0 30px; }
  .soa .close { padding: 120px 0 64px; }
  .rel-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}