/* /clients/how-we-work: a thin page layer over the Light family (/clients/financial-planning/assets/fp.css and
   fp-nojs.css, linked unchanged). Only what this page adds: longer stages, reading blocks on the rail, related links. */
/* no-JS only: the hero segment leaves this H1's full stop, which sits 4.611em into the wrap (measured; the template's
   "be." sits at 6.494em), so it still turns down at 91% of the wrap like the template's */
html:not(.js) .lp-dot .seg-hero { width: calc(min(1240px, 100vw - 48px) * .91 - 4.611em); }

/* stages: more than one paragraph each, with room above and below so the light passes between blocks, never
   through a word (fp.js routes it 46px clear of each text box; the no-JS segments cross at each stage edge) */
@media (min-width: 761px) { .stage-in { padding-block: 104px; } }
.txt p + p, .txt p + table, .txt table + p { margin-top: 16px; }
.txt a, .hx a { color: var(--ink); text-decoration-color: rgba(29, 33, 38, .45); text-underline-offset: 3px; }
.txt a:hover, .hx a:hover { text-decoration-color: currentColor; }

/* reading blocks: a rail section of their own (.how.notes) placed before the steps, always in the rail's text
   column; their headings are h2 (each block is a section of the page), set smaller than the family's .how h2 */
.hx { grid-column: 2; margin: 64px 0 0 3%; max-width: 40em; }
.notes .hx:first-of-type { margin-top: 0; }
.notes .hx h2 { grid-column: auto; font: 400 clamp(32px, 3vw, 46px)/1.08 var(--serif); letter-spacing: -.012em; color: var(--ink); margin: 0 0 18px; padding: 0; }
.hx p { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0 0 14px; }
.hx ul { margin: 4px 0 14px; padding: 0 0 0 1.15em; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.hx li + li { margin-top: 9px; }

/* related links: the end of the page, siblings in the clients area */
.related { position: relative; z-index: 1; padding: 0 0 36px; text-align: center; }
.rel-h { font: 500 12.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.rel-list { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 30px; max-width: 58em; }
.rel-list a { display: inline-flex; align-items: center; min-height: 44px; font: 400 22px/1.2 var(--serif); color: var(--ink); text-decoration: underline; text-decoration-color: rgba(29, 33, 38, .3); text-underline-offset: 5px; }
.rel-list a:hover { text-decoration-color: currentColor; }

@media (max-width: 760px) {
  .hx { grid-column: 1; margin: 48px 0 0; max-width: none; }
  .notes .hx h2 { font-size: 32px; }
  .hx p, .hx ul { font-size: 16.5px; }
  .related { text-align: left; }
  .rel-list { justify-content: flex-start; flex-direction: column; gap: 0; }
}