/* ==========================================================================
   Pillbox product branch — v6 override layer.
   Loaded AFTER pillbox.css + v2 + v3 + v4 + v5. v5 review feedback:
   – timeline phones ~20% smaller (210px → 168px)
   – all four phones aligned to the same height: nodes become equal-height
     flex columns and each image is pushed to the row's common baseline, so
     the phone tops line up regardless of how many lines each caption runs
   – the "fully customisable" band takes the purple accent (it's a feature
     note, not a warning — amber reads as caution)
   ========================================================================== */

/* equal-height nodes; images share one baseline, so their tops align too */
.timeline{align-items:stretch}
.timeline .tl-node{display:flex;flex-direction:column}
.tl-node .d{margin-bottom:16px}
.tl-shot{width:min(100%,168px);margin:auto auto 0}

/* purple feature band (both grounds — matches the purple sdots/card strips) */
.band.purple{border-left-color:var(--c-purple)}
html[data-theme="dark"] .band.purple{border-left-color:var(--c-purple)}