/* Use in CI page. */
.page-title { font: 600 clamp(2.25rem, 6.4vw, 5.5rem)/1 var(--font-display); font-stretch: 112%; letter-spacing: -0.04em; max-width: 16ch; }
.page > .section:first-child { gap: var(--space-5); }
.ship-step { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-4) var(--space-8); align-items: start; }
.ship-step > .section-title, .ship-step > .lede { grid-column: 1; }
.ship-step > .ship-code { grid-column: 2; grid-row: 1 / span 3; }
.ship-step > .hint { grid-column: 1 / -1; }
.ship-step .lede { font-size: 1.0625rem; }
.ship-code { min-width: 0; }
.ship-code pre { white-space: pre-wrap; overflow-wrap: break-word; margin: 0; padding: var(--space-4); }
.ship-code .pane pre { max-height: none; font-size: 0.8125rem; }
.compare-lead { font: 600 clamp(1.5rem, 4vw, 2rem)/1.1 var(--font-display); font-stretch: 112%; color: var(--ink); letter-spacing: -0.02em; }
.compare-lead .num { color: var(--accent); font: inherit; font-variant-numeric: tabular-nums; }
.compare-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.compare-table td.ours { color: var(--ink); background: var(--surface); }
.compare-table thead a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.compare-table thead a:hover { text-decoration-color: var(--accent); }
.compare-table td, .compare-table tbody th { min-width: 9rem; font-size: 0.9375rem; }
@media (max-width: 64rem) {
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: 100%; min-width: 0; }
  .compare-table tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .compare-table tbody th { border: 0; padding: 0 0 var(--space-2); color: var(--ink); font-size: 1.0625rem; }
  .compare-table td { border: 0; padding: var(--space-1) 0; }
  .compare-table td::before { content: attr(data-label); display: block; color: var(--muted); font: 400 0.75rem/1.4 var(--font-mono); }
  .compare-table td.ours { padding: var(--space-2) var(--space-3); border-radius: var(--radius); }
}
.ship-limits { display: grid; gap: var(--space-3); max-width: var(--measure); }
.ship-limits li { padding: var(--space-1) 0 var(--space-1) var(--space-4); border-left: 2px solid var(--line); color: var(--body); }
@media (max-width: 64rem) {
  .ship-step { grid-template-columns: minmax(0, 1fr); }
  .ship-step > .ship-code { grid-column: 1; grid-row: auto; }
}