/* Stationary cards; border → connector → border share one scroll position. */
#routines { scroll-margin-top: 78px; }
#routines .calendar-stage { min-height: 530px; cursor: default; touch-action: pan-y; }
#routines .routine-calendar { top: 10%; width: 78%; }
#routines .rule-stack {
  top: 15%; width: 52%; max-width: 300px; gap: 36px;
  isolation: isolate;
}
#routines .routine-step {
  position: relative; z-index: 1; margin: 0; padding: 17px 18px;
  border: 1px solid #344244; border-top-color: #435355; border-radius: 14px;
  background: linear-gradient(150deg, #182022, #101618 75%);
  box-shadow: 0 14px 28px #0007, inset 0 1px 0 #ffffff06;
}
#routines .routine-step b { margin: 0; color: #f1f4f3; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
#routines .routine-step-heading { display: flex; align-items: center; gap: 12px; }
#routines .routine-label { display: block; margin-bottom: 4px; color: #7f9996; font-size: 10px; font-weight: 500; line-height: 1.3; }
#routines .routine-icon { display: grid; flex: none; width: 38px; height: 38px; place-items: center; border: 1px solid #35cdbc26; border-radius: 10px; background: #35cdbc0c; }
#routines .routine-icon img { width: 22px; height: 22px; filter: invert(74%) sepia(48%) saturate(584%) hue-rotate(121deg) brightness(94%); }
#routines .routine-detail { margin: 12px 0 0 50px; color: #a4b1b0; font-size: 11px; line-height: 1.4; }
#routines .routine-detail-divider { padding: 0 5px; color: #465a58; }
#routines .routine-formats { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0 50px; }
#routines .routine-format { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid #34413f; border-radius: 5px; color: #b6c8c5; font-size: 10px; line-height: 1.4; }
#routines .routine-format img { width: 14px; height: 14px; filter: invert(1); opacity: .75; }
#routines .routine-destinations { display: flex; gap: 9px; margin-top: 13px; }
#routines .routine-app { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #33413f; border-radius: 9px; background: #1d2927; }
#routines .routine-app img { display: block; width: 19px; height: 19px; filter: invert(1); opacity: .88; }
#routines .routine-connectors { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#routines .routine-connectors path { fill: none; stroke-width: 2; stroke-linecap: butt; }
#routines .routine-connector-fill, #routines .routine-border-fill { stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px #35cdbc45); }
/* No-JS fallback: complete teal outlines and connections. */
html:not(.js) #routines .routine-step { border-color: var(--accent); }
#routines .routine-step + .routine-step::before { content: ''; position: absolute; left: 50%; top: -37px; width: 2px; height: 36px; background: var(--accent); }
#routines [data-routine-flow-ready] .routine-step::before { display: none; }
@media (max-width: 900px) {
  #routines .rule-stack { width: 60%; right: 4%; }
  #routines .routine-calendar { width: 76%; }
}
@media (max-width: 520px) {
  #routines .calendar-stage { min-height: 510px; }
  #routines .routine-calendar { top: 8%; left: 1%; width: 84%; padding: 14px; opacity: .8; }
  #routines .rule-stack { top: 16%; right: 1%; width: 72%; max-width: 280px; gap: 32px; }
  #routines .routine-step { padding: 15px; }
  #routines .routine-step b { font-size: 14px; }
  #routines .routine-step-heading { gap: 10px; }
  #routines .routine-detail, #routines .routine-formats { margin-left: 48px; }
  #routines .routine-step + .routine-step::before { top: -33px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  #routines .routine-connector-fill, #routines .routine-border-fill { stroke-dashoffset: 0 !important; filter: none; }
}