/* iPhone beta (ios07): the App Store card is live and opens a TestFlight how-to window in the site's paper style. */

/* the App Store card (top row and closing row) */
.home05 .future05.ios07Card{appearance:none;font:inherit;text-align:left;cursor:pointer;color:#cfd8ea;-webkit-tap-highlight-color:transparent}
.home05 .future05.ios07Card>svg{color:#f6f1ff;filter:drop-shadow(0 0 6px #b77bff66)}
.home05 .future05.ios07Card strong{color:#fff7e6}
.home05 .future05.ios07Card small{color:#c9b8ec}
.home05 .future05.ios07Card b{background:linear-gradient(#9a4cf0,#5d1fae);border:1px solid #d8b2ff;color:#fff;box-shadow:inset 0 1px #ffffff40}
.home05 .future05.ios07Card:focus-visible{outline:3px solid #eac8ff;outline-offset:5px}
.amber03 .downloads05>.future05.ios07Card{background:linear-gradient(118deg,#d6b4ff,#8d6cc2 42%,#6b7c91 78%);transition:filter .25s}
.amber03 .downloads05>.future05.ios07Card:before{background:linear-gradient(105deg,transparent 35%,#c9a4ff24 50%,transparent 65%) 135% 0/250% 100% no-repeat,radial-gradient(circle at 16% 35%,#5b2a9a66,transparent 42%),linear-gradient(110deg,#131f37,#07101e);transition:background-position .7s}
.amber03 .downloads05>.future05.ios07Card:after{border-color:#c9a4ff2e}
/* the card is clipped to its cut shape, so hover lights it from inside (a drop-shadow would be clipped away) */
.amber03 .downloads05>.future05.ios07Card:hover,.amber03 .downloads05>.future05.ios07Card:focus-visible{background:linear-gradient(118deg,#f1e2ff,#b48cf0 45%,#8a7fb0 80%)}
.amber03 .downloads05>.future05.ios07Card:hover:before,.amber03 .downloads05>.future05.ios07Card:focus-visible:before{background:linear-gradient(105deg,transparent 35%,#d9bcff33 50%,transparent 65%) -35% 0/250% 100% no-repeat,radial-gradient(circle at 16% 35%,#7c3fd2a8,transparent 48%),linear-gradient(110deg,#1a2442,#0a1226)}
.amber03 .downloads05>.future05.ios07Card:hover>svg{filter:drop-shadow(0 0 9px #c99bffcc)}
.home05 .future05.ios07Card:hover b,.home05 .future05.ios07Card:focus-visible b{background:linear-gradient(#b067ff,#6d25c4)}
.amber03 .downloads05>.future05.ios07Card:active{translate:0 1px}
.home05 .closingPlatforms05 .future05.ios07Card{background:none;border:0;padding:0;transition:filter .25s}
.home05 .closingPlatforms05 .future05.ios07Card:hover{filter:drop-shadow(0 0 10px #a565ff80)}

/* the window */
.ios07-dlg{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:auto;overscroll-behavior:contain;color:#051329}
.ios07-dlg[open]{display:grid;place-items:center}
.ios07-dlg::backdrop{background:#030a17b8;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.ios07-wrap{padding:16px;filter:drop-shadow(0 18px 40px #000b);animation:ios07-in .24s cubic-bezier(.2,.8,.25,1) both}
.ios07-dlg.ios07-out .ios07-wrap{animation:ios07-out .17s ease-in both}
.ios07-dlg[open]::backdrop{animation:ios07-fade .24s ease both}
.ios07-dlg.ios07-out::backdrop{animation:ios07-fade .17s ease-in reverse both}
@keyframes ios07-in{from{opacity:0;transform:translateY(10px) scale(.975)}}
@keyframes ios07-out{to{opacity:0;transform:translateY(6px) scale(.985)}}
@keyframes ios07-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.ios07-wrap,.ios07-dlg.ios07-out .ios07-wrap,.ios07-dlg[open]::backdrop,.ios07-dlg.ios07-out::backdrop{animation:none}}

.ios07-card{--cut:16px;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(250px,35%) 1fr;width:min(980px,calc(100vw - 32px));background:linear-gradient(155deg,#fff8e6,#f8e7c8);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));font-family:Barlow,sans-serif}
.ios07-card:before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border:2px solid #a97634;box-shadow:inset 0 0 0 2px #fff1b8,inset 0 0 0 5px #71627040;clip-path:inherit}
.ios07-card:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/assets/home05/paper-grain.svg') center/670px,radial-gradient(ellipse at 90% 85%,#d5ae7030,transparent 50%)}

.ios07-close{position:absolute;top:14px;right:14px;z-index:7;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;cursor:pointer;color:#fff3db;background:#0b1830;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:background .18s}
.ios07-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:square}
.ios07-close:hover{background:#4a1784}
.ios07-close:focus-visible{outline:3px solid #6415a8;outline-offset:3px}

/* the dark side: app icon and QR */
.ios07-side{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:40px 34px 30px 26px;color:#e9e3f8;background:radial-gradient(ellipse at 50% 22%,#43207a 0,#16163a 42%,#071426 78%);clip-path:polygon(0 0,100% 0,90% 100%,0 100%);overflow:hidden}
.ios07-side:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 24%,#b77bff40,transparent 34%),linear-gradient(180deg,transparent 60%,#03091666)}
.ios07-shard{position:absolute;width:22px;height:36px;opacity:.85;filter:drop-shadow(0 0 8px #b77bffaa)}
.ios07-shard.a{top:30px;left:24px;transform:rotate(-18deg)}
.ios07-shard.b{top:122px;right:36px;width:15px;height:25px;transform:rotate(22deg)}
.ios07-shard.c{bottom:34px;left:30px;width:13px;height:21px;transform:rotate(8deg);opacity:.6}
.ios07-icon{position:relative;width:104px;height:104px;border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px #ffffff2e,0 0 26px #a565ff80,0 10px 22px #0009}
.ios07-icon img{display:block;width:100%;height:100%}
.ios07-app{position:relative;margin:4px 0 0}
.ios07-app strong{display:block;font:900 26px/1 'Barlow Condensed',sans-serif;letter-spacing:.06em;color:#fff7e6;text-transform:uppercase}
.ios07-app span{display:block;margin-top:5px;font:500 13px/1.2 Barlow,sans-serif;color:#c9b8ec}
.ios07-qr{position:relative;margin-top:10px;padding:12px;width:168px;background:#fff8e6;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);box-shadow:inset 0 0 0 2px #d9b46a}
.ios07-qr img{display:block;width:100%;height:auto;image-rendering:pixelated}
.ios07-qrhint{position:relative;max-width:190px;margin:2px 0 0;font:500 13px/1.35 Barlow,sans-serif;color:#d9d0ee}

/* the paper side: how to play */
.ios07-main{position:relative;padding:40px 58px 30px 30px;min-width:0}
.ios07-kicker{display:flex;align-items:center;gap:9px;margin:0;font:700 13px/1.1 Barlow,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6415a8}
.ios07-kicker:before{content:"";width:8px;height:8px;background:#b459e6;transform:rotate(45deg);flex:none}
.ios07-main h2{margin:10px 0 12px;font:900 clamp(38px,4.3vw,56px)/.92 'Barlow Condensed',sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#051329;text-shadow:1px 1px #fff9}
.ios07-lead{margin:0;max-width:52ch;font:500 16px/1.45 Barlow,sans-serif;color:#3d3943}
.ios07-steps{list-style:none;margin:18px 0 0;padding:0;counter-reset:none}
.ios07-steps li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;padding:13px 0;border-top:1px solid #b7976655}
.ios07-steps li:last-child{border-bottom:1px solid #b7976655}
.ios07-num{display:grid;place-items:center;width:38px;height:44px;font:900 21px/1 'Barlow Condensed',sans-serif;color:#fff;text-shadow:0 1px #3d0f73;background:linear-gradient(160deg,#cf8bff,#8b3fd9 38%,#5a1aa6 70%,#3d0f73);clip-path:polygon(50% 0,100% 24%,100% 76%,50% 100%,0 76%,0 24%)}
.ios07-steps h3{margin:1px 0 3px;font:800 21px/1.1 'Barlow Condensed',sans-serif;letter-spacing:.02em;color:#051329}
.ios07-steps p{margin:0;font:400 15px/1.4 Barlow,sans-serif;color:#4a4552}
.ios07-link{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:700 14px/1.2 Barlow,sans-serif;color:#6415a8;text-decoration:none;border-bottom:1px solid #b459e666;padding-bottom:1px;transition:color .15s,border-color .15s}
.ios07-link svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4}
.ios07-link:hover{color:#3d0f73;border-color:#6415a8}
.ios07-link:focus-visible{outline:2px solid #6415a8;outline-offset:3px}
.ios07-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.ios07-cta,.ios07-copy{--c:10px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border:0;cursor:pointer;text-decoration:none;clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.ios07-cta{color:#1a1120;font:900 21px/1 'Barlow Condensed',sans-serif;letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(105deg,transparent 35%,#fff7 48%,transparent 62%) 135% 0/250% 100% no-repeat,linear-gradient(180deg,#ffe27a,#f9bf3b 55%,#ec9a1d);box-shadow:inset 0 0 0 1px #8a4a0c,inset 0 0 0 3px #fff3ae88;transition:background-position .7s,filter .2s}
.ios07-cta svg{width:19px;height:21px;flex:none}
.ios07-cta .ios07-arrow{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3}
.ios07-cta:hover,.ios07-cta:focus-visible{background-position:-35% 0,0 0;filter:drop-shadow(0 0 12px #ffc94199)}
.ios07-cta:active,.ios07-copy:active{translate:0 1px}
.ios07-copy{color:#fff3db;font:700 15px/1 Barlow,sans-serif;background:#0b1830;box-shadow:inset 0 0 0 1px #8297b6aa;transition:background .18s}
.ios07-copy svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.ios07-copy:hover{background:#1d2747}
.ios07-copy.done{background:#2f6b3a}
.ios07-cta:focus-visible,.ios07-copy:focus-visible{outline:3px solid #6415a8;outline-offset:3px}
.ios07-note{margin:14px 0 0;font:400 13px/1.4 Barlow,sans-serif;color:#6b6470}
.ios07-android{margin:6px 0 0;font:500 13px/1.4 Barlow,sans-serif;color:#4a4552}
.ios07-android a{color:#3f7a1d;font-weight:700}

/* who is looking: an iPhone needs no QR or copy; a computer does */
.ios07-dlg[data-device="ios"] .ios07-qr,.ios07-dlg[data-device="ios"] .ios07-qrhint,.ios07-dlg[data-device="ios"] .ios07-copy,
.ios07-dlg[data-device="android"] .ios07-qr,.ios07-dlg[data-device="android"] .ios07-qrhint{display:none}
.ios07-dlg:not([data-device="android"]) .ios07-android{display:none}

@media (max-height:760px) and (min-width:761px){
 .ios07-side{padding-top:30px;gap:9px}
 .ios07-icon{width:84px;height:84px;border-radius:19px}
 .ios07-qr{width:146px;margin-top:6px}
 .ios07-main{padding-top:30px;padding-bottom:22px}
 .ios07-main h2{font-size:42px;margin:8px 0 9px}
 .ios07-lead{font-size:15px}
 .ios07-steps{margin-top:12px}
 .ios07-steps li{padding:9px 0}
 .ios07-actions{margin-top:14px}
}
@media (max-height:520px) and (min-width:761px){
 .ios07-wrap{padding:8px}
 .ios07-card{grid-template-columns:minmax(200px,28%) 1fr}
 .ios07-side{padding:22px 26px 20px 18px;gap:7px}
 .ios07-icon{width:62px;height:62px;border-radius:15px}
 .ios07-app strong{font-size:21px}
 .ios07-shard.b{display:none}
 .ios07-qr{width:118px;padding:8px;margin-top:4px}
 .ios07-qrhint{font-size:12px}
 .ios07-main{padding:20px 56px 16px 20px}
 .ios07-kicker{font-size:11px}
 .ios07-main h2{font-size:34px;margin:6px 0 6px}
 .ios07-lead{font-size:13.5px;line-height:1.35}
 .ios07-steps{margin-top:8px}
 .ios07-steps li{padding:6px 0;gap:10px;grid-template-columns:32px 1fr}
 .ios07-num{width:30px;height:35px;font-size:17px}
 .ios07-steps h3{font-size:17px}
 .ios07-steps p{font-size:13px}
 .ios07-link{margin-top:2px;font-size:12.5px}
 .ios07-actions{margin-top:10px}
 .ios07-cta,.ios07-copy{min-height:42px}
 .ios07-cta{font-size:18px}
 .ios07-note{margin-top:8px;font-size:12px}
}
@media (max-width:760px){
 .ios07-wrap{padding:10px}
 .ios07-card{--cut:12px;grid-template-columns:1fr;width:min(560px,calc(100vw - 20px))}
 .ios07-side{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;gap:14px;padding:20px 62px 24px 20px;clip-path:polygon(0 0,100% 0,100% 82%,0 100%)}
 .ios07-icon{width:62px;height:62px;border-radius:15px;flex:none}
 .ios07-app{margin:0}
 .ios07-app strong{font-size:23px}
 .ios07-shard.a{top:auto;bottom:16px;left:auto;right:30px}
 .ios07-shard.b{top:14px;right:70px}
 .ios07-shard.c{display:none}
 .ios07-qr{display:none}
 .ios07-qrhint{display:none}
 .ios07-close{top:12px;right:12px;width:40px;height:40px}
 .ios07-main{padding:18px 20px 22px}
 .ios07-main h2{font-size:clamp(34px,10vw,44px)}
 .ios07-lead{font-size:15px}
 .ios07-steps h3{font-size:19px}
 .ios07-steps p{font-size:14px}
 .ios07-actions{flex-direction:column}
 .ios07-cta,.ios07-copy{width:100%}
}