/* Consumer experience: original sales HTML hardware and interfaces, scoped here. */
.cj-connected-flow{padding:48px var(--gutter) 58px;background:#f7f8fb;overflow:hidden}
.cj-connected-flow .cj-panel{max-width:1400px;padding:0;margin:auto;background:transparent;box-shadow:none;border:0;border-radius:0}
.cj-connected-flow .cj-heading{padding:0;margin-bottom:38px}
.cj-connected-flow .cj-heading>p:last-child{max-width:1100px;white-space:normal}
.cj-connected-flow .cj-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:0}
.cj-connected-flow .cj-flow-step{position:relative;min-width:0}
.cj-connected-flow .cj-flow-step:not(:last-child)::after{content:'';position:absolute;right:-25px;top:148px;width:22px;height:1px;background:linear-gradient(90deg,#1887d533,#53c7f5aa)}
.cj-connected-flow .cj-flow-step:not(:last-child)::before{content:'';position:absolute;right:-25px;top:145px;width:6px;height:6px;border-top:1px solid #26a9e880;border-right:1px solid #26a9e880;transform:rotate(45deg)}
.cj-connected-flow .cj-flow-visual{height:300px;position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
/* Measured frame/body/screen positions from the original React device components. */
.cj-connected-flow .cj-source-device{position:relative;overflow:hidden;flex-shrink:0;filter:drop-shadow(0 12px 15px #14233a22)}
.cj-connected-flow .cj-source-device .cj-device-body{position:absolute;max-width:none;height:auto;object-fit:initial;user-select:none}
.cj-connected-flow .cj-device-screen{position:absolute;overflow:hidden;background:#fff}
.cj-connected-flow .cj-source-ui{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.cj-connected-flow .cj-source-machine{aspect-ratio:468/745;width:171px;max-width:100%}
.cj-connected-flow .cj-source-machine .cj-device-body{width:341.880342%;left:-120.940171%;top:-11.946309%}
.cj-connected-flow .cj-source-machine .cj-device-screen{left:22.65%;top:16.11%;width:54.7%;height:62.68%;background:#03111d}
.cj-connected-flow .cj-source-phone{aspect-ratio:430/874;width:128px;max-width:100%}
.cj-connected-flow .cj-source-phone .cj-device-body{width:130.697674%;left:-15.348837%;top:-7.093822%}
.cj-connected-flow .cj-source-phone .cj-device-screen{left:5.35%;top:2.29%;width:89.77%;height:95.31%;border-radius:12.922% / 5.988%}
.cj-connected-flow .cj-scan-phone .cj-source-ui{object-fit:contain;object-position:center;background:#fefefe}
.cj-connected-flow .cj-phone-pair,.cj-connected-flow .cj-follow-pair{position:relative;width:100%;max-width:250px;height:100%;display:flex;align-items:center;justify-content:center;gap:0}
.cj-connected-flow .cj-phone-pair .cj-source-phone{width:53%;max-width:128px}
.cj-connected-flow .cj-verify-phone{transform:translateY(-8px) rotate(-5deg);z-index:1}
.cj-connected-flow .cj-profile-phone{margin-left:-8px;transform:translateY(10px) rotate(4deg);z-index:2}
.cj-connected-flow .cj-flow-step--try .cj-flow-visual{isolation:isolate}
.cj-connected-flow .cj-unlock-phone{transform:translateX(-14px);width:136px}
.cj-connected-flow .cj-unlock-phone .cj-device-screen{display:flex;align-items:center;justify-content:center}
.cj-connected-flow .cj-unlock-title{position:absolute;top:16%;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px;color:#1887d5;font-weight:600}
.cj-connected-flow .cj-unlock-title svg{width:14px;height:14px}
.cj-connected-flow .cj-unlock-pack{width:90%;height:70%;object-fit:contain}
.cj-connected-flow .cj-unlock-foot{position:absolute;bottom:6%;left:0;right:0;text-align:center;color:#1887d5;font-size:9px;line-height:1.2}
.cj-connected-flow .cj-unlock-foot>span{display:block;font-size:16px;margin-top:3px}
.cj-connected-flow .cj-physical-sample{position:absolute;right:-5px;bottom:10px;width:91px;height:190px;object-fit:contain;filter:drop-shadow(0 7px 9px #14233a33);transform:rotate(7deg);z-index:3}
.cj-connected-flow .cj-follow-pair .cj-source-phone{width:57%;max-width:126px}
.cj-connected-flow .cj-feedback-phone{transform:translateY(-6px) rotate(-4deg);z-index:2}
.cj-connected-flow .cj-wallet-phone{margin-left:-32px;transform:translateY(15px) rotate(6deg);z-index:1;opacity:.98}
.cj-connected-flow .cj-flow-copy{padding-top:16px}
.cj-connected-flow .cj-flow-label{font-size:11px;letter-spacing:1.2px;font-weight:600;color:#1887d5;text-transform:uppercase;margin:0 0 10px;line-height:1.3}
.cj-connected-flow .cj-flow-label>span{margin-right:7px;color:#26a9e8}
.cj-connected-flow .cj-flow-copy h3{font-size:18px;font-weight:600;line-height:1.2;letter-spacing:-.4px;color:#061624;margin:0 0 11px}
.cj-connected-flow .cj-flow-copy>p:last-child{font-size:14px;font-weight:400;line-height:1.5;color:#65758a;margin:0}
/* One compact intelligence summary, with no brand-facing dashboard. */
.cj-connected-flow .cj-intelligence{background:#fff;border:1px solid #e7edf5;border-radius:20px;padding:25px 28px 18px;margin-top:42px;box-shadow:0 7px 25px #14233a05}
.cj-connected-flow .cj-intelligence-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}
.cj-connected-flow .cj-intelligence-intro h3{font-size:23px;font-weight:500;line-height:1.2;color:#061624;letter-spacing:-.5px;margin:0 0 9px}
.cj-connected-flow .cj-intelligence-intro p{font-size:14px;line-height:1.5;color:#65758a;max-width:790px}
.cj-connected-flow .cj-profile-count{background:#edf6ff;border-radius:24px;padding:10px 14px;font-size:12px;font-weight:600;line-height:1.3;color:#1887d5;white-space:nowrap}
.cj-connected-flow .cj-intelligence-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.cj-connected-flow .cj-intelligence-group+.cj-intelligence-group{border-left:1px solid #e7edf5;padding-left:28px}
.cj-connected-flow .cj-intelligence-group h4{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;line-height:1.3;color:#15354e;margin:0 0 11px}
.cj-connected-flow .cj-intelligence-icon{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;color:#238de9;background:#edf6ff;border-radius:8px}
.cj-connected-flow .cj-intelligence-icon svg{width:18px;height:18px}
.cj-connected-flow .cj-intelligence-group ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.cj-connected-flow .cj-intelligence-group li{position:relative;padding-left:12px;font-size:13px;line-height:1.35;color:#65758a}
.cj-connected-flow .cj-intelligence-group li::before{content:'';position:absolute;width:3px;height:3px;background:#26a9e8;border-radius:50%;left:0;top:7px}
.cj-connected-flow .cj-intelligence-note{font-size:11px;line-height:1.4;color:#7b8b9e;margin:19px 0 0}
@media(max-width:1199px){
 .cj-connected-flow .cj-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 34px}
 .cj-connected-flow .cj-flow-step:nth-child(3)::before,.cj-connected-flow .cj-flow-step:nth-child(3)::after{display:none}
 .cj-connected-flow .cj-flow-copy{padding-top:8px}
 .cj-connected-flow .cj-flow-visual{height:285px}
 .cj-connected-flow .cj-intelligence-intro{align-items:flex-start}
 .cj-connected-flow .cj-profile-count{white-space:normal;max-width:175px}
}
@media(max-width:900px){
 .cj-connected-flow{padding:35px 24px 45px}
 .cj-connected-flow .cj-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 32px}
 .cj-connected-flow .cj-flow-step:nth-child(3)::before,.cj-connected-flow .cj-flow-step:nth-child(3)::after{display:block}
 .cj-connected-flow .cj-flow-step:nth-child(even)::before,.cj-connected-flow .cj-flow-step:nth-child(even)::after{display:none}
 .cj-connected-flow .cj-intelligence{padding:23px}
 .cj-connected-flow .cj-intelligence-intro{flex-direction:column;gap:14px}
 .cj-connected-flow .cj-profile-count{max-width:none}
 .cj-connected-flow .cj-intelligence-groups{gap:18px}
 .cj-connected-flow .cj-intelligence-group+.cj-intelligence-group{padding-left:18px}
}
@media(max-width:550px){
 .cj-connected-flow{padding:32px 24px 40px}
 .cj-connected-flow .cj-heading{margin-bottom:28px}
 .cj-connected-flow .cj-flow{grid-template-columns:1fr;gap:38px}
 .cj-connected-flow .cj-flow-step{padding-bottom:12px}
 .cj-connected-flow .cj-flow-visual{height:285px;max-width:290px;margin:auto}
 .cj-connected-flow .cj-source-machine{width:170px}
 .cj-connected-flow .cj-flow-copy{max-width:360px;margin:auto;padding-top:15px}
 .cj-connected-flow .cj-flow-step:not(:last-child)::after,.cj-connected-flow .cj-flow-step:nth-child(3)::after{display:block;top:auto;bottom:-25px;right:50%;width:1px;height:25px;background:linear-gradient(#1887d533,#53c7f5aa)}
 .cj-connected-flow .cj-flow-step:not(:last-child)::before,.cj-connected-flow .cj-flow-step:nth-child(3)::before{display:block;top:auto;bottom:-25px;right:calc(50% - 2px);transform:rotate(135deg);width:5px;height:5px}
 .cj-connected-flow .cj-flow-copy h3{font-size:20px}
 .cj-connected-flow .cj-flow-copy>p:last-child{font-size:15px}
 .cj-connected-flow .cj-intelligence{margin-top:30px;padding:21px 19px}
 .cj-connected-flow .cj-intelligence-intro h3{font-size:22px}
 .cj-connected-flow .cj-intelligence-groups{grid-template-columns:1fr;gap:20px}
 .cj-connected-flow .cj-intelligence-group+.cj-intelligence-group{border-left:0;border-top:1px solid #e7edf5;padding-left:0;padding-top:18px}
}

/* Six clear consumer moments, using the original sales project's screen treatment. */
.cj-connected-flow .cj-ad-screen{width:146px;max-width:100%;perspective:1400px;filter:drop-shadow(0 12px 15px #14233a22)}
.cj-connected-flow .cj-ad-screen-bezel{position:relative;overflow:hidden;aspect-ratio:9/16;padding:2.6%;border-radius:10px;background:#14233a;transform:rotateY(13deg);transform-origin:30% 50%;box-shadow:inset -1px 0 #ffffff29,inset 1px 0 #0000004d}
.cj-connected-flow .cj-ad-screen-bezel>img,.cj-connected-flow .cj-ad-screen-bezel>video{width:100%;height:100%;object-fit:cover;border-radius:3px}
.cj-connected-flow .cj-screen-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,#ffffff3d,#ffffff0f 26%,#fff0 46%);mix-blend-mode:screen}
.cj-connected-flow .cj-dispense-visual{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.cj-connected-flow .cj-dispensed-product{width:150px;max-width:100%;height:265px;object-fit:contain;filter:drop-shadow(0 12px 15px #14233a22);transform:rotate(4deg)}
.cj-connected-flow .cj-release-label{position:absolute;bottom:0;display:flex;align-items:center;gap:6px;font-size:11px;color:#1887d5;font-weight:500;white-space:nowrap}
.cj-connected-flow .cj-release-label svg{width:17px;height:17px}
.cj-connected-flow .cj-flow-step:not(:last-child)::after{right:-22px;width:20px}
.cj-connected-flow .cj-flow-step:not(:last-child)::before{right:-22px}
@media(max-width:1199px){.cj-connected-flow .cj-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 34px}}
@media(max-width:900px){.cj-connected-flow .cj-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 32px}}
@media(max-width:550px){.cj-connected-flow .cj-flow{grid-template-columns:1fr;gap:38px}.cj-connected-flow .cj-flow-step:not(:last-child)::after{right:50%;width:1px}.cj-connected-flow .cj-flow-step:not(:last-child)::before{right:calc(50% - 2px)}}

/* Original sales HTML ScreenFeedback component and its unchanged UI rules. */
.cj-connected-flow .cj-follow-wallet .cj-device-screen{container-type:inline-size;--vt-ink:#1d1d1f;--vt-ink-soft:#6e6e73;--vt-blue:#0a7fb0;--vt-cyan:#00b0f0}
.cj-connected-flow .vt-vscr{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  
  background: #fbfcfd;
  font-size: 5.1cqw;
  line-height: 1.25;
  color: var(--vt-ink);
}
.cj-connected-flow .vt-vscr__back{
  width: 1.4em;
  height: 1.4em;
  margin-bottom: 0.1em;
  color: var(--vt-ink-soft);
}
.cj-connected-flow .vt-vscr__body{
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.62em;
  padding: 1.05em 0.95em;
}
.cj-connected-flow .vt-vscr__progress{
  display: flex;
  gap: 0.28em;
  margin-bottom: 0.15em;
}
.cj-connected-flow .vt-vscr__progress i{
  flex: 1;
  height: 0.28em;
  border-radius: 999em;
  background: #dfe7f0;
}
.cj-connected-flow .vt-vscr__progress i.is-done{
  background: var(--vt-cyan);
}
.cj-connected-flow .vt-vscr__helper{
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--vt-blue);
}
.cj-connected-flow .vt-vscr__eyebrow{
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vt-blue);
}
.cj-connected-flow .vt-vscr__head{
  font-size: 1.62em;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.036em;
  color: var(--vt-ink);
  text-wrap: balance;
}
.cj-connected-flow .vt-vscr__action{
  display: block;
  margin-top: auto;
  padding: 0.62em;
  border-radius: 999em;
  background: linear-gradient(96deg, var(--vt-blue), var(--vt-cyan));
  box-shadow: 0 0.3em 0.7em rgba(0, 176, 240, 0.24);
  font-size: 0.88em;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #fff;
  text-align: center;
}
.cj-connected-flow .vt-vscr__rate{
  display: flex;
  flex-direction: column;
  gap: 0.34em;
  padding: 0.52em 0.72em;
  border-radius: 0.62em;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px #e4eaf1,
    0 1px 2px rgba(20, 35, 58, 0.04);
}
.cj-connected-flow .vt-vscr__rate i{
  font-size: 0.72em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.2;
  color: var(--vt-ink);
}
.cj-connected-flow .vt-vscr__stars{
  display: flex;
  gap: 0.22em;
}
.cj-connected-flow .vt-vscr__stars svg{
  width: 1em;
  height: 1em;
  color: #d9e2ec;
}
.cj-connected-flow .vt-vscr__stars svg.is-set{
  fill: var(--vt-cyan);
  color: var(--vt-cyan);
}
.cj-connected-flow .vt-vscr__fbpack{
  display: block;
  flex: 1 1 auto;
  min-height: 2.4em;
  
  max-height: 46%;
  width: 100%;
  margin: 0.15em 0;
  object-fit: contain;
}

/* Keep the full feedback UI inside the phone rather than expanding to image height. */
.cj-connected-flow .cj-follow-wallet .vt-vscr{height:100%;min-height:0}
.cj-connected-flow .cj-follow-wallet .vt-vscr__body{height:100%;min-height:0;box-sizing:border-box;overflow:hidden;flex:1 1 0}
.cj-connected-flow .cj-follow-wallet .vt-vscr__body> :not(.vt-vscr__fbpack){flex-shrink:0}
.cj-connected-flow .cj-follow-wallet .vt-vscr__fbpack{height:0;min-height:2.4em;max-height:46%;flex:1 1 0;object-fit:contain}

/* Supplied angled machine: native image plus a four-corner perspective UI overlay. */
.cj-connected-flow .cj-angled-machine{position:relative;width:171px;max-width:100%;aspect-ratio:494/690;filter:drop-shadow(0 12px 15px #14233a22)}
.cj-connected-flow .cj-angled-body{position:absolute;width:323.88664%;max-width:none;height:auto;left:-102.22672%;top:-22.463768%;mix-blend-mode:multiply;pointer-events:none}
.cj-connected-flow .cj-angled-ui{position:absolute;left:37.651822%;top:7.101449%;width:44.736842%;height:68.84058%;max-width:none;object-fit:fill;transform-origin:0 0;transform:matrix3d(1.0393873,.0517342,0,.00052,0,1,0,0,0,0,1,0,0,0,0,1);backface-visibility:hidden}

.cj-connected-flow .cj-angled-crop{position:absolute;inset:0;clip-path:polygon(0 2.32%,18% 0,99.8% 3.19%,99.8% 96.81%,18.4% 100%,0 97.39%)}

/* Scan: one raised QR card and the claim action within the existing phone. */
.cj-connected-flow .cj-scan-phone .cj-scan-interface{display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);justify-items:center;gap:0;padding:18px 9px 12px;box-sizing:border-box;background:#f7f9fc}
.cj-connected-flow .cj-scan-card{width:100%;padding:9px 4px;box-sizing:border-box;border-radius:9px;background:#fff;box-shadow:0 5px 13px #14233a20}
.cj-connected-flow .cj-scan-card svg{display:block;width:100%;height:auto;aspect-ratio:230/225}
.cj-connected-flow .cj-scan-claim{display:block;width:100%;box-sizing:border-box;padding:8px 3px;border-radius:7px;background:linear-gradient(105deg,#53c7f5,#26a9e8 55%,#1887d5);color:#fff;font-size:9px;line-height:1.2;font-weight:600;text-align:center;box-shadow:0 3px 8px #1887d522}

/* Match Discover's right-facing perspective; keep the QR card centred between the brand and action. */
.cj-connected-flow .cj-scan-phone{transform:perspective(1400px) rotateY(13deg);transform-origin:30% 50%}
.cj-connected-flow .cj-scan-brand{display:block;width:52px;max-width:75%;height:auto;object-fit:contain;align-self:start;margin:5px 0 0}
.cj-connected-flow .cj-scan-claim{align-self:end}

/* Compact consumer profile: scoped so site navigation styles cannot enlarge its header. */
.cj-connected-flow .cj-captured-profile{width:190px;max-width:100%;box-sizing:border-box;padding:13px 12px;background:#fff;border:1px solid #e5edf6;border-radius:16px;box-shadow:0 9px 25px #14233a09;color:#15354e}
.cj-connected-flow .cj-captured-profile>header{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;gap:8px;height:28px;margin:0 0 12px;padding:0}
.cj-connected-flow .cj-profile-avatar{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;color:#168aff;background:radial-gradient(circle at 35% 30%,#e7faff,#cfebff);box-shadow:inset 0 0 0 3px #edf8ff}
.cj-connected-flow .cj-profile-avatar svg{width:16px;height:16px}
.cj-connected-flow .cj-captured-profile h4{font-size:11px;line-height:1.2;font-weight:600;letter-spacing:-.15px;margin:0;color:#15354e}
.cj-connected-flow .cj-captured-profile dl{display:grid;grid-template-columns:1fr;gap:6px;margin:0;padding:0}
.cj-connected-flow .cj-captured-profile dl>div{position:relative;min-width:0;background:linear-gradient(105deg,#f8fbff,#edf4fe);border:1px solid #e7effa;border-radius:20px;padding:6px 8px}
.cj-connected-flow .cj-captured-profile dt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.cj-connected-flow .cj-captured-profile dd{display:flex;align-items:center;gap:8px;font-size:10px;line-height:1.2;font-weight:400;margin:0;color:#15354e}
.cj-connected-flow .cj-captured-profile dd svg{display:block;width:15px;height:15px;flex-shrink:0;color:#168aff}

/* Share the neighbouring devices' right-facing angle with a restrained raised edge. */
.cj-connected-flow .cj-captured-profile{position:relative;transform:perspective(1400px) rotateY(13deg);transform-origin:30% 50%;box-shadow:-1px 0 0 #dce8f3,-3px 1px 0 #e3edf6,-5px 2px 0 #edf3f9,0 12px 24px #14233a14,0 3px 7px #14233a09;background:linear-gradient(110deg,#fff 65%,#fbfdff)}

/* One measured visible height, preserving each visual's individual proportions. */
.cj-connected-flow{--cj-visual-height:260px}
.cj-connected-flow .cj-ad-screen{height:var(--cj-visual-height);width:calc(var(--cj-visual-height) * 9 / 16)}
.cj-connected-flow .cj-ad-screen-bezel{height:100%;box-sizing:border-box}
.cj-connected-flow .cj-source-phone{height:var(--cj-visual-height);width:auto;aspect-ratio:430/874}
.cj-connected-flow .cj-angled-machine{height:var(--cj-visual-height);width:auto;aspect-ratio:494/690}
.cj-connected-flow .cj-captured-profile{height:var(--cj-visual-height);display:flex;flex-direction:column}
.cj-connected-flow .cj-captured-profile>header{flex-shrink:0}
.cj-connected-flow .cj-captured-profile dl{flex:1;min-height:0;grid-template-rows:repeat(6,minmax(0,1fr))}
.cj-connected-flow .cj-captured-profile dl>div{display:flex;align-items:center;padding:4px 8px}
.cj-connected-flow .cj-dispensed-product{display:block;height:var(--cj-visual-height);width:calc(var(--cj-visual-height) * 195 / 573);max-width:none;transform:none;overflow:visible}

/* Treat the person and sample as one centred product-experience visual. */
.cj-connected-flow .cj-dispense-visual{gap:16px}
.cj-connected-flow .cj-product-person{width:40px;height:40px;flex-shrink:0;box-shadow:inset 0 0 0 3px #edf8ff,0 5px 12px #168aff14}
.cj-connected-flow .cj-product-person svg{width:24px;height:24px}
.cj-connected-flow .cj-dispensed-product{flex-shrink:0}

/* Raised white profile tile beside the sample. */
.cj-connected-flow .cj-product-person{width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid #e8eef5;box-shadow:0 5px 14px #14233a14,0 1px 3px #14233a08;color:#168aff}

/* Live advert occupies only the original top media area of the angled UI. */
.cj-connected-flow .cj-angled-ui{overflow:hidden}
.cj-connected-flow .cj-machine-ui-image{display:block;width:100%;height:100%;max-width:none;object-fit:fill}
.cj-connected-flow .cj-machine-ad-video{position:absolute;left:0;top:0;width:100%;height:32.80543%;display:block;object-fit:cover;pointer-events:none}

/* Show the whole 1280×720 video, anchored to the same top-left screen position. */
.cj-connected-flow .cj-angled-ui{container-type:inline-size;background:#fff}
.cj-connected-flow .cj-machine-ad-video{height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center;background:#03111d}
.cj-connected-flow .cj-machine-ui-details{position:absolute;left:0;top:56.25cqw;width:100%;height:calc(100% - 56.25cqw);display:block;overflow:hidden}

/* A single quiet arrow passes behind each white journey icon badge. */
.cj-connected-flow .cj-flow-step::before,.cj-connected-flow .cj-flow-step::after{content:none!important;display:none!important}
.cj-connected-flow .cj-connector{position:absolute;top:150px;right:-12px;transform:translate(50%,-50%);width:80px;height:40px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.cj-connected-flow .cj-connector-arrow{position:absolute;inset:14px 0;width:100%;height:12px;fill:none;stroke:#9ed7f5;stroke-width:1;vector-effect:non-scaling-stroke}
.cj-connected-flow .cj-connector-badge{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 4px 16px #24466906;color:#169fff}
.cj-connected-flow .cj-connector-badge>svg{width:23px;height:23px}
.cj-connected-flow .cj-product-icon-space{width:40px;height:40px;flex-shrink:0}
@media(min-width:901px) and (max-width:1199px){.cj-connected-flow .cj-connector{right:-17px}.cj-connected-flow .cj-flow-step:nth-child(3)>.cj-connector{display:none}}
@media(min-width:551px) and (max-width:900px){.cj-connected-flow .cj-connector{right:-16px}.cj-connected-flow .cj-flow-step:nth-child(even)>.cj-connector{display:none}}
@media(max-width:550px){.cj-connected-flow .cj-connector{top:auto;bottom:-34px;right:50%;transform:translateX(50%);width:40px;height:30px}.cj-connected-flow .cj-connector-arrow{width:30px;height:12px;inset:9px 5px;transform:rotate(90deg)}.cj-connected-flow .cj-connector-badge{width:24px;height:24px}.cj-connected-flow .cj-connector-badge>svg{width:16px;height:16px}}

/* Horizontal offsets leave the established vertical rhythm and asset transforms intact. */
.cj-connected-flow .cj-flow-copy{position:relative}

/* Measured left is the gap midpoint: centre the connector on that coordinate. */
@media(min-width:551px){.cj-connected-flow .cj-connector{transform:translate(-50%,-50%)}}

/* Captions occupy the five equal stage columns, with shared left edges and gaps. */
.cj-connected-flow .cj-flow-copy{left:0;min-width:0;text-align:left;box-sizing:border-box}
.cj-connected-flow .cj-flow-copy h3{box-sizing:border-box}
@media(min-width:551px){.cj-connected-flow .cj-flow-copy{width:100%;max-width:none;margin-left:0;margin-right:0}}

/* Cover the original cyan screen edge while preserving the fitted perspective. */
.cj-connected-flow .cj-angled-ui{left:37.55%;width:45.05%;height:69%}