/* Homepage route graphics. Static artwork is the default; JS enables motion. */
.hero-grid > * { min-width: 0; }
.plan-preview.motion-preview {
  padding: 0; overflow: hidden; transform: none; max-width: none;
  background: #f0f4ed; border: 1px solid #ccd9ce; border-radius: 18px;
  box-shadow: 0 22px 65px -38px #14382f66;
}
.motion-stage {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 27px 28px 20px; color: #f7faf1;
  background: radial-gradient(ellipse at 65% 45%, #315c49 0, #1c4036 50%, #15352e 100%);
}
.motion-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.motion-kicker { font-size: 12px; line-height: 1.5; letter-spacing: .11em; font-weight: 600; color: #c7d8ca; }
.motion-control {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-height: 44px; padding: 6px 11px; border: 1px solid #a9c1ad66; border-radius: 22px;
  font-family: inherit; font-weight: 500; font-size: 12px; line-height: 1.4;
  background: #ffffff09; color: #e8f2e7; cursor: pointer;
}
.motion-control[hidden] { display: none; }
.motion-control:hover { background: #ffffff18; }
.motion-control:focus-visible { outline: 3px solid #d4e9b7; outline-offset: 4px; }
.motion-control:disabled { cursor: default; opacity: .8; }
.motion-stage h2 { color: #f5f8ef; margin: 24px 0 0; font-size: clamp(27px, 2.6vw, 34px); line-height: 1.13; letter-spacing: -1.1px; }
.motion-stage h2 em { font-family: Georgia, serif; font-weight: 400; color: #d5e7bb; }
.motion-map { display: block; width: calc(100% + 32px); max-width: none; height: auto; margin: 8px -16px 0; overflow: visible; }
.motion-map .atlas-grid { fill: none; stroke: #c3dbc5; stroke-opacity: .08; stroke-width: .6; }
.motion-map .route-base { fill: none; stroke: #cde2b6; stroke-opacity: .28; stroke-width: 1.5; }
.motion-map .route-trace { fill: none; stroke: #deedbd; stroke-width: 2.1; stroke-linecap: round; stroke-dasharray: .09 .91; stroke-dashoffset: .09; opacity: 0; }
.motion-map .route-dot { fill: #e8f2ce; stroke: #173a32; stroke-width: 3; }
.motion-map .route-ring { fill: none; stroke: #c7e4a8; stroke-width: 1.2; opacity: .55; transform-box: fill-box; transform-origin: center; }
.motion-map .origin-dot { fill: #d8eab8; stroke: #15352e; stroke-width: 3; }
.motion-canada .motion-map .origin-dot { fill: #f4c7ba; }
.motion-map text { font: 500 14px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; fill: #eff5e6; paint-order: stroke; stroke: #204437; stroke-width: 5px; stroke-linejoin: round; }
.motion-map .map-label-small { font-size: 12px; fill: #bfd1c2; }
.motion-route-caption { display: flex; gap: 10px; justify-content: space-between; align-items: center; border-top: 1px solid #d4e4c328; padding-top: 14px; }
.motion-route-caption p { color: #cfdecc; font-size: 12px; line-height: 1.5; margin: 0; }
.motion-route-caption .motion-caption-detail { color: #adc5b6; text-align: right; }
.motion-outline { padding: 23px 26px 25px; }
.motion-outline .preview-top { font-size: 12px; line-height: 1.4; letter-spacing: .06em; margin-bottom: 14px; }
.motion-outline .sample-label { font-size: 12px; }
.motion-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.motion-outline .preview-row { padding: 16px 0 13px; gap: 10px; align-items: baseline; }
.motion-outline .preview-row .number { font-size: 12px; flex: 0 0 18px; }
.motion-outline .preview-row h3 { font-size: 14px; line-height: 1.4; letter-spacing: -.15px; }
.motion-outline .preview-row p { font-size: 12px; line-height: 1.55; margin-top: 6px; }
.motion-outline .preview-note { border-top: 1px solid #cfdcc8; padding-top: 16px; margin-top: 4px; font-size: 16px; }
.motion-preview.motion-ready .route-trace { animation: route-travel 8s linear infinite; }
.motion-preview.motion-ready .route-2 { animation-delay: -2.7s; }
.motion-preview.motion-ready .route-3 { animation-delay: -5.4s; }
.motion-preview.motion-ready .route-ring { animation: route-breathe 4s ease-out infinite; }
.motion-preview.motion-ready .ring-2 { animation-delay: -1.4s; }
.motion-preview.motion-ready .ring-3 { animation-delay: -2.8s; }
.motion-preview.motion-paused .route-trace,
.motion-preview.motion-paused .route-ring { animation-play-state: paused; }
@keyframes route-travel { 0% { stroke-dashoffset: .09; opacity: 0; } 8% { opacity: 1; } 60% { stroke-dashoffset: -1; opacity: .9; } 70%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes route-breathe { 0%, 100% { transform: scale(1); opacity: .55; } 75% { transform: scale(1.8); opacity: 0; } 76% { transform: scale(1); opacity: 0; } }
@media (min-width: 1100px) { .hero-grid { gap: 54px; grid-template-columns: 1.13fr 1fr; } }
@media (min-width: 701px) and (max-width: 1000px) {
  .motion-stage { padding: 22px 20px 17px; }
  .motion-toolbar { flex-wrap: wrap; gap: 8px; }
  .motion-outline { padding: 20px; }
  .motion-steps { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .motion-preview { width: 100%; }
  .motion-stage { padding: 24px 20px 19px; }
  .motion-stage h2 { font-size: 31px; }
  .motion-outline { padding: 21px 20px 24px; }
  .motion-kicker { font-size: 11px; }
  .motion-steps { gap: 0 16px; }
  .motion-outline .preview-row { display: block; }
  .motion-outline .preview-row .number { margin-bottom: 5px; }
  .motion-map text { font-size: 18px; }
  .motion-map .map-label-small { font-size: 16px; }
}
@media (max-width: 360px) { .motion-toolbar { flex-wrap: wrap; } .motion-steps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .motion-preview .route-trace { animation: none !important; opacity: 0; }
  .motion-preview .route-ring { animation: none !important; transform: none; }
}
@media print { .motion-control { display: none; } .motion-preview * { animation: none !important; } }