/* Three routes in, each in its own colour (網站 purple, WhatsApp green, 電話 amber). Every route
   starts with an AI and runs to the same end; a faint light runs along each line, one after another.
   Loaded by _v2/routes.html.j2 only, so v2.css stays under its 70 KB budget (test_repair_performance). */
.routes { margin-top: 26px; display: grid; gap: 14px; }
.rt { --c: #a585ff; --g: 165, 133, 255; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 18px; border-radius: 22px;
  border: 1px solid rgba(var(--g), 0.26); background: linear-gradient(160deg, rgba(var(--g), 0.09), var(--glass) 55%); }
.rt-web { border-color: rgba(var(--g), 0.5); box-shadow: 0 24px 60px -36px rgba(var(--g), 0.7); }
.rt-wa { --c: #25d366; --g: 37, 211, 102; }
.rt-tel { --c: #ffb84d; --g: 255, 184, 77; }
.rt-hd { display: flex; align-items: center; gap: 10px; }
.rt-hd svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rt h3 { font-size: 22px; line-height: 1.2; font-weight: 900; color: var(--c); }
.rt-tag { margin-left: auto; padding: 2px 11px; border-radius: 99px; font-size: 13px; font-weight: 900; color: #140b2c; background: var(--c); }
.rt-lead { font-size: 17px; font-weight: 700; text-wrap: balance; }
.rt p:not(.rt-lead) { font-size: 15.5px; color: var(--ink-2); }
.rt-line { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.rt-line::before { content: ""; position: absolute; left: 16.67%; right: 16.67%; top: 15px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent) -40% 0 / 28% 100% no-repeat, linear-gradient(90deg, rgba(var(--g), 0.75), rgba(var(--g), 0.35));
  animation: rt-run 6s linear infinite; }
.rt-wa .rt-line::before { animation-delay: 2s; }
.rt-tel .rt-line::before { animation-delay: 4s; }
@keyframes rt-run { 0% { background-position: -40% 0, 0 0; } 45%, 100% { background-position: 140% 0, 0 0; } }
.rt-line li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.rt-line i { width: 32px; height: 32px; margin-bottom: 7px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--mono); font-style: normal; letter-spacing: 0.04em;
  color: var(--c); border: 1.5px solid rgba(var(--g), 0.8); background: linear-gradient(rgba(var(--g), 0.16), rgba(var(--g), 0.16)), var(--bg-2); }
.rt-line .rt-end { grid-column: 3; }
.rt-line .rt-end i { width: 14px; height: 14px; margin: 9px 0 16px; border: 0; background: var(--c); box-shadow: 0 0 0 4px rgba(var(--g), 0.16); }
.rt-line b { font-size: 15px; line-height: 1.3; font-weight: 800; }
.rt-line small { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.rt-go { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 10px 20px; border-radius: 99px;
  border: 1.5px solid rgba(var(--g), 0.7); background: rgba(var(--g), 0.12); font-size: 17px; font-weight: 800; text-decoration: none; transition: background 0.2s; }
.rt-go:hover { background: rgba(var(--g), 0.24); }
.rt-go svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }
@media (min-width: 900px) {
  .routes { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}