/* toast.day: the ending. "Your year is full of people you care about": 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 .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; once there are more than fit, the older ones tuck under the last card in a stack, as iOS does */
.home .s-soon .stack{position:absolute;left:10px;right:10px;top:420px;display:flex;flex-direction:column;gap:8px}
.home .s-soon .n{position:relative;z-index:2;display:flex;gap:12px;align-items:center;padding:14px 16px 14px 14px;border-radius:24px;background:rgba(56,44,50,.72);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08);font-size:17px;line-height:1.25;will-change:transform,opacity}
.home .s-soon .n .ic{flex:none;width:44px;height:44px;border-radius:10px;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:9px;font-weight:600;color:#e5141e;letter-spacing:.02em;margin-bottom:1px}
.home .s-soon .n .ic b{font-size:22px;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:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home .s-soon .n .row span{flex:none;font-size:14px;color:rgba(255,255,255,.55)}
/* arriving: drops in from just above, a touch small, and settles (soon.js) */
.home .s-soon .n.arrive{animation:soonin .7s cubic-bezier(.32,.72,0,1) both}
@keyframes soonin{from{opacity:0;transform:translateY(-28px) scale(.9)}60%{opacity:1}}
.home .s-soon .n.slide{transition:transform .7s cubic-bezier(.32,.72,0,1)}
/* leaving: the bottom card folds down into the stack under the new last one */
.home .s-soon .n.leave{position:absolute;left:0;right:0;z-index:1;transition:opacity .5s ease,transform .7s cubic-bezier(.32,.72,0,1)}
.home .s-soon .n.leave.go{opacity:0;transform:translateY(14px) scale(.92)}
/* the stack: two cards peeking out from under the last one, each narrower and fainter */
.home .s-soon .pile{position:absolute;left:0;right:0;top:0;height:0;z-index:1;opacity:0;transition:opacity .5s,transform .7s cubic-bezier(.32,.72,0,1)}
.home .s-soon .pile.on{opacity:1}
.home .s-soon .pile i{position:absolute;left:12px;right:12px;top:-4px;height:14px;border-radius:0 0 18px 18px;background:rgba(56,44,50,.58)}
.home .s-soon .pile i+i{left:26px;right:26px;height:21px;background:rgba(56,44,50,.34);z-index:-1}
/* 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(36px,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{animation:none}.home .s-soon .n.slide,.home .s-soon .n.leave,.home .s-soon .pile{transition:none}}