/* Two launch-experience routes. Typography and an open sequence, not vendor cards. */
body[data-ux-review] .ux-compatibility.ux-connection-paths{display:block;padding-top:90px;padding-bottom:65px}
.ux-connection-paths .ux-integration-intro{text-align:center;max-width:860px;margin:0 auto 46px}
body[data-ux-review] .ux-connection-paths .ux-integration-intro h2{max-width:820px;margin:0 auto 20px;font-size:clamp(34px,4.3vw,55px);text-wrap:balance}
body[data-ux-review] .ux-connection-paths .ux-section-intro{max-width:680px;margin:0 auto;font-size:18px}
.ux-connection-routes{display:grid;grid-template-columns:1fr 1fr;gap:70px;position:relative}
.ux-connection-routes:after{content:"";position:absolute;left:50%;top:4px;bottom:5px;width:1px;background:linear-gradient(transparent,#acb7d448,transparent)}
.ux-connection-route{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.ux-connection-route .ux-route-index{font-size:13px;letter-spacing:.09em;color:#bc9fe0;margin:0 0 16px}
.ux-connection-route:nth-child(2) .ux-route-index{color:#95d4e1}
.ux-connection-route h3{font-size:clamp(26px,2.7vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.15;margin:0 0 18px;max-width:450px;text-wrap:balance}
.ux-connection-route>p:not(.ux-route-index){font-size:16px;line-height:1.65;color:#c7c3d4;margin:0;max-width:47ch}
.ux-route-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;padding:20px 0 0;margin:26px 0 27px;counter-reset:connection-step;border-top:1px solid #b0a0db4d}
.ux-route-steps li{font-size:14px;line-height:1.45;color:#e0d9eb;position:relative;min-width:0}
.ux-route-steps li:before{counter-increment:connection-step;content:counter(connection-step);display:block;font-size:12px;color:#b69cd5;margin-bottom:9px}
.ux-connection-route:nth-child(2) .ux-route-steps{border-color:#92c4d54d}
.ux-connection-route:nth-child(2) .ux-route-steps li:before{color:#91cddc}
body[data-ux-review] .ux-connection-route>.button{margin-top:auto;min-height:48px;font-size:14px;background:linear-gradient(110deg,#1e182b,#101b27);border-color:#ad9bc76b;padding:13px 22px;box-shadow:inset 0 1px 0 #ecddff14}
.ux-connection-brands{margin:52px 0 0;padding:29px 0;border-top:1px solid #9facbf2e;border-bottom:1px solid #9facbf2e}
.ux-brand-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;align-items:center}
.ux-brand-strip .ux-brand-name{display:flex;align-items:center;justify-content:center;gap:13px;min-width:0;color:#e7e3ef;font-size:17px;font-weight:500;letter-spacing:-.02em}
.ux-brand-strip img{display:block;width:32px;height:32px;object-fit:contain;object-position:center;filter:none;opacity:1;mix-blend-mode:normal;flex:none}
.ux-brand-strip img[src$="chatgpt-official.svg"]{color-scheme:dark}
body[data-ux-review] .ux-connection-paths>.ux-connection-details{margin-top:23px;padding-top:0;border:0}
body[data-ux-review] .ux-connection-paths>.ux-connection-details summary{font-size:14px;min-height:44px;display:flex;align-items:center}
body[data-ux-review] .ux-connection-paths>.ux-connection-details p{max-width:82ch;font-size:15px;line-height:1.7;color:#c8c3d4}
@media(max-width:900px){.ux-connection-routes{gap:42px}.ux-brand-strip{gap:16px}.ux-brand-strip .ux-brand-name{font-size:15px;gap:9px}}
@media(max-width:760px){body[data-ux-review] .ux-compatibility.ux-connection-paths{padding-top:55px;padding-bottom:45px}.ux-connection-paths .ux-integration-intro{margin-bottom:32px}body[data-ux-review] .ux-connection-paths .ux-integration-intro h2{font-size:34px}body[data-ux-review] .ux-connection-paths .ux-section-intro{font-size:16px}.ux-connection-routes{grid-template-columns:1fr;gap:37px}.ux-connection-routes:after{content:none}.ux-connection-route+.ux-connection-route{padding-top:30px;border-top:1px solid #9facbf2e}.ux-connection-route h3{font-size:29px;max-width:none}.ux-connection-route>p:not(.ux-route-index){max-width:none}.ux-route-steps{gap:12px;margin:20px 0 23px;padding-top:15px}.ux-route-steps li{font-size:13px}.ux-connection-brands{margin-top:35px;padding:23px 0}.ux-brand-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}.ux-brand-strip .ux-brand-name{justify-content:flex-start;font-size:16px}.ux-brand-strip img{width:28px;height:28px}}

@media(max-width:760px){.ux-brand-strip .ux-brand-name:last-child{grid-column:1 / -1;justify-content:center}}

/* Shared intrinsic rows keep both step sequences aligned across languages. */
@media(min-width:761px){
 @supports(grid-template-rows:subgrid){
  .ux-connection-routes{grid-template-rows:repeat(5,auto);column-gap:70px;row-gap:0}
  .ux-connection-route{display:grid;grid-template-rows:subgrid;grid-row:1 / span 5;row-gap:0;align-items:start;justify-items:start}
  .ux-connection-route:first-child{grid-column:1}.ux-connection-route:nth-child(2){grid-column:2}
  .ux-connection-route>.ux-route-steps{align-self:start}
  body[data-ux-review] .ux-connection-route>.button{margin-top:0;align-self:start}
 }
}
@media(min-width:761px) and (max-width:900px){.ux-connection-routes{column-gap:42px}}

/* One alignment system for all five provider marks on narrow screens. */
@media(max-width:760px){
 .ux-brand-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;align-items:stretch}
 .ux-brand-strip .ux-brand-name,.ux-brand-strip .ux-brand-name:last-child{display:grid;grid-template-columns:32px minmax(0,1fr);grid-column:auto;align-items:center;justify-content:normal;gap:10px;min-height:44px;line-height:1.25}
 .ux-brand-strip .ux-brand-name>img{width:28px;height:28px;justify-self:center;object-fit:contain;object-position:center}
 .ux-brand-strip .ux-brand-name>span{min-width:0;align-self:center}
}
@media(max-width:380px){.ux-brand-strip{column-gap:14px}.ux-brand-strip .ux-brand-name,.ux-brand-strip .ux-brand-name:last-child{grid-template-columns:28px minmax(0,1fr);font-size:14px;gap:8px}}
