/* Phone stories for the landing pages (scenes not on the home hero). Each story wears its product's own colours
   (taken from that experience's stylesheet); the shared pieces — stage, lock screen, confetti, tap — come from
   /site/home/reveal.css. Screen is about 264x544. */
.om-rv-stage{--st-bg:linear-gradient(165deg,#fff5f8 0%,#ffe8ef 100%);--st-ink:#1a1a2e;--st-acc:#e91e63;--st-acc2:#c2185b;--st-soft:#ffd6e4;
  --st-head:"Bricolage Grotesque","DynaPuff",system-ui,sans-serif;--st-hand:"Shantell Sans","Comic Sans MS",cursive}
.om-rv-stage[data-story="friendship"]{--st-bg:linear-gradient(165deg,#f2fbf6 0%,#e3f4ec 100%);--st-ink:#12352f;--st-acc:#14a38b;--st-acc2:#0f7d6b;--st-soft:#c9efe2}
.om-rv-stage[data-story="puzzle"]{--st-bg:linear-gradient(165deg,#fbf6ec 0%,#f3e9d6 100%);--st-ink:#3a352b;--st-acc:#e07856;--st-acc2:#b85d3f;--st-soft:#f0d3c3}
.om-rv-stage[data-story="anniversary"]{--st-bg:radial-gradient(ellipse at 50% 30%,#151c2e 0%,#0b0e17 100%);--st-ink:#f3e5ab;--st-acc:#8c2337;--st-acc2:#6a1b29;--st-soft:#d4af37}
.om-rv-stage[data-story="apology"]{--st-bg:linear-gradient(165deg,#eef2ff 0%,#e8eaf6 100%);--st-ink:#1a1a2e;--st-acc:#3949ab;--st-acc2:#283593;--st-soft:#c5cae9}

/* Story scenes sit on the product's own background (the lock screen keeps the shared one). */
.st-gate,.st-ask,.st-yay,.st-letter,.st-gallery,.st-band,.st-scratch,.st-rules,.st-play,.st-solved,.st-count,.st-hearts,.st-toast,.st-forgive,.st-thanks{background:var(--st-bg);color:var(--st-ink)}
.om-rv-stage .st-fdoor{background:radial-gradient(ellipse at 50% 30%,#12352f 0%,#0b2420 60%,#071814 100%)}

.st-emoji{font-size:46px;line-height:1;margin-top:40px}
.st-big{font-size:64px;line-height:1;margin-top:70px;animation:st-pop .7s cubic-bezier(.34,1.56,.64,1) both}
.st-title{margin-top:14px;font:800 18px/1.25 var(--st-head);letter-spacing:-.01em}
.st-sub{margin-top:8px;font:500 11.5px/1.45 var(--st-hand);opacity:.8}
.st-small{margin-top:10px;font-size:10px;opacity:.65}
.st-room{margin-top:6px;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--st-acc)}
.st-btn{display:inline-block;margin-top:18px;padding:11px 20px;border-radius:999px;font:700 13px/1.2 var(--st-head);color:#fff;background:linear-gradient(135deg,var(--st-acc),var(--st-acc2));box-shadow:0 10px 20px -10px var(--st-acc2);transition:transform .25s ease}
.st-btn.is-hit{transform:scale(.92)}
@keyframes st-pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes st-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.st-beat{animation:st-beat 1.2s ease-in-out infinite}

/* Proposal: the question, a "No" that runs away */
.st-name{margin-top:10px;font:700 15px/1.2 var(--st-hand);color:var(--st-acc)}
.st-q{margin-top:6px;font:800 19px/1.25 var(--st-head)}
.st-hint{margin-top:10px;min-height:16px;font:600 11.5px/1.3 var(--st-hand);color:var(--st-acc2)}
.st-yn{position:relative;margin-top:14px;align-self:stretch;height:120px}
.st-yn .st-btn{position:absolute;margin:0;top:10px;transition:transform .45s cubic-bezier(.34,1.56,.64,1),left .45s cubic-bezier(.34,1.56,.64,1),top .45s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}
.st-yn .st-yes{left:14px}
.st-yn .st-no{right:14px;background:#fff;color:var(--st-ink);box-shadow:0 6px 14px -8px rgba(0,0,0,.35)}
.st-ask .st-no.run1{right:auto;left:140px;top:72px;transform:scale(.85)}
.st-ask .st-no.run2{left:24px;top:76px;transform:scale(.7)}
.st-ask .st-no.is-gone{opacity:0;transform:scale(.3)}
.st-ask .st-yes.grow{transform:scale(1.12)}
.st-forgive .st-yn .st-yes{left:6px;padding:11px 14px;font-size:11.5px}
.st-forgive .st-yn .st-no{right:6px;padding:11px 14px;font-size:11.5px}
.st-forgive .st-no.run1{right:auto;left:120px;top:70px;transform:scale(.8)}
.st-forgive .st-no.run2{left:30px;top:74px;transform:scale(.65)}

/* Letter envelope (proposal + apology) */
.st-env{position:relative;width:200px;height:132px;margin-top:40px;border-radius:8px;background:linear-gradient(160deg,var(--st-soft),#fff);box-shadow:0 14px 28px -14px rgba(0,0,0,.35)}
.st-flap{position:absolute;left:0;right:0;top:0;height:74px;background:linear-gradient(180deg,var(--st-acc) 0%,var(--st-acc2) 100%);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .6s ease;z-index:2}
.st-seal{position:absolute;left:50%;top:52px;margin-left:-17px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.25);font-size:17px;z-index:3;transition:opacity .3s ease,transform .3s ease}
.st-paper{position:absolute;left:12px;right:12px;bottom:10px;height:110px;padding:10px 12px;border-radius:6px;background:#fffdf7;text-align:left;font:500 10.5px/1.4 var(--st-hand);color:#3a2a2a;box-shadow:0 4px 10px rgba(0,0,0,.12);transition:transform .8s cubic-bezier(.22,1,.36,1) .3s;z-index:1}
.st-paper em{display:block;font-style:normal;font-weight:700;color:var(--st-acc2)}
.st-paper p{margin:4px 0;min-height:42px}
.st-paper span{display:block;text-align:right;font-weight:700}
.st-letter.is-open .st-flap{transform:rotateX(180deg);z-index:0}
.st-letter.is-open .st-seal{opacity:0;transform:scale(.4)}
.st-letter.is-open .st-paper{transform:translateY(-118px);z-index:4}
.st-letter.is-open .st-env{margin-top:150px}
.st-letter .st-env{transition:margin .8s cubic-bezier(.22,1,.36,1)}
.st-gallery .om-rv-polaroids{margin-top:30px}

/* Best friend: band, scratch-off frame, rules contract */
.st-bandart{display:flex;gap:3px;margin-top:40px;padding:10px 14px;border-radius:999px;background:#fff;box-shadow:0 8px 20px -12px rgba(18,53,47,.5);transform:rotate(-6deg);transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
.st-bandart i{width:20px;height:20px;border-radius:50%}
.st-bandart i:nth-child(odd){background:#f5a524}.st-bandart i:nth-child(3n){background:#14a38b}.st-bandart i:nth-child(4n){background:#e14b8a}.st-bandart i:nth-child(5n){background:#5b62e8}.st-bandart i:nth-child(2){background:#ff6b57}
.st-band.is-done .st-bandart{transform:rotate(0) scale(1.12)}
.st-frame{position:relative;width:180px;height:190px;margin-top:16px;padding:10px;border-radius:6px;background:#8b5e34;box-shadow:inset 0 0 0 4px #a9743f,0 14px 24px -14px rgba(0,0,0,.5)}
.st-photo,.st-cover{position:absolute;inset:10px 10px 34px;border-radius:3px}
.st-photo{display:grid;place-items:center;font-size:44px;background:linear-gradient(160deg,#fde68a,#f9a8d4 55%,#93c5fd)}
.st-cover{background:repeating-linear-gradient(45deg,#c9c9c9 0 6px,#b5b5b5 6px 12px);clip-path:inset(0 0 0 0);transition:clip-path 1.8s linear}
.st-scratch.is-open .st-cover{clip-path:inset(0 0 0 100%)}
.st-plaque{position:absolute;left:28px;right:28px;bottom:8px;padding:3px 0;border-radius:3px;background:#f5e6c8;font:700 9px/1.2 var(--st-hand);color:#5b3b1d}
.st-contract{position:relative;margin-top:16px;align-self:stretch;padding:14px 14px 12px;border-radius:10px;background:#fffdf5;box-shadow:0 12px 24px -16px rgba(0,0,0,.4);text-align:left;font:500 10.5px/1.45 var(--st-hand)}
.st-contract b{display:block;text-align:center;font:800 14px/1.2 var(--st-head)}
.st-contract small{display:block;text-align:center;font-size:9.5px;opacity:.65}
.st-contract ol{margin:8px 0 6px;padding-left:16px}
.st-sign{display:block;width:150px;height:38px;margin:4px auto 0}
.st-sign path{stroke-dasharray:260;stroke-dashoffset:260}
.st-rules.is-open .st-sign path{transition:stroke-dashoffset 1.6s ease;stroke-dashoffset:0}
.st-stamp{position:absolute;right:10px;bottom:30px;padding:4px 8px;border:2.5px solid #e14b8a;border-radius:6px;color:#e14b8a;font:800 10px/1 var(--st-head);text-transform:uppercase;letter-spacing:.06em;transform:rotate(-12deg) scale(2);opacity:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s ease}
.st-rules.is-done .st-stamp{opacity:1;transform:rotate(-12deg) scale(1)}

/* Photo puzzle: a 3x3 board of one picture */
.st-meta{display:flex;gap:16px;margin-top:10px;font:600 11px/1 var(--st-hand)}
.st-meta b{font-family:var(--st-head)}
.st-board{position:relative;width:204px;height:204px;margin-top:14px;border-radius:10px;background:#e9dcc3;box-shadow:0 12px 24px -14px rgba(58,53,43,.6)}
.st-board,.st-board i{--pic:radial-gradient(circle at 70% 26%,#fde68a 0 15%,transparent 16%),linear-gradient(180deg,#f6b17a 0%,#f08a5d 38%,#7f9a78 39%,#5d7a5a 62%,#e4b03a 63%,#d39a2a 100%)}
.st-board i{position:absolute;width:66px;height:66px;border-radius:5px;background-image:var(--pic);background-size:204px 204px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);transition:left .45s cubic-bezier(.22,1,.36,1),top .45s cubic-bezier(.22,1,.36,1),transform .2s ease}
.st-board i.is-on{transform:scale(.9);box-shadow:inset 0 0 0 3px #e07856}
.st-whole{background-image:var(--pic);background-size:cover;animation:st-pop .6s ease both}
.st-whole::after{content:'🏖️';position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:44px}
.st-peek{margin-top:10px;font:600 10.5px/1 var(--st-hand);opacity:.7}
.st-note{margin-top:14px;align-self:stretch;padding:10px 12px;border-radius:8px;background:#fffaf0;border:1.5px dashed var(--st-acc);font:500 11px/1.4 var(--st-hand);text-align:left;opacity:0;transform:translateY(10px);transition:all .6s ease .6s}
.st-note p{margin:0 0 4px}
.st-note span{display:block;text-align:right;font-weight:700}
.st-solved.is-open .st-note{opacity:1;transform:none}

/* Anniversary: dark wine and gold */
.st-count .st-title,.st-hearts .st-title,.st-toast .st-title,.om-rv-stage[data-story="anniversary"] .st-gate .st-title{color:#f3e5ab}
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px;align-self:stretch}
.st-grid div{padding:10px 4px;border-radius:12px;background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.35)}
.st-grid b{display:block;font:800 22px/1 var(--st-head);color:#e5c158}
.st-grid span{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.st-line{position:relative;display:flex;justify-content:space-between;align-self:stretch;margin-top:30px;padding-top:16px;font:600 9.5px/1.2 var(--st-hand);color:#f3e5ab}
.st-line::before{content:'';position:absolute;left:8px;right:8px;top:4px;height:2px;background:linear-gradient(90deg,#6a1b29,#d4af37);transform-origin:left;animation:st-grow 2.4s ease both .4s}
.st-line i{font-style:normal;position:relative}
.st-line i::before{content:'';position:absolute;left:50%;top:-16px;margin-left:-5px;width:10px;height:10px;border-radius:50%;background:#d4af37}
@keyframes st-grow{from{transform:scaleX(0)}to{transform:none}}
.st-hfield{position:relative;align-self:stretch;height:300px;margin-top:6px}
.st-h{position:absolute;display:flex;flex-direction:column;align-items:center;width:120px}
.st-h i{font-style:normal;font-size:46px;line-height:1;color:#a32840;text-shadow:0 0 18px rgba(163,40,64,.6);animation:st-float 3s ease-in-out infinite;transition:transform .4s ease,opacity .4s ease}
.st-h span{margin-top:-6px;padding:6px 10px;border-radius:10px;background:#f3e5ab;color:#6a1b29;font:700 11px/1.25 var(--st-hand);opacity:0;transform:scale(.6);transition:all .45s cubic-bezier(.34,1.56,.64,1)}
.st-h.is-open i{transform:scale(.6);opacity:.5}
.st-h.is-open span{opacity:1;transform:none}
.st-h.h1{left:6px;top:18px}.st-h.h2{right:4px;top:104px}.st-h.h3{left:20px;top:190px}
.st-h.h2 i{animation-delay:-1s}.st-h.h3 i{animation-delay:-2s}
@keyframes st-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.st-glasses{position:relative;width:180px;height:120px;margin-top:40px}
.st-glasses span{position:absolute;top:10px;font-size:62px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.st-glasses .g1{left:6px;transform:rotate(-14deg)}
.st-glasses .g2{right:6px;transform:scaleX(-1) rotate(-14deg)}
.st-toast.is-done .g1{transform:translateX(34px) rotate(8deg)}
.st-toast.is-done .g2{transform:scaleX(-1) translateX(34px) rotate(8deg)}
.st-forever{margin-top:24px;font:400 30px/1 "Great Vibes",cursive;color:#e5c158;opacity:0;transition:opacity .8s ease .5s}
.st-toast.is-done .st-forever{opacity:1}

/* Apology: forgiveness meter */
.st-meter{margin-top:18px;align-self:stretch;padding:10px 12px;border-radius:14px;background:#fff;box-shadow:0 8px 18px -12px rgba(40,53,147,.5);font:700 10.5px/1.2 var(--st-hand);text-align:left}
.st-meter div{margin-top:8px;height:10px;border-radius:999px;background:#e8eaf6;overflow:hidden}
.st-meter i{display:block;height:100%;width:40%;border-radius:inherit;background:linear-gradient(90deg,#00bcd4,#3949ab);transition:width 1.2s ease}
.st-meter b{display:block;margin-top:6px;text-align:right;font-family:var(--st-head);color:var(--st-acc)}
.st-forgive.is-fill .st-meter i{width:100%}

@media (prefers-reduced-motion:reduce){.st-beat,.st-h i,.st-big,.st-whole{animation:none}.st-line::before{animation:none}}