/* toast.day: the ending. "Your year is full of people you love": a lock screen that keeps filling with the big days ahead.
   The phone is drawn at real iPhone size (390 x 844 screen) and scaled as one piece, so nothing squeezes. */
.home .s-soon{position:relative;background:#0f0c0b;color:#fff;overflow:hidden}
.home .s-soon .sw{max-width:1240px;margin:0 auto;padding:clamp(72px,8vw,120px) clamp(20px,5vw,64px);display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px}
.home .s-soon .words{display:flex;flex-direction:column;align-items:flex-start;gap:40px}
.home .s-soon h2{font-family:var(--fd);font-weight:400;font-size:clamp(46px,5.6vw,92px);letter-spacing:-.05em;line-height:.96;margin:0;max-width:11ch;text-wrap:balance}
.home .s-soon h2 em{font-style:normal;color:var(--volt)}
.home .s-soon .ctas{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.home .s-soon .si{height:56px;padding:0 16px;display:inline-flex;align-items:center;font-size:17px;color:rgba(255,255,255,.85);transition:color .15s}
.home .s-soon .si:hover{color:#fff}
.home .s-soon .stage{justify-self:center;width:calc(406px * var(--k,.8));height:calc(860px * var(--k,.8))}
.home .s-soon .phone{width:406px;height:860px;padding:8px;border-radius:64px;background:#1d1b1a;box-shadow:inset 0 0 0 1.5px #3a3634,0 50px 90px -40px rgba(0,0,0,.9);transform:scale(var(--k,.8));transform-origin:0 0}
.home .s-soon .scr{position:relative;width:390px;height:844px;border-radius:56px;overflow:hidden;background:#3a2a33 url(img/golden-clouds.jpg) center/cover;font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;color:#fff;letter-spacing:-.01em}
.home .s-soon .scr::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.18) 40%,rgba(0,0,0,.5))}
.home .s-soon .isl{position:absolute;top:11px;left:50%;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000;z-index:3}
.home .s-soon .sb{position:absolute;top:18px;left:0;right:0;display:flex;justify-content:space-between;padding:0 34px 0 44px;font-size:16px;font-weight:600;z-index:2}
.home .s-soon .sb svg{width:66px;height:13px;fill:#fff}
.home .s-soon .dt{position:relative;margin:76px 0 0;text-align:center;font-size:20px;font-weight:600;opacity:.9}
.home .s-soon .tm{position:relative;margin:-2px 0 0;text-align:center;font-size:96px;font-weight:700;letter-spacing:-.02em;line-height:1}
.home .s-soon .bt{position:absolute;bottom:36px;left:46px;right:46px;display:flex;justify-content:space-between}
.home .s-soon .bt i{width:50px;height:50px;border-radius:50%;background:rgba(40,36,34,.45)}
.home .s-soon .hb{position:absolute;bottom:9px;left:50%;width:138px;height:5px;margin-left:-69px;border-radius:3px;background:#fff;opacity:.9}
/* the reminders: newest on top, older ones gather into a pile underneath */
.home .s-soon .stack{position:absolute;left:10px;right:10px;top:452px;display:flex;flex-direction:column;gap:8px}
.home .s-soon .n{display:flex;gap:11px;align-items:center;padding:12px 14px 12px 12px;border-radius:22px;background:rgba(56,44,50,.72);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08);font-size:15px;line-height:1.28;will-change:transform}
.home .s-soon .n .ic{flex:none;width:38px;height:38px;border-radius:9px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#000;line-height:1}
.home .s-soon .n .ic small{font-size:8px;font-weight:600;color:#e5141e;letter-spacing:.02em;margin-bottom:1px}
.home .s-soon .n .ic b{font-size:19px;font-weight:400;letter-spacing:-.04em}
.home .s-soon .n .tx{flex:1;min-width:0}
.home .s-soon .n .row{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.home .s-soon .n .row b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home .s-soon .n .row span{flex:none;font-size:13px;color:rgba(255,255,255,.55)}
.home .s-soon .n .bd{color:rgba(255,255,255,.88)}
/* a new one fades in at the top while the others slide down to make room (soon.js); the last one fades out where it was */
.home .s-soon .n.arrive{animation:soonin .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes soonin{from{opacity:0;transform:translateY(-10px) scale(.97)}}
.home .s-soon .n.slide{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.home .s-soon .n.leave{position:absolute;left:0;right:0;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1);opacity:0;transform:scale(.96)}
.home .s-soon .pile{position:relative;height:16px;margin-top:-2px;transition:opacity .5s}
.home .s-soon .pile i{position:absolute;left:12px;right:12px;top:0;height:10px;border-radius:0 0 18px 18px;background:rgba(56,44,50,.5)}
.home .s-soon .pile i+i{left:24px;right:24px;top:8px;background:rgba(56,44,50,.32)}
/* phones: the line first, then the lock screen, cropped below the reminders */
@media (max-width:860px){
  .home .s-soon .sw{grid-template-columns:1fr;gap:36px;padding-bottom:0}
  .home .s-soon .words{gap:26px}
  .home .s-soon h2{font-size:clamp(44px,12vw,64px)}
  .home .s-soon .stage{height:calc(640px * var(--k,.8));overflow:hidden;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
  .home .s-soon .stack{top:250px}
}
@media (prefers-reduced-motion:reduce){.home .s-soon .n.arrive,.home .s-soon .n.leave{animation:none}}