:root{--orange:#ff9d00;--ink:#090909;--panel:#131413;--white:#f5f5f2;--muted:#a6a9a6;--line:#434643;color-scheme:dark;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--ink);color:var(--white)}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:5px}img{display:block;width:100%;height:auto}.wrap,.top{width:min(1240px,calc(100% - 80px));margin:auto}.top{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:800;line-height:1.15}.brand b{background:var(--orange);color:#090909;border-radius:7px;padding:16px 7px;font-size:21px;letter-spacing:-1px}nav{display:flex;align-items:center;gap:30px;font-size:14px}.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;padding:17px 22px;border:1px solid var(--orange);border-radius:9px;background:#090909;color:var(--orange);font-size:15px;font-weight:700;text-align:center;min-height:48px}.button.primary{background:var(--orange);color:#090909}.button:hover{filter:brightness(1.13)}.button.small{padding:12px 18px;min-height:42px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--orange);margin:0 0 24px}.hero{display:grid;grid-template-columns:1.14fr 1fr;gap:45px;align-items:center;min-height:805px;padding-top:55px;padding-bottom:70px}.hero h1{font-size:clamp(46px,5.3vw,75px);line-height:1.01;letter-spacing:-3px;margin:0 0 27px;font-weight:800}.hero em{font-style:normal;color:var(--orange)}.lead{font-size:26px;font-weight:700;line-height:1.27;margin:0 0 18px}.intro{max-width:490px;font-size:17px;color:var(--muted);line-height:1.6}.actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}.text-link{font-size:14px;font-weight:700;border-bottom:1px solid #666;padding-bottom:6px}.price-note{font-size:12px;color:var(--muted);margin-top:24px}.price-note strong{color:var(--white);font-size:17px}.price-note span{margin:0 9px}.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:650px;perspective:none}.orbit{position:absolute;width:105%;aspect-ratio:1;border:1px solid #332716;border-radius:50%;background:radial-gradient(ellipse,#50361733,transparent 66%)}.orbit:after{content:'';position:absolute;inset:40px;border:1px solid #332716;border-radius:50%}.phone{width:310px;background:#060606;padding:10px 7px;border:3px solid #545454;border-right-color:#202020;border-bottom-color:#202020;border-radius:33px;box-shadow:20px 30px 0 #0008,0 30px 80px #000;transform:rotate(-8deg);position:relative}.phone img{border-radius:23px}.hero-tag{position:absolute;bottom:0;right:0;border:1px solid var(--line);border-radius:9px;padding:15px 20px;background:#151615;font-size:11px;font-weight:bold;letter-spacing:1px}.hero-tag small{display:block;margin:8px 0 0 15px;color:var(--muted);font-size:10px;letter-spacing:0}.dot{display:inline-block;width:6px;height:6px;background:var(--orange);border-radius:50%;margin-right:8px}.facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:28px 0}.facts>div{padding:0 30px;border-right:1px solid var(--line)}.facts>div:last-child{border:0}.facts strong{font-size:42px;color:var(--orange);display:block;letter-spacing:-1px}.facts span{display:block;color:#c0c2c0;font-size:13px;margin-top:5px}.section{padding-top:105px;padding-bottom:105px}.section-head{max-width:700px;margin-bottom:50px}h2{font-size:clamp(34px,3.6vw,49px);letter-spacing:-1.8px;line-height:1.08;margin:0 0 23px}p{line-height:1.6}h3{font-size:23px;line-height:1.2;letter-spacing:-.5px;margin:20px 0 14px}.section-head>p:not(.eyebrow),article>p,.adaptable p:not(.eyebrow),.fleet-section p,.demo-layout p:not(.eyebrow),.pricing>div>p:not(.eyebrow){color:var(--muted);font-size:16px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.feature-grid article{border-top:2px solid var(--orange);padding:25px 20px 12px;border-radius:8px;background:var(--panel)}.feature-number{color:#b2b5b2;font-size:10px;font-weight:bold;letter-spacing:1.5px}.card-story,.controls-section,.demo-section{background:#101110;border-top:1px solid #292c29;border-bottom:1px solid #292c29}.card-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.screen{display:block;background:#080808;border:1px solid #444844;border-radius:10px;padding:7px;overflow:hidden;width:100%;transition:border-color .2s}.screen:hover{border-color:var(--orange)}.card-columns .screen{margin-bottom:25px}.card-columns .eyebrow{font-size:10px;letter-spacing:1.5px}.card-columns h3{margin-top:12px}.subtle{color:#919691!important;font-size:12px!important;line-height:1.6}.card-story .subtle{margin:25px 0 0}.adaptable{display:grid;grid-template-columns:1.05fr 1fr;gap:85px;align-items:center}.large-copy{font-size:21px!important;line-height:1.5!important;color:#dedfde!important}.config-pills{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0}.config-pills span{border:1px solid #666;border-radius:7px;padding:10px 12px;font-size:11px;color:#e1e2e1}.applications{border-left:2px solid var(--orange);padding-left:20px;margin-top:25px;font-size:13px;line-height:2;color:var(--muted)}.config-visual{position:relative;padding:0 90px 0 0}.trailer{width:100%}.floating-settings{position:absolute;width:65%;right:0;top:29%;box-shadow:0 20px 55px #000;border-color:var(--orange)}.control-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;align-items:start}figure{margin:0}.control-gallery img{width:100%}.control-gallery figcaption{font-size:13px;margin-top:18px;color:#b9beb9}.control-gallery b{color:var(--orange);padding-right:6px}.fleet-section{display:grid;grid-template-columns:.85fr 1.3fr;gap:100px;align-items:center}.fleet-screen{max-width:350px}.benefits{list-style:none;padding:0;margin:30px 0}.benefits li{padding:17px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--muted)}.benefits strong{color:var(--white)}.demo-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:100px;align-items:center}.demo-steps{padding-left:22px;line-height:2.1;font-size:14px;color:#ddd}.demo-stage{position:relative;width:100%;max-width:440px;background:#050505;border:2px solid var(--orange);border-radius:15px;padding:8px;aspect-ratio:440/820;overflow:hidden}.demo-stage>img{height:100%;object-fit:contain;opacity:.5}.demo-stage iframe{border:0;width:100%;height:100%;background:#080808;display:block}.demo-badge{position:absolute;top:45%;left:8%;width:84%;font-size:12px;font-weight:bold;color:var(--orange);background:#131413;padding:20px;text-align:center;border:1px solid var(--orange);border-radius:8px;line-height:1.6}.pricing{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}.price-card{border:1px solid var(--orange);border-radius:14px;padding:38px;background:#121412}.price-card>span{font-size:11px;letter-spacing:1px;color:var(--muted)}.amount{font-size:74px;letter-spacing:-3px;line-height:1.1;margin:25px 0;color:var(--white)}.amount small{font-size:18px;letter-spacing:0;color:var(--muted)}.price-card ul{padding-left:18px;color:#c4c8c4;line-height:2;font-size:14px;margin-bottom:28px}.price-card .button{width:100%}.faq{padding-top:15px}.faq h2{margin-bottom:35px}details{padding:22px 0;border-top:1px solid var(--line)}summary{cursor:pointer;font-size:18px;font-weight:bold}details p{max-width:950px;font-size:15px;color:var(--muted)}details a{color:var(--orange);text-decoration:underline}footer{border-top:1px solid var(--line);padding:35px 0;display:flex;align-items:center;gap:35px;flex-wrap:wrap}footer p{flex:1;color:var(--muted);font-size:14px}footer>a:last-of-type{color:var(--orange);font-size:13px}footer small{width:100%;color:#787e78;font-size:10px}dialog{border:1px solid var(--orange);border-radius:12px;background:#101110;color:white;padding:16px;max-width:min(650px,95vw);max-height:94dvh}dialog::backdrop{background:#000d}dialog img{max-width:100%;height:auto}
@media (min-width:1500px) and (pointer:fine){.hero h1{font-size:77px}.hero{min-height:860px}.phone{width:330px}}
@media(max-width:1000px){.wrap,.top{width:calc(100% - 48px)}.hero{gap:20px}.hero h1{letter-spacing:-2px}.phone{width:270px}.hero-visual{min-height:600px}.hero-tag{right:-8px}.facts>div{padding:0 20px}.card-columns{gap:20px}.adaptable,.fleet-section,.demo-layout{gap:40px}.control-gallery{gap:15px}.config-visual{padding-right:55px}.pricing{gap:40px}.hero .actions{gap:16px}}
@media (max-width:700px), (pointer:coarse){.wrap,.top{width:calc(100% - 36px)}.top{height:80px}.brand{font-size:13px;gap:8px}.brand b{font-size:18px;padding:13px 6px}nav{gap:12px}nav>a:not(.button){display:none}nav .button{padding:10px 13px;font-size:12px}.hero{display:flex;flex-direction:column;gap:25px;padding-top:45px;padding-bottom:40px;min-height:0;align-items:stretch}.hero h1{font-size:clamp(40px,9.5vw,64px);letter-spacing:-1.8px}.eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:20px}.lead{font-size:23px}.intro{font-size:16px}.hero-visual{min-height:640px}.phone{width:285px}.orbit{width:100%;max-width:460px}.hero-tag{right:0;bottom:0}.facts{grid-template-columns:1fr 1fr;padding:7px 0}.facts>div{padding:20px}.facts>div:nth-child(2){border-right:0}.facts>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.facts strong{font-size:36px}.facts span{font-size:11px}.section{padding-top:68px;padding-bottom:68px}.section-head{margin-bottom:35px}h2{font-size:35px;letter-spacing:-1px}.feature-grid{grid-template-columns:1fr;gap:15px}.feature-grid article{padding:24px}.card-columns{grid-template-columns:1fr;gap:45px}.card-columns article{max-width:400px;margin:auto}.card-columns .screen{max-width:310px;margin:0 auto 25px}.adaptable,.fleet-section,.demo-layout,.pricing{grid-template-columns:1fr;gap:40px}.config-visual{max-width:400px;margin:auto;padding-right:85px}.floating-settings{width:63%}.control-gallery{grid-template-columns:1fr 1fr;gap:30px 15px}.control-gallery figcaption{font-size:11px}.fleet-screen{max-width:300px;margin:auto}.fleet-section>div{order:-1}.demo-stage{margin:auto;max-width:390px}.pricing{padding-bottom:65px}.price-card{padding:28px}.price-note{font-size:11px}.faq{padding-top:0}.faq summary{font-size:16px}footer{gap:15px}footer p{flex-basis:100%;margin:5px 0}.button{font-size:14px;padding:15px 18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.screen{transition:none}}

.hero h1{font-size:clamp(46px,4.6vw,66px)}.price-card .amount{font-size:74px;color:var(--white)}@media (max-width:700px), (pointer:coarse){.hero h1{font-size:clamp(40px,9.5vw,64px)}.hero .phone{width:min(285px,calc(100vw - 90px))}}

.config-visual{padding:0;align-self:center;display:grid;grid-template-columns:56% 36%;column-gap:8%;align-items:start}.config-card-stack{min-width:0}.customize-preview-stack{display:flex;flex-direction:column;gap:12px;min-width:0}.config-visual .trailer{width:100%;position:relative;z-index:1}.config-visual .floating-settings{position:relative;width:100%;left:auto;right:auto;top:auto;z-index:2}.annotated-card{position:relative;display:block}.field-highlight{position:absolute;left:1.7%;right:1.7%;top:54.3%;height:18.4%;border:3px solid var(--orange);border-radius:6px;box-shadow:0 0 0 3px #090909;pointer-events:none}.config-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}.connector{stroke:var(--orange);stroke-width:2;fill:none}.diagram-caption{font-size:12px!important;margin:18px 0 0;color:var(--muted)}.diagram-caption strong{color:var(--orange)}@media (max-width:700px), (pointer:coarse){.config-visual{width:100%;max-width:460px;padding:0}.field-highlight{border-width:2px}.connector{stroke-width:1.5}}

/* Prominent price in the final pricing panel. */
.pricing .price-card .amount{font-size:clamp(64px,7vw,96px);font-weight:800;color:var(--orange);line-height:1.05;margin:24px 0;letter-spacing:-3px}.pricing .price-card .amount small{font-size:20px;letter-spacing:0;color:var(--orange)}

.price-try{display:table;margin:18px auto 0}#purchase-dialog{width:min(520px,calc(100vw - 28px));padding:28px;max-height:92dvh}#purchase-dialog h2{font-size:32px;margin:20px 0 12px;letter-spacing:-1px}.purchase-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.purchase-heading .eyebrow{margin:0;font-size:10px;letter-spacing:1px}.purchase-price{font-size:64px;line-height:1;font-weight:800;color:var(--orange);margin:22px 0}.purchase-price small{font-size:18px}#purchase-dialog>p:not(.purchase-price){font-size:14px;color:var(--muted)}#purchase-dialog ol{font-size:14px;line-height:1.6;padding-left:22px}#purchase-dialog li{margin:8px 0}#purchase-status{padding:12px;border:1px solid var(--line);border-radius:8px}#purchase-dialog>.button{width:100%;margin-top:12px}#purchase-continue[hidden]{display:none}@media(max-width:400px){#purchase-dialog{padding:18px}.purchase-heading .eyebrow{max-width:155px}#purchase-dialog h2{font-size:28px}}

.currency-box{margin:22px 0;padding:18px;border:1px solid var(--line);border-radius:10px;background:#191b19}.currency-box h3{font-size:20px;margin:0 0 16px;letter-spacing:0}.currency-box label{display:block;font-size:14px;margin-bottom:8px}.currency-box label span{color:#b9beb9}.currency-box select{width:100%;min-width:0;max-width:100%;min-height:48px;padding:10px;border:1px solid #858985;border-radius:6px;background:#101110;color:#f5f5f2;font:inherit;font-size:16px}.currency-box select:focus-visible{outline:3px solid var(--orange);outline-offset:3px}.currency-result{font-size:32px;font-weight:800;color:var(--orange);overflow-wrap:anywhere;margin:18px 0 4px;line-height:1.2}.currency-rate,#currency-load,.currency-source{font-size:12px;color:#b9beb9;line-height:1.6}#currency-load:empty{display:none}#currency-note{font-size:13px;color:#c4c8c4;line-height:1.6;margin:16px 0 10px}.currency-source{text-decoration:underline}#currency-retry{color:var(--orange);background:none;border:0;border-bottom:1px solid var(--orange);padding:8px 0;min-height:44px}#currency-retry[hidden]{display:none}@media(max-width:400px){.currency-box{padding:14px}.currency-result{font-size:28px}}

.purchase-actions{position:sticky;bottom:-28px;margin:20px -28px -28px;padding:12px 28px 24px;background:#101110;border-top:1px solid var(--line);z-index:3}.purchase-actions #purchase-status{font-size:12px;line-height:1.4;margin:0 0 10px;padding:0;border:0;color:#c4c8c4}.purchase-actions .button{width:100%;font-size:14px}.purchase-actions .button:disabled{background:#59401b;color:#ede0ca;border-color:#977038;cursor:not-allowed;filter:none}@media(max-width:400px){.purchase-actions{bottom:-18px;margin:20px -18px -18px;padding:12px 18px 18px}}

#purchase-dialog .purchase-tax{margin-top:-10px;color:#f5f5f2;font-weight:700;font-size:14px}

/* App access stays visible on narrow screens as well as desktop. */
.top nav{gap:18px}.get-app{border-top:1px solid var(--line)}.get-app>div{max-width:760px}.get-app p:not(.eyebrow){color:var(--muted)}@media (max-width:700px), (pointer:coarse){.top{height:auto;min-height:96px;padding-top:16px;padding-bottom:16px;gap:14px;flex-wrap:wrap}.top nav{flex-wrap:wrap;gap:10px}.top nav .app-entry{display:inline-flex}.top nav .button{font-size:12px;padding:10px 12px}}

.top nav .guide-nav{display:inline-flex;white-space:nowrap}@media (min-width:701px) and (max-width:1100px) and (pointer:fine){.top{height:auto;min-height:96px;padding-top:16px;padding-bottom:16px;gap:14px;flex-wrap:wrap}.top nav{flex-wrap:wrap;gap:14px}}

/* Anchor links align section content, not the decorative outer padding. */
.section[id]{scroll-margin-top:-105px}
@media (max-width:700px), (pointer:coarse){.section[id]{scroll-margin-top:-68px}}

/* Vehicle sale and records handover. */
.handover-teaser{display:inline-block;color:var(--orange);font-size:14px;line-height:1.6;margin:0 0 22px;text-decoration:underline;text-underline-offset:4px}.handover-section{background:#121412;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.handover-section .section-head{max-width:780px}.handover-section .feature-grid article{background:#090909}.handover-note{max-width:950px;font-size:13px;color:var(--muted);line-height:1.7;margin:26px 0 18px}

/* A clear invitation points to the immediately usable embedded test card. */
.demo-callout{display:flex;align-items:center;justify-content:space-between;gap:20px;border:2px solid var(--orange);border-radius:12px;background:#090909;color:var(--orange);padding:25px 26px;margin:30px 0 22px;font-size:clamp(21px,2.1vw,29px);line-height:1.2}.price-card .price-try{margin-top:14px;border:1px solid var(--orange);padding:17px 22px}@media (max-width:700px), (pointer:coarse){.demo-callout{padding:20px;gap:12px}}

@media (min-width:701px) and (pointer:fine){.fleet-section{grid-template-columns:1.3fr .85fr}.fleet-section>.fleet-screen{justify-self:end}}
@media (max-width:700px), (pointer:coarse){.demo-stage{max-width:min(390px,calc((100dvh - 48px)*440/820));}}

/* Matching black information panels with orange top and right edges. */
#features .feature-grid article,#cards .card-copy{background:#080808;border:0;border-top:2px solid var(--orange);border-right:2px solid var(--orange);border-radius:8px;padding:25px 20px 12px}
#cards .card-columns article{display:flex;flex-direction:column}
#cards .card-copy{flex:1}
#cards .card-copy>p{color:var(--muted);font-size:16px}

/* Isolated interactive version of the Customize field illustration. */


/* Full mobile demo viewport, without website padding or a second frame. */
@media (max-width:700px), (pointer:coarse){
 #try .demo-layout{width:100%;}#try .demo-layout>div:first-child{padding-inline:18px;}
 #demo-stage{width:100%;max-width:none;margin:0;height:100dvh;aspect-ratio:auto;border:0;border-radius:0;padding:0;scroll-margin:0;}
 html.demo-focused{overflow:hidden;overscroll-behavior:none;}
 html.demo-focused body{position:fixed;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:none;}
 html.demo-focused #demo-stage iframe{width:100%;height:100%;border:0;border-radius:0;}
}

/* Clear invitations to the isolated field preview and complete demo. */
.config-whole-card{display:flex;justify-content:flex-start;width:100%;margin-top:16px}.config-whole-card .button{width:100%;border-width:2px;padding:12px 10px;gap:10px;font-size:clamp(12px,1.2vw,15px)}.config-visual .diagram-caption{width:100%;margin:0}
/* Keep Close reachable inside the visible viewport after pinch. */







/* Explicit mobile demo overlay: swipe stays inside; only Back to Website exits. */
html.demo-focused{overflow:hidden;overscroll-behavior:none}
html.demo-focused body{position:fixed;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:none}
html.demo-focused #demo-stage{position:fixed;inset:0;z-index:1000;width:100vw;height:100dvh;max-width:none;aspect-ratio:auto;border:0;border-radius:0;padding:0;margin:0}
html.demo-focused #demo-stage iframe{width:100%;height:100%;border:0;border-radius:0}

/* Help text and action names use the same visual hierarchy. */
.demo-steps,.faq details p,.privacy-page .contact-lead,.privacy-page .contact-panel p,.privacy-page .privacy-summary p,.privacy-page .draft-banner p{color:#b8b8b8}
.demo-steps strong,.faq details p strong,.privacy-page p strong{color:#fff;font-weight:700}

/* Extend the dark canvas into Safari safe areas; preserve the complete card. */
html{background:#080808}
html.demo-focused,html.demo-focused body,html.demo-focused #demo-stage{background:#080808;color-scheme:dark}

/* Inline card taps open the demo; a native page swipe never enters the iframe. */
.demo-activate-cover{display:none}
@media (max-width:700px),(pointer:coarse), (pointer:coarse){
 html:not(.demo-focused) #demo-stage{height:100svh}
 .demo-activate-cover{display:block;position:absolute;inset:72px 0 0;z-index:5;border:0;border-radius:0;padding:0;background:transparent;touch-action:pan-y pinch-zoom}
 html.demo-focused .demo-activate-cover{display:none}
}
/* Only these four framed fields change in the illustration. */
.annotated-card{container-type:inline-size}




.field-highlight{z-index:4}
.diagram-enlarged{width:100%;margin-top:12px}

/* The desktop invitation sits beside the card; phones place it above. */


/* One shared arrow design; size follows each invitation. */
.cta-arrow{display:inline-block;width:var(--cta-arrow-size,20px);height:var(--cta-arrow-size,20px);flex:none;vertical-align:middle;transform:rotate(var(--cta-arrow-angle,0deg))}
.button.small{--cta-arrow-size:16px}.demo-callout{--cta-arrow-size:44px}
.arrow-down{--cta-arrow-angle:90deg}.arrow-up{--cta-arrow-angle:-90deg}.arrow-up-right{--cta-arrow-angle:-45deg}
@media (max-width:700px), (pointer:coarse){.arrow-toward-card{--cta-arrow-angle:90deg}}

/* Full-screen exit instructions belong to the mobile demo only. */
.demo-mobile-instruction{display:none}@media (max-width:700px),(pointer:coarse), (pointer:coarse){.demo-mobile-instruction{display:inline}}

.field-highlight{top:var(--highlight-top);height:var(--highlight-height)}






/* During native keyboard editing, nested previews also start at the visible screen top. */


html.keyboard-child-active.demo-focused #demo-stage{top:0!important;padding-top:env(safe-area-inset-top,0px)!important}

/* Photographic handset already includes perspective; do not resample it with a CSS rotation. */
.hero .phone-photo{width:min(380px,100%);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;position:relative;z-index:1}
.hero .phone-photo img{display:block;width:100%;height:auto;border-radius:0}
/* One subdued orange contour, with a genuinely unfilled interior. */
.hero .orbit{border:1px solid rgba(255,157,0,.32);background:transparent;box-shadow:none;pointer-events:none}
.hero .orbit::after{content:none}
@media (min-width:1500px) and (pointer:fine){.hero .phone-photo{width:410px}}
@media(max-width:1000px){.hero .phone-photo{width:min(330px,100%)}}
@media (max-width:700px), (pointer:coarse){.hero .phone-photo{width:min(320px,calc(100vw - 72px))}}

/* Purchase first, with an app entry retained for existing customers and two shareable QR codes. */
.top{height:auto;min-height:160px;gap:18px;flex-wrap:wrap;padding-block:16px}.top nav{gap:18px;flex-wrap:wrap;justify-content:flex-end;flex:1}
.existing-customer{font-size:12px;color:#b8b8b8;text-decoration:underline}.website-share-code{display:flex;flex:none;flex-direction:column;align-items:center;gap:6px;text-align:center;font:400 10px/1.4 Arial;color:#bbb}.website-share-code img{width:112px;height:112px;background:#fff;border-radius:4px}.website-share-code span{display:block}
footer .website-share-code{margin-left:auto}footer .website-share-code img{width:140px;height:140px}
@media(max-width:1000px){.top nav{flex-basis:55%}.top .website-share-code img{width:100px;height:100px}}
@media (max-width:700px), (pointer:coarse){.top{min-height:0}.top nav{order:3;flex-basis:100%;justify-content:space-between}.top .website-share-code{margin-left:auto}.top nav .existing-customer{display:block!important;width:100%;text-align:right}.top .website-share-code img{width:112px;height:112px}footer .website-share-code{margin:12px auto}}

/* Full cards reuse the approved broad photographic handset. Crops and the demo stay unframed. */
.card-handset{position:relative;display:block;aspect-ratio:911/1727;background:transparent url('../assets/phone-photo-wide.webp') center/100% 100% no-repeat;border:0;padding:0;border-radius:0;overflow:visible}
.screen.card-handset{background:transparent url('../assets/phone-photo-wide.webp') center/100% 100% no-repeat;border:0;padding:0}
.card-handset>.handset-display{position:absolute;left:8.6717892426%;top:9.1488129705%;width:81.7782656422%;height:83.2078749276%;display:block;overflow:hidden;border-radius:5%/2.6%;background:#080808;padding:.7%}
.card-handset>.handset-display>img,.card-handset>.handset-display>.annotated-card{width:100%;height:100%;display:block}
.card-handset>.handset-display>img{object-fit:contain}
.card-handset .annotated-card>img{height:100%;object-fit:contain}



.card-handset.diagram-enlarged .annotated-card{margin:0}
@media (max-width:700px), (pointer:coarse){.card-columns .screen.card-handset{max-width:360px}.fleet-screen.card-handset{max-width:350px}}
/* Current cards remain exact image assets on the photographic device displays. */
.get-app>div{max-width:none}.get-app>div>p{max-width:760px}.device-showcase{margin:28px 0 30px}.device-photograph{display:block;width:100%;height:auto}.device-showcase figcaption{display:flex;justify-content:space-between;gap:18px;color:var(--muted);font-size:13px}.device-showcase figcaption strong{color:var(--white)}
@media (max-width:700px), (pointer:coarse){.device-showcase figcaption{flex-direction:column;gap:6px;font-size:12px}}
/* Full-format playback returns to the same page position after Close, Escape or the ending. */
.video-play-icon{width:20px;height:20px;flex:none}.hero .play-video{gap:12px}
#video-viewer{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:12px 18px;border:0;border-radius:0;background:#080808;overflow:hidden}
#video-viewer[open]{display:flex;flex-direction:column;gap:8px}
.video-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none}.video-toolbar h2{font-size:16px;letter-spacing:0;margin:0}.video-toolbar .button{min-height:44px}
#website-video{display:block;flex:1;width:100%;height:0;min-height:0;object-fit:contain;background:#080808}
#video-status{flex:none;color:var(--muted);font-size:13px;margin:0}#video-status:empty{display:none}
@media (max-width:700px), (pointer:coarse){#video-viewer{padding:calc(8px + env(safe-area-inset-top,0px)) 10px calc(8px + env(safe-area-inset-bottom,0px))}}

/* Give each photographed device its full width on phones. */
.device-showcase{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}.device-showcase figure{min-width:0}.device-showcase figcaption{display:block;margin-top:12px;line-height:1.6}
@media (max-width:700px), (pointer:coarse){.device-showcase{grid-template-columns:1fr;gap:28px}.device-showcase figcaption{display:block}}

/* The main interactive test card shares the photographic frame; small field previews do not. */
.demo-showcase{width:100%;min-width:0;max-width:440px;justify-self:center}
.demo-controls{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0 0 16px}
.demo-controls .button{width:100%;min-height:42px;padding:10px;font-size:14px}
.demo-controls small{color:#bcbcbc;text-align:center;font-size:11px;line-height:1.5}
.demo-controls .button:disabled{opacity:.5;cursor:wait}
html:not(.demo-focused) #demo-stage.card-handset{width:100%;max-width:none;height:auto;aspect-ratio:911/1727;border:0;border-radius:0;padding:0;background:transparent url('../assets/phone-photo-wide.webp') center/100% 100% no-repeat;margin:0}
#demo-stage.card-handset>.handset-display>img{opacity:.5}
#demo-stage.card-handset iframe{display:block;width:100%;height:100%;border:0}
#demo-stage .demo-activate-cover{inset:0}
/* Native mobile editing retains the full usable screen and keyboard safe areas. */
html.demo-focused #demo-stage.card-handset{background:#080808}
html.demo-focused #demo-stage.card-handset>.handset-display{position:static;display:block;width:100%;height:100%;padding:0;border-radius:0}
html.demo-focused .demo-controls{visibility:hidden}
.get-app{padding-bottom:20px}.get-app .device-showcase{margin-bottom:0}.pricing{padding-top:32px}
.faq-guide{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin:0 0 28px}

.website-share-link{font-size:12px;line-height:1.5;color:#b8b8b8;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;text-align:center}@media (max-width:700px), (pointer:coarse){.top nav .website-share-link{display:block!important;width:100%;text-align:right}}

.demo-showcase{max-width:min(440px,max(260px,calc((100svh - 112px)*911/1727)))}

.price-card:focus-visible{outline:3px solid var(--orange);outline-offset:5px}

.demo-license-note{color:#919691!important;font-size:12px!important;line-height:1.6;margin:12px 0;}

/* Local review draft: symmetric CTA columns keep the title truly centered. */
.demo-callout{display:grid;grid-template-columns:var(--cta-arrow-size) minmax(0,1fr) var(--cta-arrow-size);justify-content:normal}
.demo-callout strong{grid-column:2;text-align:center}
.demo-callout .cta-arrow{grid-column:3;justify-self:end}
.demo-video-actions{display:flex;justify-content:center;margin:0 0 22px}
.demo-video-actions .play-video{gap:12px;min-height:52px;padding:13px 26px}
@media (max-width:700px), (pointer:coarse){.demo-callout{--cta-arrow-size:28px;gap:10px;padding:20px 14px}}

/* Website photograph fitting only: remove outer black canvas, retain every card field and complete border. */
.card-handset>.handset-display{padding:0;border-radius:1.2%/.65%;--card-fit-left:-7.9476861%;--card-fit-top:-0.4044944%;--card-fit-width:115.8953722%;--card-fit-height:100.8089888%;}



.card-handset>.handset-display>img,.card-handset>.handset-display>.annotated-card{position:absolute;left:var(--card-fit-left);top:var(--card-fit-top);width:var(--card-fit-width);height:var(--card-fit-height);max-width:none;object-fit:fill}
.card-handset .annotated-card>img{width:100%;height:100%;object-fit:fill}
#demo-stage.card-handset iframe{transform-origin:0 0}
html.demo-focused #demo-stage.card-handset iframe{transform:none!important}

/* Approved website typography and matching explanation panels. Card renderers are unchanged. */
.website-home main{--chapter-type-size:23px;--explanation-type-size:20.8px}
.website-home main .eyebrow{font-size:var(--chapter-type-size);line-height:1.35;letter-spacing:1px;color:var(--orange);text-wrap:balance}
.website-home main .feature-number{font-size:13px;line-height:1.4}
.website-home main .explanation-panel{background:#080808;border:0;border-top:2px solid var(--orange);border-right:2px solid var(--orange);border-radius:8px;padding:25px 20px 12px;min-width:0}
.website-home main .explanation-panel h3,.website-home main .fleet-copy h2{font-size:23px;line-height:1.2;letter-spacing:0;color:var(--white)}
.website-home main .fleet-copy h2{margin:18px 0 12px}
.website-home main .section-head>p:not(.eyebrow),
.website-home main .explanation-panel>p:not(.eyebrow),
.website-home #cards .card-copy>p,
.website-home main .adaptable>div>p:not(.eyebrow),
.website-home main .demo-layout>div>p:not(.eyebrow),
.website-home main .get-app>div>p:not(.eyebrow),
.website-home main .pricing>div>p:not(.eyebrow){font-size:var(--explanation-type-size);line-height:1.6}
.website-home main .hero .intro{font-size:22.1px}
.website-home main .large-copy{font-size:27.3px!important;line-height:1.5!important}
.website-home main .fleet-copy .large-copy{font-size:var(--explanation-type-size)!important;color:var(--muted)!important;line-height:1.6!important}
.website-home main .fleet-copy .benefits li{font-size:var(--explanation-type-size);line-height:1.6}
.website-home main .fleet-copy .benefits strong{display:block;font-size:23px;line-height:1.2;margin-bottom:10px}
.website-home main .subtle{font-size:15.6px!important}
.website-home main .config-visual .diagram-caption{font-size:15.6px!important}
.website-home main .config-pills span{font-size:14.3px}
.website-home main .control-gallery figcaption,.website-home main .device-showcase figcaption,.website-home main .handover-note{font-size:16.9px}
.website-home main .demo-steps,.website-home main .price-card ul{font-size:18.2px}
.website-home main .price-card>span{font-size:14.3px}
.website-home main .faq details p{font-size:19.5px}
.website-home main .facts>div{min-width:0}
.website-home main .facts strong{font-size:63px;line-height:1.1}
.website-home main .facts span{font-size:19.5px;line-height:1.35}
.website-home main .applications{color:#fff;font-size:24px;line-height:1.6;width:100%;max-width:none}
.website-home #cards .card-copy{margin-bottom:24px}
.website-home #cards .screen.card-handset{margin:0 auto;flex:none}
@media (max-width:700px), (pointer:coarse){
 .website-home main .hero .intro{font-size:20.8px}
 .website-home main .facts strong{font-size:54px}
 .website-home main .facts span{font-size:16.5px}
 .website-home main .control-gallery figcaption{font-size:14.3px}
 .website-home main .device-showcase figcaption{font-size:15.6px}
 .website-home #cards .card-columns article{width:100%}
}

/* Local draft only: two explanatory sections follow the user's rough layouts. */
.website-home main .layout-grid-draft{gap:40px;align-items:center}
.website-home main .adaptable.layout-grid-draft{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
.layout-grid-draft .explanation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;grid-auto-rows:1fr}
.website-home main .layout-grid-draft .explanation-panel{padding:22px 18px;border-radius:8px}
.website-home main .layout-grid-draft .explanation-panel :is(h2,h3){margin:0 0 14px;font:700 23px/1.3 Arial,Helvetica,sans-serif;color:var(--white);letter-spacing:0;text-wrap:balance}
.website-home main .layout-grid-draft .explanation-panel p{margin:0;color:var(--muted);font-size:20.8px;line-height:1.55}
.website-home main .layout-grid-draft .explanation-panel p+p{margin-top:16px}
.adaptable-info{margin:28px 0 0}
.website-home main .layout-grid-draft .applications{margin:0;padding:0;border:0;color:#fff;font:400 24px/1.65 Arial,Helvetica,sans-serif}
.layout-grid-draft .applications>span{display:block}
.website-home main .adaptable-applications{margin-top:28px;padding-left:18px;border-left:2px solid var(--orange)}
.website-home main .layout-grid-draft .config-visual{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:30px;width:100%;max-width:none;align-items:start}
.website-home main .layout-grid-draft .diagram-caption{font-size:18px!important;line-height:1.55;color:var(--muted);margin:0}
.layout-grid-draft .diagram-caption strong{display:block;color:var(--orange);font-size:20.8px;line-height:1.4;margin-bottom:8px}
.layout-grid-draft .diagram-caption br{display:none}

.layout-grid-draft .customize-preview-stack{gap:16px}
.layout-grid-draft .floating-settings{border:1px solid var(--orange);border-radius:8px;box-shadow:none}
.layout-grid-draft .config-whole-card{margin-top:22px}
.layout-grid-draft .config-whole-card .button{font-size:18px;padding:14px 10px;min-height:52px;border-width:1px}
.website-home main .fleet-section.layout-grid-draft{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:48px}
.layout-grid-draft .fleet-grid-copy>.eyebrow{margin-bottom:28px}
.layout-grid-draft .fleet-info{grid-auto-rows:1fr}
.layout-grid-draft .fleet-info .explanation-panel{min-height:190px}
.website-home main .fleet-info .applications{font-size:20.8px;line-height:1.55}
.layout-grid-draft .fleet-grid-copy>.subtle{margin:20px 0 0;line-height:1.6}
.website-home main .layout-grid-draft>.fleet-screen{width:100%;max-width:410px;justify-self:end}
@media(max-width:1100px){
 .website-home main .adaptable.layout-grid-draft{grid-template-columns:1fr;gap:36px}
 .layout-grid-draft .adaptable-copy{max-width:none}
 .website-home main .layout-grid-draft .config-visual{max-width:650px;justify-self:center}
 .website-home main .fleet-section.layout-grid-draft{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px}
 .layout-grid-draft .fleet-info{grid-template-columns:1fr}
 .layout-grid-draft .fleet-info .explanation-panel{min-height:0}
}
@media (max-width:700px), (pointer:coarse){
 .website-home main .fleet-section.layout-grid-draft{grid-template-columns:1fr;gap:32px}
 .layout-grid-draft .explanation-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:20px}
 .website-home main .layout-grid-draft .explanation-panel{padding:22px 18px}
 .website-home main .layout-grid-draft .applications{font-size:21px;line-height:1.65}
 .website-home main .layout-grid-draft .config-visual{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:20px;max-width:460px}
 .website-home main .layout-grid-draft .diagram-caption{font-size:14px!important}
 .layout-grid-draft .diagram-caption strong{font-size:16px}
 .layout-grid-draft .customize-preview-stack{gap:12px}

 .layout-grid-draft .config-whole-card .button{font-size:14px;gap:6px;padding:12px 6px}
 .website-home main .layout-grid-draft>.fleet-screen{width:min(350px,100%);justify-self:center}
}
@media(max-width:360px){
 .website-home main .layout-grid-draft .config-visual{grid-template-columns:1.13fr .87fr;gap:14px}
 .website-home main .layout-grid-draft .applications{font-size:19px}
 .layout-grid-draft .config-whole-card .button{font-size:12px}
}

.website-home main .layout-grid-draft .adaptable-applications{margin-top:28px;padding-left:18px;border-left:2px solid var(--orange)}
.layout-grid-draft .customize-settings-stack{display:grid;gap:16px;align-content:start}
@media (min-width:701px) and (max-width:1100px) and (pointer:fine){
 .website-home main .fleet-section.layout-grid-draft{grid-template-columns:1fr;gap:36px}
 .layout-grid-draft .fleet-info{grid-template-columns:repeat(2,minmax(0,1fr))}
 .website-home main .layout-grid-draft>.fleet-screen{justify-self:center}
}
@media (max-width:700px), (pointer:coarse){
 .layout-grid-draft .customize-preview-stack{display:contents}
 .website-home main .layout-grid-draft .diagram-caption{grid-column:1/-1;grid-row:1;font-size:20.8px!important;line-height:1.55}
 .layout-grid-draft .diagram-caption strong{font-size:23px;line-height:1.3}
 .layout-grid-draft .config-card-stack{grid-column:1;grid-row:2}
 .layout-grid-draft .customize-settings-stack{grid-column:2;grid-row:2;gap:12px}
}

/* Draft revision 02: visible side edges and matching demo / activation panels. */
.website-home main .config-visual .field-highlight{left:7.5%;right:7.5%;border:3px solid var(--orange);border-radius:4px;box-shadow:none}
.website-home main .description-grid{display:grid;gap:20px;margin:26px 0}
.website-home main .app-description-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
.website-home main .demo-description-grid{grid-template-columns:1fr}
.website-home main .description-grid .explanation-panel{padding:22px 18px}
.website-home main .description-grid .explanation-panel h3{margin:0 0 14px;font:700 23px/1.3 Arial,Helvetica,sans-serif;letter-spacing:0;color:var(--white);text-wrap:balance}
.website-home main .description-grid .explanation-panel p{margin:0;font-size:20.8px;line-height:1.55;color:var(--muted)}
.website-home main .description-grid .explanation-panel p+p{margin-top:16px}
.website-home main .description-grid .explanation-panel .demo-license-note{margin-top:16px}
.website-home main .description-grid .demo-steps{margin:0;padding-left:25px;font-size:20.8px;line-height:1.55;color:var(--muted)}
.website-home main .description-grid .demo-steps li+li{margin-top:12px}
@media (max-width:700px), (pointer:coarse){
 .website-home main .app-description-grid{grid-template-columns:1fr;grid-auto-rows:auto}
 .website-home main .config-visual .field-highlight{border-width:2px;border-radius:2px}
}

/* The Coupler text stays clear of the restored side edge in this website illustration. */


/* Restore the existing prominent price; body-copy rules must not size the amount. */
.website-home main .pricing .price-card .amount{font-size:clamp(64px,7vw,96px);font-weight:800;color:var(--orange);line-height:1.05;margin:24px 0;letter-spacing:-3px}
.website-home main .pricing .price-card .amount small{font-size:20px;letter-spacing:0;color:var(--orange)}

/* Draft revision 04: both entry actions belong directly above the photographed demo. */
.website-home main #try .demo-entry-actions{display:grid;gap:14px;margin:0 0 24px;width:100%}
.website-home main #try .demo-entry-actions .demo-video-actions{display:block;margin:0;width:100%}
.website-home main #try .demo-entry-actions .play-video{width:100%;min-height:60px;padding:16px 14px;font-size:20.8px;border-width:2px;border-radius:10px;gap:12px}
.website-home main #try .demo-entry-actions .demo-callout{display:flex;justify-content:center;align-items:center;width:100%;min-height:72px;margin:0;padding:18px 14px;font-size:23px;line-height:1.25;border-radius:10px}
.website-home main #try .demo-entry-actions .demo-callout strong{text-align:center}

/* Draft revision 05: align the explanatory preview and follow the supplied hero layout. */
@media (min-width:1001px) and (pointer:fine){.website-home main .hero-reference-draft .phone-photo{width:min(430px,100%)}}
@media (min-width:701px) and (pointer:fine){
 .website-home main .layout-grid-draft .config-visual{align-items:stretch}
 .layout-grid-draft .config-card-stack{display:flex;flex-direction:column}
 .layout-grid-draft .config-card-stack .card-handset{flex:none}
 .layout-grid-draft .config-whole-card{margin-top:auto;padding-top:8px}
 .layout-grid-draft .customize-preview-stack{display:flex;flex-direction:column}
 .website-home main .layout-grid-draft .diagram-caption{padding-top:11.36%}
 .layout-grid-draft .customize-settings-stack{display:flex;flex:1;flex-direction:column;gap:16px}

 .layout-grid-draft .customize-settings-stack .floating-settings{margin-top:auto}
}
.website-home main #try .demo-entry-actions .demo-callout{gap:12px}
.website-home main #try .demo-entry-actions .demo-callout .cta-arrow{width:24px;height:24px;flex:none}
.website-home main .hero-reference-draft{align-items:center;gap:54px;padding-top:50px;padding-bottom:60px}
.hero-reference-draft .hero-brand{gap:18px;font-size:25px;margin:0 0 28px;width:fit-content}
.hero-reference-draft .hero-brand b{display:flex;align-items:center;justify-content:center;width:76px;height:76px;padding:0;font-size:31px;border-radius:12px}
.website-home main .hero-reference-draft .eyebrow{font-size:clamp(23px,2.3vw,30px);line-height:1.35;letter-spacing:1.5px;margin-bottom:36px}
.hero-reference-draft .hero-video-actions{display:flex;justify-content:flex-end;margin:22px 0}
.hero-reference-draft .hero-video-actions .play-video{min-width:230px;min-height:62px;font-size:20px;gap:16px}
.website-home main .hero-reference-draft .hero-purchase-actions{display:grid;grid-template-columns:minmax(135px,.65fr) minmax(0,1.35fr);gap:18px;margin-top:0}
.hero-reference-draft .hero-purchase-actions .button{font-size:18px;min-height:66px;padding:16px 14px;gap:12px}
@media (max-width:700px), (pointer:coarse){
 .website-home main .hero-reference-draft{padding-top:30px;gap:30px}
 .hero-reference-draft .hero-brand{font-size:22px;gap:14px;margin-bottom:24px}
 .hero-reference-draft .hero-brand b{width:66px;height:66px;font-size:27px}
 .website-home main .hero-reference-draft .eyebrow{font-size:23px;margin-bottom:26px}
 .hero-reference-draft .hero-video-actions{justify-content:center;margin:24px 0 18px}
 .website-home main .hero-reference-draft .hero-purchase-actions{grid-template-columns:minmax(85px,.62fr) minmax(0,1.38fr);gap:12px}
 .hero-reference-draft .hero-purchase-actions .button{font-size:15px;padding:14px 10px;min-height:64px}
 .website-home main #try .demo-entry-actions .demo-callout{font-size:21px;gap:10px}
}

/* Draft revision 06: three thin orange signal rings, fading toward the outside. */
.website-home main .hero-reference-draft .orbit{--signal-gap:24px;width:calc(100% - 96px);max-width:none;border:1px solid rgba(255,157,0,.72);background:transparent;box-shadow:none;pointer-events:none}
.website-home main .hero-reference-draft .orbit::before,.website-home main .hero-reference-draft .orbit::after{content:'';position:absolute;border:1px solid;border-radius:50%;background:transparent;box-shadow:none;pointer-events:none}
.website-home main .hero-reference-draft .orbit::before{inset:calc(-1 * var(--signal-gap));border-color:rgba(255,157,0,.40)}
.website-home main .hero-reference-draft .orbit::after{inset:calc(-2 * var(--signal-gap));border-color:rgba(255,157,0,.18)}
@media (max-width:700px), (pointer:coarse){.website-home main .hero-reference-draft .orbit{--signal-gap:20px;width:calc(100% - 80px)}}

/* Inner signal just clears the phone; all four rings retain a 1px outline. */
.website-home main .hero-reference-draft .orbit{translate:2.8% 0}
.website-home main .hero-reference-draft .orbit .signal-inner{position:absolute;inset:calc(var(--signal-gap) - 2px);border:1px solid rgba(255,157,0,.94);border-radius:50%;background:transparent;box-shadow:none;pointer-events:none}
@media (max-width:700px), (pointer:coarse){.website-home main .hero-reference-draft .orbit{--signal-gap:11px;width:calc(100% - 12px)}}

/* Avoid an orphaned "file"; the paragraph still wraps naturally on phones. */
.website-home main .handover-section .section-head{max-width:950px}
.website-home main .handover-section .transfer-file{white-space:nowrap}

/* Draft revision 11: double signal spacing while retaining the inner phone clearance. */
.website-home main .hero-reference-draft .orbit{--signal-gap:48px;width:calc(100% - 48px)}
.website-home main{overflow-x:clip}
@media (max-width:700px), (pointer:coarse){.website-home main .hero-reference-draft .orbit{--signal-gap:22px;width:calc(100% + 10px)}}

/* Draft revision 12: signal spacing is 1.5 times revision 11; inner diameter retained. */
.website-home main .hero-reference-draft .orbit{--signal-gap:72px;width:100%}
@media (max-width:700px), (pointer:coarse){.website-home main .hero-reference-draft .orbit{--signal-gap:33px;width:calc(100% + 32px)}}

/* Draft revision 13: the visible photographic Fleet handset matches the panel grid. */
.layout-grid-draft .fleet-phone-alignment{width:100%;max-width:410px;justify-self:end}
.layout-grid-draft .fleet-phone-alignment>.fleet-screen{width:100%;max-width:none}
@media (min-width:1250px) and (pointer:fine){
 .website-home main .fleet-section.layout-grid-draft{align-items:start;column-gap:48px;row-gap:0}
 .layout-grid-draft .fleet-grid-copy{display:contents}
 .layout-grid-draft .fleet-grid-copy>.eyebrow{grid-column:1;grid-row:1}
 .layout-grid-draft .fleet-info{grid-column:1;grid-row:2}
 .layout-grid-draft .fleet-grid-copy>.subtle:not(.demo-license-note){grid-column:1;grid-row:3}
 .layout-grid-draft .fleet-grid-copy>.demo-license-note{grid-column:1;grid-row:4}
 .layout-grid-draft .fleet-phone-alignment{grid-column:2;grid-row:2;position:relative;align-self:stretch;min-height:0}
 .website-home main .layout-grid-draft .fleet-phone-alignment>.fleet-screen{position:absolute;right:0;top:-4.3206011271%;height:108.1402629931%;width:auto;max-width:none;aspect-ratio:911/1727;margin:0}
}
@media (min-width:701px) and (max-width:1249px) and (pointer:fine){
 .website-home main .fleet-section.layout-grid-draft{grid-template-columns:1fr;gap:36px}
 .layout-grid-draft .fleet-info{grid-template-columns:repeat(2,minmax(0,1fr))}
 .layout-grid-draft .fleet-phone-alignment{justify-self:center}
}
@media (max-width:700px), (pointer:coarse){.layout-grid-draft .fleet-phone-alignment{width:min(350px,100%);justify-self:center}}

/* Scoped mobile image review: shared top/bottom edges without squeezing either image. */
@media (max-width:700px), (pointer:coarse){
 .website-home main .layout-grid-draft .config-visual{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);column-gap:20px;row-gap:16px}
 .layout-grid-draft .config-card-stack,.layout-grid-draft .customize-preview-stack,.layout-grid-draft .customize-settings-stack{display:contents}
 .website-home main .layout-grid-draft .diagram-caption{grid-column:1/-1;grid-row:1}

 .website-home main .config-visual .trailer{grid-column:1;grid-row:3;align-self:start;margin:0}
 .website-home main .config-visual .floating-settings{grid-column:2;grid-row:3;align-self:stretch;min-height:0;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--orange)}
 .website-home main .config-visual .floating-settings img{width:100%;height:100%;object-fit:contain}
 .layout-grid-draft .config-whole-card{grid-column:1;grid-row:4;margin:0;padding:0}
}
@media(max-width:360px){.website-home main .layout-grid-draft .config-visual{column-gap:14px}}
/* Desktop static screenshots are pictures; the named Try control remains functional. */
@media (min-width:701px) and (pointer:fine) and (pointer:fine){[data-enlarge],.hero-reference-draft .phone-photo{cursor:default}}
[data-open-customize]{font-family:inherit;cursor:pointer;background:transparent;color:var(--orange)}
.website-home main #try .demo-entry-actions .demo-callout{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;gap:12px}
.website-home main #try .demo-entry-actions .demo-callout strong{grid-column:2;grid-row:1}
.website-home main #try .demo-entry-actions .demo-callout .cta-arrow:first-child{grid-column:1;grid-row:1;justify-self:start}
.website-home main #try .demo-entry-actions .demo-callout .cta-arrow:last-child{grid-column:3;grid-row:1;justify-self:end}
/* A native card fills the mobile viewport. No duplicate handset, frame or Close toolbar. */
#mobile-card-view{position:fixed;inset:0;margin:0;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;background:#080808;overflow:hidden;overscroll-behavior:none}
#mobile-card-view::backdrop{background:#080808}
#close-mobile-card{width:100%;height:100%;padding:0;margin:0;display:flex;justify-content:center;align-items:center;background:#080808;border:0;border-radius:0;overflow:hidden;touch-action:none}
#mobile-card-image-box{position:relative;display:block;overflow:hidden;width:100%;height:100%}
#mobile-card-image{position:absolute;max-width:none;left:var(--card-fit-left);top:var(--card-fit-top);width:var(--card-fit-width);height:var(--card-fit-height);object-fit:fill}
#close-mobile-card:focus-visible{outline:0}

.config-phone-alignment{display:contents}
@media (max-width:700px), (pointer:coarse){
 .website-home main .layout-grid-draft .config-visual{grid-template-columns:minmax(0,1.247332fr) minmax(0,1fr)}
 .config-phone-alignment{display:block;grid-column:1;grid-row:3;position:relative;aspect-ratio:911/1597;min-width:0}
 .website-home main .config-visual .config-phone-alignment .trailer{position:absolute;top:-4.3206011271%;height:108.1402629931%;width:100%;max-width:none;aspect-ratio:911/1727;margin:0}
 .website-home main .config-visual .floating-settings{border:0;border-radius:0}
}







[data-open-customize]{pointer-events:auto}

/* Website illustration only; the actual demo still shows Sync not connected. */


/* Test-card controls and explanations share explicit rows. */
.website-home main #try .demo-layout{--demo-handset-width:360px;--demo-columns:minmax(0,1.2fr) minmax(0,1fr);--demo-column-gap:clamp(24px,5vw,64px);align-items:start}
.website-home main #try .demo-entry-actions{display:grid;gap:14px;width:100%;margin:0;align-items:center}
.website-home main #try .demo-showcase{display:flex;flex-direction:column;align-items:center;gap:0;max-width:none;align-self:start;contain:none;min-height:0}
.website-home main #try .demo-phone-alignment{position:relative;width:min(var(--demo-handset-width),100%);aspect-ratio:832/1598;flex:none;margin-top:0}
html:not(.demo-focused) .website-home main #try #demo-stage.card-handset{position:absolute;left:-5.0480769231%;top:-4.3178973717%;width:109.4951923077%;height:108.0725907384%;aspect-ratio:auto;max-width:none;margin:0}
@media (min-width:701px) and (pointer:fine){
 .website-home main #try .demo-layout{grid-template-columns:var(--demo-columns);column-gap:var(--demo-column-gap);row-gap:24px}
 .website-home main #try .demo-copy{display:contents}
 .website-home main #try .demo-intro{grid-column:1;grid-row:1}
 .website-home main #try .demo-entry-actions{grid-column:1/-1;grid-row:2;grid-template-columns:var(--demo-columns);column-gap:var(--demo-column-gap)}
 .website-home main #try .demo-video-actions{width:min(var(--demo-handset-width),100%);justify-self:end}
 .website-home main #try .demo-card-instruction{width:min(var(--demo-handset-width),100%);justify-self:center}
 .website-home main #try .demo-description-grid{grid-column:1;grid-row:3;margin:0}
 .website-home main #try .demo-copy-notes{grid-column:1;grid-row:4}
 .website-home main #try .demo-showcase{grid-column:2;grid-row:3/5}
}
@media (max-width:700px), (pointer:coarse){
 .website-home main #try .demo-layout{row-gap:24px}
 .website-home main #try .demo-entry-actions{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:10px;padding-inline:18px}
 .website-home main #try .demo-showcase{max-width:440px}
 .website-home main #try .demo-phone-alignment{width:100%}
}

/* Configurable-field explanation: align the complete desktop image group with the copy and orange panel bottoms. */
@media (min-width:1101px) and (pointer:fine){
 .website-home main .adaptable.layout-grid-draft{align-items:start;row-gap:0}
 .layout-grid-draft .adaptable-copy{display:contents}
 .layout-grid-draft .adaptable-alignment-copy{grid-column:1;grid-row:1}
 .website-home main .layout-grid-draft .adaptable-applications{grid-column:1;grid-row:2;margin-top:28px}
 .website-home main .layout-grid-draft .config-visual{grid-column:2;grid-row:1;contain:size;align-self:stretch;min-height:0;align-items:stretch}
 .layout-grid-draft .config-card-stack,.layout-grid-draft .customize-preview-stack{min-height:0;height:100%;gap:16px}
 .layout-grid-draft .config-card-stack{align-items:center}
 .layout-grid-draft .config-phone-alignment{display:block;position:relative;width:var(--config-phone-width,100%);aspect-ratio:832/1598;flex:none}
 .website-home main .config-visual .config-phone-alignment .trailer{position:absolute;left:-5.0480769231%;top:-4.3178973717%;width:109.4951923077%;height:108.0725907384%;max-width:none;aspect-ratio:auto;margin:0}
 .layout-grid-draft .config-whole-card{width:var(--config-phone-width,100%);padding:0;margin-top:auto;flex:none}
 .website-home main .layout-grid-draft .diagram-caption{padding-top:0;flex:none}
 .layout-grid-draft .customize-settings-stack{min-height:0;align-items:center}

 .website-home main .layout-grid-draft .floating-settings{width:var(--config-settings-width,100%);height:auto;flex:none;padding:0;border:0;border-radius:0}
}
@media (min-width:701px) and (pointer:fine){.adaptable-applications>span:first-child{white-space:nowrap}}

/* Scoped website update: equipment list uses the full section width. */
.website-home main .layout-grid-draft .adaptable-applications{max-width:none;min-width:0}
.website-home main .layout-grid-draft .adaptable-applications>span{display:block;white-space:normal}
.website-home main .layout-grid-draft .adaptable-applications{text-wrap:balance}
@media (min-width:1101px) and (pointer:fine){.website-home main .layout-grid-draft .adaptable-applications{grid-column:1/-1;grid-row:2}}

/* Purchase copy starts at the price-card edge; device steps stay below the copy. */
.website-home main #pricing{align-items:start}
#pricing .pricing-copy{min-width:0}
#pricing .pricing-copy>.eyebrow{margin-top:0}
#pricing .pricing-install{margin-top:32px;min-height:0}
.website-home main #pricing .pricing-install h3{color:var(--orange);font-size:23px;line-height:1.35;letter-spacing:.6px;text-wrap:normal}
#pricing .pricing-install .pricing-install-label{font-size:18.2px;line-height:1.5}
#pricing .pricing-app-address{display:block;margin:18px 0 24px;font-size:18.2px;padding:16px 12px;overflow-wrap:anywhere;text-align:center;line-height:1.45}
#pricing .pricing-install label{display:block;margin-bottom:10px;font-size:20.8px;color:var(--white);line-height:1.4}
#pricing .pricing-install select{display:block;width:100%;min-width:0;min-height:52px;padding:12px 38px 12px 14px;border:1px solid var(--line);border-radius:8px;background:#080808;color:var(--white);font:400 18.2px/1.4 Arial,Helvetica,sans-serif}
#pricing .pricing-install select:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
#pricing .pricing-install [hidden]{display:none!important}
#pricing .pricing-install article{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
#pricing .pricing-install h4{font:700 20.8px/1.4 Arial,Helvetica,sans-serif;color:var(--white);margin:0 0 14px}
#pricing .pricing-install ol{padding-left:24px;margin:0 0 18px;color:var(--muted);font-size:18.2px;line-height:1.6}
#pricing .pricing-install li+li{margin-top:10px}
#pricing .pricing-install article p{font-size:18.2px;line-height:1.6}
#pricing .pricing-install .pricing-install-note{margin-top:20px;font-size:15px;line-height:1.6}
#pricing .pricing-install-help{display:inline-block;margin-top:12px;color:var(--orange);font-size:16px;text-underline-offset:4px}
#pricing #pricing-install-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:700px), (pointer:coarse){#pricing .pricing-install{margin-top:28px}.website-home main #pricing .pricing-install h3{font-size:21px}#pricing .pricing-install select{font-size:17px}#pricing .pricing-app-address{font-size:17px}}

/* Owner-approved pricing correction: pair the two boxes below the sales heading. */
#pricing .pricing-intro>.eyebrow{margin-top:0}
.website-home main #pricing .pricing-intro>p:not(.eyebrow){color:var(--muted);font-size:var(--explanation-type-size);line-height:1.6}
@media (min-width:701px) and (pointer:fine){
 .website-home main #pricing{row-gap:32px}
 #pricing .pricing-copy{display:contents}
 #pricing .pricing-intro{grid-column:1;grid-row:1;min-width:0}
 .website-home main #pricing .pricing-install{grid-column:1;grid-row:2;margin-top:0;align-self:stretch}
 #pricing .price-card{grid-column:2;grid-row:2;align-self:stretch;min-width:0}
}

/* Current native card examples and desktop app-sized viewing. */
[data-enlarge].card-handset,[data-enlarge][data-full-card]{cursor:pointer}
.handset-display:has(img[src*="standard-cards-"]),.handset-display:has(img[src*="r3-de-115/"]){--card-fit-left:0%;--card-fit-top:0%;--card-fit-width:100%;--card-fit-height:100%}
.demo-activate-cover{display:block;position:absolute;inset:0;z-index:5;border:0;padding:0;background:transparent;cursor:zoom-in}
html.demo-focused .demo-activate-cover{display:none}
.demo-mobile-instruction{display:inline}
#mobile-card-image-box{width:min(100vw,calc(100dvh * var(--visible-card-ratio,.446)));height:min(100dvh,calc(100vw / var(--visible-card-ratio,.446)))}
.vehicle-preset-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.vehicle-preset-section figure{margin:0}.vehicle-preset-section img{display:block;width:100%;height:auto}.vehicle-preset-section figcaption{font-size:14px;color:var(--muted);margin-top:12px}
@media (max-width:700px), (pointer:coarse){.vehicle-preset-section{grid-template-columns:1fr}}

/* Container queries size the inline handset; fullscreen belongs to the viewport. */
html.demo-focused .website-home main #try :is(.demo-showcase,.demo-phone-alignment){container-type:normal;contain:none;translate:none!important}

/* Preserve the PC page width while opening/closing a picture. */
html:has(body.website-home){scrollbar-gutter:stable}

/* German-language media: approved separate stamp; English always above German. */
.german-language-stamp{display:block;height:auto;flex:none;object-fit:contain}
.hero-reference-draft .hero-visual{padding-top:94px}
.hero-reference-draft .hero-language-stamp{position:absolute;top:-48px;right:64px;width:190px;z-index:2;pointer-events:none}
.hero-reference-draft .hero-video-actions{flex-direction:column;align-items:flex-end;gap:12px}
.hero-reference-draft .hero-video-actions .play-video{width:280px;max-width:100%;min-width:0}
.website-home main #try .demo-entry-actions .demo-video-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.website-home main #try .demo-heading-stamp{width:190px;justify-self:end;align-self:end;margin:0}
.website-home main #try .demo-heading-stamp img{width:100%}
@media (min-width:701px) and (pointer:fine){
 .website-home main #try .demo-heading-stamp{grid-column:2;grid-row:1;width:min(190px,100%);justify-self:center}
}
@media (max-width:700px), (pointer:coarse){
 .hero-reference-draft .hero-video-actions{align-items:stretch}
 .hero-reference-draft .hero-video-actions .play-video{width:100%;min-height:56px}
 .hero-reference-draft .hero-visual{padding-top:88px}
 .hero-reference-draft .hero-language-stamp{width:170px;top:-16px;right:32px}
 .website-home main #try .demo-heading-stamp{width:170px;margin-right:18px}
 .website-home main #try .demo-entry-actions{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
 .website-home main #try .demo-entry-actions .play-video{font-size:16px;padding:12px 8px;min-height:56px;gap:8px}
}

/* The sole purchase entry is the bottom price card. */
.website-home main .hero-reference-draft .hero-purchase-actions{grid-template-columns:minmax(0,1fr)}

/* Header and handset share the top; the lower copy finishes at the visible phone edge. */
.website-home main .hero-reference-draft{padding-top:24px}
@media (min-width:701px) and (pointer:fine){
 .website-home main .hero-reference-draft{align-items:stretch}
 .hero-reference-draft .hero-copy{display:flex;flex-direction:column;align-self:stretch;min-width:0;padding-bottom:var(--hero-phone-bottom-inset,23px)}
 .hero-reference-draft .hero-brand{margin-bottom:24px;flex:none}
 .website-home main .hero-reference-draft .eyebrow{margin-bottom:20px;flex:none}
 body.msc-metal-review.website-home main #home.hero-reference-draft h1{margin-bottom:0;flex:none}
 body.msc-metal-review.website-home main #home.hero-reference-draft .hero-video-actions{position:static;left:auto;top:auto;margin:26px 0 32px;align-self:flex-end;flex:none;translate:24px 0}
 .hero-reference-draft .hero-record-actions{margin-top:auto;flex:none;min-width:0}
 .hero-reference-draft .hero-record-actions .lead{margin-top:0}
 .website-home main .hero-reference-draft .hero-visual{align-self:stretch;align-items:flex-end;translate:none}
 .website-home main .hero-reference-draft .hero-visual .orbit{top:auto;bottom:calc(var(--hero-photo-height,838px)/2);transform:translateY(50%)}
 .hero-reference-draft .hero-language-stamp{top:-16px}
}
@media (max-width:700px), (pointer:coarse){
 .hero-reference-draft .hero-copy{padding-bottom:0}
 .hero-reference-draft .hero-video-actions{translate:none}
}

/* Test-card invitation: clear one-line caption; responsive video arrangement. */
body.msc-metal-review.website-home main #try .demo-entry-actions .demo-card-instruction{align-self:end}
body.msc-metal-review.website-home main #try .demo-entry-actions .demo-card-instruction .msc-metal-label strong,
body.msc-metal-review.website-home main #try .demo-entry-actions .demo-card-instruction .msc-phone-caption{white-space:nowrap}
@media (min-width:701px) and (pointer:fine){
 body.msc-metal-review.website-home main #try .demo-heading-stamp{translate:0 var(--demo-stamp-offset,0px)}
}
@media (max-width:700px), (pointer:coarse){
 body.msc-metal-review.website-home main #try .demo-entry-actions{grid-template-columns:minmax(0,1fr);gap:12px;align-items:stretch}
 body.msc-metal-review.website-home main #try .demo-entry-actions .demo-video-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;justify-self:stretch}
 body.msc-metal-review.website-home main #try .demo-entry-actions .msc-metal-switch{min-height:56px;height:auto;aspect-ratio:auto}
 body.msc-metal-review.website-home main #try .demo-entry-actions .demo-card-instruction{width:100%;min-height:58px;padding:10px 12px;justify-self:stretch}
 body.msc-metal-review.website-home main #try .demo-entry-actions .demo-card-instruction .msc-metal-label{grid-template-columns:16px minmax(0,1fr) 16px;gap:8px}
 body.msc-metal-review.website-home main #try .demo-entry-actions .demo-card-instruction .msc-metal-label strong{font-size:15px;line-height:1.2}
 body.msc-metal-review.website-home main #try .demo-entry-actions .demo-card-instruction .cta-arrow{width:16px;height:16px}
}

/* This invitation always points down to the card beneath it. Native down-arrow geometry avoids responsive rotation conflicts. */
body.msc-metal-review.website-home main #try .demo-entry-actions .demo-card-instruction .cta-arrow{transform:none;rotate:none}

/* Desktop hero: balanced top spacing, centered language stamp and paired video controls. */
@media (min-width:1001px) and (pointer:fine){
 body.msc-metal-review.website-home main #home.hero-reference-draft{padding-top:56px}
 body.msc-metal-review.website-home main #home.hero-reference-draft .hero-visual{padding-top:32px}
 body.msc-metal-review.website-home main #home.hero-reference-draft .hero-video-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:14px;align-self:stretch;translate:none;margin:26px 0 32px}
 body.msc-metal-review.website-home main #home.hero-reference-draft .hero-video-actions .msc-metal-switch{width:100%;min-height:64px;aspect-ratio:auto;padding:12px 10px;font-size:17px;gap:9px}
 body.msc-metal-review.website-home main #home.hero-reference-draft .hero-language-stamp{left:var(--hero-stamp-left,-190px);right:auto;top:var(--hero-stamp-top,85px);width:var(--hero-stamp-width,190px)}
}

/* Align the physical R3 handset top with the MSC logo, accounting for transparent image margins. */
@media (min-width:1001px) and (pointer:fine){
 body.msc-metal-review.website-home main #home.hero-reference-draft .hero-copy{padding-top:24px}
 body.msc-metal-review.website-home main #home.hero-reference-draft .hero-visual{padding-top:calc(24px - var(--hero-phone-top-inset,11px))}
 body.msc-metal-review.website-home main #home.hero-reference-draft .phone-photo{width:min(450px,100%)}
}

@media (min-width:1001px) and (pointer:fine){
 body.msc-metal-review.website-home main #home.hero-reference-draft .hero-visual{align-items:flex-start}
 body.msc-metal-review.website-home main #home.hero-reference-draft .hero-visual .orbit{top:calc(24px - var(--hero-phone-top-inset,11px) + var(--hero-photo-height,876px)/2);bottom:auto;transform:translateY(-50%)}
}

/* Match the upper black border to the left page margin; center video controls in the open text gap. */
@media (min-width:1001px) and (pointer:fine){
 body.msc-metal-review.website-home main #home.hero-reference-draft{padding-top:16px}
 body.msc-metal-review.website-home main #home.hero-reference-draft .hero-video-actions{flex:1 0 auto;grid-template-rows:64px;align-content:center;margin:0;padding-block:26px}
 body.msc-metal-review.website-home main #home.hero-reference-draft .hero-record-actions{margin-top:0}
}

/* Final owner correction: a compact 12px upper border, independent of the wide side margins. */
@media (min-width:1001px) and (pointer:fine){
 body.msc-metal-review.website-home main #home.hero-reference-draft{padding-top:0}
 body.msc-metal-review.website-home main #home.hero-reference-draft .hero-copy{padding-top:12px}
 body.msc-metal-review.website-home main #home.hero-reference-draft .hero-visual{padding-top:calc(12px - var(--hero-phone-top-inset,11px))}
 body.msc-metal-review.website-home main #home.hero-reference-draft .hero-visual .orbit{top:calc(12px - var(--hero-phone-top-inset,11px) + var(--hero-photo-height,876px)/2)}
}

/* German draft: same approved geometry, natural German text flow. */
.website-language{position:absolute;right:20px;top:8px;color:#bcbcbc;font:14px Arial;z-index:3}.hero{position:relative}.hero-video-actions .button{white-space:nowrap}.hero-video-actions{grid-template-columns:1fr;width:min(100%,320px)}.demo-callout{font-size:clamp(13px,1.15vw,18px)}

/* A dialog keeps its natural aspect ratio and a safe inset inside the photographed display. */
.vehicle-picker-handset>.handset-display>img{left:3%;top:3%;width:94%;height:94%;object-fit:contain}

/* Phone enlargement fills both viewport axes like the app; no panning or scrolling. */
@media (max-width:700px), (pointer:coarse), (pointer:coarse){
 #mobile-card-image-box{flex:none;width:100vw;height:100dvh}
}

/* Browser fallback: keep the complete portrait view centered when turned. */
html.portrait-only-phone.phone-landscape body.website-home{max-width:var(--phone-portrait-width,390px);margin-inline:auto}
html.portrait-only-phone.phone-landscape #mobile-card-image-box{width:min(100vw,calc(100dvh * var(--phone-portrait-ratio,.5)));height:100dvh}