body{max-width:600px;margin:0 auto;padding:3rem 1rem 2rem;display:flex;flex-direction:column;align-items:center;--background-color: azure;background-color:azure;background-color:var(--background-color);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5}header{text-align:center;z-index:1}h1{margin-bottom:.5rem}.subtitle{margin-top:0;margin-bottom:3rem}.introduction{align-self:flex-start;z-index:1}.q-and-a{z-index:1}.cta{display:inline-grid;text-align:center;grid-template-columns:auto auto;gap:10px;align-items:center;background:linear-gradient(to bottom,#2aabee,#229ed9);padding:10px 20px;border-radius:10px;-webkit-text-decoration:none;text-decoration:none;color:#fff;font-weight:700}.cta:visited{color:#fff}.cta img{width:30px;height:30px;border:2px solid white;border-radius:1000px;box-sizing:border-box}.top-cta-container{position:absolute;top:calc((100vh - 500px)/2 + 543px);top:calc(var(--phone-top) + var(--phone-height) + 50px);left:0;right:0;display:grid}@media (max-height: 750px){.top-cta-container{top:100vh}}.top-cta{margin:0 auto}:root{--desired-top-margin: 100px;--phone-background-color: rgba(233,238,232,.84706);--phone-background-filter: blur(40px);--container-width: 100vw;--container-height: calc(100vh + 150px) ;--phone-height: 500px;--phone-width: 231px;--phone-top: calc( (100vh - var(--phone-height)) / 2 - var(--phone-border-width) );--phone-left: calc((var(--container-width) - var(--phone-width)) / 2);--phone-border-width: 7px;--bottom-bar-height: 46px}.phone-wrapper{position:relative;background:#bccdaa;z-index:0;margin-top:calc(100px - ((100vh - 500px)/2 - 7px));margin-top:calc(var(--desired-top-margin) - var(--phone-top));margin-bottom:-10vh}@media (max-height: 750px){.phone-wrapper{margin-top:0;margin-bottom:0}}.phone-overlay{height:calc(100vh + 150px);height:var(--container-height);width:100vw;width:var(--container-width);position:sticky;top:0;display:grid;background-image:linear-gradient(to bottom,var(--background-color) calc((100vh - 500px)/2 - 7px),transparent calc((100vh - 500px)/2 - 7px)),linear-gradient(to top,var(--background-color) calc(100vh - 350px - ((100vh - 500px)/2 - 7px)),transparent calc((100vh - 500px)/2 - 7px)),linear-gradient(to left,var(--background-color) calc((100vw - 231px)/2),transparent calc((100vw - 231px)/2)),linear-gradient(to right,var(--background-color) calc((100vw - 231px)/2),transparent calc((100vw - 231px)/2));background-image:linear-gradient(to bottom,var(--background-color) var(--phone-top),transparent var(--phone-top)),linear-gradient(to top,var(--background-color) calc(var(--container-height) - var(--phone-top) - var(--phone-height)),transparent var(--phone-top)),linear-gradient(to left,var(--background-color) var(--phone-left),transparent var(--phone-left)),linear-gradient(to right,var(--background-color) var(--phone-left),transparent var(--phone-left))}.phone-overlay .phone-frame{width:231px;width:var(--phone-width);height:500px;height:var(--phone-height);margin-top:calc((100vh - 500px)/2 - 7px);margin-top:var(--phone-top);margin-right:calc((100vw - 231px)/2 - 7px);margin-right:calc(var(--phone-left) - var(--phone-border-width));box-shadow:0 0 0 30px var(--background-color);border:7px solid black;border:var(--phone-border-width) solid black;border-radius:30px;display:flex;flex-direction:column}.phone-overlay .top-phone-part{background-color:#e9eee8d8;background-color:var(--phone-background-color);border-radius:23px 23px 0 0;-webkit-backdrop-filter:blur(40px);-webkit-backdrop-filter:var(--phone-background-filter);backdrop-filter:blur(40px);backdrop-filter:var(--phone-background-filter)}.phone-overlay .notch-bar{direction:ltr;display:flex;flex-direction:row;align-items:flex-end;height:20px;font-size:10px;font-weight:500;padding:0 12px}.phone-overlay .notch-bar>:nth-child(1){width:47px;flex-grow:0;flex-shrink:0;text-align:center}.phone-overlay .notch-bar>:nth-child(5){width:47px;flex-grow:0;flex-shrink:0;text-align:center}.phone-overlay .notch-bar>:nth-child(2){height:100%;background-color:#000;clip-path:path("M 0,0 q 5,0 5,5 l 0,5 q 0,10 10,10 l 0,-20 Z");flex:0 0 15px}.phone-overlay .notch-bar>:nth-child(3){height:100%;background-color:#000;flex:1 0 80px}.phone-overlay .notch-bar>:nth-child(4){height:100%;background-color:#000;clip-path:path("M 0,0 l0,20 q 10,0 10,-10 l 0,-5 q 0,-5 5,-5 Z");flex:0 0 15px}.phone-overlay .notch-bar>:nth-child(5){display:flex;align-items:end;justify-content:space-between}.phone-overlay .reception-icon{width:9px;display:flex;align-items:end;justify-content:space-between}.phone-overlay .reception-icon-bar{width:1.5px;background:#000;border-radius:.5px}.phone-overlay .reception-icon-bar:nth-child(1){height:2px}.phone-overlay .reception-icon-bar:nth-child(2){height:4px}.phone-overlay .reception-icon-bar:nth-child(3){height:6px}.phone-overlay .reception-icon-bar:nth-child(4){height:8px}.phone-overlay .wifi-icon{width:12px;height:12px;--b1: 18%;--b2: 26%;--b3: 38%;--b4: 46%;--b5: 58%;background:radial-gradient(circle at 50% 100%,black 0%,black 18%,transparent 18%,transparent 26%,black 26%,black 38%,transparent 38%,transparent 46%,black 46%,black 58%,transparent 58%,transparent 100%);background:radial-gradient(circle at 50% 100%,black 0% 18%,transparent 18% 26%,black 26% 38%,transparent 38% 46%,black 46% 58%,transparent 58% 100%);clip-path:polygon(0% 0%,0% 50%,50% 100%,100% 50%,100% 0%,0% 0%)}@supports (background: radial-gradient(red,red 1px 2px,red 3px)){.phone-overlay .wifi-icon{background:radial-gradient(circle at 50% 100%,black 0% var(--b1),transparent var(--b1) var(--b2),black var(--b2) var(--b3),transparent var(--b3) var(--b4),black var(--b4) var(--b5),transparent var(--b5) 100%)}}.phone-overlay .battery-icon{width:10px;height:5px;background:#000;border-radius:1px;box-shadow:#e9eee8d8 0 0 0 .5px,gray 0 0 0 1px;box-shadow:var(--phone-background-color) 0 0 0 .5px,gray 0 0 0 1px;position:relative;margin-bottom:1px;margin-right:4px}.phone-overlay .battery-icon:after{content:"";position:absolute;left:calc(100% + 1px);top:calc(50% - 1px);width:1px;height:2px;background:gray;border-radius:0 1px 1px 0}.phone-overlay .title-bar{height:28px;padding-top:6px;display:grid;grid-template-columns:30px 1fr 30px;align-items:center;justify-items:center;place-items:center;font-size:9px;font-weight:700;direction:ltr}.phone-overlay .back-button{position:relative;height:13px;width:13px}.phone-overlay .back-button:after{content:"";position:absolute;top:calc(50% - .75px);left:0;width:10px;height:1.5px;border-radius:1000px;background-color:#0072f6;transform:rotate(-45deg);transform-origin:.75px .75px}.phone-overlay .back-button:before{content:"";position:absolute;top:calc(50% - .75px);left:0;width:10px;height:1.5px;border-radius:1000px;background-color:#0072f6;transform:rotate(45deg);transform-origin:.75px .75px}.phone-overlay .channel-icon{width:22px;height:22px;border-radius:1000px;background-color:#fff;display:grid;align-items:center;justify-items:center;place-items:center}.phone-overlay .channel-icon>div{width:17px;height:14.72px;margin-top:3px;clip-path:polygon(0% 0%,100% 0%,50% 100%,0% 0%);background-color:#cff1c7;font-size:2px;display:grid}.phone-overlay .channel-icon>div>span{margin:3px auto 0}.phone-overlay .spacer{flex-grow:1}.phone-overlay .bottom-phone-part{background-color:#e9eee8d8;background-color:var(--phone-background-color);border-radius:0 0 23px 23px;display:flex;flex-direction:column;align-items:center;-webkit-backdrop-filter:blur(40px);-webkit-backdrop-filter:var(--phone-background-filter);backdrop-filter:blur(40px);backdrop-filter:var(--phone-background-filter)}.phone-overlay .bottom-phone-part .mute-thing{margin:7px 0 21px;color:#0072f6;font-size:9px}.phone-overlay .bottom-phone-part .home-indicator{width:84px;height:3px;border-radius:1000px;background-color:#000;margin-bottom:4px}.phone-content{margin-top:calc(-1*(100vh + 150px) + (100vh - 500px)/2 + 59px);margin-top:calc(-1 * var(--container-height) + var(--phone-top) + var(--phone-border-width) + 20px + 28px + 6px + 5px);margin-left:auto;margin-right:auto;margin-bottom:calc(100vh - 304px - ((100vh - 500px)/2 - 7px));margin-bottom:calc(var(--container-height) - var(--phone-top) - var(--phone-height) + var(--bottom-bar-height));width:231px;width:var(--phone-width);display:grid;grid-gap:5px;gap:5px;align-items:end;justify-items:end;place-items:end;position:relative;z-index:-2}.message{display:inline-block;background:#fff;margin:0 10px 0 30px;padding:1px;border-radius:10px;position:relative;font-size:10px;line-height:1.5}.message span{display:inline-block;padding:5px}.message img{max-width:100%;border-radius:9px 9px 0 0}.message a,.message a:visited{-webkit-text-decoration:none;text-decoration:none;color:#395dae}.message:after{content:"";background:#fff;width:20px;height:20px;position:absolute;bottom:0;left:-10px;clip-path:path("M 10,10 Q 10,18 4,20 Q 3,21 15,18 Z")}.signature{margin-top:50px;align-self:stretch;text-align:left}a,a:visited{color:#000}