/* Consumer entry: the registration is the focal point, not a form card. */
html.rrn-access-open{overflow:hidden}
.consumer-experience .access-screen.consumer-access{background:#0c2448;color:#f6f3ee;padding:0 28px 30px;isolation:isolate;min-height:100dvh}
.consumer-access:before,.consumer-access:after{content:'';position:fixed;pointer-events:none;z-index:-1;transform:rotate(32deg);border-radius:240px}
.consumer-access:before{height:90vh;width:220px;background:#17345b66;left:-210px;top:-140px}
.consumer-access:after{height:70vh;width:220px;border:1px solid #1cc47826;right:-180px;bottom:-110px}
.consumer-access .access-preview-bar{border-color:#ffffff12;color:#8da4bf;min-height:43px;max-width:1056px}
.consumer-access .access-preview-bar button{color:#b4c9df;min-height:40px}
.consumer-access .access-logo{width:176px;height:43px;object-fit:contain;margin:32px auto 0}
.consumer-access .access-card{border:0;border-radius:0;background:none;box-shadow:none;padding:0;max-width:390px;margin:clamp(43px,8vh,85px) auto 0;animation:rrn-entry-arrive .65s cubic-bezier(.2,.8,.2,1) both;text-align:center}
.consumer-access .access-kicker{display:flex;align-items:center;justify-content:center;gap:9px;font:650 9px/1.4 RedHat,sans-serif;letter-spacing:1.8px;color:#adc1d7;margin:0 0 19px}
.consumer-access .access-kicker i{width:6px;height:6px;background:#1cc478;border-radius:50%;box-shadow:0 0 0 5px #1cc47812}
.consumer-access .access-card h1{font:750 clamp(39px,8.6vw,54px)/1.07 RedHat,sans-serif;letter-spacing:-1.8px;color:#f6f3ee;max-width:none}
.consumer-access .access-card h1 em{font-style:normal;color:#1cc478}
.consumer-access .access-card>p{font:400 14px/1.7 Raleway,sans-serif;color:#afc4db;margin-top:20px}
.consumer-access .consumer-access-form{margin-top:35px}
.consumer-access .access-card label{font:650 9px/1.4 RedHat,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:#afc4db;margin:0 0 13px;text-align:center}
.access-plate{display:flex;align-items:stretch;overflow:hidden;width:min(100%,340px);height:84px;margin:auto;border:3px solid #09182c;border-radius:11px;background:#f7d117;box-shadow:0 0 0 1px #7690ae44,0 16px 30px #0002,inset 0 0 0 2px #ffffff3b;transition:box-shadow .2s,transform .2s}
.access-plate:focus-within{box-shadow:0 0 0 3px #1cc47880,0 18px 35px #0003;transform:translateY(-2px)}
.access-plate-band{width:39px;flex:none;background:#003399;color:#fff;font:700 12px Arial,sans-serif;display:flex;align-items:flex-end;justify-content:center;padding-bottom:13px;border-right:2px solid #0c24481c}
.consumer-access .registration-input{flex:1;min-width:0;width:100%;border:0;outline:0!important;border-radius:0;box-shadow:none!important;background:none;color:#1a1a1a;text-align:center;font:750 clamp(29px,7vw,38px)/1 ui-monospace,'Segoe UI Mono',Consolas,monospace;letter-spacing:2px;padding:12px 8px;min-height:0;caret-color:#1a1a1a}
.consumer-access .registration-input::placeholder{color:#817124;opacity:.62;font-size:.83em;letter-spacing:2px}
.consumer-access .access-continue{display:flex;justify-content:space-between;align-items:center;width:min(100%,340px);min-height:56px;margin:24px auto 0;border:0;border-radius:16px;background:#1cc478;color:#0c2448;padding:0 22px;font:750 15px RedHat,sans-serif;box-shadow:0 8px 25px #0001;transition:transform .2s,background .2s}
.consumer-access .access-continue>span:last-child{font-size:23px}.consumer-access .access-continue:hover{background:#45d394;transform:translateY(-2px)}
.consumer-access .access-help{color:#b4c9df;font-size:11px;margin-top:24px;min-height:35px;text-decoration-color:#536b89;text-underline-offset:5px}
.consumer-access .entry-error{color:#ffb5a8;max-width:330px;margin:13px auto 0;font-size:12px}

.consumer-access .access-examples{margin-top:27px;color:#809bb8;gap:18px}.consumer-access .access-examples button{border-color:#354e6d;font-size:8px}
.consumer-access .access-card .access-footnote{color:#8ba6c1}.consumer-access .access-card .access-success{margin-left:auto;margin-right:auto}.consumer-access .access-card .secondary{color:#f6f3ee;border-color:#496382;background:#17345b}
@keyframes rrn-entry-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(min-width:900px){.consumer-access .access-logo{margin-top:35px;width:194px}.consumer-access .access-card{margin-top:55px;max-width:420px}.consumer-access .access-card h1{font-size:57px}.consumer-access:before{width:330px;left:-90px;top:-240px}.consumer-access:after{right:-60px;width:330px;height:95vh}}
@media(max-height:730px){.consumer-access .access-logo{margin-top:19px;width:151px;height:37px}.consumer-access .access-card{margin-top:32px}.consumer-access .access-card h1{font-size:41px}.consumer-access .access-kicker{font-size:8px;margin-bottom:15px}.consumer-access .access-card>p{font-size:12px;margin-top:15px}.consumer-access .consumer-access-form{margin-top:25px}.access-plate{height:73px}.consumer-access .access-continue{margin-top:19px;min-height:52px}.consumer-access .access-help{margin-top:14px}.consumer-access .access-examples{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.consumer-access .access-card{animation:none}.consumer-access *{transition:none!important}}
/* A real input sits on the illustrated car's rear plate. */
.consumer-access .access-card{margin-top:36px;max-width:420px}
.consumer-access .access-card h1{font-size:clamp(36px,7.9vw,49px)}
.consumer-access .consumer-access-form{margin-top:24px}
.access-car-scene{height:270px;position:relative;margin:-12px -28px -8px;overflow:hidden;isolation:isolate}
.access-car{position:absolute;left:50%;top:50%;width:min(540px,calc(100vw + 10px));aspect-ratio:3/2;transform:translate(-50%,-50%);transform-origin:50% 70%;will-change:transform}
.access-car.is-arriving{animation:rrn-car-arrive 1.1s cubic-bezier(.14,.85,.25,1) both}
.access-car>img,.rrn-drive-car>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.access-car .access-plate,.rrn-drive-car .access-plate{position:absolute;left:33%;top:60.4%;width:34%;height:11.5%;min-height:36px;margin:0;border-width:2px;border-radius:6px;box-shadow:0 2px 3px #0004,inset 0 0 0 1px #fff5;transform:none}
.access-car .access-plate:focus-within{box-shadow:0 0 0 3px #1cc478,0 0 20px #1cc47855}
.access-car .access-plate-band,.rrn-drive-car .access-plate-band{width:19px;font-size:8px;padding-bottom:6px;border-right:0}
.consumer-access .access-car .registration-input,.entry-plate-value{font:750 clamp(19px,4.6vw,24px)/1 ui-monospace,'Segoe UI Mono',Consolas,monospace;letter-spacing:.4px;padding:4px 3px;color:#1a1a1a}
.entry-plate-value{flex:1;display:grid;place-items:center;white-space:nowrap}
.consumer-access .access-car .registration-input::placeholder{font-size:.76em;letter-spacing:.8px;opacity:.75}
.consumer-access .access-continue{margin-top:5px}
.consumer-access .access-help{margin-top:14px}.consumer-access .access-examples{margin-top:19px}
.access-road{position:absolute;height:1px;left:10%;right:10%;bottom:7%;background:linear-gradient(90deg,transparent,#7a9ab92e,transparent);z-index:-1}
@keyframes rrn-car-arrive{from{opacity:.25;transform:translate(-50%,-50%) scale(.58)}78%{opacity:1;transform:translate(-50%,-50%) scale(1.015)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-height:790px){.consumer-access .access-logo{margin-top:19px;width:151px;height:37px}.consumer-access .access-card{margin-top:24px}.consumer-access .access-kicker{font-size:8px;margin-bottom:12px}.consumer-access .access-card h1{font-size:39px}.consumer-access .access-card>p{margin-top:13px;font-size:12px}.consumer-access .consumer-access-form{margin-top:19px}.access-car-scene{height:238px;margin-top:-19px;margin-bottom:-8px}.access-car{width:min(490px,calc(100vw + 10px))}.consumer-access .access-continue{min-height:50px}.consumer-access .access-help{margin-top:10px}.consumer-access .access-examples{margin-top:14px}}
/* Move toward the mint bodywork, let its colour fill the screen, then reveal the repair. */
dialog.rrn-drive-transition{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow:hidden;color:#f6f3ee;box-shadow:none}
dialog.rrn-drive-transition::backdrop{background:transparent;backdrop-filter:none}
.rrn-drive-backdrop{position:absolute;inset:0;background:#0c2448;animation:rrn-depth-backdrop 1950ms linear both}
.rrn-drive-wash{position:absolute;inset:0;z-index:3;background:#79cbaa;animation:rrn-depth-wash 1950ms ease both}
.rrn-drive-copy{position:absolute;left:20px;right:20px;z-index:4;text-align:center;animation:rrn-drive-copy 1950ms ease both}
.rrn-drive-copy>span{display:block;font:750 40px/1.1 RedHat,sans-serif;letter-spacing:-1.3px}
.rrn-drive-car{position:absolute;z-index:2;transform-origin:50% 54%;animation:rrn-car-approach 1950ms cubic-bezier(.63,.02,.76,.48) both;will-change:transform,opacity}
.rrn-drive-opening .home-feature,.rrn-drive-opening .home-aside{animation:rrn-tracker-resolve 650ms cubic-bezier(.15,.8,.25,1) 1280ms both}
@keyframes rrn-depth-backdrop{0%,55%{opacity:1}64%,100%{opacity:0}}
@keyframes rrn-depth-wash{0%,37%{opacity:0}63%,78%{opacity:1}100%{opacity:0}}
@keyframes rrn-car-approach{0%,9%{opacity:1;transform:scale(1)}59%{opacity:1;transform:scale(var(--drive-depth-scale))}68%,100%{opacity:0;transform:scale(var(--drive-depth-scale))}}
@keyframes rrn-drive-copy{0%{opacity:0;transform:translateY(6px)}12%,24%{opacity:1;transform:translateY(0)}39%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes rrn-tracker-resolve{from{opacity:.4;transform:scale(.985)}to{opacity:1;transform:none}}
.rrn-drive-reduced .rrn-drive-car,.rrn-drive-reduced .rrn-drive-copy{display:none}.rrn-drive-reduced .rrn-drive-backdrop{animation:none;opacity:0}.rrn-drive-reduced .rrn-drive-wash{animation:rrn-depth-reduced 180ms ease both}
@keyframes rrn-depth-reduced{from{opacity:.3}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.access-car,.rrn-drive-opening *{animation:none!important}}
body.motion-paused .access-car,body.motion-paused .rrn-drive-opening *{animation:none!important}
/* Keep the whole car visible, with comfortable space around the plate. */
.consumer-access .consumer-access-form>label{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;font:650 13px/1.4 RedHat,sans-serif;text-transform:none;letter-spacing:0;color:#f6f3ee;margin:0 0 5px}
.consumer-access .registration-hint{margin:0;color:#afc4db;font:400 11px/1.4 Raleway,sans-serif}
.access-car-scene{height:clamp(257px,66.67vw,307px);margin:0 -28px 12px}
.access-car{width:min(460px,calc(100vw + 10px))}
.consumer-access .access-car-scene .entry-error{position:absolute;left:50%;top:calc(50% + 74px);z-index:2;max-width:calc(100% - 28px);width:max-content;margin:0;padding:7px 11px;border-radius:9px;background:#0c2448f5;color:#ffb5a8;font:600 12px/1.4 RedHat,sans-serif;transform:translateX(-50%);box-shadow:0 3px 12px #0c244820}
.consumer-access .access-car-scene .entry-error:empty{display:none}
.consumer-access .access-car .access-plate.is-invalid{border-color:#ff9689;box-shadow:0 0 0 2px #ff96894d,0 0 18px #ff968926}
.consumer-access .consumer-access-form.has-registration-error>label{color:#ffb5a8}
@media(max-height:790px){.consumer-access .access-card{margin-top:20px}.consumer-access .access-card h1{font-size:36px}.consumer-access .consumer-access-form{margin-top:5px}.access-car-scene{height:clamp(257px,66.67vw,307px);margin:0 -28px 10px}.access-car{width:min(460px,calc(100vw + 10px))}}

/* Keep the registration journey in view on a standard laptop too. */
@media(min-width:900px) and (min-height:700px) and (max-height:900px){
 .consumer-experience .access-screen.consumer-access{padding-bottom:14px}
 .consumer-access .access-logo{margin-top:10px;width:151px;height:37px}
 .consumer-access .access-card{margin-top:12px}
 .consumer-access .access-kicker{font-size:8px;margin-bottom:8px}
 .consumer-access .access-card h1{font-size:clamp(36px,4.6vh,42px)}
 .consumer-access .access-card>p{font-size:12px;margin-top:12px}
 .consumer-access .consumer-access-form{margin-top:8px}
 .consumer-access .access-car-scene{height:clamp(252px,34.7vh,280px);margin-bottom:8px}
 .consumer-access .access-car{width:clamp(378px,52vh,420px)}
 .consumer-access .access-car .registration-input{font-size:20px}
 .consumer-access .access-car-scene .entry-error{top:calc(50% + 64px)}
 .consumer-access .access-continue{min-height:48px}
 .consumer-access .access-help{margin-top:8px;min-height:30px}
 .consumer-access .access-examples{margin-top:8px}
}
