/* /clients/fees: 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, the Item 5A table, reading blocks on the rail,
   related links. */
/* no-JS only: the hero segment leaves this H1's full stop, which sits 6.424em 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 - 6.424em); }

/* 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; }

/* the Item 5A schedule: a plain two-column table inside stage 1, figures right-aligned in tabular numerals */
.ft { width: 100%; max-width: 25em; border-collapse: collapse; margin: 22px 0 0; font-size: 17px; line-height: 1.4; }
.ft th, .ft td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ft th + th, .ft td + td { text-align: right; padding-left: 20px; }
.ft thead th { font: 500 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-top: 0; }
.ft td { color: var(--ink); font-variant-numeric: tabular-nums; }
.txt .ft-src { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.steps li { font-size: clamp(26px, 2.4vw, 34px); }

/* when each fee is paid: a ruled list of fee type and timing */
.paid { margin: 6px 0 0; border-top: 1px solid var(--line); }
.paid > div { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 4px 28px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.paid dt { font-weight: 500; color: var(--ink); font-size: 16.5px; line-height: 1.5; }
.paid dd { margin: 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; }

@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; }
  .ft { font-size: 16px; }
  .paid > div { grid-template-columns: minmax(0, 1fr); }
  .steps li { font-size: 24px; }
}