/* Isolated website preview: selected phone switches and explanation frame 2. */
body.msc-metal-review{--msc-standard-switch-width:390px}
body.msc-metal-review :is(.button,.demo-callout,.customize-try).msc-metal-switch{
 position:relative;isolation:isolate;display:inline-flex!important;align-items:center;justify-content:center;background:transparent!important;border:0!important;
 border-radius:var(--msc-switch-radius-x,23px)/var(--msc-switch-radius-y,23px)!important;
 box-shadow:-4px 7px 12px #000b;color:#ff9d00!important;transform:none!important;filter:none!important;
 width:min(var(--msc-standard-switch-width),100%);max-width:100%;min-width:0;min-height:64px;
 padding:17px 22px;text-shadow:none!important;transition:box-shadow 110ms ease;
}
body.msc-metal-review .msc-metal-switch::before,body.msc-metal-review .msc-metal-switch::after{display:none!important}
body.msc-metal-review .msc-metal-face{
 position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;border-radius:inherit;
 transform:none;transition:transform 110ms ease;
}
body.msc-metal-review .msc-phone-switch-photo{position:absolute!important;max-width:none!important;width:110.086162%;height:166.436782%;left:-5.169792%;top:-31.264368%;object-fit:fill!important;display:block;border:0;border-radius:0;}
body.msc-metal-review .msc-phone-switch-orange{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
body.msc-metal-review .msc-metal-label{
 position:relative;display:flex;align-items:center;justify-content:center;gap:inherit;width:100%;min-width:0;
 color:#ff9d00;filter:none!important;text-shadow:none!important;transition:transform 110ms ease;
}
body.msc-metal-review .msc-phone-caption{
 display:inline-block;white-space:pre-wrap;background:none;color:#ff9d00;
 background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:#ff9d00;
}
body.msc-metal-review .msc-metal-label svg{flex-shrink:0;color:#ff9d00;width:1.3em;height:1.3em;filter:none!important}
body.msc-metal-review .msc-metal-switch.msc-is-down{box-shadow:-2px 3px 6px #000b}
body.msc-metal-review .msc-metal-switch.msc-is-down :is(.msc-metal-face,.msc-metal-label){transform:translate(2px,2px) scale(.985)}
body.msc-metal-review .msc-metal-switch.small{width:auto;min-height:44px;padding:12px 20px}
body.msc-metal-review .msc-metal-switch:disabled{opacity:.48}
body.msc-metal-review .msc-metal-switch:focus-visible{outline:2px solid #ff9d00;outline-offset:5px}
body.msc-metal-review .price-card .msc-metal-switch{margin-inline:0}
/* Physical outside switch width matches the visible phone casing. */
body.msc-metal-review.website-home main .hero-reference-draft :is(.hero-video-actions,.hero-purchase-actions){
 width:min(var(--msc-hero-phone-width,390px),100%);display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-content:start;
}
body.msc-metal-review.website-home main .hero-reference-draft .hero-video-actions{margin:22px 0 18px}
body.msc-metal-review.website-home main .hero-reference-draft .hero-purchase-actions{margin-top:0}
body.msc-metal-review.website-home main .hero-reference-draft :is(.hero-video-actions,.hero-purchase-actions) .msc-metal-switch{
 width:100%;height:auto;aspect-ratio:1973/435;min-height:0;padding:14px 20px;font-size:19px;gap:12px;
}
body.msc-metal-review main #try .demo-entry-actions{width:100%;margin-inline:0}
body.msc-metal-review main #try .demo-entry-actions .msc-metal-switch{display:flex;width:100%;aspect-ratio:1973/435;height:auto;min-height:0;padding:14px 18px;gap:9px;font-size:18px}
body.msc-metal-review main #try .demo-entry-actions .demo-callout .msc-metal-label{display:grid;grid-template-columns:22px minmax(0,1fr) 22px;gap:7px}
body.msc-metal-review main #try .demo-entry-actions .demo-callout .msc-metal-label strong{white-space:nowrap;font-size:16px}
body.msc-metal-review .config-whole-card{display:flex;justify-content:center}
body.msc-metal-review .config-whole-card .msc-metal-switch{width:min(var(--msc-config-phone-width,322px),100%);font-size:18px}
/* Selected upper/right phone rim, brighter orange line, subtle black-glass reflection. */
body.msc-metal-review .msc-rounded-frame{
 position:relative;isolation:isolate;border:0!important;border-radius:24px!important;
 background:radial-gradient(ellipse at 100% 0%,#111112,#090909 73%)!important;box-shadow:none!important;
}
body.msc-metal-review .msc-rounded-frame>:not(.msc-phone-frame-material):not(.msc-phone-frame-orange):not(.msc-phone-frame-glass){position:relative;z-index:2}
body.msc-metal-review .msc-rounded-frame>:is(.msc-phone-frame-material,.msc-phone-frame-orange){position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
body.msc-metal-review .msc-rounded-frame>.msc-phone-frame-material{z-index:0;opacity:1}
body.msc-metal-review .msc-rounded-frame>.msc-phone-frame-orange{z-index:1}
body.msc-metal-review .msc-rounded-frame>.msc-phone-frame-glass{
 position:absolute;right:8px;top:8px;width:65%;height:auto;max-height:calc(100% - 16px);aspect-ratio:650/230;overflow:hidden;pointer-events:none;z-index:0;
 border-radius:0 16px 0 0;opacity:.75;mask-image:linear-gradient(225deg,#000 0%,#000 28%,transparent 85%);
 -webkit-mask-image:linear-gradient(225deg,#000 0%,#000 28%,transparent 85%);
}
body.msc-metal-review .msc-rounded-frame .applications{border:0;background:none}
@media(max-width:700px){
 body.msc-metal-review.website-home main .hero-reference-draft :is(.hero-video-actions,.hero-purchase-actions) .msc-metal-switch{font-size:16px;gap:8px;padding:12px 15px}
 body.msc-metal-review #pricing .pricing-app-address.msc-metal-switch{font-size:14px;padding-inline:12px;gap:6px}
 body.msc-metal-review main #try .demo-entry-actions .msc-metal-switch{font-size:17px;padding-inline:14px}
 body.msc-metal-review main #try .demo-entry-actions .demo-callout .msc-metal-label strong{font-size:15px}
}
@media(prefers-reduced-motion:reduce){body.msc-metal-review :is(.msc-metal-switch,.msc-metal-face,.msc-metal-label){transition:none}}

/* Purchase enclosure retains all four phone edges and a complete orange inset. */
body.msc-metal-review .msc-complete-phone-frame{background:#090909!important;overflow:visible}
body.msc-metal-review .msc-complete-phone-frame>.msc-phone-frame-material{overflow:hidden;border-radius:24px}
body.msc-metal-review .msc-complete-phone-frame>.msc-phone-frame-glass{right:13px;top:13px}
body.msc-metal-review.website-home main .layout-grid-draft .adaptable-applications{border:0!important;background:none!important;box-shadow:none!important;padding-left:0;}
body.msc-metal-review.website-home #cards .card-copy{max-width:none;align-self:flex-start;box-sizing:border-box}
body.msc-metal-review.website-home main .hero-reference-draft .hero-video-actions{width:min(280px,var(--msc-hero-phone-width,390px),100%)}
body.msc-metal-review.website-home main .hero-reference-draft .hero-video-actions .msc-metal-switch{font-size:17px;padding:12px 15px;gap:10px}
@media(min-width:1001px){
 body.msc-metal-review.website-home main .hero-reference-draft .hero-visual{translate:0 var(--msc-hero-bottom-shift,0px)}
}
@media(min-width:1201px){
 body.msc-metal-review.website-home main .hero-reference-draft{position:relative}
 body.msc-metal-review.website-home main .hero-reference-draft h1{margin-bottom:32px}
 body.msc-metal-review.website-home main .hero-reference-draft .hero-video-actions{position:absolute;margin:0;z-index:3}
 body.msc-metal-review.website-home main .hero-reference-draft .hero-purchase-actions{margin-top:22px}
}

/* Uniform desktop rows; retain the approved photographic surfaces. */
@media(min-width:701px){
 body.msc-metal-review.website-home main :is(.feature-grid,.explanation-grid,.description-grid,.control-gallery){align-items:stretch}
 body.msc-metal-review.website-home main :is(.feature-grid,.explanation-grid,.description-grid)>.explanation-panel{align-self:stretch;margin-block:0}
 body.msc-metal-review.website-home #cards .card-columns{grid-template-rows:auto auto;align-items:start}
 body.msc-metal-review.website-home #cards .card-columns>article{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:24px;margin:0;min-width:0}
 body.msc-metal-review.website-home #cards .card-copy{align-self:stretch;margin-bottom:0;flex:none}
 body.msc-metal-review.website-home main .control-gallery .screen{aspect-ratio:960/1424;display:flex;align-items:center;justify-content:center}
 body.msc-metal-review.website-home main .control-gallery .screen img{width:100%;height:100%;object-fit:contain}
 body.msc-metal-review.website-home main .demo-description-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.msc-metal-review.website-home main #pricing{align-items:start}
 body.msc-metal-review.website-home main #pricing :is(.pricing-install,.price-card){grid-row:2;align-self:start;margin-top:0}
}
@media(max-width:700px){
 body.msc-metal-review.website-home main .hero-reference-draft .hero-video-actions{width:min(var(--msc-hero-phone-width,390px),100%)}
 body.msc-metal-review.website-home main .hero-reference-draft .hero-video-actions .msc-metal-switch{font-size:16px;padding:12px 15px;gap:8px}
}
#mobile-card-view,#close-mobile-card,#mobile-card-image-box{overscroll-behavior:none;touch-action:none}
#mobile-card-view img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

/* Read-only configurable-field illustration: invitation and caption precede both images. */
body.msc-metal-review.website-home main .layout-grid-draft .config-visual{contain:none;align-self:start;align-items:start;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px;grid-template-rows:auto auto}
body.msc-metal-review.website-home main .config-visual :is(.config-card-stack,.customize-preview-stack,.customize-settings-stack){display:contents}
body.msc-metal-review.website-home main .config-visual .config-whole-card{grid-column:1;grid-row:1;width:100%;margin:0;padding:0}
body.msc-metal-review.website-home main .config-visual .config-whole-card .msc-metal-switch{width:100%;min-height:0;aspect-ratio:1973/435;height:auto}
body.msc-metal-review.website-home main .config-visual .diagram-caption{grid-column:2;grid-row:1;padding:0;margin:0;align-self:start}
body.msc-metal-review.website-home main .config-visual .config-phone-alignment{display:block;position:relative;grid-column:1;grid-row:2;width:100%;aspect-ratio:832/1598;height:auto}
body.msc-metal-review.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}
body.msc-metal-review.website-home main .config-visual .floating-settings{grid-column:2;grid-row:2;align-self:start;position:relative;width:100%;height:auto;padding:0;margin:0;border:0;cursor:default}
body.msc-metal-review.website-home main .config-visual .floating-settings img{width:100%;height:auto}
body.msc-metal-review.website-home main .config-visual .diagram-field{pointer-events:none;cursor:inherit}
@media(max-width:700px){body.msc-metal-review.website-home main .layout-grid-draft .config-visual{gap:16px;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}}

/* Align the visible photographic edge, not the transparent image canvas. */
body.msc-metal-review .msc-rounded-frame:not(.msc-complete-phone-frame)>.msc-phone-frame-material{transform:translateY(4px)}
body.msc-metal-review.website-home main .device-showcase{align-items:start}
body.msc-metal-review.website-home main .control-gallery .screen{align-items:flex-start}
body.msc-metal-review.website-home main .control-gallery .screen img{object-position:center top}
/* Two independent columns: the caption cannot leave a blank row above the handset. */
body.msc-metal-review.website-home main .layout-grid-draft .config-visual{grid-template-columns:var(--config-left37,minmax(0,1.2fr)) minmax(0,.8fr);grid-template-rows:auto;gap:20px;align-items:start}
body.msc-metal-review.website-home main .config-visual .config-card-stack{display:flex;flex-direction:column;grid-column:1;grid-row:1;height:auto;gap:6px;min-width:0}
body.msc-metal-review.website-home main .config-visual .config-whole-card{order:-1;flex:none;width:100%;margin:0;padding:0}
body.msc-metal-review.website-home main .config-visual .customize-preview-stack{display:flex;flex-direction:column;grid-column:2;grid-row:1;height:var(--config-height37,auto);gap:12px;min-width:0}
body.msc-metal-review.website-home main .config-visual .diagram-caption{flex:none;min-width:0;margin:0;padding:0}
body.msc-metal-review.website-home main .config-visual .customize-settings-stack{display:flex;flex:1;min-height:0;width:100%}
body.msc-metal-review.website-home main .config-visual .floating-settings{width:100%;height:100%;min-height:0;align-self:stretch}
body.msc-metal-review.website-home main .config-visual .floating-settings img{width:100%;height:100%;object-fit:fill}
@media(max-width:700px){body.msc-metal-review.website-home main .layout-grid-draft .config-visual{gap:16px}}

body.msc-metal-review.website-home main .layout-grid-draft .config-visual{grid-template-columns:var(--config-left37,minmax(0,1.2fr)) minmax(0,1fr)}
body.msc-metal-review.website-home main .config-visual .floating-settings{width:min(100%,var(--settings-width37,100%));flex:none}
@media(max-width:700px){body.msc-metal-review.website-home main .config-visual .diagram-caption{font-size:12px!important;line-height:1.35}body.msc-metal-review.website-home main .config-visual .diagram-caption strong{font-size:13px;line-height:1.35;margin-bottom:5px}}

@media(max-width:700px){body.msc-metal-review.website-home main .config-visual .config-whole-card .msc-metal-switch{font-size:clamp(9px,2.9vw,12px);padding:0 7px;gap:4px}body.msc-metal-review.website-home main .config-visual .config-whole-card .msc-phone-caption{white-space:nowrap}}

/* Local draft only: native partial card, two clean block-to-editor connectors. */
body.msc-metal-review.website-home main .config-visual .config-phone-alignment{aspect-ratio:auto;height:var(--crop-height40,280px);overflow:hidden;border-radius:0}
body.msc-metal-review.website-home main .config-visual .config-phone-alignment .trailer{height:auto;aspect-ratio:911/1727;top:var(--crop-offset40,0px)}
body.msc-metal-review.website-home main .config-visual .customize-preview-stack{height:auto}
body.msc-metal-review.website-home main .config-visual .customize-settings-stack{display:block;flex:none}
body.msc-metal-review.website-home main .config-visual .floating-settings{width:100%;height:auto}
body.msc-metal-review.website-home main .config-visual .floating-settings img{width:100%;height:auto;object-fit:contain}

/* Local layout41: explanation, cropped native card and full-demo button on the left. */
body.msc-metal-review.website-home main .config-visual .config-card-stack{justify-content:space-between;gap:20px}
body.msc-metal-review.website-home main .config-visual .config-whole-card{order:0}
body.msc-metal-review.website-home main .config-visual .config-phone-alignment{flex:none}
body.msc-metal-review.website-home main .config-visual .diagram-caption{flex:none;font-size:18px!important;line-height:1.5}
body.msc-metal-review.website-home main .config-visual .diagram-caption strong{font-size:23px;line-height:1.3;margin-bottom:10px}
body.msc-metal-review.website-home main .config-visual .customize-preview-stack{height:auto;gap:0}
body.msc-metal-review.website-home main .config-visual .connector{stroke-width:2;stroke-linecap:round}
body.msc-metal-review.website-home main .config-visual.green-annotation .field-highlight{border-color:#55c46e}
body.msc-metal-review.website-home main .config-visual.green-annotation .connector{stroke:#55c46e}
@media(max-width:700px){
 body.msc-metal-review.website-home main .config-visual .config-card-stack{gap:14px}
 body.msc-metal-review.website-home main .config-visual .diagram-caption{font-size:12px!important;line-height:1.4}
 body.msc-metal-review.website-home main .config-visual .diagram-caption strong{font-size:14px;line-height:1.3;margin-bottom:7px}
 body.msc-metal-review.website-home main .config-visual .connector{stroke-width:1.5}
}

/* The public page scrolls vertically; the complete interactive demo keeps its own gestures. */
@media(max-width:700px),(pointer:coarse){
 html:has(body.website-home),body.website-home{overflow-x:clip;overscroll-behavior-x:none}
 html:not(.demo-focused):has(body.website-home),html:not(.demo-focused) body.website-home{touch-action:pan-y pinch-zoom}
 html.demo-focused:has(body.website-home),html.demo-focused body.website-home{touch-action:auto}
}

/* Opaque annotation in front of native field borders. Black clearance removes the
   mileage bottom stroke, exterior gray ticks and orange side-line intersections. */
body.msc-metal-review.website-home main .config-visual.green-annotation .field-highlight{
 z-index:20;opacity:1;mix-blend-mode:normal;border-color:#55c46e;border-radius:2px;
 box-shadow:0 0 0 max(3px,1.6cqw) #080808,inset 0 0 0 max(1px,.4cqw) #080808;
}

/* A touch-returned picture has its original appearance. Keyboard focus stays visible. */
body.website-home [data-enlarge][data-card-image-touch-return="true"]:focus{outline:none!important}

/* PC composition: one shared heading above caption/crop/button and settings. */
.diagram-heading44{display:none}
@media(min-width:701px){
 body.msc-metal-review.website-home main .layout-grid-draft .config-visual{grid-template-rows:auto auto;row-gap:18px;padding-top:var(--config-desktop-offset44,0px)}
 body.msc-metal-review.website-home main .config-visual .diagram-heading44{display:block;grid-column:1/-1;grid-row:1;margin:0;color:var(--orange);font-size:23px;line-height:1.3;letter-spacing:0}
 body.msc-metal-review.website-home main .config-visual :is(.config-card-stack,.customize-preview-stack){grid-row:2}
 body.msc-metal-review.website-home main .config-visual .diagram-caption strong{display:none}
}

/* A static card grows from its visible page position and returns to that position. */
#mobile-card-view::backdrop{background:transparent}
#close-mobile-card{background:transparent}
#mobile-card-image-box{transform-origin:0 0}

/* The enlarged static example retains the same opaque green annotation and clearance. */
body.website-home #mobile-card-view .fullscreen-annotated.green-annotation .field-highlight{
 z-index:20;opacity:1;mix-blend-mode:normal;border-color:#55c46e;border-radius:2px;
 box-shadow:0 0 0 max(3px,1.6cqw) #080808,inset 0 0 0 max(1px,.4cqw) #080808;
}

/* Preserve the original portrait dialog proportions in the static examples. */
body.msc-metal-review.website-home main .control-gallery .screen{aspect-ratio:auto;display:block;height:auto}
body.msc-metal-review.website-home main .control-gallery .screen img{width:100%;height:auto;object-fit:contain}

@media(min-width:701px){body.msc-metal-review.website-home main .vehicle-preset-section{align-items:start}body.msc-metal-review.website-home main .vehicle-preset-section .vehicle-picker-handset{width:min(100%,var(--vehicle-preset-phone-width,100%));margin-inline:auto}}

.demo-tap-instruction{display:none}.demo-card-instruction{cursor:default}.demo-card-instruction:hover{filter:none}@media(max-width:700px),(pointer:coarse){.demo-click-instruction{display:none}.demo-tap-instruction{display:inline}}

@media(max-width:700px){
 body.msc-metal-review main #try .demo-entry-actions .msc-metal-switch{aspect-ratio:auto;min-height:60px;height:100%;padding:10px 8px;font-size:14px;gap:5px}
 body.msc-metal-review main #try .demo-entry-actions .play-video .video-play-icon{width:12px;height:12px}
 body.msc-metal-review main #try .demo-entry-actions .demo-callout .msc-metal-label{grid-template-columns:14px minmax(0,1fr) 14px;gap:4px}
 body.msc-metal-review main #try .demo-entry-actions .demo-callout .msc-metal-label strong{white-space:normal;font-size:13px}
 body.msc-metal-review main #try .demo-entry-actions .demo-callout .cta-arrow{width:14px;height:14px}
}
@media(min-width:701px){body.msc-metal-review.website-home main #try .demo-entry-actions .demo-callout{width:min(var(--demo-handset-width),100%)}}
@media(min-width:701px){body.msc-metal-review.website-home main #try .demo-entry-actions .demo-video-actions{width:min(var(--demo-handset-width),100%)}}