/* The open Duo uses one continuous inner display with two simultaneous panes. */
.hero-product-proof,.phone-travelling .hero-product-proof{width:clamp(340px,32vw,440px);left:7%;bottom:12%;transform:translate(var(--sway-x,0px),var(--sway-y,0px)) perspective(900px) rotateY(var(--sway-angle,0deg)) rotate(calc(-3deg + var(--sway-angle,0deg)))}
.hero-product-proof .held-duo-model{position:absolute;left:-45.07%;top:-12.4%;width:190.14%;height:524.8%;max-width:none;pointer-events:none;z-index:0}
.hero-product-proof .phone-shell{aspect-ratio:2.84/2.02;border-radius:4.5%;background:#f6f7f4;box-shadow:0 0 0 4px #172126;overflow:hidden}
.hero-product-proof .phone-shell>img{left:50%;width:50%;height:100%;object-fit:contain;opacity:1!important;background:#f6f7f4}
.hero-product-proof .tour-phone-camera{left:0;right:50%;top:0;bottom:0;width:50%;opacity:1;border-radius:0}
.hero-product-proof .phone-map{left:0;right:50%;width:50%;z-index:2;border-radius:0}
.hero-product-proof .phone-shell:after{content:'';position:absolute;top:0;bottom:0;left:50%;width:3px;background:linear-gradient(90deg,#24333724,#ffffff30);pointer-events:none;z-index:4}
.hero-product-proof .phone-notification{left:53%;right:3%;top:7%;z-index:6}
.camera-top{font-size:6px}.camera-quality{font-size:5px}.camera-bottom{font-size:7px}.camera-bottom i{width:20px;height:20px}.camera-bottom small{font-size:5px}
@media(min-width:651px) and (max-width:1000px){.hero-product-proof,.phone-travelling .hero-product-proof{width:270px;left:7%}.journey-sticky.inside .journey-copy{width:38%;right:3%;padding:20px}.journey-sticky.inside .journey-copy h1{font-size:30px}}
@media(max-width:650px){.hero-product-proof,.phone-travelling .hero-product-proof{width:260px;left:14%;bottom:48%}.hero-product-proof:not([data-mode=video]){z-index:1}.journey-sticky.inside .journey-copy{z-index:3}.hero-product-proof .phone-shell{box-shadow:0 0 0 3px #172126}.phone-notification p{font-size:5px}.camera-top{font-size:5px}.camera-bottom{gap:4px}.map-address{font-size:6px;padding:7px 4px}.map-address span{font-size:5px}}
@media(prefers-reduced-motion:reduce){.hero-product-proof,.phone-travelling .hero-product-proof{transform:none;transition:none}}


.hero-product-proof .tour-phone-camera{transition:width .65s ease,right .65s ease}.hero-product-proof.duo-video-only .tour-phone-camera{width:100%;right:0;z-index:2}.hero-product-proof.duo-video-only .phone-shell>img{visibility:hidden}.hero-product-proof.duo-video-only .phone-notification{display:none}@media(prefers-reduced-motion:reduce){.hero-product-proof .tour-phone-camera{transition:none}}

.hero-product-proof .held-duo-grip{z-index:5;pointer-events:none}

.secret-photo-thumbnail{position:absolute!important;inset:auto auto 10% 7%!important;width:23%!important;height:auto!important;aspect-ratio:4/3;border:2px solid white;border-radius:3px;opacity:0;transform:scale(.5);transition:opacity .2s,transform .25s;z-index:5}.secret-photo-taken .secret-photo-thumbnail{opacity:1;transform:scale(1)}.secret-photo-taken .camera-bottom i{background:white}
/* Clip long sleeves without creating an internally scrollable sticky viewport. */
.journey-sticky{overflow:clip}

/* The tour ends at the invitation step, replacing both camera and app panes. */
.duo-invitation{display:none;position:absolute;inset:0;z-index:7;background:linear-gradient(130deg,#f6f1e6,#e5ebdd);padding:6% 9%;color:#304638;line-height:1.3;text-align:left}
.hero-product-proof[data-mode=invitation] .duo-invitation{display:block}
.hero-product-proof[data-mode=invitation] .tour-phone-camera,.hero-product-proof[data-mode=invitation] .phone-shell>img,.hero-product-proof[data-mode=invitation] .phone-shell:after,.hero-product-proof[data-mode=invitation] .phone-notification{display:none!important}
.invitation-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5%}.invitation-top>span{font:22px var(--serif)}.invitation-top small{font-size:7px;letter-spacing:.15em}
.duo-invitation h2{font:27px/1.1 var(--serif);margin:0 0 3%;letter-spacing:-.03em}.duo-invitation p{font-size:10px;color:#65705b;margin:0 0 5%}
.invitation-fields{display:flex;gap:8px;margin-bottom:5%}.invitation-fields>span{flex:1;padding:9px 10px;background:#fffdf8;border:1px solid #cbd2c2;border-radius:4px;font-size:9px;color:#777c6c}
.invitation-action{display:flex;justify-content:space-between;background:#354e40;color:#fffdf5;padding:11px 13px;border-radius:4px;font-size:11px;font-weight:500}.invitation-note{display:block;text-align:center;font-size:7px;margin-top:3%;color:#68735e}
@media(max-width:1000px){.duo-invitation{padding:5% 8%}.invitation-top{margin-bottom:4%}.invitation-top>span{font-size:16px}.duo-invitation h2{font-size:21px}.duo-invitation p{font-size:8px;margin-bottom:4%}.invitation-fields{margin-bottom:4%}.invitation-fields>span{font-size:7px;padding:6px}.invitation-action{font-size:9px;padding:8px}.invitation-note{font-size:6px}}
@media(max-width:650px){.duo-invitation{padding:4% 8%}.invitation-top{margin-bottom:2%}.duo-invitation h2{font-size:18px;margin-bottom:2%}.duo-invitation p{margin-bottom:3%}.invitation-fields{margin-bottom:3%}.invitation-fields>span{padding:5px}.invitation-action{padding:7px}.invitation-note{margin-top:2%}}

/* Leave the people visible above the held device during the staff-room pause. */
@media(max-width:650px){.mobile-people-view .hero-product-proof,.mobile-people-view.phone-travelling .hero-product-proof{width:190px;left:calc(50% - 95px);bottom:29%}}

.studio-preview .hero-product-proof,.studio-preview.phone-travelling .hero-product-proof{width:clamp(180px,25vw,320px);left:3%;bottom:3%;top:auto}
@media(max-width:650px){.studio-preview .hero-product-proof,.studio-preview.phone-travelling .hero-product-proof{width:190px;left:12px;bottom:28%;top:auto}}

.client-device .phone-shell{position:relative;container-type:inline-size}
.live-device-time{position:absolute;left:10%;top:3%;width:19%;height:4%;display:flex;align-items:center;justify-content:center;background:#f8f7f4;color:#111;font:600 4.6cqw Arial,sans-serif;line-height:1;pointer-events:none}

.journey-copy .scroll-invitation{position:static;inset:auto;transform:none;width:auto;margin:24px 0 0;text-align:left;pointer-events:none}
.inside .journey-copy .scroll-invitation{display:none}

.invitation-fields input{min-width:0;width:50%;padding:9px 10px;background:#fffdf8;border:1px solid #cbd2c2;border-radius:8px;font:inherit;font-size:10px;color:#304638}
.duo-invitation .invitation-action{width:100%;border:0;text-align:left;cursor:pointer}
.invitation-fields input:focus-visible{outline:2px solid #536b4e;outline-offset:2px}

.clinic-sound{position:absolute;top:22px;left:22px;z-index:15;border:1px solid #cbd2c2;border-radius:8px;background:#faf8f5e8;color:#304638;padding:10px 16px;min-height:44px;font:12px var(--sans)}
.clinic-sound[hidden]{display:none}

.clinic-sound{width:44px;height:44px;padding:10px;display:grid;place-items:center;border-radius:50%}

.duo-tour-info{position:absolute;inset:0 0 0 50%;z-index:5;display:flex;flex-direction:column;padding:7% 5%;background:#f6f1e8;color:#2b352e;gap:5%}
.duo-at-door .duo-tour-info,[data-mode=invitation] .duo-tour-info{display:none}
.tour-info-brand{font:clamp(13px,1.3vw,19px) var(--serif);display:flex;align-items:center;justify-content:space-between}
.tour-info-brand small,.tour-info-room,.tour-info-progress{font:500 clamp(5px,.5vw,7px)/1.4 var(--sans);letter-spacing:.1em}
.tour-info-room{text-transform:uppercase;margin-top:5%;color:#59674f}
.duo-tour-info h3{font:clamp(15px,1.6vw,23px)/1.1 var(--serif);margin:0;letter-spacing:-.3px}
.duo-tour-info p{font:clamp(7px,.72vw,10px)/1.5 var(--sans);margin:0}
.duo-tour-info .tour-info-benefit{border-top:1px solid #d1d6c9;padding-top:8%;color:#59674f}
.tour-info-progress{margin-top:auto;color:#59674f}
/* Type follows the device width, including its compact room-preview state. */
.hero-product-proof .phone-shell{container-type:inline-size}
.duo-tour-info{gap:3.5%;padding:6% 4.5%;min-width:0}
.tour-info-brand{font-size:4cqw}
.tour-info-brand small,.tour-info-room,.tour-info-progress{font-size:1.65cqw;letter-spacing:.07em}
.tour-info-room{margin-top:3%}
.duo-tour-info h3{font-size:4.6cqw;line-height:1.08;overflow-wrap:anywhere}
.duo-tour-info p{font-size:2.3cqw;line-height:1.45}
.duo-tour-info .tour-info-benefit{padding-top:6%}
.duo-welcome .welcome-invitation strong{font-size:5.5cqw}
.duo-welcome .welcome-brand{font-size:4.3cqw}
.duo-welcome p,.duo-welcome .welcome-guide p,.welcome-guide-note{font-size:2.1cqw}
.duo-welcome .welcome-guide strong{font-size:4.2cqw}
.duo-welcome .welcome-guide-label{font-size:1.6cqw}
.welcome-start{font-size:2.3cqw;padding:3cqw 1.5cqw}