/* R16: public-page spacing review. Historical directions retain their CSS.
   The existing SVG is the authentic pre-redesign production logo. Its masked
   light layer takes currentColor, matching the wordmark on either hero theme. */
.direction-finish .header-wordmark{display:inline-flex;align-items:center;gap:10px;min-height:44px;flex:0 0 auto}
.direction-finish .header-wordmark .brand-mark{display:block;flex:none;width:34px;height:34px}
.direction-finish .header-wordmark .brand-mark-dark{display:none}

/* A section heading inside this grid must not also add the generic heading
   margin. The grid owns the separation from the first step. */
.direction-finish .approach-section .section-heading{margin:0;align-self:start}

/* When two narrow columns make the process taller than its introduction,
   put the introduction above four ordered steps. Keep the desktop spread. */
@media(min-width:701px) and (max-width:1100px){
 .direction-finish .approach-section>.page-width{grid-template-columns:1fr;gap:36px}
 .direction-finish .approach-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
 .direction-finish .approach-steps li{grid-template-columns:1fr;align-content:start;gap:10px;padding-block:24px}
 .direction-finish .approach-steps li:first-child{border-top:1px solid var(--line)}
 .direction-finish .approach-steps .step-number{grid-row:auto;margin:0}
 .direction-finish .approach-steps p{grid-column:auto}
}
@media(max-width:700px){
 .direction-finish .header-wordmark{gap:9px}
 .direction-finish .header-wordmark .brand-mark{width:30px;height:30px}
}
@media(max-width:380px){
 .direction-finish .site-header.page-width{gap:12px}
 .direction-finish .header-wordmark{font-size:22px;gap:7px}
 .direction-finish .header-actions{gap:10px}
}