.ss-detail {
  --ss-ink: #19313b;
  --ss-copy: #4b6068;
  --ss-line: #ccd3d4;
  color: var(--ss-ink);
  background: #fff;
}
.ss-detail * { box-sizing: border-box; }
.ss-shell { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.ss-section { padding: 100px 0; scroll-margin-top: 100px; }
.ss-warm { background: #f5f5f1; }
.ss-blue { background: #e9eef0; }
.ss-detail h1, .ss-detail h2, .ss-detail h3 {
  margin: 0; text-transform: none;
}
.ss-detail h1 { }
.ss-detail h2 { }
.ss-detail h3 { }
.ss-eyebrow { margin: 0 0 24px; }
.ss-copy { color: var(--ss-copy); }
.ss-copy p { margin: 0 0 20px; }
.ss-copy p:last-child { margin-bottom: 0; }
.ss-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.ss-split > *, .ss-hero-grid > *, .ss-route > * { min-width: 0; }
.ss-link {
  display: inline-block; margin-top: 28px; padding: 9px 0; border-bottom: 1px solid currentColor;
  color: inherit; text-decoration: none;
}
.ss-link:hover { color: #607780; }
.ss-link:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.ss-hero { padding: 108px 0 112px; }
.ss-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 80px; }
.ss-hero-grid .ss-copy { margin-top: 30px; }
.ss-hero-type {
  display: flex; flex-direction: column; gap: 4px; padding-left: 56px;
  border-left: 1px solid var(--ss-line);
}
.ss-routes { margin-top: 54px; }
.ss-route {
  display: grid; grid-template-columns: 48px 1fr 1.5fr 1fr; align-items: start; gap: 34px;
  border-top: 1px solid var(--ss-line); padding: 32px 0;
}
.ss-route:last-child { border-bottom: 1px solid var(--ss-line); }
.ss-number { display: block; color: var(--ss-copy); }
.ss-route .ss-number { padding-top: 6px; }
.ss-route p { margin: 0; color: var(--ss-copy); }
.ss-route .ss-link { margin-top: 0; padding-top: 2px; justify-self: end; }
.ss-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px; list-style: none; padding: 0; margin: 52px 0 0; }
.ss-path li { border-top: 1px solid var(--ss-line); padding-top: 24px; }
.ss-path .ss-number { margin-bottom: 26px; }
.ss-path h3 { }
.ss-path p { color: var(--ss-copy); margin: 16px 0 0; }
.ss-plan { margin: 0; padding: 32px; background: #fff; }
.ss-detail img { display: block; width: 100%; height: auto; }
.ss-inputs { list-style: none; padding: 0; margin: 26px 0; }
.ss-inputs li { border-top: 1px solid var(--ss-line); padding: 13px 0 13px 20px; position: relative; }
.ss-inputs li:last-child { border-bottom: 1px solid var(--ss-line); }
.ss-inputs li::before { content: ''; width: 4px; height: 4px; background: var(--ss-copy); position: absolute; top: 26px; left: 0; }
.ss-dispersion { display: grid; grid-template-columns: 114fr 102fr 104fr; align-items: center; gap: 24px; padding: 36px; margin-top: 52px; background: #fff; }
.ss-dispersion figure { margin: 0; min-width: 0; }
.ss-workflow p { color: var(--ss-ink); margin: 0; }
.ss-note { border-top: 1px solid var(--ss-line); margin-top: 44px; padding-top: 25px; max-width: 800px; }
.ss-note .ss-copy { }
@media (max-width: 1100px) {
  .ss-shell { width: calc(100% - 72px); }
  .ss-split, .ss-hero-grid { gap: 44px; }
  .ss-detail h1 { }
  .ss-detail h2 { }
  .ss-hero-type { padding-left: 36px; }
  .ss-route { grid-template-columns: 30px 1fr 1.3fr 1fr; gap: 22px; }
  .ss-route h3 { }
  .ss-path { gap: 24px; }
  .ss-path h3 { }
  .ss-workflow p { }
  .ss-plan { padding: 20px; }
}
@media (max-width: 800px) {
  .ss-section { padding: 78px 0; }
  .ss-hero { padding: 76px 0; }
  .ss-split, .ss-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .ss-hero-type { padding-left: 30px; margin-top: 10px; }
  .ss-plan { max-width: 560px; padding: 28px; }
  .ss-route { grid-template-columns: 30px 1fr 1.4fr; gap: 20px; }
  .ss-route .ss-link { grid-column: 3; justify-self: start; }
  .ss-path { grid-template-columns: 1fr; gap: 0; }
  .ss-path li { display: grid; grid-template-columns: 36px 150px 1fr; gap: 22px; padding: 24px 0; align-items: start; }
  .ss-path .ss-number { margin: 0; }
  .ss-path h3 { }
  .ss-path p { margin: 0; }
  .ss-workflow li { grid-template-columns: 36px 1fr; }
  .ss-dispersion { padding: 24px; gap: 16px; }
}
@media (max-width: 560px) {
  .ss-shell { width: calc(100% - 48px); }
  .ss-section { padding: 64px 0; }
  .ss-hero { padding: 56px 0 64px; }
  .ss-detail h1 { }
  .ss-detail h2 { }
  .ss-detail h1 br, .ss-detail h2 br { display: none; }
  .ss-detail h1, .ss-detail h2 { text-wrap: pretty; }
  .ss-eyebrow { margin-bottom: 22px; }
  .ss-copy { }
  .ss-hero-grid .ss-copy { margin-top: 25px; }
  .ss-hero-type { padding-left: 24px; }
  .ss-routes { margin-top: 38px; }
  .ss-route { grid-template-columns: 28px 1fr; gap: 14px; padding: 28px 0; }
  .ss-route p, .ss-route .ss-link { grid-column: 2; }
  .ss-route .ss-link { margin-top: 2px; }
  .ss-path { margin-top: 38px; }
  .ss-path li { grid-template-columns: 28px 1fr; gap: 12px 18px; }
  .ss-path p { grid-column: 2; }
  .ss-path .ss-number { padding-top: 2px; }
  .ss-workflow p { }
  .ss-plan { padding: 16px; }
  .ss-dispersion { grid-template-columns: 1fr; padding: 20px; gap: 30px; margin-top: 36px; }
  .ss-dispersion figure + figure { border-top: 1px solid var(--ss-line); padding-top: 30px; }
}