/* Materials and light derived from the protected desktop/mobile concepts.
   Geometry, artwork files, form fields and transaction code are untouched. */
:root{--glass-blue:#29baff;--glass-ice:#c5f3ff;--flow-amber:#ffbd53;--deep-glass:#01101e}
.glass{background:radial-gradient(ellipse at 22% 0%,#155a8240,transparent 44%),radial-gradient(ellipse at 100% 100%,#003c6850,transparent 44%),linear-gradient(145deg,#08283d9e 0%,#020c19e8 37%,#010a16ee 65%,#062138e0 100%);border-color:#5ac7ffb8;box-shadow:inset 0 1px 1px #dcfaffb0,inset 1px 0 2px #68d3ff45,inset 0 -2px 3px #03a7ffba,inset -1px 0 3px #0285c962,0 0 1px #a0e9ff,0 0 14px #007cba38,0 15px 35px #000a;backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
.glass:before{height:3px;left:7%;right:29%;background:linear-gradient(90deg,transparent,#1675bc44,#49cfff,#efffff,#40bfff,transparent);box-shadow:0 0 5px #62dfff,0 0 17px #00aaff88;opacity:.95}
.glass:after{height:3px;left:23%;right:3%;background:linear-gradient(90deg,transparent,#0589d177,#8fefff,#0abfff,transparent);box-shadow:0 0 6px #31caff,0 0 19px #008dff77;opacity:.8}
.registration{background:radial-gradient(ellipse at 0% 4%,#14547e38,transparent 38%),linear-gradient(136deg,#072238c9,#020d1ae8 45%,#020b17eb 72%,#04223bd9)}
.category-card,.category{background:linear-gradient(154deg,#1a6b9e45 0%,#06457328 16%,#020e1fdd 48%,#031123ec 80%,#05395b80);box-shadow:inset 0 1px 2px #bbf0ff8c,inset 1px 0 1px #2e9bcd70,inset 0 -2px 3px #006dacc0,0 5px 9px #0008,0 0 8px #0072ac20;border-color:#298fbd}
.category-card>svg,.category .icon{filter:drop-shadow(.5px 1.5px 0 #002e56) drop-shadow(0 0 4px #00b1ff9c)}
.category-selected,.category[aria-expanded=true]{background:radial-gradient(ellipse at 12% 5%,#b9852629,transparent 60%),linear-gradient(155deg,#16384a90,#031120ee 53%,#1a251ee0);box-shadow:inset 0 1px 2px #fff1bf,inset 0 0 5px #eab960ba,0 0 4px #ffd076,0 0 15px #ffb13e66,0 7px 12px #0009;border-color:#ffe3a5}
.category-selected>svg{filter:drop-shadow(1px 1px 0 #755117) drop-shadow(0 0 5px #ffba46aa)}
.viewer{isolation:isolate;background:radial-gradient(ellipse at 48% 35%,#07345622,transparent 65%),radial-gradient(ellipse at 14% 0%,#16547d38,transparent 42%),linear-gradient(140deg,#05273ca0,#010c19e8 46%,#020f21ed 80%,#033457b8)}
.viewer .stage-window{perspective:1100px;overflow:visible;isolation:isolate}
.viewer .scene-plane{transform-style:preserve-3d;overflow:visible}
.workflow-card{position:absolute!important;overflow:hidden;will-change:left,top,width,height,transform;transition:left 850ms cubic-bezier(.2,.7,.16,1),right 850ms cubic-bezier(.2,.7,.16,1),top 850ms cubic-bezier(.2,.7,.16,1),width 850ms cubic-bezier(.2,.7,.16,1),height 850ms cubic-bezier(.2,.7,.16,1),transform 850ms cubic-bezier(.2,.7,.16,1),opacity 650ms,filter 750ms;border:1px solid #a6e7ff;border-radius:13px;transform-origin:center center;background:linear-gradient(133deg,#146a9a70 0%,#063351c7 12%,#041b30d6 42%,#031529d6 78%,#094872b8);box-shadow:inset 0 2px 2px #e5faffd0,inset 1px 0 2px #84ddff7a,inset -1px 0 3px #09a6e18c,inset 0 -3px 4px #00aeffff,0 0 2px #a2e6ff,0 0 11px #0085c77a,0 18px 22px #000c;backdrop-filter:blur(15px) saturate(1.25);-webkit-backdrop-filter:blur(15px) saturate(1.25)}
.workflow-card:before{content:'';position:absolute;inset:0;background:linear-gradient(151deg,#ebfbff28,transparent 20%,#4cb6f60a 42%,transparent 47%,#06182a0d 64%,#0004 87%,#18bfff21);border-radius:inherit;pointer-events:none;z-index:8}
.workflow-card:after{height:3px;left:2%;right:2%;background:linear-gradient(90deg,#ffd48000 0%,#ffbb5b80 16%,#29ceff 45%,#bbfaff 68%,#009cff 88%,transparent);box-shadow:0 0 5px #47ceff,0 0 14px #007cffb0;opacity:1}
.workflow-card h3{position:relative;display:flex;align-items:center;gap:8px;min-height:40px;background:linear-gradient(175deg,#3f95cc64,#0e487a5e 42%,#03182cad);box-shadow:inset 0 1px 2px #d6f9ff9c,0 1px 0 #46bdff4d;padding:10px 12px;font-size:20px;white-space:nowrap;border-bottom:1px solid #62b5d33d}
.workflow-card h3 .icon{width:24px;height:24px;stroke:#d7f7ff;filter:drop-shadow(0 0 3px #00b6ff77)}
.workflow-card.position-focus{left:24%;top:0;width:52%;height:99%;z-index:5;transform:translateZ(55px) rotateY(-7deg) rotateZ(.4deg);filter:brightness(1.06);opacity:1}
.workflow-card.position-previous{left:0;top:11%;width:29%;height:79%;z-index:3;transform:translateZ(-28px) rotateY(15deg) rotateZ(-1.4deg);opacity:.96}
.workflow-card.position-next{left:72%;top:16%;width:22%;height:72%;z-index:2;transform:translateZ(-47px) rotateY(-17deg) rotateZ(-1.3deg);opacity:.95}
.workflow-card.position-far{left:85%;top:23%;width:17%;height:64%;z-index:1;transform:translateZ(-78px) rotateY(-22deg) rotateZ(-.5deg);opacity:.9}
.workflow-card.position-history{left:-3%;top:23%;width:20%;height:65%;z-index:1;transform:translateZ(-78px) rotateY(20deg) rotateZ(-2deg);opacity:.75}
.workflow-card.entering{opacity:1}
@media(max-width:850px){.workflow-card:not(.position-focus) h3{font-size:12px;min-height:34px;padding:8px 7px;gap:5px}.workflow-card:not(.position-focus) h3 .icon{width:17px;height:17px}}
.workflow-card .booking-record{position:relative;isolation:isolate}
.workflow-card .record-glow{background:linear-gradient(135deg,#b86b242e,#122536b0 60%,#b9762530);border-color:#ffe0a0;box-shadow:inset 0 0 2px #fff0bc,0 0 4px #ffc76d,0 0 12px #ffb34570;color:#fff4d6}
.workflow-card.flow-arrival .booking-record{animation:record-receives-light 850ms ease-out both}
.workflow-card.flow-arrival{animation:glass-receives-light 1050ms ease-out}
.workflow-card .booking-record.flow-departing{animation:record-sends-light 550ms ease-out both}
.booking-data-flow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:12;pointer-events:none;transform:translateZ(100px)}
.booking-data-flow[hidden]{display:none}.booking-data-flow .flow-tail{stroke-linecap:round}
.booking-data-flow .flow-tail-halo{stroke:#ffb44f;stroke-width:6;filter:drop-shadow(0 0 5px #ffb347);opacity:.3}
.booking-data-flow .flow-tail-core{stroke:#ffd991;stroke-width:1.5;filter:drop-shadow(0 0 2px #ffbb56)}
.booking-data-flow .flow-head{fill:#fff0c2;stroke:#ffd080;stroke-width:.6;filter:drop-shadow(0 0 3px #ffb84a) drop-shadow(0 0 7px #ff9d37)}
.workflow-card .mini-app-body{position:relative;z-index:1}.workflow-card .mini-data-flow{font-size:8px;background:#04172c8c;border-top:1px solid #39a9d047;color:#b9d9ed}
@media(max-width:850px){.workflow-card:not(.position-focus) .mini-app-body{padding:0 7px 6px}.workflow-card:not(.position-focus) .mini-tabs{font-size:7px;gap:3px;padding:6px 0}.workflow-card:not(.position-focus) .mini-tabs span{padding:3px}}
@media(max-width:850px){.workflow-card:not(.position-focus) .mini-customer strong{font-size:10px}.workflow-card:not(.position-focus) .mini-customer small{font-size:7px}.workflow-card:not(.position-focus) .mini-note{padding:7px 5px;margin:7px 0}.workflow-card:not(.position-focus) .mini-note strong{font-size:9px}.workflow-card:not(.position-focus) .mini-note span{font-size:8px}.workflow-card:not(.position-focus) .mini-note small{font-size:6px}.workflow-card:not(.position-focus) .mini-row{font-size:8px;gap:4px;min-height:27px;padding:5px 3px}.workflow-card:not(.position-focus) .mini-table>div{font-size:7px;padding:8px 3px;gap:3px}.workflow-card:not(.position-focus) .mini-table>div:first-child{font-size:6px}.workflow-card:not(.position-focus) .mini-badge{font-size:6px;padding:4px}.workflow-card:not(.position-focus) .mini-footer{font-size:6px}.workflow-card:not(.position-focus) .mini-checklist{font-size:8px;line-height:1.8}.workflow-card:not(.position-focus) .mini-avatar{width:24px;height:24px;font-size:10px}.workflow-card:not(.position-focus) .mini-contact strong{font-size:10px}.workflow-card:not(.position-focus) .mini-contact small{font-size:7px}.workflow-card:not(.position-focus) .mini-data-flow{font-size:6px;line-height:1.5;padding:5px}.workflow-card:not(.position-focus) .mini-date{font-size:9px;padding:6px 0}.workflow-card:not(.position-focus) .appointment-line{min-height:48px;font-size:8px}.workflow-card:not(.position-focus) .appointment-line>span{width:23px}.workflow-card:not(.position-focus) .mini-stats{grid-template-columns:1fr;gap:5px}.workflow-card:not(.position-focus) .mini-stats strong{font-size:17px}.workflow-card:not(.position-focus) .message-draft{font-size:8px;line-height:1.45;padding:5px}}
.viewer .scene-caption{font-size:20px;line-height:1.3;min-height:52px;margin:15px -10px 8px}.viewer .stage-strip{background:linear-gradient(160deg,#07324b9c,#020e1ef0 55%,#062b44c7);box-shadow:inset 0 1px 2px #6ed4ff45,0 4px 9px #0006}
.arlo .fine{font-size:10px;line-height:1.4;color:#a9c7dc;margin:10px 0}.arlo .arlo-introduction{color:#eef6ff}.brand img{mix-blend-mode:screen}
@keyframes record-receives-light{0%{filter:brightness(1);box-shadow:0 0 3px #ffc66655}25%{filter:brightness(1.28);box-shadow:inset 0 0 5px #ffe2a7,0 0 15px #ffba5885}100%{filter:brightness(1);box-shadow:inset 0 0 2px #fff0bc,0 0 5px #ffc76d,0 0 12px #ffb34570}}
@keyframes record-sends-light{30%{filter:brightness(1.2);box-shadow:0 0 12px #ffc16e9c}100%{filter:brightness(1)}}
@keyframes glass-receives-light{0%,100%{filter:brightness(1.02)}30%{filter:brightness(1.13)}}
@media(max-width:1250px) and (min-width:851px){.workflow-card h3{font-size:16px;padding:9px}.workflow-card h3 .icon{width:20px}.viewer .scene-caption{font-size:15px;min-height:45px}}
@media(max-width:850px){.arlo{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;column-gap:15px}.arlo .arlo-companion{grid-column:1;grid-row:1/5;width:140px}.arlo h1{grid-column:2;text-align:left;font-size:28px;margin:0 0 7px;white-space:normal}.arlo .arlo-introduction{grid-column:2;text-align:left;font-size:15px;line-height:1.35}.arlo-controls{grid-column:2;justify-content:flex-start;margin-top:9px}.arlo #voice-status{grid-column:1/-1;margin:8px 0 0;text-align:center;font-size:10px}.arlo .embedded-film{grid-column:2}.viewer .stage-window{aspect-ratio:1.5;margin-top:20px}.workflow-card.position-focus{height:100%;transform:translateZ(20px) rotateY(-7deg) rotateZ(.4deg)}.workflow-card.position-next{left:71%;width:22%}.workflow-card.position-far{left:86%;width:18%}.workflow-card h3{font-size:14px;min-height:32px;padding:8px;gap:5px}.workflow-card h3 .icon{width:18px;height:18px}.workflow-card:not(.position-focus) h3{font-size:8px;padding:7px 4px;min-height:26px;gap:3px}.workflow-card:not(.position-focus) h3 .icon{width:12px;height:12px}.workflow-card:not(.position-focus) .mini-app-body{padding:0 4px 4px}.workflow-card:not(.position-focus) .mini-tabs{font-size:5px;gap:1px}.workflow-card:not(.position-focus) .mini-tabs span{padding:2px}.workflow-card:not(.position-focus) .mini-customer strong{font-size:7px}.workflow-card:not(.position-focus) .mini-customer small{font-size:5px}.workflow-card:not(.position-focus) .mini-note{padding:5px 3px}.workflow-card:not(.position-focus) .mini-note strong{font-size:7px}.workflow-card:not(.position-focus) .mini-note span{font-size:6px}.workflow-card:not(.position-focus) .mini-note small{font-size:5px;letter-spacing:0}.workflow-card:not(.position-focus) .mini-row{font-size:6px;gap:3px;min-height:23px}.workflow-card:not(.position-focus) .mini-table>div{font-size:5px;gap:2px;padding:6px 2px}.workflow-card:not(.position-focus) .mini-table>div:first-child{font-size:5px}.workflow-card:not(.position-focus) .mini-badge{font-size:5px;padding:3px}.workflow-card:not(.position-focus) .mini-footer{font-size:5px}.workflow-card:not(.position-focus) .mini-checklist{font-size:6px}.workflow-card:not(.position-focus) .mini-data-flow{font-size:5px;padding:4px;line-height:1.35}.workflow-card:not(.position-focus) .appointment-line{font-size:6px;gap:3px;min-height:35px}.workflow-card:not(.position-focus) .appointment-line>span{width:18px}.workflow-card:not(.position-focus) .mini-date{font-size:6px}.workflow-card:not(.position-focus) .message-draft{font-size:6px;padding:3px}.viewer .scene-caption{font-size:15px;min-height:45px;margin:13px 0 7px}.stage-item{min-width:0}.stage-item .icon{flex-shrink:0}.stage-item{font-size:10px;gap:4px}.stage-strip{overflow:hidden}.category-card{grid-template-columns:34px 1fr;gap:6px;min-height:92px}.category-copy strong{font-size:12px}.category-copy small{font-size:10px}.category-card>svg{width:30px;height:34px}}
@media(min-width:361px) and (max-width:420px){.category-cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.category-card{padding:9px 7px 13px;grid-template-columns:28px 1fr;gap:5px;min-height:100px}.category-copy strong{font-size:11px}.category-copy small{font-size:9px}.category-card>svg{width:26px;height:30px}.arlo{grid-template-columns:120px minmax(0,1fr);gap:10px}.arlo .arlo-companion{width:120px}.arlo h1{font-size:25px}.arlo .arlo-introduction{font-size:13px}.stage-item{font-size:8px;gap:3px;padding:4px 3px}.stage-item .icon{width:12px;height:12px}.stage-divider{font-size:12px}.solution-details{flex-direction:row}.solution-detail-symbol{height:auto;width:25%}.solution-detail-content h3{font-size:10px}.module-chip{font-size:8px}}
@media(max-width:360px){.arlo{grid-template-columns:105px minmax(0,1fr);gap:9px}.arlo .arlo-companion{width:105px}.arlo h1{font-size:23px}.arlo .arlo-introduction{font-size:12px}.stage-item{font-size:8px;padding:3px;gap:2px}.stage-item .icon{width:11px;height:11px}.stage-divider{font-size:10px}}
@media(prefers-reduced-motion:reduce){.workflow-card{transition:none!important}.booking-data-flow{display:none!important}.flow-arrival,.flow-departing{animation:none!important}}

.workflow-card.position-focus{overflow-y:auto;scrollbar-width:none}.workflow-card.position-focus::-webkit-scrollbar{display:none}.stage-window:after{content:"";position:absolute;left:6%;right:0;bottom:-5%;height:9%;background:radial-gradient(ellipse at 52% 50%,#36b8ff29,transparent 68%);filter:blur(8px);pointer-events:none;z-index:0}

/* Shader materials replace the uniform luminous outlines. Controls remain DOM. */
.glass-material{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;border-radius:inherit}
.viewer[data-material=shader]{background:transparent}.viewer[data-material=shader]>.viewer-header,.viewer[data-material=shader]>.viewer-intro,.viewer[data-material=shader]>.stage-window,.viewer[data-material=shader]>.scene-caption,.viewer[data-material=shader]>.stage-strip{position:relative;z-index:1}
.workflow-card[data-material=shader]{background:transparent;border-color:#36acdf75;box-shadow:0 16px 22px #000c,0 3px 5px #0097d275,0 -1px 5px #0079c135;backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px)}
.workflow-card[data-material=shader]:before,.workflow-card[data-material=shader]:after{display:none}
.workflow-card[data-material=shader]>*:not(canvas){position:relative;z-index:1}
.workflow-card h3{background:linear-gradient(176deg,#0c65875c,#06324e38 49%,#01152880);box-shadow:inset 0 1px 1px #5ad8ff33,0 1px 0 #20a6d538;border-bottom-color:#168bb34d}
.workflow-card.position-focus{transform:translateZ(42px) rotateY(-7deg) rotateZ(2.8deg);filter:none}
.workflow-card.position-previous{transform:translateZ(-28px) rotateY(15deg) rotateZ(1.2deg)}
.workflow-card .record-glow{border-color:#ffd17b;box-shadow:inset 0 1px 1px #fff0bf83,0 0 3px #ffc76d75,0 0 9px #ffb34545}
.glass{border-color:#2094c68c;box-shadow:inset 0 1px 1px #b8edff50,inset 1px 0 1px #1d8abb35,inset 0 -1px 2px #08a9d67a,0 14px 30px #0009,0 0 10px #0086c51f}
.glass:before,.glass:after{height:1px;box-shadow:0 0 4px #33ceff88,0 0 13px #008cff55}
.category-card,.category{box-shadow:inset 0 1px 1px #7fdfff60,inset 1px 0 1px #1672a12e,inset 0 -1px 2px #006daca0,0 5px 9px #0008;border-color:#1689b38c}
.category-card.category-selected{border-color:#ffd17d;box-shadow:inset 0 1px 2px #fff1bfaa,inset 0 0 3px #eab96080,0 0 4px #ffd07699,0 0 12px #ffb13e3d,0 7px 12px #0009}
.luminous-transfer{position:absolute;inset:0;width:100%;height:100%;z-index:12;pointer-events:none;transform:translateZ(100px)}
.booking-data-flow.geometry-only{opacity:0}
@media(prefers-reduced-motion:reduce){.luminous-transfer{display:none}}
@media(max-width:850px){.workflow-card.position-focus{transform:translateZ(20px) rotateY(-7deg) rotateZ(2.8deg)}}

.workflow-card[data-material=shader]{border-color:transparent}
@media(max-width:850px){
 .sky{background-size:100% auto;background-position:center top}
 .brand{height:58px;padding:7px 14px}.brand img{width:145px;height:48px}
 .composition{gap:18px;padding:0 14px 45px}
 .arlo{grid-template-columns:100px minmax(0,1fr);width:min(100%,500px);gap:6px 12px;margin:0 auto}
 .arlo .arlo-companion{width:100px}.arlo h1{font-size:24px;margin:0;line-height:1.15}.arlo .arlo-introduction{font-size:13px;line-height:1.35}
 .arlo-controls{gap:7px;margin:2px 0}.arlo-controls button{width:25px;height:25px;font-size:14px}.arlo #voice-status{font-size:9px;line-height:1.25;margin:3px 0}.arlo .embedded-film{font-size:9px}
 .viewer{padding:14px 12px 15px}.viewer-header h2{font-size:23px;line-height:1.1}.example-badge{font-size:10px;padding:5px 8px}.viewer-intro{font-size:11px;line-height:1.35;margin-top:9px}
 .viewer .stage-window{aspect-ratio:2.2;margin-top:14px}.viewer .scene-caption{font-size:12px;min-height:30px;margin:12px 0 7px}.viewer .stage-strip{min-height:34px;padding:5px 7px}
 .workflow-card.position-focus{left:25%;width:49%}.workflow-card.position-previous{width:30%}.workflow-card.position-next{left:73%;width:20%}.workflow-card.position-far{left:88%;width:15%}
 .workflow-card h3{font-size:11px;min-height:25px;padding:5px 7px}.workflow-card h3 .icon{width:15px;height:15px}.workflow-card:not(.position-focus) h3{font-size:7px;min-height:21px;padding:5px 3px}
 .registration{padding:16px 13px}.registration #registration-title{font-size:24px;line-height:1.1}.registration .category-card{min-height:76px;padding:9px 6px 12px;grid-template-columns:28px minmax(0,1fr);gap:6px}.registration .category-copy strong{font-size:11px;line-height:1.15}.registration .category-copy small{font-size:9px;line-height:1.2}.registration .category-card>svg{width:27px;height:31px}
}
.comparison.mobile>section{margin-top:0!important;margin-bottom:0!important}