/* =====================================================================
   THE TRAIN — the six-step process (index.html #how, audit.html #how)
   A little train travels along a line, station by station. Two rows of
   three: it runs the top line, leaves off the right, and comes back in on
   the left of the second line, like a carriage return. Each station's text
   appears as the train pulls in; the CTA appears at the end of the line.

   Scroll-driven, forward only: motion.js beats b1…b6 (data-beats) with
   data-once, so a station once reached never un-reveals. Reduced motion
   and narrow screens: all six stations present, no train, no pin.
   ===================================================================== */

.train-sec{--travel:clamp(420px,52vh,660px);position:relative;padding:0}
.train-sec::after{content:"";display:block;height:var(--travel)}   /* the scroll budget: sticky is confined to the parent's CONTENT box, so padding wouldn't count */   /* px scroll budget, six beats */
.train-pin{position:sticky;top:72px;box-sizing:border-box;padding:14px 0 10px}   /* content-height pin under the nav */
.train-pin > .wrap{width:100%}
.train-stage{position:relative;zoom:var(--fit,1)}
.train-head{text-align:center;margin-bottom:14px}
.train-head h2{font-size:clamp(25px,3.4vw,36px)}
.train-head h2{margin-top:14px}
.train-head .lede{margin-top:10px}

/* one plane, one route (her call after Round 5): the six step cards sit in three
   rows of two — row 2 reads right→left so the route snakes — and a single plane
   flies stop to stop above the cards along a dashed path. motion.js builds the
   path from the cards' real positions and hands the same path to the plane's
   offset-path (offset-rotate: auto, so it banks into the turns). */
.train-stage{position:relative}
.route{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:1}
.route-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.plane{position:absolute;left:0;top:0;width:40px;height:40px;opacity:0;
  offset-path:var(--tp,none);offset-distance:var(--od,0%);offset-rotate:auto;
  transition:offset-distance 1.25s cubic-bezier(.45,.05,.3,1),opacity .35s ease;
  filter:drop-shadow(0 6px 8px rgba(30,36,49,.22))}
.plane svg{display:block;width:40px;height:40px}
.trow{position:relative;padding-top:44px}
.trow + .trow{margin-top:6px}
.stations{--g:28px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--g);align-items:start}
.trow.back .stations{direction:rtl}
.trow.back .station{direction:ltr}
.station{position:relative;text-align:center;padding:16px 8px 0}
/* every stop has its own graphic — inside its card, capped at 44px */
.station .stn{display:block;width:44px;height:36px;flex:0 0 44px}
.station .stn svg{display:block;width:44px;height:36px;overflow:visible}
.station .dot{position:absolute;left:50%;top:-15px;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;
  background:var(--ivory);border:2px solid var(--slate);color:var(--slate);
  display:grid;place-items:center;font-size:13px;font-weight:700;z-index:2;
  transition:background .4s,color .4s}
/* the step's text lives in a card */
.station .body{position:relative;display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 14px 12px;
  box-shadow:0 22px 50px -34px rgba(33,63,120,.5);text-align:left;opacity:0;transform:translateY(10px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.station .body-txt{min-width:0}
.station h3{font-size:16.5px;line-height:1.25;letter-spacing:-.015em}
.station p{margin-top:5px;font-size:14px;line-height:1.4;color:var(--muted)}
/* the CTA sits on its own, centred, below the whole route */
.train-cta{text-align:center;margin:18px 0 0;opacity:0;transform:translateY(10px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}

/* ---- beats (motion-allowed, desktop): the plane flies to stop k on beat k;
   --p1..--p6 are the stops as fractions of the route (JS). ---- */
@media (prefers-reduced-motion:no-preference) and (min-width:861px){
  .train-sec.b1 .plane{opacity:1;--od:var(--p1)}
  .train-sec.b2 .plane{--od:var(--p2)}
  .train-sec.b3 .plane{--od:var(--p3)}
  .train-sec.b4 .plane{--od:var(--p4)}
  .train-sec.b5 .plane{--od:var(--p5)}
  .train-sec.b6 .plane{--od:var(--p6)}
  /* station card + filled dot, just after the plane arrives */
  .train-sec.b1 .s1 .body,.train-sec.b2 .s2 .body,.train-sec.b3 .s3 .body,
  .train-sec.b4 .s4 .body,.train-sec.b5 .s5 .body,.train-sec.b6 .s6 .body{opacity:1;transform:none;transition-delay:.95s}
  .train-sec.b1 .s1 .dot,.train-sec.b2 .s2 .dot,.train-sec.b3 .s3 .dot,
  .train-sec.b4 .s4 .dot,.train-sec.b5 .s5 .dot,.train-sec.b6 .s6 .dot{background:var(--slate);color:#fff;transition-delay:.9s}
  .train-sec.b6 .train-cta{opacity:1;transform:none;transition-delay:1.8s}
}

/* ---- fallback: reduced motion or narrow — everything present, no train ---- */
@media (prefers-reduced-motion:reduce),(max-width:860px){
  .train-sec{height:auto;padding:88px 0}
  .train-sec::after{display:none}
  .train-pin{position:static;height:auto;padding:0;display:block}
  .train-stage{zoom:1}
  .route{display:none}
  .trow{padding-top:0}
  .stations{grid-template-columns:1fr;gap:16px}
  .trow.back .stations{direction:ltr}
  .trow + .trow{margin-top:16px}
  .station{text-align:left;padding:0 0 0 46px}
  .station .dot{left:0;top:-2px;transform:none;background:var(--slate);color:#fff}
  .station .body{opacity:1;transform:none}
  .train-cta{opacity:1;transform:none;margin-top:30px;text-align:left;padding-left:46px}
}
@media (max-width:860px){.train-sec{padding:64px 0}}