/* Molecule drawings and route diagrams. */
.molbox { display: block; margin: 8px 0 2px; color: var(--text); }
.molbox svg.mol { width: 100%; max-width: 260px; height: auto; display: block; }
.molbox.big svg.mol { max-width: 100%; }
.converge-mol svg.mol { width: 100%; max-width: 280px; height: auto; margin: 0 auto; display: block; color: var(--text); }

.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 680px) { .routes { grid-template-columns: 1fr; } }
.route { background: var(--bg); border: 1px solid var(--line-soft); border-radius: 14px; padding: 18px 18px 14px; }
section:not(.alt) .route { background: var(--card); }
.route-h { font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 12px; }
.route-art { margin: 0 auto 14px; max-width: 150px; color: var(--text-2); }
.route-art svg { width: 100%; height: auto; }
.route-steps { list-style: none; counter-reset: rs; padding: 0; margin: 0; }
.route-steps li { counter-increment: rs; position: relative; padding: 0 0 14px 30px; font-size: 15px; }
.route-steps li::before {
  content: counter(rs); position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--bg-alt); color: var(--text-2);
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
section:not(.alt) .route-steps li::before { background: var(--bg); }
.route-steps li b { display: block; font-weight: 600; }
.route-steps li > span { display: block; font-size: 13.5px; color: var(--text-2); line-height: 1.4; }
.route-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 9.5px; top: 25px; bottom: 4px; width: 1px; background: var(--line);
}

.converge {
  display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: center;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line);
}
@media (max-width: 680px) { .converge { grid-template-columns: 1fr; } }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--s2); margin-right: 6px; vertical-align: baseline; }

.three { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
@media (max-width: 820px) { .three { grid-template-columns: 1fr; } }
.three-c { min-width: 0; }
.three-c > svg, .three-c .molbox { margin-bottom: 12px; }
.three-c .small { margin-bottom: 0; }