/* Technical guides use the existing page frame, type and colour tokens. */
.technical-prose { display: flex; flex-direction: column; gap: 24px; }
.technical-prose > p, .technical-prose > ul { max-width: 74ch; }
.technical-prose p, .technical-prose li, .technical-prose dd { font-size: 16px; line-height: 1.75; color: var(--text-subtle); }
.technical-prose a { color: var(--primary-dark); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.technical-prose a:hover { text-decoration-thickness: 2px; }
.technical-prose > ul { padding-left: 24px; }
.technical-prose li + li { margin-top: 10px; }
.technical-prose .display { max-width: 22ch; text-wrap: balance; }
.technical-prose .lead { font-size: 18px; max-width: 72ch; }
.technical-toc { max-width: 74ch; border-top: 1px solid var(--rule); padding-top: 20px; }
.technical-toc ul { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 10px; padding-left: 20px; margin-top: 12px; }
.technical-toc li { font-size: 14px; margin: 0; }
.technical-table-scroll { max-width: 100%; overflow-x: auto; }
.technical-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; font-size: 16px; line-height: 1.6; }
.technical-table caption { text-align: left; font-weight: 600; padding-bottom: 14px; }
.technical-table th, .technical-table td { text-align: left; vertical-align: top; padding: 18px; overflow-wrap: anywhere; }
.technical-table thead th { background: var(--navy); color: #fff; }
.technical-table tbody th { width: 22%; font-weight: 600; }
.technical-table tbody tr + tr > * { border-top: 1px solid var(--rule); }
.technical-table tbody tr:nth-child(even) { background: var(--bg-alt); }
.capability-directory { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; }
.capability-directory > div { border-top: 3px solid var(--primary-strong); padding-top: 22px; }
.capability-directory dt { font-family: 'Public Sans', sans-serif; font-size: 22px; font-weight: 800; line-height: 1.3; margin-bottom: 14px; }
.technical-prose[id], section[id] { scroll-margin-top: 88px; }
@media (max-width: 720px) {
  .capability-directory { grid-template-columns: 1fr; gap: 32px; }
  .technical-table th, .technical-table td { padding: 12px; font-size: 14px; }
  .technical-prose .display { font-size: clamp(38px, 8vw, 60px); }
}