/* Features page: a side rail beside seven sections. */
.fx-head { padding: 64px 0 0; }
.fx-layout { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0 40px; align-items: start; }
.fx-rail { position: sticky; top: 16px; padding-top: 56px; }
.fx-rail ol { list-style: none; margin: 0; padding: 0; counter-reset: fx; border-top: 1px solid var(--line); }
.fx-rail li { counter-increment: fx; border-bottom: 1px solid var(--rule); }
.fx-rail a { display: flex; gap: 10px; align-items: baseline; padding: 9px 4px; color: var(--ink); text-decoration: none; font-size: 1.02rem; line-height: 1.3; }
.fx-rail a::before { content: counter(fx); min-width: 1ch; color: var(--trans); font-style: italic; }
.fx-rail a:hover { color: var(--link); }
.fx-rail a[aria-current="true"] { background: var(--mark); color: var(--mark-ink); }
.fx-rail a[aria-current="true"]::before { color: inherit; }
@media (forced-colors: active) { .fx-rail a[aria-current="true"] { background: Mark; color: MarkText; } }
.fx-body > section { padding: 56px 0 8px; scroll-margin-top: 16px; }
.fx-body > section:last-child { padding-bottom: 64px; }

@media (max-width: 900px) {
  .fx-layout { grid-template-columns: minmax(0, 1fr); }
  .fx-rail { position: static; margin: 24px 0 0; padding: 0; border-bottom: 1px solid var(--line); background: none; }
  .fx-rail ol { display: flex; flex-wrap: wrap; gap: 4px 8px; border: 0; white-space: normal; }
  .fx-rail li { flex: 1 1 calc(50% - 4px); border: 0; }
  .fx-rail a { align-items: center; min-height: 44px; height: 100%; padding: 6px 8px; font-size: 1rem; }
  .fx-body > section { scroll-margin-top: 56px; }
}
@media (max-width: 640px) {
  .fx-head { padding-top: 44px; }
  .fx-rail { margin-top: 20px; }
}