.friction-demo{min-width:0;background:#061a36;border:1px solid #213a5d;border-radius:12px;overflow:hidden;box-shadow:0 25px 80px -40px #0008}.friction-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 24px;border-bottom:1px solid #203654}.friction-heading small{display:block;color:#89aff1;font-size:10px;letter-spacing:.13em}.friction-heading b{display:block;margin-top:6px;font-size:18px;font-weight:550}.friction-toggle{background:#102b4e;border:1px solid #395577;border-radius:5px;padding:8px 11px;white-space:nowrap;font-size:11px;color:#dce9ff;cursor:pointer}
.friction-scene{position:relative;height:455px;isolation:isolate;background:radial-gradient(ellipse at 30% 40%,#16396380,transparent 70%)}.journey-stages{position:absolute;inset:0;list-style:none;margin:0;padding:0}.journey-screen{position:absolute;left:3%;top:30px;width:20%;height:145px;padding:10px;background:linear-gradient(145deg,#163252,#0a1e39);border:1px solid #557aa2;border-radius:8px;box-shadow:0 10px 25px #0004;animation:screen-reveal 14s linear infinite;--show:0;--tint:#82b4f9}.journey-screen:before,.journey-screen:after{content:'';position:absolute;inset:-5px 5px 5px -5px;border:1px solid #385778;border-radius:8px;background:#0b223e;z-index:-1}.journey-screen:after{inset:-9px 10px 10px -9px;opacity:.5}.screen-onboarding:before,.screen-onboarding:after{display:none}.screen-signup{left:27%;top:75px;animation-name:screen-signup}.screen-first{left:51%;top:120px;animation-name:screen-first}.screen-payment{left:75%;top:165px;animation-name:screen-payment;--tint:#8bdfbe}.screen-chrome{display:flex;align-items:center;gap:5px;margin-bottom:7px}.screen-chrome>span{width:4px;height:4px;border-radius:50%;background:var(--tint);box-shadow:6px 0 #536f8b}.screen-chrome small{font-size:7px;letter-spacing:.03em;color:#91abc8;margin-left:auto;white-space:nowrap}.journey-screen>b{font-size:12px;color:#eaf2ff;display:block;font-weight:600}.screen-preview{height:50px;margin:6px 0;position:relative}.screen-preview i{display:block;height:4px;background:#385779;border-radius:2px;margin:5px auto;width:75%}.preview-welcome{text-align:center}.welcome-orbit{display:block;font-size:24px;line-height:30px;color:#9cc4ff;text-shadow:0 0 20px #91bfff}.preview-welcome i:last-child{width:50%}.preview-form{padding-top:1px}.preview-form i{height:11px;border:1px solid #426282;background:#122c48;width:100%;margin:4px 0}.preview-form .field-warning{border-color:#b77d64;background:linear-gradient(90deg,#bd896245 45%,#142c46 45%)}.preview-home{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding:3px 0}.preview-home span{border:1px solid #36597e;border-radius:3px;background:linear-gradient(135deg,#24476c,#142a44)}.preview-home span:first-child{border-color:#8ba8d2;background:#32567d}.preview-plan{border:1px solid #557b88;border-radius:4px;padding:7px 4px;text-align:center}.preview-plan strong{font-size:14px;color:#a1e3cd;letter-spacing:.1em}.preview-plan i{height:3px;margin:5px auto}.screen-action{display:flex;justify-content:space-between;gap:2px;align-items:center;padding:4px 5px;border:1px solid #40658f;background:#244567;border-radius:3px;font-size:8px;line-height:1.2;color:#d7e7fc;min-height:21px}.screen-payment .screen-action{border-color:#487c79;background:#244e54}
.journey-road{position:absolute;inset:0;z-index:-1}.journey-road span{position:absolute;left:13%;top:193px;width:24%;height:45px;border-top:1px solid #477099;border-right:1px solid #477099;border-radius:0 10px 0 0}.journey-road span:nth-child(2){left:37%;top:238px}.journey-road span:nth-child(3){left:61%;top:283px}.journey-road span:after{content:'›';position:absolute;bottom:-12px;right:-4px;color:#8daed2;transform:rotate(90deg);font-size:18px}.friction-gate{position:absolute;left:37%;top:221px;height:61px;width:1px;background:#fb997b70;z-index:1}.gate-value{left:61%;top:266px}.gate-pay{left:85%;top:311px}.friction-gate:before{content:'!';position:absolute;top:-5px;left:9px;display:grid;place-items:center;width:17px;height:17px;border:1px solid #ec9778;border-radius:50%;background:#302831;color:#ffc2a7;font-size:11px;font-weight:700}.friction-reasons{position:absolute;inset:0;list-style:none;margin:0;padding:0;font-size:10px;color:#f5b99f}.friction-reasons li{position:absolute;left:37%;top:328px;transform:translateX(-50%);width:23%;text-align:center;line-height:1.35}.friction-reasons li:nth-child(2){left:61%;top:373px}.friction-reasons li:nth-child(3){left:85%;top:418px}
.journey-people{position:absolute;inset:0;z-index:2}.journey-person{position:absolute;width:10px;height:16px;top:calc(183px + var(--lane)*13px);left:13%;color:#9bc4ff;filter:drop-shadow(0 0 5px #75aaff30);animation:journey-arrive 14s linear infinite;animation-delay:var(--delay);animation-fill-mode:both;--rest-y:135px}.journey-person:before{content:'';position:absolute;top:0;left:3px;width:5px;height:5px;border-radius:50%;background:currentColor}.journey-person:after{content:'';position:absolute;top:6px;left:1px;width:9px;height:9px;border-radius:4px 4px 2px 2px;background:currentColor}.leave-signup{animation-name:leave-signup;--rest:35%;--rest-y:65px}.leave-value{animation-name:leave-value;--rest:59%;--rest-y:110px}.leave-pay{animation-name:leave-pay;--rest:83%;--rest-y:155px}.reach-value{--rest:91%}
@keyframes journey-arrive{0%,5%{left:8%;opacity:0;transform:translateY(0)}10%{opacity:1}25%,31%{left:35%;transform:translateY(45px);color:#9bc4ff}47%,54%{left:59%;transform:translateY(90px);color:#9bc4ff}70%,77%{left:83%;transform:translateY(135px);color:#9bc4ff}88%,94%{left:91%;opacity:1;color:#8bdfbe;transform:translateY(135px)}100%{left:95%;opacity:0;color:#8bdfbe;transform:translateY(135px)}}
@keyframes leave-signup{0%,5%{left:8%;opacity:0;transform:translateY(0)}10%{opacity:1}25%,30%{left:35%;opacity:1;color:#9bc4ff;transform:translateY(45px)}36%{left:35%;opacity:.8;color:#ffad8f;transform:translateY(55px)}45%,100%{left:33%;opacity:0;color:#ffad8f;transform:translateY(100px) scale(.7)}}
@keyframes leave-value{0%,5%{left:8%;opacity:0;transform:translateY(0)}10%{opacity:1}25%,31%{left:35%;transform:translateY(45px)}47%,52%{left:59%;opacity:1;color:#9bc4ff;transform:translateY(90px)}58%{left:59%;opacity:.8;color:#ffad8f;transform:translateY(100px)}67%,100%{left:57%;opacity:0;color:#ffad8f;transform:translateY(145px) scale(.7)}}
@keyframes leave-pay{0%,5%{left:8%;opacity:0;transform:translateY(0)}10%{opacity:1}25%,31%{left:35%;transform:translateY(45px)}47%,54%{left:59%;transform:translateY(90px)}70%,75%{left:83%;opacity:1;color:#9bc4ff;transform:translateY(135px)}81%{left:83%;opacity:.8;color:#ffad8f;transform:translateY(145px)}90%,100%{left:81%;opacity:0;color:#ffad8f;transform:translateY(190px) scale(.7)}}
@keyframes screen-reveal{0%,94%{opacity:1;transform:translateY(0)}100%{opacity:.3;transform:translateY(8px)}}
@keyframes screen-signup{0%,12%{opacity:.25;transform:translateY(12px)}25%,94%{opacity:1;transform:translateY(0)}100%{opacity:.25;transform:translateY(12px)}}
@keyframes screen-first{0%,34%{opacity:.25;transform:translateY(12px)}47%,94%{opacity:1;transform:translateY(0)}100%{opacity:.25;transform:translateY(12px)}}
@keyframes screen-payment{0%,57%{opacity:.25;transform:translateY(12px)}70%,94%{opacity:1;transform:translateY(0)}100%{opacity:.25;transform:translateY(12px)}}
.friction-footer{padding:20px 24px;border-top:1px solid #203654;background:#0a2242}.friction-footer b{font-size:14px;font-weight:550;display:block}.friction-footer p{font-size:12px;color:#a6b5ca;margin-top:7px}.friction-legend{display:flex;gap:16px;margin-bottom:12px;font-size:10px;color:#9eafc5}.friction-legend span:before{content:'';display:inline-block;width:6px;height:6px;background:#9bc4ff;border-radius:50%;margin-right:6px}.friction-legend span:nth-child(2):before{background:#ffad8f}.friction-legend span:nth-child(3):before{background:#8bdfbe}.friction-demo figcaption{padding:12px 24px;font-size:10px;color:#95a8c3}.friction-demo[data-paused="true"] .journey-person,.friction-demo[data-paused="true"] .journey-screen{animation-play-state:paused}
.friction-demo[data-reduced="true"] .journey-screen{animation:none;opacity:1;transform:none}.friction-demo[data-reduced="true"] .journey-person{animation:none;left:var(--rest);transform:translateY(var(--rest-y));opacity:.85}.friction-demo[data-reduced="true"] .journey-person:not(.reach-value){color:#ffad8f}.friction-demo[data-reduced="true"] .reach-value{color:#8bdfbe}
@media(prefers-reduced-motion:reduce){.friction-demo .journey-screen{animation:none;opacity:1;transform:none}.friction-demo .journey-person{animation:none;left:var(--rest);transform:translateY(var(--rest-y));opacity:.85}.friction-demo .journey-person:not(.reach-value){color:#ffad8f}.friction-demo .reach-value{color:#8bdfbe}}
@media(max-width:560px){.friction-heading{padding:18px 16px}.friction-heading b{font-size:16px}.journey-screen{padding:7px 5px;width:21%;border-radius:5px}.screen-chrome small{font-size:6px;letter-spacing:0}.screen-chrome>span{display:none}.journey-screen>b{font-size:10px}.screen-action{font-size:7px;padding:3px;min-height:25px}.screen-action>span{display:none}.friction-reasons{font-size:9px}.friction-footer{padding:18px 16px}.friction-demo figcaption{padding:12px 16px}.friction-legend{gap:10px}.journey-screen:after{inset:-7px 6px 6px -5px}}