/* R7 / original live device illustration. Physical cues: Apple Duo and iPhone18Pro
   official product images/specs, retrieved 2026-11-01. No Apple assets embedded. */
#s04tech .tech-duo{--fold-aspect:1.39728;--fold-radius:calc(var(--fold-width)*.044);--fold-inset:calc(var(--fold-width)*.011);--fold-depth:calc(var(--fold-width)*.03159);height:calc(var(--fold-width)/var(--fold-aspect));filter:none}
#s04tech .tech-fold-leaf{isolation:auto}
#s04tech .tech-fold-shell{inset:0;background:linear-gradient(118deg,#929699 0%,#bfc3c5 1.1%,#eff0f0 1.7%,#6b7073 3.2%,#282d30 8%,#8d9396 47%,#3a3e42 79%,#bac0c3 97.8%,#52585c 99%);box-shadow:inset 0 0 0 .7px #25292c,inset 0 1.2px 0 #fff9;backface-visibility:hidden}
#s04tech .tech-fold-left .tech-fold-shell{border-radius:var(--fold-radius) 0 0 var(--fold-radius);clip-path:inset(-1px 0 -1px -1px);right:-.3px}
#s04tech .tech-fold-right .tech-fold-shell{border-radius:0 var(--fold-radius) var(--fold-radius) 0;clip-path:inset(-1px -1px -1px 0);left:-.3px}
#s04tech .tech-fold-shell:before{content:"";position:absolute;inset:2px;border:1px solid #c4cbcf80;border-radius:inherit;pointer-events:none}
#s04tech .tech-fold-shell:after{content:"";position:absolute;inset:3.8px;border:1px solid #161a1d;border-radius:inherit;pointer-events:none}
#s04tech .tech-fold-left .tech-fold-shell:before,#s04tech .tech-fold-left .tech-fold-shell:after{border-right:0;right:0}
#s04tech .tech-fold-right .tech-fold-shell:before,#s04tech .tech-fold-right .tech-fold-shell:after{border-left:0;left:0}
#s04tech .tech-fold-inner{top:var(--fold-inset);bottom:var(--fold-inset);background:#f5f6f8;box-shadow:0 0 0 calc(var(--fold-width)*.005) #080a0b,0 0 0 calc(var(--fold-width)*.0062) #656b6e;transform:translateZ(.8px)}
#s04tech .tech-fold-left .tech-fold-inner{left:var(--fold-inset);right:-.4px;border-radius:calc(var(--fold-radius) - var(--fold-inset)) 0 0 calc(var(--fold-radius) - var(--fold-inset));clip-path:inset(-6px 0 -6px -6px)}
#s04tech .tech-fold-right .tech-fold-inner{left:-.4px;right:var(--fold-inset);border-radius:0 calc(var(--fold-radius) - var(--fold-inset)) calc(var(--fold-radius) - var(--fold-inset)) 0;clip-path:inset(-6px -6px -6px 0)}
#s04tech .tech-fold-canvas{width:calc(var(--fold-width) - var(--fold-inset)*2);background:#f5f6f8}
#s04tech .tech-fold-unified{inset:var(--fold-inset);border-radius:calc(var(--fold-radius) - var(--fold-inset));background:#f5f6f8;transform:translateZ(1.3px)}
#s04tech .tech-fold-unified .tech-fold-canvas{width:100%}
#s04tech .tech-fold-unified:after{box-shadow:inset 0 0 0 .7px #fff8}
#s04tech .tech-fold-optical-surface{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(123deg,#fff0 0 25%,#fff1 31%,#fff0 42% 100%);box-shadow:inset 0 1px 2px #f5f8fa60}
#s04tech .tech-fold-reflection{top:var(--fold-inset);bottom:var(--fold-inset);left:var(--fold-inset);right:0;border-radius:calc(var(--fold-radius) - var(--fold-inset)) 0 0 calc(var(--fold-radius) - var(--fold-inset));background:linear-gradient(108deg,#10182008,#fff0 21%,#ffffff35 45%,#fff0 64%,#0c121d24);opacity:calc((1 - var(--tech-opening))*.85);transform:translateZ(1.2px)}
#s04tech .tech-fold-right .tech-fold-reflection{left:0;right:var(--fold-inset);border-radius:0 calc(var(--fold-radius) - var(--fold-inset)) calc(var(--fold-radius) - var(--fold-inset)) 0;background:linear-gradient(90deg,#080c142e,#fff0 14%,#ffffff12 62%,#fff0 91%)}
#s04tech .tech-fold-edge{position:absolute;pointer-events:none;transform-style:preserve-3d;backface-visibility:visible;background:linear-gradient(#9a9fa2 0%,#e7eaeb 8%,#878d92 17%,#464d52 46%,#6d7479 80%,#adb3b6 95%,#353c41);box-shadow:inset 0 0 0 .5px #30373d66}
#s04tech .tech-fold-edge-top,#s04tech .tech-fold-edge-bottom{left:var(--fold-radius);right:0;height:var(--fold-depth);transform-origin:top;transform:rotateX(-90deg);top:0}
#s04tech .tech-fold-right .tech-fold-edge-top,#s04tech .tech-fold-right .tech-fold-edge-bottom{left:0;right:var(--fold-radius)}
#s04tech .tech-fold-edge-bottom{top:auto;bottom:0;transform-origin:bottom;transform:rotateX(90deg)}
#s04tech .tech-fold-edge-side{top:var(--fold-radius);bottom:var(--fold-radius);width:var(--fold-depth);left:0;transform-origin:left;transform:rotateY(90deg);background:linear-gradient(90deg,#c6cbcd,#6d7479 18%,#444b51 67%,#b2b8bc)}
#s04tech .tech-fold-right .tech-fold-edge-side{left:auto;right:0;transform-origin:right;transform:rotateY(-90deg)}
#s04tech .tech-fold-edge-bottom{display:flex;align-items:center;justify-content:center;gap:7%}
#s04tech .tech-fold-edge-bottom>span{width:20%;height:32%;border-radius:20px;background:#11191e;border:1px solid #c5cbcf;box-shadow:inset 0 1px 2px #000}
#s04tech .tech-fold-edge-bottom>i{width:13%;height:21%;border-radius:5px;background:repeating-linear-gradient(90deg,#1c252b 0 2px,transparent 2px 5px)}
#s04tech .tech-fold-left .tech-fold-edge-bottom>span{width:12%;background:repeating-linear-gradient(90deg,#1c252b 0 2px,transparent 2px 5px);border:0;box-shadow:none}
#s04tech .tech-fold-antenna{position:absolute;top:13%;width:4px;height:2px;left:0;background:#a3aaae;box-shadow:0 .7px #3a4147;transform:translateZ(.15px);backface-visibility:hidden}
#s04tech .tech-fold-antenna-bottom{top:auto;bottom:13%}
#s04tech .tech-fold-right .tech-fold-antenna{left:auto;right:0}
#s04tech .tech-fold-spine{top:1.2%;bottom:1.2%;left:calc(50% - var(--fold-depth)*.5);width:var(--fold-depth);border-radius:4px;background:linear-gradient(90deg,#343b3f,#bec6ca 19%,#f0f1f1 31%,#a7afb4 42%,#555f65 66%,#a3afb7 83%,#3d484f);transform:translateZ(calc(var(--fold-depth)*-1));box-shadow:inset 0 0 0 .6px #2a343a;overflow:hidden}
#s04tech .tech-fold-spine>i{position:absolute;left:0;right:0;height:1px;top:7%;background:#2d38418c;box-shadow:0 1px #e4e8eb5c}
#s04tech .tech-fold-spine>i+i{top:auto;bottom:7%}
#s04tech .tech-fold-key{right:-3px;top:22%;width:3px;height:13%;border-radius:2px;border:.5px solid #3f494f;background:linear-gradient(90deg,#e3e8e9,#808c94 33%,#515f69 72%,#bac3c8);box-shadow:0 1px 1px #17212944;transform:translateZ(calc(var(--fold-depth)*-.3))}
#s04tech .tech-fold-outer{inset:0;border-radius:var(--fold-radius);padding:var(--fold-inset);background:linear-gradient(120deg,#c2c7ca 0,#f0f2f3 1.8%,#525e66 3.3%,#9ba5ac 40%,#4b5963 70%,#d6dde0 97.5%,#4b5862);transform:rotateY(180deg) translateZ(var(--fold-depth));box-shadow:inset 0 0 0 .7px #353e45,inset 0 1.5px #fff8;isolation:isolate}
#s04tech .tech-outer-screen{border:0;border-radius:calc(var(--fold-radius) - var(--fold-inset));box-shadow:0 0 0 calc(var(--fold-width)*.005) #080a0b,0 0 0 calc(var(--fold-width)*.0062) #7a858d;background:radial-gradient(ellipse at 100% 48%,#f0dfe2,transparent 61%),linear-gradient(160deg,#fdfdfd,#eceef1)}
#s04tech .tech-outer-screen:after{background:linear-gradient(117deg,#fff0 0 15%,#fff2 25%,#fff0 35%);box-shadow:inset 0 1px 1px #fff8}
#s04tech .tech-outer-status{font-size:2.7cqw;height:10%;padding:4% 8%}
#s04tech .tech-outer-status i{width:21%;height:27%;top:33%;border-radius:20px;background:#090b0c;box-shadow:0 0 0 .5px #262d31}
#s04tech .tech-outer-status i:after{content:"";position:absolute;right:12%;top:27%;width:18%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 24%,#7e9dab 0 8%,#223b49 14% 28%,#04090e 36% 60%,#263342 67%,#080a0d 81%);box-shadow:0 0 0 .5px #30363c}
#s04tech .tech-outer-welcome h3{font-size:9.4cqw;color:#24282c}
#s04tech .tech-outer-orb{opacity:.8}
#s04tech .tech-outer-visit{border:1px solid #fff;background:linear-gradient(145deg,#fff,#f7f7f9e6);box-shadow:0 3px 12px #28313b0a;border-radius:5cqw}
/* The flat frame is a precise SVG optical assembly, with live HTML above it.
   Its slim edge, black glass and low-frequency reflection follow one light source. */
#s04tech .tech-phone-side{perspective:1800px;isolation:auto}
#s04tech .tech-phone{--phone-ratio:2.08623;--phone-radius:calc(var(--phone-width)*.15);height:calc(var(--phone-width)*var(--phone-ratio));padding:calc(var(--phone-width)*.028);border:0;border-radius:var(--phone-radius);background:transparent;box-shadow:5px 9px 10px #11182010,15px 25px 35px #16212a18,24px 36px 74px #18212c0c;transform:rotateX(1.5deg) rotateY(-7deg) rotateZ(1deg);transform-style:preserve-3d;isolation:initial;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
#s04tech .tech-phone:before,#s04tech .tech-phone:after{display:none}
#s04tech .tech-phone:hover,#s04tech .tech-phone:focus-within{transform:rotateX(0) rotateY(0) rotateZ(0)}
#s04tech .tech-device-machining{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
#s04tech .tech-device-depth{position:absolute;inset:0;transform:translate3d(3px,2px,-7px);border-radius:inherit;background:linear-gradient(110deg,#393f44,#77818a 8%,#242c31 36%,#56616b 65%,#99a4ac 93%,#343e47);box-shadow:1px 0 0 #202c34,2px .5px 0 #87929b,3px 1px 0 #35424b;pointer-events:none;z-index:0}
#s04tech .tech-screen{border:0;border-radius:calc(var(--phone-radius) - var(--phone-width)*.028);background:#f8f9fb;box-shadow:inset 0 0 0 .65px #b1b9bd80;position:relative;z-index:2;transform:translateZ(.8px)}
#s04tech .tech-screen-glint{background:linear-gradient(118deg,#fff0 0 13%,#fff1 23%,#fff0 35% 82%,#ffffff08);box-shadow:inset 0 1px 0 #fff8,inset .5px 0 0 #f2f6f933;z-index:9}
#s04tech .tech-receiver-slot{position:absolute;top:calc(var(--phone-width)*.014);left:42%;width:16%;height:1px;border-radius:3px;background:#03080b;box-shadow:0 .7px #8c969c70;z-index:3;pointer-events:none}
#s04tech .tech-statusbar{height:calc(var(--phone-width)*.135);padding:7px 21px 0;font-size:8.5px;background:#fff;letter-spacing:-.02em}
#s04tech .tech-statusbar i{top:8px;width:26%;height:19px;border-radius:15px;background:#07090c;box-shadow:inset 0 .5px #283039,0 .4px #1a222b;overflow:hidden}
#s04tech .tech-statusbar i:before,#s04tech .tech-statusbar i:after{display:none}
#s04tech .tech-island-sensor{position:absolute;left:8px;top:7px;width:23px;height:5px;border-radius:5px;background:linear-gradient(#10141d,#090b11);box-shadow:inset 0 .5px #252b35}
#s04tech .tech-island-lens{position:absolute;right:7px;top:5px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 31% 27%,#6a859f 0 6%,#2e4d61 13%,#0c1b29 28%,#02070c 48%,#26343f 57%,#070b10 71%);box-shadow:0 0 0 .7px #20282f}
#s04tech .tech-statusbar>span{display:flex;align-items:center}
#s04tech .tech-side-button{z-index:0;width:3.2px;border-radius:2px;border:.65px solid #3e4a53;background:linear-gradient(90deg,#c5cbd0,#697783 30%,#333f48 75%,#98a5ae);box-shadow:0 1px 1px #101c242b;transform:translateZ(-3px)}
#s04tech .tech-side-button-one{right:-3px;top:27%;height:12%;width:3px}
#s04tech .tech-side-button-two{left:-3px;top:23%;height:7.4%}
#s04tech .tech-side-button-three{left:-3px;top:32%;height:7.4%}
#s04tech .tech-side-button-action{left:-3px;top:15.6%;height:3.8%}
#s04tech .tech-side-button-camera{right:-3px;top:68%;height:8%;width:3px;background:linear-gradient(90deg,#535e66,#202b35,#586774);box-shadow:inset 0 0 0 .4px #a0aab1}
#s04tech .tech-device-bottom{position:absolute;left:15%;right:15%;bottom:-2px;display:flex;align-items:center;justify-content:center;gap:8%;height:4px;transform:translateZ(-4px);z-index:0;pointer-events:none}
#s04tech .tech-device-bottom>span{width:17%;height:2px;background:#13202a;border-radius:20px;box-shadow:0 .6px #a0adb6}
#s04tech .tech-device-bottom>i{width:16%;height:1px;background:repeating-linear-gradient(90deg,#1d2b35 0 2px,transparent 2px 4px)}
#s04tech .tech-phone-back{display:none}
#s04tech .tech-phone-aura{inset:13% 0 3%;background:radial-gradient(ellipse at 50% 70%,#d7dce022 0,transparent 70%);filter:blur(20px)}
#s04tech .tech-phone-plinth{bottom:29px;width:75%;height:19px;background:radial-gradient(ellipse,#182a3c20,transparent 70%);filter:blur(9px)}
#s04tech .tech-app-brand{padding:7px 15px 8px;background:#fff;border-bottom:1px solid #e6e9ed}
#s04tech .tech-app-brand img{width:97px;height:38px}
#s04tech .tech-app-content{background:linear-gradient(165deg,#f8f9fb,#f2f4f7);padding:15px 14px 12px;scrollbar-gutter:auto}
#s04tech .tech-app-heading>span{font-size:6.8px;color:#6e7882;font-weight:650}
#s04tech .tech-app-heading h4{color:#232a30}
#s04tech .tech-app-switch{background:#e8ebef;border:1px solid #dce1e6}
#s04tech .tech-app-switch button{color:#626c76}
#s04tech .tech-app-switch button[aria-pressed=true]{color:#252d34;background:#fff;box-shadow:0 1px 3px #182c3f12,0 1px #fff inset}
#s04tech .tech-app-row{background:#fff;border-color:#e5e8ec;box-shadow:0 1px 3px #192f4505}
#s04tech .tech-app-row>i{background:#f8eef0;border:1px solid #f3dee2;box-shadow:none}
#s04tech .tech-app-row small{color:#737e88}
#s04tech .tech-next-visit{background:radial-gradient(ellipse at 85% -30%,#ff8995,transparent 63%),linear-gradient(145deg,#e22737,#b31f2d);border:1px solid #d12a3a;box-shadow:0 5px 12px #a7253a1b,inset 0 1px #ffadb442}
#s04tech .tech-app-snapshot button{background:#fff;border:1px solid #e5e8ec;box-shadow:0 2px 5px #26384a05}
#s04tech .tech-app-nav{background:#fffffff5;border-top:1px solid #e1e5e9}
#s04tech .tech-app-nav button{font-size:6.8px;color:#67727d}
#s04tech .tech-app-nav button[aria-current=page]{color:#cc2335}
#s04tech .tech-phone-homebar{height:15px;background:#fff}
#s04tech .tech-phone-homebar:after{width:34%;height:3px;top:5px;background:#0c1116}
#s04tech .tech-phone-caption{font-size:9px;color:#747d85;gap:7px;margin-top:22px}
#s04tech .tech-enlarged-dialog .tech-phone{--phone-width:min(326px,calc((90dvh - 90px)/2.08623));transform:none;box-shadow:5px 9px 10px #11182010,15px 25px 35px #16212a18}
@media(max-width:760px){#s04tech .tech-phone{--phone-width:min(280px,calc(100vw - 76px));transform:rotateX(1deg) rotateY(-5deg) rotateZ(.5deg)}#s04tech .tech-statusbar{font-size:8px;padding-inline:20px}#s04tech .tech-phone-caption{font-size:8px}#s04tech .tech-fold-shell:before{inset:1px}#s04tech .tech-fold-shell:after{inset:2px}}
@media(prefers-reduced-motion:reduce){#s04tech .tech-phone{transform:none!important;transition:none}}

/* Full-depth single unibody: 8.75 mm / 71.9 mm reference, not flat offset outlines. */
#s04tech .tech-phone{--phone-width:clamp(280px,42svh,320px);--chassis-depth:calc(var(--phone-width)*.1217);transform:rotateX(4deg) rotateY(-18deg) rotateZ(1.25deg);box-shadow:8px 8px 12px #18232a0b,23px 26px 34px #17232d1c,38px 42px 65px #17232d0d}
#s04tech .tech-device-depth{transform:none;transform-style:preserve-3d;background:none;box-shadow:none;z-index:0;border-radius:inherit;overflow:visible}
#s04tech .tech-chassis-slice{position:absolute;inset:0;border-radius:inherit;transform:translateZ(calc(var(--chassis-depth)*var(--slice)/-12));background:linear-gradient(105deg,#6d767d,#343e47 23%,#4d5963 54%,#a0abb3 87%,#5c6871 99%);pointer-events:none}
#s04tech .tech-chassis-slice:last-of-type{box-shadow:inset 0 0 0 1px #9ba5ad}
#s04tech .tech-chassis-side{position:absolute;right:0;top:var(--phone-radius);bottom:var(--phone-radius);width:var(--chassis-depth);transform-origin:right;transform:rotateY(-90deg);background:linear-gradient(90deg,#a7b0b7 0,#76838d 12%,#5d6b76 36%,#46535e 72%,#222d36 96%,#83919b);box-shadow:inset 0 0 .7px #c4cbd0;pointer-events:none}
#s04tech .tech-chassis-side:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff05 0 .6px,#00000005 .6px 1.4px);opacity:.35}
#s04tech .tech-chassis-bottom{position:absolute;left:var(--phone-radius);right:var(--phone-radius);bottom:0;height:var(--chassis-depth);transform-origin:bottom;transform:rotateX(90deg);background:linear-gradient(#58636b,#2c3740 23%,#788690 80%,#293740);pointer-events:none}
#s04tech .tech-side-button{transform:translateZ(calc(var(--chassis-depth)*-.42))}
#s04tech .tech-side-button-one,#s04tech .tech-side-button-camera{right:-2px;width:4px}
#s04tech .tech-screen-glint{background:linear-gradient(119deg,#ffffff03 0 12%,#ffffff0d 20%,#ffffff03 34%,#fff0 46% 87%,#d7e9ff0b);box-shadow:inset 1px 1px 1px #f2f7fa4d,inset -.6px 0 #12253514}
#s04tech .tech-statusbar i{height:19px;top:9px}
#s04tech .tech-statusbar{height:calc(var(--phone-width)*.134);font-size:9px}
#s04tech .tech-phone-caption{margin-top:28px}
#s04tech .tech-phone-plinth{width:82%;height:24px;bottom:29px;filter:blur(12px);background:radial-gradient(ellipse,#1b2b3d25,transparent 68%)}
#s04tech .tech-enlarged-dialog .tech-phone{--phone-width:min(326px,calc((90dvh - 90px)/2.08623));transform:none}
@media(max-width:760px){#s04tech .tech-phone{--phone-width:min(284px,calc(100vw - 80px));transform:rotateX(3deg) rotateY(-13deg) rotateZ(.75deg)}#s04tech .tech-phone-caption{font-size:8px;margin-top:24px}#s04tech .tech-statusbar{font-size:8px}}
@media(hover:none){#s04tech .tech-phone:focus-within{transform:rotateX(0) rotateY(0) rotateZ(0)}}

/* Rounded enclosure contours remain sealed through the ninety-degree view. */
#s04tech .tech-fold-edge{display:none}
#s04tech .tech-fold-body{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
#s04tech .tech-fold-body>i{position:absolute;inset:0;transform:translateZ(calc(var(--fold-depth)*var(--slice)/-32));background:linear-gradient(105deg,#8d989f 0,#4e5b64 14%,#abb4ba 48%,#586670 79%,#909ca5);backface-visibility:visible}
#s04tech .tech-fold-left .tech-fold-body>i{border-radius:var(--fold-radius) 0 0 var(--fold-radius)}
#s04tech .tech-fold-right .tech-fold-body>i{border-radius:0 var(--fold-radius) var(--fold-radius) 0}
#s04tech .tech-fold-body>i:nth-child(2n){background:linear-gradient(105deg,#8d989f 0,#4e5b64 14%,#abb4ba 48%,#586670 79%,#909ca5)}
/* Show the entire physical enclosure below navigation on shorter desktop screens. */
@media(min-width:761px){#s04tech .tech-phone{--phone-width:clamp(220px,calc((100svh - 145px)/2.12),320px)}}
#s04tech .tech-phone:hover,#s04tech .tech-phone:focus-within{transform:rotateX(2deg) rotateY(-12deg) rotateZ(.7deg)}
#s04tech .tech-enlarged-dialog .tech-phone,#s04tech .tech-enlarged-dialog .tech-phone:hover,#s04tech .tech-enlarged-dialog .tech-phone:focus-within{--phone-width:min(326px,calc((90dvh - 90px)/2.08623));transform:none}

#s04tech .tech-fold-edge-side{display:block;background:linear-gradient(90deg,#b0b9bf,#6c7983 16%,#465660 63%,#8a99a4);box-shadow:none}
/* The review board is a short desktop viewport. Fit the physical device inside
   that viewing window while the enlarged app retains its independent sizing. */
@media(min-width:761px) and (max-height:650px){
 #s04tech .tech-phone-side>.tech-phone{--phone-width:clamp(170px,calc((100svh - 130px)/2.12),271px)}
 #s04tech .tech-phone-side .tech-statusbar{height:calc(var(--phone-width)*.134);min-height:25px;padding:5px 13px 0;font-size:7px}
 #s04tech .tech-phone-side .tech-statusbar i{height:15px;top:7px}
 #s04tech .tech-phone-side .tech-island-sensor{left:6px;top:6px;width:15px;height:3px}
 #s04tech .tech-phone-side .tech-island-lens{right:6px;top:4px;width:7px;height:7px}
 #s04tech .tech-phone-side .tech-app-brand{padding:5px 10px 6px}
 #s04tech .tech-phone-side .tech-app-brand img{width:72px;height:29px}
 #s04tech .tech-phone-side .tech-app-brand>span{font-size:5.5px;max-width:53px}
 #s04tech .tech-phone-caption{margin-top:18px;font-size:8px}
}