@font-face {
  font-family: InterVar;
  src: local("Inter"), local("Helvetica Neue"), local("Arial");
  font-weight: 100 900;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html, body {
  height: 100%;
}
body {
  margin: 0;
  font-family: InterVar, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans TC", "PingFang TC", "Heiti TC", "Hiragino Sans CNS", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  background: #ffffff;
  color: #111;
  font-size: 17px;
}
.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.phone {
  width: min(380px, 92vw);
  border-radius: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
  overflow: visible;
}
.screen {
  background: transparent;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 12px 20px 16px;
}
.app-header {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  padding: 6px 0 8px;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
}
.app-card {
  display: flex;
  justify-content: center;
  flex: 1 1 auto;
  align-items: center;
}
.logo-wrap {
  display: grid;
  gap: 10px;
  align-items: center;
  justify-items: center;
}
.sf-logo {
  width: min(560px, 88vw);
  max-height: 60vh;
  object-fit: contain;
  height: auto;
  border-radius: 40px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.08);
  background: #fff;
}
.sf-label {
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 20px;
}
.actions {
  display: grid;
  gap: 16px;
  margin-top: auto;
  padding-bottom: 80px;
}
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 16px 22px;
  border-radius: 999px;
  font-size: 20px;
  text-decoration: none;
  user-select: none;
}
.btn.primary {
  background: #ee2d2d;
  color: #fff;
}
.btn.primary:active {
  transform: translateY(1px);
}
.btn.secondary {
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.1);
}
.btn.secondary:active {
  transform: translateY(1px);
}