@import url("readability.css");
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#191919;font-family:"DM Sans",Arial,sans-serif}.case-nav{position:fixed;left:36px;top:70px;width:130px}.case-nav a{color:#555;text-decoration:none}.case-nav nav{margin-top:44px;display:grid}.case-main{width:560px;margin:0 auto;padding:94px 0 120px}.eyebrow{font-family:"DM Mono",monospace;letter-spacing:.4px;margin:0 0 7px}.case-main h1{letter-spacing:-.5px;margin:0 0 26px}.hero{height:340px;border-radius:5px;background:linear-gradient(135deg,#fffdf9,#fff0f7);position:relative;overflow:hidden}.hero.green{background:#9beaaf}.hero.dark{background:#0a0a0a}.hero.gray{background:#f4f4f3}.hero .phone{position:absolute;left:50%;top:24px;transform:translateX(-50%);width:126px;height:270px;border:5px solid #202124;border-radius:25px;background:linear-gradient(#f6c3c5,#f7ecbd 52%,#97d8eb);box-shadow:0 3px 8px #0004}.hero .phone:before{content:"";position:absolute;top:5px;left:50%;width:45px;height:11px;transform:translateX(-50%);background:#171717;border-radius:8px}.hero .blocks{position:absolute;inset:0}.hero .blocks i{position:absolute;width:54px;height:48px;border-radius:4px}.hero .blocks i:nth-child(1){background:#ffe99c;left:23%;top:42%}.hero .blocks i:nth-child(2){background:#ffceb8;left:25%;top:61%}.hero .blocks i:nth-child(3){background:#b8ecff;right:20%;top:34%}.hero .blocks i:nth-child(4){background:#ffbce8;right:22%;top:63%}.meta{display:grid;grid-template-columns:repeat(3,1fr);margin:27px 0 24px}.meta p{margin:4px 0}.tldr{border:1px solid #d8d8d8;border-radius:4px;padding:18px;scroll-margin-top:30px}.tldr b{display:block;margin-bottom:8px}.section{margin-top:66px;scroll-margin-top:30px}.section h2{letter-spacing:-.35px;margin:9px 0 8px}.section p{max-width:510px;margin:0 0 12px}.callout{margin-top:17px;border-left:3px solid #ff4e15;padding-left:13px;font-weight:500}.shot{height:330px;margin-top:55px;border:1px solid #ddd;border-radius:4px;position:relative;overflow:hidden;background:#fafafa}.shot .phone{position:absolute;width:155px;height:330px;bottom:-80px;left:50%;transform:translateX(-50%);border:6px solid #222;border-radius:30px;background:linear-gradient(#f7c4d2,#fff1b4)}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.tile{height:290px;border:1px solid #ddd;border-radius:4px;background:linear-gradient(135deg,#fff,#f9f9f9)}.tile.phone-tile{background:linear-gradient(#fff,#ffe9ad);position:relative}.tile.phone-tile:after{content:"";position:absolute;width:94px;height:250px;bottom:-30px;left:50%;transform:translateX(-50%);border:5px solid #202124;border-radius:22px;background:#f6c8e5}.reflection{display:grid;grid-template-columns:1fr 1fr;gap:34px}.more{margin-top:70px;border-top:1px solid #ccc;padding-top:35px}.more a{color:#191919;text-decoration:none;font-size:16px;font-weight:500}@media(max-width:760px){.case-nav{position:static;width:90%;margin:28px auto 0}.case-nav nav{display:none}.case-main{width:90%;padding-top:42px}.hero{height:270px}.reflection{grid-template-columns:1fr}.meta{gap:8px}.shot{height:260px}}