/* Page-only overrides; tokens from xo.css only. */
.xo-band .xo-btn-primary { box-shadow: var(--shadow-hard); }
.xo-how-hero { padding-bottom: var(--space-12); }
.xo-how-title { max-width: 60rem; }
.xo-how-steps { padding: 0 0 var(--space-24); }
.xo-how-split { align-items: center; }
.xo-progress-fill-60 { width: 60%; }
.xo-how-rules { gap: var(--space-8) var(--space-12); }
.xo-how-close-title { max-width: 48.75rem; }

/* Example portal card: the card clips its own corners, so the grey foot strip follows the radius. */
.xo-statuscard { overflow: hidden; border-radius: var(--radius-lg); }
.xo-statuscard-foot { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.xo-statuscard-title { flex-wrap: wrap; row-gap: var(--space-1); }

/* Phone: the owner pill sits beside the step title and the two meta lines pack tight. The first column's wrapper
   dissolves so the title, text and owner column place on one grid. */
@media (max-width: 960px) {
  .xo-tl { grid-template-columns: 56px auto minmax(0, 1fr); column-gap: var(--space-4); row-gap: 0; padding: var(--space-6) 0; }
  .xo-tl::before { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  .xo-tl > div:first-of-type { display: contents; }
  .xo-tl > div:first-of-type h2 { grid-column: 2 / -1; grid-row: 1; }
  .xo-tl > div:first-of-type p { grid-column: 2 / -1; grid-row: 2; margin-top: var(--space-1); }
  .xo-tl-who { display: contents; }
  .xo-tl-who .xo-who { grid-column: 2; grid-row: 3; align-self: center; margin-top: var(--space-2); }
  .xo-tl-who b { grid-column: 3; grid-row: 3; align-self: center; margin-top: var(--space-2); font-size: 14px; line-height: 20px; }
  .xo-tl-who span:not(.xo-who) { grid-column: 2 / -1; grid-row: 4; font-size: 14px; line-height: 20px; }
}
.xo-statuscard { border-color: var(--line-control); }