/* Only the content inside the phone moves. No rendering engine or media load. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.phone-status, .phone-home { z-index: 5; pointer-events: none; }
.demo-chat, .demo-opening, .demo-browser { position: absolute; inset: 42px 0 18px; overflow: hidden; }
.demo-chat, .demo-opening { opacity: 0; visibility: hidden; }
.demo-chat, .demo-opening, .demo-browser { transition: opacity .3s ease, transform .45s ease; }
.phone[data-demo-step="chat"] .demo-chat,
.phone[data-demo-step="opening"] .demo-opening { opacity: 1; visibility: visible; }
.phone[data-demo-step="chat"] .demo-browser,
.phone[data-demo-step="opening"] .demo-browser { opacity: 0; visibility: hidden; transform: translateY(12px); }
.demo-chat { background: #eeeae1; display: flex; flex-direction: column; }
.chat-header { display: flex; align-items: center; gap: 7px; padding: 10px 10px; background: #f5f8f2; color: #173e2c; }
.chat-back { font: 26px/1 system-ui, sans-serif; }
.chat-avatar { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #dce9d6; font: 11px Fraunces, Georgia, serif; }
.chat-avatar span { font-size: 7px; margin-inline: 1px; }
.chat-header strong { display: block; font-size: clamp(10px, 4.8cqw, 14px); font-weight: 600; }
.chat-header div > span { display: block; font-size: 9px; color: #65776b; }
.chat-header svg { width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; }
.chat-feed { flex: 1; min-height: 0; padding: 14px 10px; position: relative; }
.chat-day { display: table; margin: 0 auto 18px; font-size: 9px; color: #5b6960; padding: 3px 8px; background: #ffffff90; border-radius: 5px; }
.chat-message { width: 93%; padding: 9px 8px 5px; border-radius: 2px 10px 10px; background: white; color: #253d30; box-shadow: 0 1px 1px #17362a18; }
.chat-message > p { font-size: clamp(10px, 4.6cqw, 13px); line-height: 1.45; margin-bottom: 9px; }
.chat-link-card { border-radius: 7px; background: #f2f6ed; overflow: hidden; padding-bottom: 9px; }
.chat-link-art { display: flex; flex-direction: column; justify-content: center; min-height: 100px; padding: 14px 8px; margin-bottom: 8px; background: #dce8d1; text-align: center; }
.chat-link-art > span { display: block; font: 500 clamp(16px, 7.6cqw, 23px)/1.3 Fraunces, Georgia, serif; }
.chat-link-art i { font-size: .7em; font-style: normal; color: #8c6826; }
.chat-link-art small { font-size: 9px; color: #5b704e; margin-top: 8px; }
.chat-link-card > strong, .chat-link-card > p, .chat-domain { display: block; padding-inline: 8px; }
.chat-link-card > strong { font-size: clamp(10px, 4.3cqw, 13px); font-weight: 600; }
.chat-link-card > p { font-size: clamp(9px, 3.9cqw, 11px); color: #5d6e61; margin-top: 3px; line-height: 1.4; }
.chat-domain { margin-top: 7px; color: #3d7050; font-size: 10px; }
.chat-time { display: block; text-align: right; margin-top: 3px; font: 8px/1.5 system-ui, sans-serif; color: #899288; }
.chat-composer { display: flex; gap: 9px; align-items: center; padding: 8px 10px; background: #f5f8f2; color: #3a684a; font-size: 22px; }
.chat-input { flex: 1; border: 1px solid #d9e1d5; border-radius: 16px; background: white; padding: 5px 10px; font-size: 10px; color: #8a948a; }
.chat-typing { position: absolute; top: 55px; left: 12px; padding: 10px 12px; display: flex; gap: 4px; border-radius: 9px; background: white; }
.chat-typing i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #7f9886; }
.demo-tap { position: absolute; width: 24px; height: 24px; left: 46%; top: 58%; border: 2px solid #3e7557; background: #7cab8b50; border-radius: 50%; opacity: 0; }
.phone[data-demo-step="chat"] .chat-message { animation: message-arrives .45s .7s both; }
.phone[data-demo-step="chat"] .chat-typing { animation: typing-ends .1s .65s both; }
.phone[data-demo-step="chat"] .chat-typing i { animation: typing-dot .45s 2 alternate; }
.phone[data-demo-step="chat"] .chat-typing i:nth-child(2) { animation-delay: .1s; }
.phone[data-demo-step="chat"] .chat-typing i:nth-child(3) { animation-delay: .2s; }
.phone[data-demo-step="chat"] .demo-tap { animation: invitation-tap .65s 2.6s both; }
@keyframes message-arrives { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes typing-ends { to { opacity: 0; visibility: hidden; } }
@keyframes typing-dot { to { opacity: .3; transform: translateY(-2px); } }
@keyframes invitation-tap { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: .8; } 100% { opacity: 0; transform: scale(1.8); } }
.demo-opening { background: #e7eedf; padding: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.opening-domain { font-size: 11px; color: #65775b; margin-bottom: 30px; }
.demo-opening p { font: 500 clamp(21px, 10cqw, 32px)/1.25 Fraunces, Georgia, serif; }
.opening-line { display: block; width: 28px; height: 1px; background: #9caa85; margin-top: 25px; }
.demo-browser { background: #fbf4e4; }
.browser-address { height: 24px; display: flex; align-items: center; justify-content: center; gap: 5px; font: 9px/1 system-ui, sans-serif; color: #617058; background: #f0f0e4; }
.browser-address svg { width: 7px; height: 9px; }
.browser-address > span { position: absolute; right: 15px; font-size: 15px; }
.invite-viewport { position: absolute; inset: 33px 12px 0; overflow: hidden; }
.invite-scroll { height: 200%; transform: translateY(0); transition: transform .85s cubic-bezier(.25, .7, .2, 1); }
.demo-invite, .demo-details { height: 50%; overflow: hidden; }
.phone[data-demo-step="details"] .invite-scroll { transform: translateY(-50%); }
.invitation-open > span { display: block; margin-top: 2px; font-size: 16px; line-height: .8; }
.invitation-jasmine { bottom: 52px; }
.demo-details { padding: 22px 12px; background: #fbf7ed; color: #263d2d; }
.details-couple { font: 500 clamp(11px, 5cqw, 15px)/1.3 Fraunces, Georgia, serif; color: #8e6b35; }
.demo-details h2 { font: 500 clamp(15px, 7cqw, 22px)/1.2 Fraunces, Georgia, serif; margin-top: 9px; }
.details-intro { font-size: clamp(9px, 4cqw, 12px); color: #6f7864; margin-top: 7px; }
.demo-event { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 9px; align-items: center; margin-top: 16px; padding: 13px 8px; border: 1px solid #dedfc9; border-radius: 9px; background: #fffef8; }
.demo-event time { text-align: center; font-size: 9px; color: #657258; }
.demo-event time strong { display: block; font: 500 clamp(19px, 9cqw, 27px)/1 Fraunces, Georgia, serif; color: #315c3e; margin-bottom: 4px; }
.demo-event h3 { font-size: clamp(10px, 4.7cqw, 14px); font-weight: 600; line-height: 1.3; }
.demo-event p { font-size: clamp(9px, 3.8cqw, 11px); margin-top: 5px; color: #6f7864; }
.demo-event div > span { display: block; font-size: 9px; color: #829078; margin-top: 2px; }
.demo-venue { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #dedfc9; }
.demo-venue svg { width: 16px; height: 20px; flex-shrink: 0; color: #7d8b6b; }
.demo-venue strong { display: block; font-size: clamp(9px, 4.1cqw, 12px); font-weight: 600; }
.demo-venue p { font-size: clamp(9px, 3.7cqw, 11px); margin-top: 3px; line-height: 1.4; color: #6f7864; }
.details-footer { color: #8e6b35; font: 500 clamp(10px, 4.6cqw, 14px)/1.5 Fraunces, Georgia, serif; margin-top: 25px; }
.phone[data-demo-state="paused"] * { animation-play-state: paused !important; }
@media (max-width: 1050px) { .demo-chat, .demo-opening, .demo-browser { top: 36px; } }
@container (max-width: 230px) {
  .demo-chat, .demo-opening, .demo-browser { top: 31px; }
  .chat-header { gap: 5px; padding: 8px 7px; }
  .chat-avatar { width: 25px; height: 25px; font-size: 9px; }
  .chat-feed { padding: 12px 8px; }
  .chat-day { margin-bottom: 12px; }
  .chat-message { padding: 7px 6px 4px; width: 94%; }
  .chat-link-art { min-height: 68px; padding-block: 8px; }
  .chat-link-card > p { display: none; }
  .chat-domain { font-size: 9px; }
  .chat-composer { padding: 6px 8px; }
  .invite-viewport { inset: 29px 8px 0; }
  .browser-address { height: 22px; font-size: 8px; }
  .demo-details { padding: 16px 8px; }
  .details-intro { display: none; }
  .demo-event { gap: 5px; grid-template-columns: 28px minmax(0, 1fr); padding: 7px 5px; margin-top: 10px; }
  .demo-venue { margin-top: 7px; padding-top: 10px; gap: 5px; }
  .details-footer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .phone *, .phone *::before, .phone *::after { animation: none !important; transition: none !important; }
}