.home-mms-demo { color:var(--story-text); }
.home-mms-demo svg { width:18px;height:18px;flex:none; }
.home-mms-demo__toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--story-secondary);font-size:13px;margin-bottom:20px; }
.home-mms-demo__toolbar>div { display:flex;gap:8px; }
.home-mms-demo__toolbar button { display:grid;place-items:center;width:44px;height:44px;border:1px solid #c9d8f4;border-radius:50%;background:#f5f8ff;color:#2f6ee9;cursor:pointer; }
.home-mms-demo__sender { display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:12px;font-size:11px;color:var(--story-secondary); }
.home-mms-demo__sender strong { color:var(--story-text);letter-spacing:.1em;font-size:12px; }
.home-mms-demo__sender strong span { font-weight:400;letter-spacing:0; }
.home-mms-demo__invitation { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border-radius:12px;overflow:hidden;background:#fbf5eb;color:#423022; }
.home-mms-demo__image { min-height:260px;overflow:hidden; }
.home-mms-demo__image img { display:block;width:100%;height:100%;object-fit:cover;object-position:48% center; }
.home-mms-demo__copy { align-self:center;min-width:0;padding:26px 22px; }
.home-mms-demo__copy>span:first-child { color:#775a39;font-size:10px;letter-spacing:.12em; }
.home-mms-demo__copy h3 { margin:16px 0 12px;font-size:clamp(25px,2.4vw,34px);font-weight:550;line-height:1.08;letter-spacing:-.025em;text-wrap:balance; }
.home-mms-demo__copy p { margin:0;font-size:12px;line-height:1.7;color:#715c46; }
.home-mms-demo__url { display:block;margin-top:24px;font-size:10px;text-decoration:underline;text-underline-offset:4px;color:#775a39;overflow-wrap:anywhere; }
.home-mms-demo__subject { grid-column:1/-1;display:flex;align-items:center;gap:9px;padding:14px 18px;border-top:1px solid #e4d6bf;font-size:12px; }
.home-mms-demo__subject svg { width:16px;height:16px; }
.home-mms-demo__delivery { margin-top:22px; }
.home-mms-demo__delivery ol { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:0;gap:0; }
.home-mms-demo__delivery li { position:relative;display:grid;justify-items:center;align-content:start;gap:8px;font-size:11px;color:var(--story-secondary); }
.home-mms-demo__delivery li:not(:last-child)::after { content:'';position:absolute;top:11px;left:calc(50% + 18px);width:calc(100% - 36px);height:1px;background:#344761; }
.home-mms-demo__delivery li>span { text-align:center;line-height:1.5; }
.home-mms-demo__delivery li i { display:grid;place-items:center;width:22px;height:22px;border:1px solid #526a8b;border-radius:50%;font-style:normal; }
.home-mms-demo__delivery li i svg { width:13px;height:13px;opacity:0; }
.home-mms-demo__delivery li.is-done i { background:#d5f0e2;border-color:#d5f0e2;color:#15573a; }
.home-mms-demo__delivery li.is-done i svg { opacity:1; }
.home-mms-demo__delivery li.is-current { color:#fff; }
.home-mms-demo__actions { display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px; }
.home-mms-demo__actions>span { font-size:11px;color:#b7d5f4; }
.home-mms-demo__actions button { display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 14px;border:1px solid #7393bf;border-radius:12px;color:#c6dcff;background:transparent;font:inherit;font-size:12px;cursor:pointer;transition:background-color .2s,border-color .2s; }
.home-mms-demo__actions button:hover:not(:disabled) { background:#182e4c;border-color:#b1cefa; }
.home-mms-demo__actions button:disabled { background:transparent;color:#879bb8;border-color:#344761;cursor:default; }
.home-mms-demo__note { text-align:center;color:var(--story-secondary);font-size:11px;line-height:1.6;margin:16px 0 0; }
.home-mms-demo button:focus-visible { outline:2px solid #a3c5ff;outline-offset:4px; }
.home-mms-demo[data-phase="0"] .home-mms-demo__image img { animation:mms-home-reveal 1.4s cubic-bezier(.22,1,.36,1) both; }
.home-mms-demo[data-phase="0"] .home-mms-demo__copy { animation:mms-home-copy 1.1s .3s cubic-bezier(.22,1,.36,1) both; }
.home-mms-demo[data-phase="2"] .home-mms-demo__delivery li:nth-child(2) i { animation:mms-home-send .8s ease-in-out infinite alternate; }
.home-mms-demo.is-paused * { animation-play-state:paused!important; }
@keyframes mms-home-reveal { from {clip-path:inset(0 100% 0 0);transform:scale(1.04)}to{clip-path:inset(0);transform:scale(1)} }
@keyframes mms-home-copy { from {opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)} }
@keyframes mms-home-send { from {border-color:#526a8b}to{border-color:#9bbfff;background:#213d65} }
@media(max-width:700px){.home-mms-demo__invitation{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.home-mms-demo__copy{padding:20px 14px}.home-mms-demo__copy h3{font-size:26px}.home-mms-demo__image{min-height:270px}.home-mms-demo__sender{font-size:10px;gap:10px}.home-mms-demo__delivery li{font-size:10px;gap:5px}.home-mms-demo__delivery ol{gap:0}.home-mms-demo__delivery li>span{max-width:100%;padding-inline:4px}.home-mms-demo__actions{gap:10px}.home-mms-demo__actions>span{max-width:44%;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.home-mms-demo *{animation:none!important;transition:none!important}}