:root { --ink: #382f35; --muted: #93888f; --pink: #f58d9b; --paper: #fff9f8; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; }
.page { min-height: 100svh; display: flex; flex-direction: column; }
header { width: min(960px, calc(100% - 48px)); margin: 0 auto; padding-top: 22px; }
.wordmark { color: var(--ink); font: 600 42px/1 Caveat, cursive; letter-spacing: -.055em; text-decoration: none; }
.wordmark span { color: var(--pink); font: 15px/1 Arial, sans-serif; vertical-align: 11px; margin-left: 3px; }
main { flex: 1; padding: 88px 24px 95px; text-align: center; }
h1 { margin: 0; font-size: clamp(42px, 6vw, 67px); line-height: 1.08; font-weight: 600; letter-spacing: -.065em; }
.subheader { max-width: 570px; margin: 16px auto 26px; color: var(--muted); font-size: clamp(16px, 2vw, 18px); line-height: 1.55; text-wrap: balance; }
.store-badge { display: inline-block; padding: 0; border: 0; background: none; cursor: pointer; }
.store-badge img { display: block; width: 180px; height: auto; }
.store-badge:focus-visible, .image-hotspot:focus-visible { outline: 3px solid #d75f75; outline-offset: 3px; }
.demo { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 78px auto 0; }
.demo-phone-wrap { flex: 0 0 308px; }
.demo-label { display: block; margin-bottom: 18px; color: #b58e98; font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.mockup-crop { position: relative; width: 308px; height: 582px; overflow: hidden; border-radius: 47px; }
.mockup-crop img { position: absolute; top: -82px; width: 1767px; height: auto; max-width: none; user-select: none; pointer-events: none; }
.widget-crop img { left: -61px; }
.activity-crop img { left: -401px; }
.image-hotspot { position: absolute; z-index: 2; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.widget-hotspot { top: 103px; left: 172px; width: 72px; height: 72px; }
.activity-hotspot { top: 425px; left: 225px; width: 44px; height: 44px; }
.flow { position: relative; flex: 0 0 70px; height: 582px; overflow: hidden; }
.flow::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid #efcfd5; }
.flow::after { content: ""; position: absolute; top: calc(50% - 4px); right: 1px; width: 7px; height: 7px; border-top: 1px solid #d9a9b3; border-right: 1px solid #d9a9b3; transform: rotate(45deg); }
.activity-hotspot::after { content: ""; position: absolute; inset: -5px; border: 2px solid var(--pink); border-radius: 50%; opacity: 0; pointer-events: none; }
.demo.animate .activity-hotspot::after { animation: receive-nudge 4.5s ease-out -.8s infinite; }
.demo.replying .activity-hotspot { box-shadow: 0 0 0 14px #f58d9b50; transition: box-shadow .35s; }
footer { padding: 20px 24px 25px; color: #a99ca2; font-size: 11px; text-align: center; }
@keyframes receive-nudge { 0%, 24%, 48%, 100% { opacity: 0; transform: scale(.85); } 30% { opacity: .55; } 42% { opacity: 0; transform: scale(1.45); } }
@media (max-width: 800px) {
  main { padding-top: 70px; }
  .demo { flex-direction: column; gap: 0; margin-top: 65px; }
  .demo-phone-wrap { flex: none; }
  .flow { width: 308px; height: 65px; flex: none; }
  .flow::before { top: 0; bottom: 0; left: 50%; right: auto; border-top: 0; border-left: 1px solid #efcfd5; }
  .flow::after { top: auto; bottom: 2px; right: auto; left: calc(50% - 4px); transform: rotate(135deg); }
}
@media (max-width: 600px) {
  header { width: calc(100% - 40px); }
  main { padding: 64px 20px 50px; }
  .demo { margin-top: 58px; }
  .demo-label { margin-bottom: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo.animate .activity-hotspot::after { animation: none; }
}