/* FALL LINE - product UI drawn at device size, scaled onto the page.
   phone: 375 x 812 design px, page scale via --s (default .4)
   web:   1280 x 800 design px, page scale via --s (default .42) */
.phone{position:absolute;width:375px;height:812px;transform-origin:0 0;transform:scale(var(--s,.4));
  border-radius:58px;background:#0d0e10;padding:11px;
  box-shadow:0 0 0 2px #2b2e33 inset,0 22px 40px -12px rgba(18,20,23,.35)}
.scr{position:relative;width:353px;height:790px;border-radius:47px;overflow:hidden;background:#fafaf8;
  font-family:var(--f-text);color:#121417;font-size:14px;line-height:1.38}
.island{position:absolute;left:50%;top:11px;width:116px;height:33px;margin-left:-58px;border-radius:20px;background:#0d0e10;z-index:3}
.sb{height:50px;display:flex;justify-content:space-between;align-items:center;padding:6px 30px 0 34px;
  font:600 15px/1 var(--f-text);letter-spacing:-.01em}
.sb i{display:inline-flex;gap:5px;align-items:center;font-style:normal}
.sb .bat{width:24px;height:11.5px;border:1.4px solid #121417;border-radius:3.5px;position:relative}
.sb .bat:after{content:'';position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:68%;background:#121417;border-radius:1px}
.sb .sig{display:inline-flex;gap:1.6px;align-items:flex-end;height:11px}
.sb .sig b{width:3px;background:#121417;border-radius:1px}
.home{position:absolute;left:50%;bottom:8px;width:128px;height:5px;margin-left:-64px;border-radius:3px;background:#121417}
.scr.dark{background:#111315;color:#f1f2f0}
.scr.dark .sb .bat{border-color:#f1f2f0}.scr.dark .sb .bat:after,.scr.dark .sb .sig b,.scr.dark .home{background:#f1f2f0}

/* app chrome */
.ab{display:flex;align-items:center;justify-content:space-between;padding:8px 22px 6px}
.ab .bk{font:500 15px var(--f-text);color:#666c72}
.ab .ct{font:600 15px var(--f-text)}
.pad{padding:0 22px}
.u-kick{font:500 11px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#666c72}
.u-kick b{color:#c2410c;font-weight:600}
.u-title{font:700 27px/1.08 var(--f-wide);font-stretch:112.5%;letter-spacing:-.02em;margin-top:6px}
.u-h{font:600 16px/1.3 var(--f-text);letter-spacing:-.005em}
.u-body{font:400 14px/1.42 var(--f-text);color:#2f3337}
.u-small{font:400 12.5px/1.4 var(--f-text);color:#666c72}
.u-lab{font:500 10.5px/1.2 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:#666c72}
.u-num{font:700 30px/1 var(--f-wide);font-stretch:112.5%;letter-spacing:-.03em}
.u-num small{font:500 13px var(--f-mono);color:#666c72;margin-left:3px;letter-spacing:0}
.u-card{background:#fff;border-radius:16px;box-shadow:0 0 0 1px #e3e6e8;padding:14px 16px}
.u-row{display:flex;align-items:center;justify-content:space-between}
.u-hr{height:1px;background:#e6e8ea;margin:10px 0}
.u-btn{display:flex;align-items:center;justify-content:center;height:52px;border-radius:14px;
  font:600 16px var(--f-text);letter-spacing:-.005em;background:#121417;color:#fafaf8}
.u-btn.o{background:#fff;color:#121417;box-shadow:0 0 0 1.4px #121417 inset}
.u-btn.g{background:#eceeeb;color:#121417}
.u-btn.s{background:#f2561d;color:#fff}
.u-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;
  font:500 12px var(--f-text);background:#eceeeb;color:#2f3337}
.u-chip.k{background:#121417;color:#fafaf8}
.u-chip.s{background:#fde6da;color:#9a330a}
.u-ok{display:inline-block;width:8px;height:8px;border-radius:50%;background:#121417}
.u-tab{position:absolute;left:0;right:0;bottom:0;height:84px;background:#fafaf8;border-top:1px solid #e3e6e8;
  display:flex;justify-content:space-around;padding-top:12px;font:500 10.5px var(--f-text);color:#8a9096}
.u-tab span{display:flex;flex-direction:column;align-items:center;gap:5px}
.u-tab span i{display:block;width:22px;height:22px;border-radius:6px;box-shadow:0 0 0 1.6px #8a9096 inset}
.u-tab span.on{color:#121417}
.u-tab span.on i{box-shadow:none;background:#121417}
.scr svg text.ui-lab{font:500 10.5px var(--f-mono);letter-spacing:.06em;fill:#666c72;text-transform:uppercase}
.scr svg text.ui-tick{font:500 10px var(--f-mono);fill:#8a9096}

/* web */
.web{position:absolute;width:1280px;height:800px;transform-origin:0 0;transform:scale(var(--s,.42));
  border-radius:12px;background:#fbfbfa;overflow:hidden;font-family:var(--f-text);color:#121417;font-size:13px;line-height:1.4;
  box-shadow:0 0 0 1px #c9ced2,0 28px 50px -18px rgba(18,20,23,.35)}
.wchrome{height:40px;background:#eceeeb;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid #d9dcde}
.wchrome i{width:11px;height:11px;border-radius:50%;background:#c9ced2;display:block}
.wchrome .url{margin-left:18px;flex:0 0 520px;height:24px;border-radius:7px;background:#fbfbfa;
  font:500 12px/24px var(--f-mono);color:#666c72;padding-left:12px}
.wtop{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #e3e6e8}
.wlogo{font:800 16px var(--f-wide);font-stretch:125%;letter-spacing:.02em;text-transform:uppercase}
.wlogo i{font-style:normal;color:#f2561d}
.w-lab{font:500 11px/1.2 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:#666c72}
.w-h{font:600 15px/1.3 var(--f-text)}
.w-t{font:700 22px/1.1 var(--f-wide);font-stretch:112.5%;letter-spacing:-.02em}
.web svg text.wb-lab{font:500 11px var(--f-mono);letter-spacing:.05em;fill:#666c72;text-transform:uppercase}
.web svg text.wb-tick{font:500 10.5px var(--f-mono);fill:#8a9096}
.wbtn{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:9px;font:600 13px var(--f-text);
  background:#121417;color:#fbfbfa}
.wbtn.o{background:#fff;color:#121417;box-shadow:0 0 0 1.2px #121417 inset}
.wbtn.g{background:#eceeeb;color:#121417}
.nd{display:inline-block;width:9px;height:9px;border-radius:50%;background:#c9ced2;margin-left:3px;vertical-align:0}
.nd.o{background:none;box-shadow:inset 0 0 0 1.5px #f5926a}
.nd.s{background:#f5926a;margin-left:0}