/* Load after the site stylesheet. */
.routes-toggle {
  --routes-green:#256044; --routes-ink:#202b27; --routes-paper:#f6f5ef;
  --routes-tint:#e9eee4; --routes-muted:#526258; --routes-line:#cbd4c8;
  box-sizing:border-box; background:var(--routes-tint); color:var(--routes-ink);
  font-family:Arial,Helvetica,sans-serif; line-height:1.5;
  padding:62px 56px 28px; border:1px solid var(--routes-line); border-radius:4px;
  scroll-margin-top:24px;
}
.routes-toggle *, .routes-toggle *::before, .routes-toggle *::after { box-sizing:border-box; }
.routes-toggle [hidden] { display:none!important; }
.routes-toggle .section-heading { display:block; margin:0 0 44px; }
.routes-toggle .eyebrow { font-size:11px; line-height:1.5; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin:0 0 15px; color:var(--routes-green); }
.routes-toggle h2 { font-size:clamp(32px,3.7vw,49px); font-weight:700; letter-spacing:-2px; line-height:1.06; margin:0; max-width:800px; text-wrap:initial; }
.routes-toggle .switch { display:inline-flex; background:var(--routes-paper); padding:5px; border:1px solid var(--routes-line); border-radius:8px; gap:4px; margin-bottom:38px; }
.routes-toggle .switch button { appearance:none; border:0; background:transparent; border-radius:4px; padding:15px 22px; min-height:50px; cursor:pointer; font:700 14px/1.5 Arial,Helvetica,sans-serif; color:var(--routes-muted); display:flex; align-items:center; gap:30px; }
.routes-toggle .switch button:hover { background:var(--routes-tint); }
.routes-toggle .switch button[aria-pressed="true"] { background:var(--routes-green); color:var(--routes-paper); }
.routes-toggle .switch button[aria-pressed="true"]:hover { background:#1d4c36; }
.routes-toggle .switch button:focus-visible { outline:3px solid var(--routes-green); outline-offset:5px; }
.routes-toggle .switch button span { font-size:20px; }
.routes-toggle .toggle-panel { display:grid; grid-template-columns:1fr 1fr; gap:60px; min-height:275px; }
/* Without scripting, both panels are stacked and the inactive controls stay hidden. */
.routes-toggle .toggle-panel + .toggle-panel:not([hidden]) { margin-top:38px; padding-top:38px; border-top:1px solid var(--routes-line); }
.routes-toggle .toggle-panel[hidden] + .toggle-panel { margin-top:0; padding-top:0; border-top:0; }
.routes-toggle .route { min-width:0; display:flex; flex-direction:column; position:relative; }
.routes-toggle .route > .eyebrow { font-size:10px; margin-bottom:18px; }
.routes-toggle h3 { font-size:32px; line-height:1.1; font-weight:700; letter-spacing:-1.2px; margin:0 0 18px; text-wrap:initial; }
.routes-toggle .description { font-size:15px; line-height:1.75; color:var(--routes-muted); margin:0; max-width:440px; }
.routes-toggle .price { margin-top:auto; padding-top:30px; display:flex; flex-direction:column; gap:7px; }
.routes-toggle .price strong { font-size:26px; letter-spacing:-.8px; line-height:1.15; }
.routes-toggle .price > span { font-size:12px; color:var(--routes-muted); }
.routes-toggle .toggle-art { display:flex; flex-direction:column; justify-content:center; align-items:center; background:var(--routes-paper); border-radius:50%; aspect-ratio:1.5; align-self:center; }
.routes-toggle .toggle-art p { font-size:12px; color:var(--routes-muted); margin:0 0 30px; }
.routes-toggle .toggle-art svg { width:80%; height:170px; display:block; margin:16px 0; fill:none; stroke:var(--routes-green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.routes-toggle .box-check { stroke-width:1.6; }
.routes-toggle .box-art, .routes-toggle .system-art { stroke-width:1.6; stroke-linecap:butt; stroke-linejoin:miter; }
.routes-toggle .blueprint-paper { fill:var(--routes-paper); stroke:none; }
.routes-toggle .blueprint-grid { stroke:var(--routes-tint); stroke-width:.7; }
.routes-toggle .blueprint-grid-field { stroke:none; }
.routes-toggle .blueprint-dimensions { stroke-width:.7; opacity:.65; }
.routes-toggle .blueprint-detail { stroke-width:.9; }
.routes-toggle .blueprint-guide { stroke-width:.7; stroke-dasharray:3 4; opacity:.2; }
/* The sealed package completes once; the living plan continues below. */
.routes-toggle .package-draw path { stroke-dasharray:1; stroke-dashoffset:0; animation:routes-package-draw 1.6s ease-out both; }
.routes-toggle .package-tape path { animation-delay:.6s; }
.routes-toggle .package-seal path { animation-delay:1.2s; }
.routes-toggle .package-dimensions path { animation-delay:1.7s; }
@keyframes routes-package-draw {
  from { stroke-dashoffset:1; }
  to { stroke-dashoffset:0; }
}
.routes-toggle .blueprint-extension path { stroke-dasharray:1; stroke-dashoffset:0; animation:routes-blueprint-one 12s linear infinite; }
.routes-toggle .blueprint-extension-two path { animation-name:routes-blueprint-two; }
.routes-toggle .blueprint-extension-three path { animation-name:routes-blueprint-three; }
@keyframes routes-blueprint-one {
  0%,5% { stroke-dashoffset:1; }
  18%,96% { stroke-dashoffset:0; }
  100% { stroke-dashoffset:1; }
}
@keyframes routes-blueprint-two {
  0%,30% { stroke-dashoffset:1; }
  43%,96% { stroke-dashoffset:0; }
  100% { stroke-dashoffset:1; }
}
@keyframes routes-blueprint-three {
  0%,55% { stroke-dashoffset:1; }
  68%,96% { stroke-dashoffset:0; }
  100% { stroke-dashoffset:1; }
}
.routes-toggle .section-note { font-size:11px; line-height:1.6; color:var(--routes-muted); margin:32px 0 0; border-top:1px solid var(--routes-line); padding-top:20px; }
@media(max-width:700px) {
  .routes-toggle { padding:32px 24px 22px; }
  .routes-toggle .section-heading { margin-bottom:32px; }
  .routes-toggle h2 { font-size:33px; letter-spacing:-1.4px; line-height:1.08; }
  .routes-toggle .section-heading .eyebrow { font-size:10px; letter-spacing:1.2px; }
  .routes-toggle .desktop-break { display:none; }
  .routes-toggle .switch { width:100%; margin-bottom:30px; }
  .routes-toggle .switch button { flex:1; justify-content:center; padding:13px 8px; font-size:11px; gap:10px; }
  .routes-toggle .switch button span { font-size:17px; }
  .routes-toggle .toggle-panel { grid-template-columns:1fr; gap:20px; min-height:0; }
  .routes-toggle h3 { font-size:30px; }
  .routes-toggle .route > .eyebrow { font-size:9px; margin-bottom:14px; letter-spacing:1.1px; }
  .routes-toggle .description { font-size:14px; line-height:1.7; }
  .routes-toggle .price { padding-top:25px; }
  .routes-toggle .price strong { font-size:25px; }
  .routes-toggle .price > span { font-size:11px; }
  .routes-toggle .toggle-art { aspect-ratio:1.7; width:100%; margin-top:6px; }
  .routes-toggle .toggle-art svg { height:130px; margin:0; }
  .routes-toggle .toggle-art p { font-size:11px; margin-bottom:20px; }
  .routes-toggle .section-note { font-size:10px; margin-top:26px; padding-top:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .routes-toggle, .routes-toggle *, .routes-toggle *::before, .routes-toggle *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
/* Operator: whole blueprint starts from zero every cycle, one steady speed (a bit faster than the original 1.6s per part).
   One 10s loop for every line: draw ~1.2s each, staggered 0.8s, hold, gently erase, repeat at the same pace. */
@keyframes routes-blueprint-cycle { 0% { stroke-dashoffset:1; } 12% { stroke-dashoffset:0; } 88% { stroke-dashoffset:0; } 100% { stroke-dashoffset:1; } }
.routes-toggle .system-art .blueprint-plan path,
.routes-toggle .system-art .blueprint-dimensions path,
.routes-toggle .system-art .blueprint-extension path { stroke-dasharray:1; stroke-dashoffset:1; animation:routes-blueprint-cycle 10s ease-in-out infinite both; }
.routes-toggle .system-art .blueprint-plan path:nth-child(1){animation-delay:0s}
.routes-toggle .system-art .blueprint-plan path:nth-child(2){animation-delay:.8s}
.routes-toggle .system-art .blueprint-plan path:nth-child(3){animation-delay:1.6s}
.routes-toggle .system-art .blueprint-plan path:nth-child(4){animation-delay:2.4s}
.routes-toggle .system-art .blueprint-plan path:nth-child(n+5){animation-delay:3.2s}
.routes-toggle .system-art .blueprint-dimensions path{animation-delay:1.6s}
.routes-toggle .system-art > path{stroke-dasharray:1;stroke-dashoffset:1;animation:routes-blueprint-cycle 10s ease-in-out infinite both;animation-delay:2.4s}
.routes-toggle .system-art .blueprint-extension-one path{animation-delay:3.2s}
.routes-toggle .system-art .blueprint-extension-two path{animation-delay:4s}
.routes-toggle .system-art .blueprint-extension-three path{animation-delay:4.8s}