/* Shared by both landing prototypes: brand fonts, colours and the phone frame for real app screenshots. */
@font-face { font-family: Fredoka; src: url("fonts/Fredoka.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: Nunito; src: url("fonts/Nunito.ttf") format("truetype"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: Hand; src: url("fonts/PatrickHand.ttf") format("truetype"); font-display: swap; }

:root {
  --maroon: #5C2326; --maroon-deep: #4A1C1E; --gold: #D4AF37; --cream: #FDF8F2; --subtle: #8C6A6F;
  --couples: #D6AF36; --friends: #E07A5F; --family: #81B29A; --self: #3D405B;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }

/* Phone frame around a real app screenshot (930 x 2014). */
.phone { position: relative; width: var(--w, 240px); aspect-ratio: 930 / 2014; border-radius: calc(var(--w, 240px) * .16);
  background: #141012; padding: calc(var(--w, 240px) * .035); box-shadow: 0 40px 70px rgba(20, 8, 9, .35), inset 0 0 0 1.5px #2b2326; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--w, 240px) * .13); }
.phone::after { content: ""; position: absolute; top: calc(var(--w, 240px) * .06); left: 50%; translate: -50% 0;
  width: 30%; height: calc(var(--w, 240px) * .07); border-radius: 99px; background: #141012; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }