/* Provider registration introduction: decorative motion does not intercept input. */
:root[data-theme=light] body #app .provider-join{width:min(100% - 32px,1040px);margin:clamp(20px,4vw,48px) auto;display:grid;gap:20px}
:root[data-theme=light] body #app .provider-join-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,38%);align-items:center;min-height:260px;padding:clamp(24px,4vw,42px);border:1px solid #e8e9f1;border-radius:24px;background:linear-gradient(120deg,#eaf2ff,#fff 72%);box-shadow:0 10px 30px #1f20240d}
:root[data-theme=light] body #app .provider-join-copy{z-index:1;min-width:0}
:root[data-theme=light] body #app .provider-join-copy>span{color:#0056c8;font-size:13px;font-weight:700}
:root[data-theme=light] body #app .provider-join-copy h1{font-size:clamp(22px,3vw,34px);line-height:1.6;margin:12px 0;color:#1f2024}
:root[data-theme=light] body #app .provider-join-copy p{margin:0;color:#494a50;line-height:1.9}
:root[data-theme=light] body #app .provider-join-art{position:relative;display:grid;place-items:center;width:min(100%,240px);aspect-ratio:1;justify-self:center;pointer-events:none}
:root[data-theme=light] body #app .join-orbit{position:absolute;inset:8%;border:1px dashed #6fbaff;border-radius:50%;animation:join-spin 18s linear infinite}
:root[data-theme=light] body #app .join-orbit-two{inset:22%;border-style:solid;animation-direction:reverse;animation-duration:13s}
:root[data-theme=light] body #app .join-center,:root[data-theme=light] body #app .join-icon{display:grid;place-items:center;background:#fff;border:1px solid #b4dbff;box-shadow:0 8px 24px #006ffd1a}
:root[data-theme=light] body #app .join-center{width:86px;height:86px;border-radius:50%}
:root[data-theme=light] body #app .join-center img{width:54px;height:54px}
:root[data-theme=light] body #app .join-icon{position:absolute;width:46px;height:46px;border-radius:14px;animation:join-float 4s ease-in-out infinite alternate}
:root[data-theme=light] body #app .join-icon img{width:26px;height:26px}
:root[data-theme=light] body #app .join-repair{top:4%;inset-inline-start:18%}
:root[data-theme=light] body #app .join-map{bottom:12%;inset-inline-start:4%;animation-delay:-1s}
:root[data-theme=light] body #app .join-shield{top:35%;inset-inline-end:3%;animation-delay:-2s}
:root[data-theme=light] body #app .provider-join .provider-join-form{width:100%;max-width:none;margin:0}
@keyframes join-spin{to{transform:rotate(360deg)}}
@keyframes join-float{from{transform:translateY(-4px)}to{transform:translateY(4px)}}
@media(max-width:600px){:root[data-theme=light] body #app .provider-join-hero{grid-template-columns:1fr;gap:10px;padding:24px;min-height:0}:root[data-theme=light] body #app .provider-join-art{width:min(190px,70%)}:root[data-theme=light] body #app .provider-join-copy h1{font-size:22px}}
@media(prefers-reduced-motion:reduce){:root[data-theme=light] body #app .provider-join-art *{animation:none!important}}
/* A service network illustrates how a professional connects to riders. */
:root[data-theme=light] body #app .provider-network{position:relative;direction:ltr;width:min(100%,360px);aspect-ratio:12/7;justify-self:center;pointer-events:none}
:root[data-theme=light] body #app .network-lines{position:absolute;inset:0;width:100%;height:100%;stroke:#b4dbff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme=light] body #app .network-flow{stroke:#006ffd;stroke-width:3;stroke-dasharray:8 10;animation:network-flow 3s linear infinite}
:root[data-theme=light] body #app .network-node,:root[data-theme=light] body #app .network-hub{position:absolute;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 9px;border:1px solid #b4dbff;border-radius:14px;background:#fff;color:#0056c8;box-shadow:0 8px 24px #006ffd1a;font-size:11px;white-space:nowrap;direction:rtl}
:root[data-theme=light] body #app .network-node img{width:21px;height:21px}
:root[data-theme=light] body #app .network-hub{left:50%;top:50%;transform:translate(-50%,-50%);flex-direction:column;width:74px;height:74px;border-radius:22px;background:#eaf2ff;border-color:#6fbaff}
:root[data-theme=light] body #app .network-hub img{width:35px;height:35px}
:root[data-theme=light] body #app .node-a{left:1%;top:15%;animation:network-bob 4s ease-in-out infinite alternate}
:root[data-theme=light] body #app .node-b{right:1%;top:15%;animation:network-bob 4s -1s ease-in-out infinite alternate}
:root[data-theme=light] body #app .node-c{left:1%;bottom:15%;animation:network-bob 4s -2s ease-in-out infinite alternate}
:root[data-theme=light] body #app .node-d{right:1%;bottom:15%;animation:network-bob 4s -3s ease-in-out infinite alternate}
@keyframes network-flow{to{stroke-dashoffset:-36}}
@keyframes network-bob{to{transform:translateY(-5px)}}
@media(max-width:600px){:root[data-theme=light] body #app .provider-network{width:min(100%,310px);margin:4px auto 0}}
@media(prefers-reduced-motion:reduce){:root[data-theme=light] body #app .provider-network *{animation:none!important}}
