/* the five iPhone screens, drawn at the device's own 402x874 pt and scaled into Apple's bezel */
.scr{position:absolute;z-index:1;width:402px;height:874px;transform-origin:0 0;overflow:hidden;border-radius:62px;background:#fff;
  font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;color:#0a0a0c;-webkit-font-smoothing:antialiased}
.scr .sb{position:absolute;top:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:6px 34px 0 46px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.scr .sb .ic{display:flex;align-items:center;gap:6px}
.scr .sb .bat{width:27px;height:13px;border-radius:4px;border:1.2px solid rgba(10,10,12,.4);padding:1.6px;position:relative}
.scr .sb .bat i{display:block;height:100%;width:78%;border-radius:2px;background:#0a0a0c}
.scr .sb .bat:after{content:"";position:absolute;right:-4px;top:4px;width:2px;height:4px;border-radius:0 1px 1px 0;background:rgba(10,10,12,.4)}
.scr .bd{position:absolute;top:54px;left:0;right:0;bottom:0;padding:10px 22px 0;display:flex;flex-direction:column}
.scr .hdr{display:flex;align-items:center;justify-content:space-between;height:44px}
.scr .hdr .mk{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:700;letter-spacing:-.03em}
.scr .hdr .mk svg{width:20px}
.scr .hdr .ct{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#6c6c74}
.scr .hdr .ct i{width:8px;height:8px;border-radius:50%;background:#b3261e}
.scr .src{margin-top:16px;font-size:13px;font-weight:600;color:#8a8a92;letter-spacing:.01em;display:flex;align-items:center;gap:7px}
.scr .src i{width:6px;height:6px;border-radius:50%;background:#b3261e}
.scr .ask{margin-top:10px;font-size:35px;font-weight:700;letter-spacing:-.028em;line-height:1.06}
.scr .det{margin-top:10px;font-size:15.5px;color:#6c6c74;line-height:1.35}
.scr .reach{margin-top:20px}
.scr .reach .dots{display:flex;align-items:center;justify-content:space-between;height:16px}
.scr .reach .dots i{border-radius:50%;display:block}
.scr .reach .lab{margin-top:10px;display:flex;justify-content:space-between;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#a4a4ad}
.scr .reach .lab b{color:#b3261e;font-weight:700}
.scr .sect{margin-top:22px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#a4a4ad;display:flex;justify-content:space-between}
.scr .files{margin-top:8px;border-radius:16px;background:#f4f4f6;padding:2px 14px}
.scr .files div{display:flex;align-items:center;gap:11px;height:42px;font-size:15px;font-weight:500}
.scr .files div+div{border-top:1px solid #e6e6ea}
.scr .files div span{margin-left:auto;font-size:13.5px;color:#8a8a92;font-weight:500}
.scr .files .ic{width:22px;height:26px;border-radius:4px;background:#e2e2e7;position:relative}
.scr .files .ic:after{content:"";position:absolute;right:0;top:0;width:7px;height:7px;background:#f4f4f6;border-bottom-left-radius:3px}
.scr .day{margin-top:8px;display:grid;grid-template-columns:repeat(14,1fr);gap:9px 0;justify-items:center}
.scr .day i{display:block;width:9px;height:9px;border-radius:50%;background:#d4d4da}
.scr .day i.a{background:#c2410c;width:11px;height:11px;margin:-1px}
.scr .day i.h{background:none;box-shadow:inset 0 0 0 2px #b3261e;width:12px;height:12px;margin:-1.5px}
.scr .rec{margin-top:18px;display:flex;flex-direction:column}
.scr .rec div{display:flex;align-items:center;gap:10px;height:34px;font-size:14.5px;font-weight:500;color:#3a3a40}
.scr .rec div+div{border-top:1px solid #efeff2}
.scr .rec time{font-size:12.5px;font-weight:600;color:#a4a4ad;width:34px;font-variant-numeric:tabular-nums}
.scr .rec i{width:7px;height:7px;border-radius:50%;background:#d4d4da;flex:none}
.scr .rec span{margin-left:auto;font-size:12.5px;color:#a4a4ad;font-weight:500}
.scr .btns{margin-top:auto;margin-bottom:40px;display:flex;flex-direction:column;gap:10px}
.scr .btns span{height:54px;border-radius:27px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;position:relative;overflow:hidden}
.scr .btns .hold{background:#0a0a0c;color:#fff}
.scr .btns .hold small{position:absolute;right:20px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.5)}
.scr .btns .not{background:#f1f1f4;color:#0a0a0c}
.scr .home{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:140px;height:5px;border-radius:3px;background:#0a0a0c}
.scr .lt{margin-top:6px;font-size:34px;font-weight:700;letter-spacing:-.025em}
.scr .lt small{display:block;font-size:14px;font-weight:600;color:#8a8a92;letter-spacing:0;margin-top:2px}
.scr .grp{margin-top:14px;border-radius:16px;background:#f4f4f6;padding:0 14px}
.scr .grp .r{display:flex;align-items:center;gap:11px;min-height:54px;padding:10px 0;font-size:15px;font-weight:500;line-height:1.25}
.scr .grp .r+.r{border-top:1px solid #e6e6ea}
.scr .grp .r i{width:8px;height:8px;border-radius:50%;flex:none;background:#c9c9cf}
.scr .grp .r .tx{flex:1;min-width:0}
.scr .grp .r .tx small{display:block;margin-top:3px;font-size:12.5px;color:#8a8a92;font-weight:500}
.scr .grp .r .v{font-size:12.5px;font-weight:600;color:#8a8a92;white-space:nowrap}
.scr .grp .r .end{font-size:13px;font-weight:600;color:#0a0a0c;background:#e6e6ea;border-radius:12px;padding:5px 11px}
.scr .note{margin-top:12px;font-size:13px;line-height:1.4;color:#8a8a92}
.scr .hold2{background:#0a0a0c;color:#fff;position:relative}
.scr .hold2 .fill{position:absolute;left:0;top:0;bottom:0;width:62%;background:#3a3a42}
.scr .hold2 b{position:relative;font-weight:600}
.scr .hold2 small{position:absolute;right:20px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.6)}
.scr .nx .r{min-height:74px}
.scr .big{display:flex;align-items:flex-end;gap:10px;margin-top:6px}
.scr .big b{font-size:96px;font-weight:700;letter-spacing:-.04em;line-height:.9}
.scr .big span{font-size:16px;font-weight:600;color:#6c6c74;padding-bottom:10px}
.scr .dg{margin-top:22px;display:grid;grid-template-columns:repeat(7,1fr);gap:16px 0;justify-items:center}
.scr .dg i{display:block;width:19px;height:19px;border-radius:50%;background:#d4d4da}
.scr .dg i.a{background:#c2410c;width:24px;height:24px;margin:-2.5px}
.scr .dg i.h{background:none;box-shadow:inset 0 0 0 3.5px #b3261e;width:25px;height:25px;margin:-3px}
.scr .lg{margin-top:22px;display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:#6c6c74}
.scr .lg span{display:flex;align-items:center;gap:6px}
.scr .lg i{width:9px;height:9px;border-radius:50%;background:#d4d4da}
.scr .tabs{position:absolute;left:22px;right:22px;bottom:30px;height:64px;border-radius:32px;background:rgba(244,244,246,.96);
  box-shadow:inset 0 0 0 1px rgba(10,10,12,.05);display:flex;align-items:center;justify-content:space-around;padding:0 8px}
.scr .tabs span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:#8a8a92;min-width:62px}
.scr .tabs span.on{color:#0a0a0c}
.scr .tabs svg{width:24px;height:24px;display:block}
.scr .tl .r time{width:40px;font-size:12.5px;font-weight:600;color:#a4a4ad;font-variant-numeric:tabular-nums}
.scr .tl .r{min-height:46px;padding:7px 0}
.scr .grp.dim .r{color:#8a8a92}
.scr .bp .r{min-height:36px;padding:6px 0}
.scr .bp .tx{flex:none;width:92px}
.scr .strip{flex:1;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.scr .strip i{width:7px;height:7px;border-radius:50%;background:#c9c9cf}
.scr .strip i.a{background:#c2410c;width:8.5px;height:8.5px}
.scr .strip i.h{background:none;box-shadow:inset 0 0 0 1.6px #b3261e;width:9px;height:9px}
.scr .bd .ask{font-size:40px;line-height:1.03;margin-top:12px}
.scr .bd .det{font-size:16.5px}
.scr .bd .reach{margin-top:26px}
.scr .bd .reach .dots{height:20px}
.scr .bd .files div{height:52px;font-size:16px}
.scr .bd .day{grid-template-columns:repeat(12,1fr);gap:13px 0;margin-top:12px}
.scr .bd .day i{width:12px;height:12px}
.scr .bd .day i.a{width:15px;height:15px;margin:-1.5px}
.scr .bd .day i.h{width:15px;height:15px;margin:-1.5px;box-shadow:inset 0 0 0 2.5px #b3261e}
.scr .nx .r{min-height:92px}
.scr .dg{gap:26px 0}
.scr .big{margin-top:14px}
.scr .tl .r{min-height:55px}
.scr .bd .day{gap:16px 0}
.scr .foot2{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#8a8a92}
/* small signs of life inside the screens */
.scr .ct i{animation:pulse 1.8s ease-out infinite}
.scr .reach .dots i{animation:swell 2.8s ease-in-out infinite;animation-delay:calc(var(--i,0) * 60ms)}
.step.on .hold2 .fill{animation:holdfill 2.6s cubic-bezier(.45,0,.2,1) infinite}
.step.on .dg i{animation:pop .7s cubic-bezier(.2,1.5,.4,1) both calc(var(--i,0) * 16ms),swell 3.4s ease-in-out calc(1s + var(--i,0) * 45ms) infinite}
.step.on .grp .r,.step.on .tl .r,.step.on .files div,.step.on .big,.step.on .lt{animation:rise .7s cubic-bezier(.16,.84,.12,1) both;animation-delay:calc(.12s + var(--i,0) * 50ms)}
.step.on .day i{animation:pop .6s cubic-bezier(.2,1.5,.4,1) both calc(.2s + var(--i,0) * 12ms)}
@keyframes holdfill{0%{width:0}72%,100%{width:100%}}
@keyframes pop{from{transform:scale(0)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}