/* Residence concept shares the Kings Chelsea phone's even metal and glass frame. */
.app-premium .device.residence-device{--residence-rim-radius:40px;width:312px;height:auto;aspect-ratio:865/1856;box-sizing:border-box;padding:3px;border:0;border-radius:calc(var(--residence-rim-radius) + 3px);background:#080b10;box-shadow:0 0 0 1px var(--app-phone-bronze),25px 35px 90px #0009;overflow:hidden}
.app-premium .residence-device:hover,.app-premium .residence-device:focus-within,.app-premium .phone-stage.touring .residence-device{box-shadow:0 0 0 1px var(--app-phone-bronze),25px 35px 90px #0009,0 0 80px #b498ed12}
/* The screen clips at the inner edge. A separate frame paints above composited media. */
.residence-glass{position:absolute;inset:6px;display:flex;flex-direction:column;width:auto;height:auto;border:0;border-radius:calc(var(--residence-rim-radius) - 3px);clip-path:inset(0 round calc(var(--residence-rim-radius) - 3px));background:#f5f2ec;overflow:hidden;isolation:isolate}
.app-premium .device.residence-device:after{content:"";position:absolute;inset:3px;z-index:9;border:3px solid #080b10;border-radius:var(--residence-rim-radius);box-shadow:0 0 0 3px var(--app-phone-gold);pointer-events:none}
.app-premium .residence-device .phone-status{height:36px;min-height:36px;flex-shrink:0;padding:11px 20px 7px;font-size:9px;line-height:1;align-items:center}
.residence-device .dynamic-island{top:7px;width:28%;height:20px;background:#030509;box-shadow:inset 0 0 0 1px #ffffff0c}
.residence-device .dynamic-island:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;right:9px;top:7px;background:radial-gradient(circle at 35% 35%,#294275,#091326 60%)}
.app-premium .residence-device .phone-app{height:auto;flex:1;min-height:0}
.app-premium .residence-device .phone-brand{min-height:57px;flex-shrink:0;padding:4px 17px 12px;gap:8px;font-size:9px}
.app-premium .residence-device .residence-mark{display:block;width:30px;height:35px;object-fit:contain;flex-shrink:0}
.app-premium .residence-device .phone-brand small{font-size:8px;margin-top:2px}
.app-premium .residence-device #phone-content{padding:0 14px 12px;scrollbar-width:none;flex:1;min-height:0;overscroll-behavior-y:contain}
.residence-device #phone-content::-webkit-scrollbar{display:none}
.app-premium .residence-device .phone-nav{min-height:60px;flex-shrink:0;padding:5px 7px 9px;gap:4px;background:#f5f2ec;border-top:1px solid #29413416}
.app-premium .residence-device .phone-nav button{position:relative;min-width:0;flex:1;min-height:45px;font-size:8px;padding:5px 3px;gap:3px;border-radius:12px}
.residence-device .phone-nav svg{width:17px;height:17px}
.residence-device .ra-plan-count{position:absolute;top:2px;right:18px;min-width:12px;height:12px;border-radius:10px;display:grid;place-items:center;background:#224d38;color:#fff;font:7px/1 var(--sans);padding:1px 3px}
.residence-device .ra-plan-count[hidden]{display:none}
.residence-device .device-sheen{inset:0;border-radius:36px;background:linear-gradient(115deg,#fff1,transparent 19%,transparent 84%,#fff1)}
.residence-device .app-universe-screen{border-radius:36px}
.residence-device .app-universe-screen iframe{border-radius:0}
.phone-stage[data-experience=universe] .residence-glass{background:#080a10}
.phone-stage[data-experience=universe] .residence-device .phone-app{visibility:hidden}
.app-premium .residence-device button:focus-visible,.app-premium .residence-device select:focus-visible{outline:2px solid #886229;outline-offset:2px}
.ra-welcome{display:flex;justify-content:space-between;align-items:end;gap:7px;padding:2px 1px 11px}
.app-premium #phone-content .ra-welcome h3{font-size:28px;line-height:1.02;letter-spacing:-1px;margin:5px 0 0}
.app-premium #phone-content .ra-welcome .phone-eyebrow{font-size:7px;letter-spacing:.085em;margin:0;max-width:150px;line-height:1.5}
.ra-home-status{font-size:7px;color:#4f654f;white-space:nowrap;padding-bottom:2px}
.ra-home-status i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#628359;margin-right:3px}
.ra-cinema-feature{overflow:hidden;border-radius:14px;background:#132d27;box-shadow:0 8px 20px #17231b13}
.residence-cinema-picture{position:relative;isolation:isolate;overflow:hidden;background:#141512}
.residence-cinema-picture>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.residence-cinema-picture>.residence-film{display:block;position:absolute;left:var(--cinema-left,22%);top:var(--cinema-top,20%);width:var(--cinema-width,56%);height:var(--cinema-height,33%);pointer-events:none;opacity:.92;mix-blend-mode:screen}
.ra-picture-tag{position:absolute;left:12px;bottom:10px;z-index:2;max-width:calc(100% - 24px);padding:5px 7px;border:1px solid #fff4;background:#0d171ab3;color:#fff8df;border-radius:20px;font-size:6.5px;letter-spacing:.12em;backdrop-filter:blur(7px)}
.ra-cinema-copy{padding:12px 14px 13px;position:relative;color:#fff7e7;background:radial-gradient(ellipse at 90% 0,#31504699,transparent 65%),#132d27}
.ra-kicker{display:block;font-size:6.5px;letter-spacing:.14em;line-height:1.6;color:#d5c397}
.app-premium #phone-content .ra-cinema-copy h4{font:27px/1.01 var(--serif);letter-spacing:-.9px;margin:5px 0 11px;color:#fff7e7}
.ra-primary{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:9px 11px;min-height:34px;border:1px solid #e1c79566;border-radius:8px;background:#d8bd85;color:#22362c;font-size:9px;font-weight:600;text-align:left}
.ra-primary svg{width:13px;height:13px;flex-shrink:0;stroke-width:1.5}
.ra-spaces-link{width:100%;padding:12px 2px 2px;display:flex;align-items:center;justify-content:space-between;gap:7px;border:0;background:none;color:#294632;text-align:left;font-size:9px;font-weight:600;line-height:1.5}
.ra-spaces-link small{display:block;font-size:8px;font-weight:400;color:#60715b;margin-top:2px}
.ra-spaces-link svg{width:15px;height:15px;flex-shrink:0}
.ra-title{padding:5px 0 11px}
.app-premium #phone-content .ra-title h3{font-size:28px;line-height:1.05;letter-spacing:-1px;margin:6px 0 7px}
.ra-title>p:last-child{font-size:9px;line-height:1.6;color:#5b6e57;max-width:230px}
.ra-space-list{display:grid;gap:9px}
.ra-space-card{display:grid;grid-template-columns:89px 1fr;min-height:97px;border:1px solid #2d422117;border-radius:11px;overflow:hidden;background:#fffdf6}
.ra-space-card>img{width:89px;height:100%;min-height:97px;object-fit:cover;object-position:center}
.ra-space-card>div{padding:9px 10px;display:flex;flex-direction:column;align-items:start;justify-content:center}
.app-premium #phone-content .ra-space-card h4{font:16px/1.13 var(--serif);letter-spacing:-.3px;margin:0 0 4px;color:#26402c}
.ra-space-card p{font-size:8px;line-height:1.5;color:#64725a}
.ra-space-card button{border:0;background:#e5e8d9;color:#294632;border-radius:6px;min-height:29px;padding:5px 9px;margin-top:7px;font-size:8px;display:flex;align-items:center;gap:9px}
.ra-space-card button svg{width:11px;height:11px}
.ra-back{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:#4f6349;font-size:8px;padding:3px 0 9px;min-height:28px}
.ra-back svg{width:12px;height:12px;rotate:180deg}
.ra-booking-cover{position:relative;overflow:hidden;border-radius:11px;margin-bottom:10px;background:#203d32}
.ra-booking-cover:not(.residence-cinema-picture)>img{width:100%;height:143px;object-fit:cover}
.ra-booking-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.app-premium #phone-content .ra-booking-title h3{font:24px/1.05 var(--serif);letter-spacing:-.65px;margin:0;color:#243e2c}
.ra-booking-title>span{font-size:7px;line-height:1.5;color:#597053;text-align:right;max-width:60px}
.ra-booking-form{display:grid;gap:10px}
.ra-booking-form fieldset{margin:0;padding:0;border:0;min-width:0}
.ra-booking-form legend,.ra-guests>span{font-size:8px;font-weight:600;color:#304c36;padding:0;margin-bottom:6px}
.ra-options{display:flex;gap:5px}
.ra-options button{flex:1;min-height:31px;border:1px solid #34523926;border-radius:7px;background:#fffdf7;color:#53664e;font-size:8px;padding:6px 5px}
.ra-options button[aria-pressed=true]{border-color:#37503a;background:#284c37;color:#fff9e9;box-shadow:0 2px 5px #29443212}
.ra-guests{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ra-guests>span{margin:0}
.ra-guests select{font-size:8px;color:#294331;background:#fffdf7;border:1px solid #34523926;border-radius:6px;min-height:30px;padding:5px 20px 5px 8px}
.ra-booking-form>.ra-primary{border:0;background:#294c37;color:#fff7e8;min-height:35px;margin-top:1px}
.ra-demo-note{font-size:7px;line-height:1.5;color:#62715b;text-align:center;margin-top:7px}
.ra-confirmed{padding:9px 0 0;text-align:center}
.ra-confirmed-symbol{width:48px;height:48px;margin:0 auto 13px;display:grid;place-items:center;border-radius:50%;background:#dce4cf;color:#33583b;box-shadow:0 0 0 7px #e9ecdf}
.ra-confirmed-symbol svg{width:25px;height:25px;stroke-width:1.5}
.app-premium #phone-content .ra-confirmed>h3{font:30px/1.03 var(--serif);margin:12px 0 9px;letter-spacing:-.9px;color:#28452e}
.ra-confirmed>p{font-size:9px;line-height:1.65;color:#617158}
.ra-ticket{background:#fffdf7;border:1px solid #29452124;border-radius:12px;margin:17px 0 12px;text-align:left;overflow:hidden;box-shadow:0 8px 25px #2945210a}
.ra-ticket>img{display:block;width:100%;height:100px;object-fit:cover}
.ra-ticket-copy{padding:12px 13px}
.ra-ticket-copy>.ra-kicker{color:#7a622f;font-size:6.5px}
.app-premium #phone-content .ra-ticket h4{font:23px/1.1 var(--serif);letter-spacing:-.7px;color:#29462f;margin:5px 0 7px}
.ra-ticket dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:5px 9px;font-size:8px;line-height:1.4;color:#64765b}
.ra-ticket dt,.ra-ticket dd{margin:0}
.ra-ticket dd{text-align:right;color:#344e35}
.ra-ticket-actions{display:flex;border-top:1px dashed #29452126;padding:6px 12px;gap:8px;align-items:center;justify-content:space-between}
.ra-ticket-actions>span{font-size:7px;color:#6a785e}
.ra-ticket-actions button{background:none;border:0;color:#83513d;text-decoration:underline;text-underline-offset:3px;font-size:8px;min-height:30px;padding:4px}
.ra-empty{padding:20px 8px;text-align:center;color:#5b6c54}
.ra-empty>svg{height:38px;width:38px;margin:0 auto 14px;display:block;color:#8d805a}
.ra-empty p{font-size:10px;line-height:1.7;margin-bottom:17px}
.ra-empty .ra-primary{max-width:190px;margin:auto}
.ra-screen-in{animation:ra-screen-in .46s cubic-bezier(.21,.78,.3,1)}
.phone-stage[data-residence-visible=false] .residence-device *{animation-play-state:paused!important}
@keyframes ra-screen-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:1100px) and (min-width:761px){.app-premium .device.residence-device{width:288px}.ra-cinema-copy{padding:10px 12px 12px}.app-premium #phone-content .ra-welcome h3{font-size:26px}.ra-home-status{font-size:6px}}
@media(max-width:760px){.app-premium .device.residence-device{--residence-rim-radius:38px;width:294px;max-width:100%}.residence-device .device-sheen,.residence-device .app-universe-screen{border-radius:34px}.app-premium .residence-device .phone-brand{padding-inline:15px}.ra-home-status{font-size:6px}.ra-cinema-copy{padding:11px 13px 12px}.app-premium #phone-content .ra-cinema-copy h4{font-size:25px}}
@media(max-width:365px){.app-premium .device.residence-device{--residence-rim-radius:36px;width:273px;transform:none}.app-premium .residence-device #phone-content{padding-inline:12px}.app-premium #phone-content .ra-welcome h3{font-size:25px}.ra-home-status{display:none}.ra-space-card{grid-template-columns:78px 1fr}.ra-space-card>img{width:78px}.app-premium #phone-content .ra-space-card h4{font-size:15px}.ra-space-card>div{padding:8px}.app-premium .residence-device .phone-brand{padding-inline:13px}.ra-title{padding-bottom:9px}.app-premium #phone-content .ra-title h3{font-size:26px}.ra-booking-title>span{font-size:6.5px}}
@media(prefers-reduced-motion:reduce){.ra-screen-in{animation:none}.residence-device *{scroll-behavior:auto!important}}
/* A single sliding selection connects the two complete app experiences. */
.app-mode-switch{--experience-position:0;width:330px;max-width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px;border-color:#cbb78e4a;background:#10171bd9;box-shadow:inset 0 1px #fff06,0 10px 30px #0002;touch-action:pan-y;user-select:none;-webkit-user-select:none;isolation:isolate}
.app-mode-switch .experience-slide{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/2);margin:0;border-radius:24px;background:linear-gradient(115deg,#dcc79e,#f1ddb6 53%,#d4b77e);box-shadow:0 3px 12px #0002,inset 0 1px #fff7;transform:translateX(calc(var(--experience-position)*100%));transition:transform .48s cubic-bezier(.22,.78,.22,1);pointer-events:none}
.app-mode-switch.is-dragging .experience-slide{transition:none}
.app-mode-switch button,.app-mode-switch button[data-experience=universe]{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:39px;padding:9px 10px;background:transparent;border:0;box-shadow:none;color:#dfc99d;isolation:auto;font-size:10px;font-weight:550;cursor:pointer;transition:color .2s}
.app-mode-switch button.active,.app-mode-switch button[data-experience=universe].active{background:transparent;color:#253128;box-shadow:none;cursor:ew-resize}
.app-mode-switch.is-dragging,.app-mode-switch.is-dragging button{cursor:ew-resize}
.app-mode-switch button span{margin:0}
.app-mode-switch button:focus-visible{outline:2px solid #f4ddaa;outline-offset:5px}
.app-mode-switch .residence-button-scene{position:relative;display:flex;align-items:end;gap:2px;width:22px;height:18px;flex-shrink:0;border-bottom:1px solid currentColor;padding:0 2px 2px;opacity:.92}
.residence-button-scene i{display:block;width:5px;height:11px;border:1px solid currentColor;border-radius:4px 4px 0 0;background:transparent;animation:residence-button-welcome 4.8s ease-in-out infinite}
.residence-button-scene i:nth-child(2){height:15px;animation-delay:.45s}
.residence-button-scene i:nth-child(3){height:11px;animation-delay:.9s}
.app-mode-switch .universe-button-orbit{position:relative;display:block;width:22px;height:14px;flex-shrink:0;margin:0;border:1px solid currentColor;border-radius:50%;transform:rotate(-25deg);opacity:.92}
.universe-button-orbit:after{content:'';position:absolute;width:4px;height:4px;left:8px;top:4px;border-radius:50%;background:currentColor;box-shadow:0 0 9px #e9c17a55}
.universe-button-orbit i{position:absolute;inset:-2px;animation:universe-button-lap 7s linear infinite;border-radius:50%}
.universe-button-orbit i:after{content:'';position:absolute;right:1px;top:2px;width:3px;height:3px;border-radius:50%;background:currentColor;box-shadow:0 0 7px #ffde99}
@keyframes residence-button-welcome{0%,15%,75%,100%{background:transparent}30%,50%{background:currentColor;box-shadow:0 0 7px #dabc7855}}
@keyframes universe-button-lap{to{transform:rotate(360deg)}}

/* The rear scene is a complete splash screen inside the same slim phone frame. */
.app-premium .app-portrait-card.residence-splash-device{height:auto;aspect-ratio:865/1856;padding:3px;border:0;border-radius:32px;background:var(--app-phone-gold);box-shadow:0 0 0 1px var(--app-phone-bronze),0 25px 70px #0007;overflow:visible;pointer-events:none}
.app-premium .app-portrait-card.residence-splash-device:after{display:none}
.app-premium .app-portrait-card>.residence-splash-glass{display:block;position:absolute;inset:3px;z-index:1;margin:0;border:3px solid #080b10;border-radius:29px;background:#173a32;overflow:hidden;isolation:isolate}
.residence-splash-image{display:block;width:100%;height:100%;object-fit:cover;object-position:43% center}
.residence-splash-shade{position:absolute;inset:0;background:linear-gradient(180deg,#061b2377,transparent 20%,#06262a20 48%,#092d2be8 89%);pointer-events:none}
.residence-splash-status{position:absolute;inset:0 0 auto;height:31px;display:flex;align-items:center;justify-content:space-between;padding:9px 14px 5px;color:#f7f3eb;line-height:1}
.app-portrait-card .residence-splash-status>span:first-child{font-size:7px;letter-spacing:0;font-weight:600}
.residence-splash-status svg{width:20px;height:10px;stroke:currentColor;fill:none;stroke-width:1.4}
.residence-splash-island{position:absolute;left:50%;translate:-50% 0;top:6px;width:28%;height:16px;border-radius:20px;background:#030509}
.residence-splash-island:after{content:'';position:absolute;right:7px;top:5px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#294275,#091326 60%)}
.residence-splash-copy{position:absolute;left:19px;right:15px;bottom:28px;color:#fff5df;text-align:left}
.residence-splash-copy>img{width:36px;height:36px;display:block;margin-bottom:13px;border:1px solid #e7cc9426;border-radius:7px;box-shadow:0 3px 12px #03161233}
.app-portrait-card .residence-splash-copy>span{font-size:6.5px;letter-spacing:.16em}
.app-portrait-card .residence-splash-copy p{font:30px/1.08 var(--serif);margin:10px 0 11px;letter-spacing:-.04em}
.app-portrait-card .residence-splash-copy small{font-size:7px;line-height:1.6;color:#dce1cf}
.app-premium .residence-device .residence-mark{width:34px;height:34px;border-radius:7px;box-shadow:0 2px 7px #173e3210}
.app-premium .residence-device :is(button,a,select,[role=button]){cursor:pointer}
.app-premium .residence-device :is(button,select):disabled{cursor:default}

/* Invite a visitor to take over, without placing a callout over the phone. */
.app-demo-controls{display:grid;grid-template-columns:minmax(0,1fr);justify-content:center;gap:1px;bottom:26px;width:100%;max-width:350px;white-space:normal}
.app-demo-controls button{grid-column:1;justify-self:center;min-height:32px;padding:5px 0;justify-content:center;font-size:10px;cursor:pointer}
.app-demo-controls>span:last-child{grid-column:1/-1;text-align:center;border:0;padding:2px 0 0;color:#e0bf81;font-size:12px;font-weight:700;letter-spacing:.015em;line-height:1.6}
@supports(-webkit-background-clip:text){.app-demo-controls>span:last-child{background:linear-gradient(110deg,#ddbc7a 15%,#ddbc7a 35%,#fff1cf 48%,#e9cc93 56%,#ddbc7a 74%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:residence-invitation-glimmer 1.5s ease-in-out infinite}}
@keyframes residence-invitation-glimmer{from{background-position:140% center}to{background-position:-80% center}}
@media(max-width:760px){.app-mode-switch{width:316px}.app-mode-switch button,.app-mode-switch button[data-experience=universe]{font-size:9px;gap:8px;padding-inline:8px}.app-premium .app-portrait-card.residence-splash-device{opacity:.82}.app-premium .app-portrait-card>.residence-splash-glass{border-radius:27px}.app-portrait-card .residence-splash-copy{left:13px;right:9px;bottom:24px}.app-portrait-card .residence-splash-copy p{font-size:23px}.residence-splash-copy>img{width:28px;height:28px;margin-bottom:9px}.app-portrait-card .residence-splash-copy>span{font-size:5px}.app-portrait-card .residence-splash-copy small{font-size:6px}.app-demo-controls>span:last-child{font-size:11px}}
@media(max-width:365px){.app-mode-switch button,.app-mode-switch button[data-experience=universe]{font-size:8.5px;gap:7px}.app-mode-switch{width:100%}.app-demo-controls>span:last-child{font-size:10.5px}}
@media(prefers-reduced-motion:reduce){.universe-button-orbit i,.residence-button-scene i,.app-demo-controls>span:last-child{animation:none}.app-mode-switch .experience-slide{transition:none}}

.residence-screen-reader-title{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap!important;border:0!important}

/* Reserve breathing room around the complete device, including its tilted corners. */
.app-premium .phone-stage{min-height:880px}
@media(max-width:1100px) and (min-width:761px){.app-premium .phone-stage{min-height:840px}}
@media(max-width:760px){.app-premium .phone-stage{min-height:845px}}
@media(max-width:365px){.app-premium .phone-stage{min-height:800px}}

/* Cinema imagery retains its screen geometry on every app page. */
.ra-space-card>.residence-cinema-picture{width:89px;align-self:center;padding:0;border-radius:0;display:block}
.ra-space-card>.residence-cinema-picture>img{height:auto;width:100%;aspect-ratio:3/2;object-fit:contain}
.ra-ticket>.residence-cinema-picture{width:100%}
@media(max-width:365px){.ra-space-card>.residence-cinema-picture{width:78px}}

/* Decorative captions never cover or intercept the working app on smaller screens. */
.app-premium .phone-stage .app-floating{pointer-events:none}
@media(max-width:1100px){.app-premium .phone-stage .app-floating{display:none}}
