/* Arc76 — Your 60 Days (#s5). Pairs with route.js.
 * On the scene's 1440x900 canvas. Route draw: stroke-dashoffset.
 * Everything else animated: transform and opacity only.
 */
#s5 .rt-host > :not(.rt) { display: none !important; }

.rt { --draw: 1.8s; position: absolute; left: 0; top: 0; width: 1440px; height: 900px; z-index: 3;
  font-family: 'JetBrains Mono', ui-monospace, monospace; color: #e7ecfb; }
.rt-map { position: absolute; left: 0; top: 0; display: block; }
.rt-lbl { font: 600 10.5px 'JetBrains Mono', monospace; letter-spacing: .24em; fill: #cfe0ff; }
.rt-lbl.warm { fill: #ffd9a8; }

/* ---- route draw ---- */
.rt-line, .rt-glow { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.rt.drawn .rt-line, .rt.drawn .rt-glow { stroke-dashoffset: 0; transition: stroke-dashoffset var(--draw) cubic-bezier(.45,.05,.35,1); }
.rt-lamp { opacity: 0; }
.rt-dot { transition: fill .3s ease; }
.rt.drawn .rt-lamp { opacity: 1; transition: opacity .5s ease calc(var(--f) * var(--draw)); }
.rt.drawn .rt-wp .rt-dot { fill: #eaf2ff; transition: fill .3s ease calc(var(--f) * var(--draw)); }
.rt-camplight { opacity: .35; transition: opacity .6s ease; }
.rt.drawn .rt-camplight { opacity: 1; transition: opacity .8s ease calc(var(--draw) * .85); }
.rt[data-n="0"] .rt-line, .rt[data-n="0"] .rt-glow, .rt[data-n="0"] .rt-lamp { opacity: 0; }
.rt[data-n="0"] .rt-camplight { opacity: .25; }

/* ---- copy + planner ---- */
.rt-copy { position: absolute; left: 72px; top: 150px; width: 420px; }
.rt-h { margin: 0; font: 700 44px/1.05 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.015em; color: #f4f7ff; }
.rt-p { margin: 16px 0 0; max-width: 400px; font-size: 13.5px; line-height: 1.75; color: #c5d0e6; }
.rt-pick { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rt-tk { position: relative; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 12px 0 10px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid rgba(159,190,240,.22); background: rgba(10,18,36,.72); color: #c8d3ea; font: 500 13.5px 'JetBrains Mono', monospace;
  transition: transform .15s ease, border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .25s ease; }
.rt-tk:hover { transform: translateY(-1px); border-color: rgba(159,190,240,.5); }
.rt-tk:active { transform: translateY(0) scale(.98); }
.rt-tk:focus-visible { outline: 2px solid #9cc3ff; outline-offset: 3px; }
.rt-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(159,190,240,.08); color: #8fa8d6;
  transition: background-color .2s ease, color .2s ease; }
.rt-nm { flex: 1; white-space: nowrap; }
.rt-ck { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(159,190,240,.35); color: transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.rt-tk.on { border-color: #7fb2ff; background: linear-gradient(180deg, rgba(63,123,255,.26), rgba(31,94,255,.12)); color: #fff;
  box-shadow: 0 0 0 1px rgba(127,178,255,.25), 0 10px 28px -12px rgba(63,123,255,.8); }
.rt-tk.on .rt-ic { background: rgba(127,178,255,.22); color: #eaf2ff; }
.rt-tk.on .rt-ck { background: #eaf2ff; border-color: #eaf2ff; color: #0b1630; }
.rt-tk.pop .rt-ck { animation: rtPop .35s cubic-bezier(.2,1.8,.4,1); }
.rt-tk.pop { animation: rtPress .3s ease; }
.rt-own { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 12px; border-radius: 14px; border: 1px dashed rgba(159,190,240,.3);
  font-size: 12px; color: #9fb0cf; }
.rt-own span { font-size: 16px; color: #7fb2ff; }
.rt-count { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.rt-count b { font-size: 11.5px; font-weight: 600; letter-spacing: .22em; color: #cfe0ff; }
.rt-count::before { content: ""; width: 22px; height: 1px; background: rgba(207,224,255,.4); }

/* ---- milestones: every card sits left of its waypoint, joined by a short leader ---- */
.rt-ms { position: absolute; width: 290px; height: 60px; box-sizing: border-box; padding: 9px 14px; border-radius: 12px;
  background: rgba(8,14,30,.9); border: 1px solid rgba(159,190,240,.16);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: baseline;
  opacity: .45; transform: translateX(6px); }
.rt.drawn .rt-ms { opacity: 1; transform: none; transition: opacity .45s ease calc(var(--f) * var(--draw)), transform .45s ease calc(var(--f) * var(--draw)); }
.rt-d { font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #ffc98a; }
.rt-l { grid-column: 1; font: 600 14px/1.25 'Space Grotesk', system-ui, sans-serif; color: #f1f5fd; white-space: nowrap; }
.rt-n { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: 10.5px; line-height: 1.3; color: #9fb0cf; }
.rt-n b { display: block; font: 700 18px 'Space Grotesk', sans-serif; color: #eaf2ff; font-variant-numeric: tabular-nums; }
.rt-n span { white-space: nowrap; }

/* ---- the payoff, at base camp ---- */
.rt-final { position: absolute; width: 330px; box-sizing: border-box; padding: 18px 20px 18px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(40,28,24,.92), rgba(10,14,28,.95) 55%); border: 1px solid rgba(255,201,138,.4);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.9), 0 0 60px -18px rgba(255,170,90,.45); }
.rt-k { font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #ffc98a; }
.rt-big { margin-top: 6px; font: 700 52px/1 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.rt-big small { font-size: 20px; letter-spacing: 0; color: #ffd9a8; font-weight: 600; }
.rt-total { display: inline-block; }
.rt.drawn .rt-total { animation: rtLand .6s cubic-bezier(.2,1.5,.4,1) calc(var(--draw) * .9) both; }
.rt-sub { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: #d3dcee; }
.rt-cta { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 16px; border-radius: 23px;
  background: linear-gradient(180deg, #2f68f0, #1846c4); border: 1px solid rgba(255,255,255,.22); color: #fff !important; text-decoration: none;
  font: 600 13px 'JetBrains Mono', monospace; letter-spacing: .03em; white-space: nowrap; box-shadow: 0 16px 34px -12px rgba(31,94,255,.75);
  transition: transform .2s ease, box-shadow .2s ease; }
.rt-cta:hover { transform: translateY(-2px); }
.rt-cta:focus-visible { outline: 2px solid #9cc3ff; outline-offset: 3px; }
.rt[data-n="0"] .rt-final { border-color: rgba(159,190,240,.25); background: rgba(10,14,28,.92); box-shadow: 0 30px 60px -24px rgba(0,0,0,.9); }
.rt[data-n="0"] .rt-big { color: #7f8fb0; }

@keyframes rtPop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
@keyframes rtPress { 0% { transform: scale(.97); } 100% { transform: scale(1); } }
@keyframes rtLand { 0% { transform: translateY(10px) scale(.9); opacity: .2; } 100% { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rt-line, .rt-glow { stroke-dashoffset: 0 !important; transition: none !important; }
  .rt-ms, .rt.drawn .rt-ms { opacity: 1; transform: none; transition: none; }
  .rt-lamp, .rt.drawn .rt-lamp { opacity: 1; transition: none; }
  .rt.drawn .rt-total, .rt-tk.pop, .rt-tk.pop .rt-ck { animation: none; }
  .rt-tk:hover, .rt-cta:hover { transform: none; }
}

.rt-cta span, .rt-cta svg { color: #fff !important; }
.rt-final { display: none !important; }

/* bottom-up climb: the "you are here" pin at base camp */
.rt-lbl.dim { fill: #b8c6e2; font-size: 9.5px; }
.rt-ping { transform-box: fill-box; transform-origin: 50% 50%; animation: rtPing 1.8s ease-out infinite; }
@keyframes rtPing { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rt-ping { animation: none; opacity: .6; } }