@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: block; src: url("../fonts/pjs-500.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: block; src: url("../fonts/pjs-700.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: block; src: url("../fonts/pjs-800.woff2") format("woff2"); }

.slide {
  --red: #FF1B1B; --blue: #0D8CE9; --charcoal: #1F1F1F; --fs: 1; --ty: 0px;
  position: relative; width: 1080px; height: 1350px; overflow: hidden; background: #fff;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.17; color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
}
.slide .u-red, .slide .u-blue {
  text-decoration-line: underline; text-decoration-thickness: 0.21em;
  text-underline-offset: 0.2em; text-decoration-skip-ink: none;
}
.slide .u-red { text-decoration-color: var(--red); }
.slide .u-blue { text-decoration-color: var(--blue); }

.slide .ph { position: absolute; overflow: hidden; background: #E9E3E1; }
.slide .ph.full { inset: 0; }
.slide .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide .ph.empty::after {
  content: "Photo"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 36px; font-weight: 700; color: #9E9592;
}
.slide .shade { position: absolute; inset: 0; pointer-events: none; }
.slide .shade.bottom { background: linear-gradient(to top, rgba(0,0,0,.45), transparent 45%); }
.slide .shade.both { background: linear-gradient(to bottom, rgba(0,0,0,.35), transparent 30%, transparent 60%, rgba(0,0,0,.45)); }

.slide .logo { position: absolute; width: 190px; color: #fff; line-height: 0; }
.slide .logo svg, .slide .logo-big svg { width: 100%; height: auto; display: block; }
.slide .logo.tl { top: 30px; left: 26px; } .slide .logo.tr { top: 32px; right: 37px; }
.slide .logo.bl { bottom: 24px; left: 26px; } .slide .logo.br { bottom: 26px; right: 30px; }

.slide .txt { position: absolute; translate: 0 var(--ty); white-space: normal; overflow-wrap: break-word; }

/* 1 photo-center */
.L-photo-center .t-center { left: 80px; right: 80px; top: 50%; transform: translateY(-50%);
  text-align: center; color: #fff; font-size: calc(98px * var(--fs)); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
/* 2 photo-bottom, 3 photo-top-bottom */
.L-photo-bottom .t-bottom, .L-photo-top-bottom .t-bottom { left: 84px; right: 72px; bottom: 80px;
  color: #fff; font-size: calc(93px * var(--fs)); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.L-photo-top-bottom .t-bottom { left: 61px; right: 180px; bottom: 55px; font-size: calc(88px * var(--fs)); }
.L-photo-top-bottom .t-top { left: 63px; right: 60px; top: 42px; color: #fff;
  font-size: calc(88px * var(--fs)); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
/* 4 white-list */
.L-white-list .t-head { left: 60px; right: 60px; top: 60px; text-align: center; font-size: calc(88px * var(--fs)); }
.L-white-list .rows { position: absolute; left: 66px; right: 100px; top: 350px; display: grid; gap: 52px; translate: 0 var(--ty); }
.L-white-list .row { display: grid; grid-template-columns: 350px 1fr; gap: 74px; align-items: center; }
.L-white-list .ph.row-ph { position: relative; height: 272px; }
.L-white-list .cap { position: static; translate: none; font-weight: 700; letter-spacing: 0;
  line-height: 1.16; font-size: calc(48px * var(--fs)); }
/* 5 white-arrow */
.L-white-arrow .t-head, .L-white-arrow .t-second { left: 50px; right: 50px; text-align: center; font-size: calc(88px * var(--fs)); }
.L-white-arrow .t-head { top: 110px; }
.L-white-arrow .t-second { top: 457px; }
.L-white-arrow .arrow { position: absolute; left: 340px; top: 841px; width: 400px; height: 400px;
  border-radius: 50%; background: var(--red); display: grid; place-items: center; }
.L-white-arrow .arrow svg { width: 272px; height: 272px; }
/* 6 red-screenshot */
.L-red-screenshot { background: var(--red); }
.L-red-screenshot .t-head { left: 60px; right: 60px; top: 42px; text-align: center; color: #fff; font-size: calc(88px * var(--fs)); }
.L-red-screenshot .shot { position: absolute; left: 238px; width: 602px; top: 423px; height: 1000px;
  border-radius: 42px; overflow: hidden; background: #fff; }
/* 7 red-signoff */
.L-red-signoff { background: var(--red); }
.L-red-signoff .logo-big { position: absolute; left: 183px; right: 186px; top: 552px; color: #fff; line-height: 0; }
.L-red-signoff .t-sign { left: 80px; right: 80px; bottom: 115px; text-align: center; color: #fff;
  font-weight: 700; letter-spacing: 0; font-size: calc(66px * var(--fs)); }
.offscreen { position: fixed; left: -20000px; top: 0; pointer-events: none; }