/* Campaign journey v6 — realistic social-video devices and connected ad measurement */
.station-content .device-stage { height: 140px; }
.station-content > h2 { margin-top: 2px; }
.laptop-mockup {
  position: absolute; left: 2px; top: 18px; width: 166px; height: 133px;
  transform: rotate(-2deg); transform-origin: center; z-index: 2;
}
.laptop-screen {
  position: relative; width: 156px; height: 94px; margin: 0 auto;
  box-sizing: border-box; overflow: hidden; border: 5px solid #16191f; border-radius: 8px 8px 4px 4px;
  background: #eef1f5; color: #182230; box-shadow: 0 12px 28px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.08);
}
.fb-feed-top { height: 13px; display: flex; align-items: center; gap: 5px; padding: 0 5px; background: #fff; border-bottom: 1px solid #dfe3ea; }
.fb-feed-top img { width: 8px; height: 8px; filter: invert(30%) sepia(99%) saturate(2214%) hue-rotate(202deg) brightness(95%); }
.fb-feed-top i { display: block; width: 35px; height: 4px; border-radius: 5px; background: #edf0f4; }
.fb-feed-top i:last-child { width: 8px; margin-left: auto; }
.fb-feed-body { height: 71px; display: grid; grid-template-columns: 22px 1fr; gap: 4px; padding: 4px; box-sizing: border-box; }
.fb-side { display: grid; align-content: start; gap: 5px; }
.fb-side i { height: 4px; border-radius: 3px; background: #d9dee7; }
.fb-post { overflow: hidden; border-radius: 3px; background: #fff; box-shadow: 0 1px 3px rgba(21,35,55,.12); }
.fb-author { height: 15px; display: flex; gap: 3px; align-items: center; padding: 2px 3px; box-sizing: border-box; }
.fb-author > b { display: grid; place-items: center; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg,#735cff,#ff547d); color: #fff; font: 4px var(--mono); }
.fb-author span { display: grid; gap: 1px; }
.fb-author strong { font: 4px Arial,sans-serif; color: #1d2530; }
.fb-author small { font: 3px Arial,sans-serif; color: #788493; }
.social-video { position: relative; overflow: hidden; background: linear-gradient(135deg,#171c32,#6536a5 55%,#f19a65); }
.social-video-landscape { height: 38px; }
.video-orb { position: absolute; display: block; border-radius: 50%; filter: blur(1px); }
.orb-one { width: 34%; aspect-ratio: 1; left: 8%; top: 12%; background: rgba(57,216,255,.72); }
.orb-two { width: 28%; aspect-ratio: 1; right: 5%; bottom: -8%; background: rgba(255,84,125,.78); }
.video-product { position: absolute; left: 46%; top: 20%; width: 16%; height: 59%; border-radius: 3px 3px 5px 5px; background: linear-gradient(160deg,#fff,#c6d5ff 58%,#695cff); box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.paused-play { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-42%,-50%); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid rgba(255,255,255,.95); filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.video-progress { position: absolute; left: 4%; right: 4%; bottom: 2px; height: 1px; background: rgba(255,255,255,.38); }
.video-progress b { display: block; width: 42%; height: 100%; background: #fff; }
.fb-actions { height: 10px; display: flex; justify-content: space-around; align-items: center; color: #687483; font: 6px Arial,sans-serif; }
.laptop-hinge { width: 36px; height: 3px; margin: -1px auto 0; border-radius: 0 0 3px 3px; background: #4c5360; }
.laptop-base { position: relative; width: 166px; height: 14px; margin: 0 auto; border-radius: 1px 1px 12px 12px; background: linear-gradient(#c8ced6,#636b76 52%,#292e36); clip-path: polygon(5% 0,95% 0,100% 72%,93% 100%,7% 100%,0 72%); box-shadow: 0 9px 14px rgba(0,0,0,.42); }
.laptop-base i { position: absolute; left: 39%; top: 2px; width: 22%; height: 5px; border: 1px solid rgba(40,45,52,.42); border-radius: 2px; }
.phone-mockup {
  position: absolute; right: 1px; top: 22px; width: 50px; height: 109px; padding: 3px;
  box-sizing: border-box; border-radius: 11px; background: #101217; box-shadow: 0 14px 28px rgba(0,0,0,.62), inset 0 0 0 1px #565c68;
  transform: rotate(4deg); z-index: 3;
}
.phone-screen { position: relative; width: 44px; height: 103px; overflow: hidden; border-radius: 8px; background: #090b10; }
.phone-notch { position: absolute; z-index: 5; top: 2px; left: 50%; width: 15px; height: 3px; transform: translateX(-50%); border-radius: 4px; background: #050506; }
.tiktok-mark { position: absolute; z-index: 4; width: 7px; height: 7px; left: 4px; top: 6px; filter: invert(1); }
.social-video-vertical { position: absolute; inset: 0; }
.social-video-vertical .orb-one { width: 76%; left: -20%; top: 16%; }
.social-video-vertical .orb-two { width: 64%; right: -22%; bottom: 11%; }
.social-video-vertical .video-product { left: 38%; top: 25%; width: 27%; height: 41%; }
.tiktok-actions { position: absolute; z-index: 4; right: 3px; bottom: 20px; display: grid; gap: 5px; }
.tiktok-actions i { display: block; width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(255,255,255,.9); box-sizing: border-box; }
.tiktok-actions i:nth-child(2) { border-radius: 2px; transform: rotate(45deg) scale(.8); }
.tiktok-caption { position: absolute; z-index: 4; left: 4px; bottom: 9px; display: grid; gap: 2px; }
.tiktok-caption b,.tiktok-caption span { display: block; height: 2px; border-radius: 2px; background: rgba(255,255,255,.9); }
.tiktok-caption b { width: 19px; }.tiktok-caption span { width: 26px; opacity: .62; }
.phone-screen > .video-progress { z-index: 5; bottom: 4px; }
.delivery-console { display: grid; grid-template-columns: 1fr 18px 1.12fr; align-items: stretch; gap: 3px; padding: 7px; box-sizing: border-box; min-height: 105px; border-radius: 14px; }
.ad-platforms,.measurement-platforms { display: grid; gap: 4px; align-content: center; }
.ad-platforms { grid-template-columns: repeat(2,1fr); }.measurement-platforms { grid-template-columns: repeat(3,1fr); }
.ad-platforms > b,.measurement-platforms > b { grid-column: 1/-1; font: 6px var(--mono); letter-spacing: .13em; color: #9fbac1; }
.platform-node { min-width: 0; height: 34px; display: grid; place-items: center; align-content: center; gap: 2px; border: 1px solid rgba(57,216,255,.22); border-radius: 7px; background: rgba(255,255,255,.055); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.platform-node img { display: block; width: 13px; height: 13px; object-fit: contain; filter: invert(1); opacity: .86; }
.platform-primary { height: 43px; border-color: rgba(57,216,255,.5); background: rgba(57,216,255,.09); }
.platform-primary img { width: 18px; height: 18px; opacity: 1; }
.platform-node small { max-width: 100%; color: #dceef2; font: 5px var(--mono); white-space: nowrap; }
.flow-connector { position: relative; align-self: center; height: 2px; background: linear-gradient(90deg,rgba(57,216,255,.25),#39d8ff); box-shadow: 0 0 7px rgba(57,216,255,.6); }
.flow-connector::after { content:""; position:absolute; right:-1px; top:-3px; border-left:5px solid #39d8ff; border-top:4px solid transparent; border-bottom:4px solid transparent; }
.flow-connector b { position: absolute; width: 3px; height: 3px; top: -1px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px #39d8ff; }
.flow-connector b:nth-child(1){left:8%}.flow-connector b:nth-child(2){left:42%}.flow-connector b:nth-child(3){left:74%}
@media (max-width:700px) {
  .station-content .device-stage { height: 170px; }
  .laptop-mockup { left: 3%; top: 20px; width: 190px; height: 148px; }
  .laptop-screen { width: 178px; height: 107px; }
  .laptop-base { width: 190px; height: 15px; }
  .fb-feed-body { height: 82px; grid-template-columns: 26px 1fr; }
  .social-video-landscape { height: 47px; }
  .phone-mockup { right: 8%; top: 20px; width: 56px; height: 122px; }
  .phone-screen { width: 50px; height: 116px; }
  .delivery-console { min-height: 112px; }
}
@media (max-width:400px) {
  .station-content .device-stage { height: 160px; }
  .laptop-mockup { transform: rotate(-2deg) scale(.88); transform-origin:left top; }
  .phone-mockup { right: 3%; transform: rotate(4deg) scale(.9); transform-origin:right top; }
  .process-delivery { min-height: 225px; }
  .delivery-console { min-height: 118px; }
}

/* Process points must not blur the route passing behind them. */
.journey-process {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Station ambient fields intentionally removed. The route supplies all color ambience. */
.process-prep::after,
.station-content::after,
.process-delivery::after,
.station-lead::after {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.process-prep .production-desk,
.station-content .device-stage,
.process-delivery .delivery-console,
.station-lead .lead-scene {
  filter: none !important;
}