/* Shared by every direction: self-hosted fonts (CSP allows 'self' only),
   a small reset, the phone frame for real screenshots, and Reduce Motion. */
@font-face { font-family: "MuseoModerno"; src: url("fonts/MuseoModerno-Regular.woff2") format("woff2"), url("fonts/MuseoModerno-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-400.woff2") format("woff2"), url("fonts/Manrope-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-500.woff2") format("woff2"), url("fonts/Manrope-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-600.woff2") format("woff2"), url("fonts/Manrope-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/Manrope-700.woff2") format("woff2"), url("fonts/Manrope-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: "Manrope", -apple-system, system-ui, sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
.emo { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-weight: 400; line-height: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wordmark { font-family: "MuseoModerno", sans-serif; font-weight: 400; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 8px; }

/* Language switch */
.lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; }
.lang button { border: 0; background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; letter-spacing: .02em; padding: 6px 10px; border-radius: 999px; min-height: 32px; }

/* Real-screenshot phone. Set --pw for width; --phone-drop for the cast shadow.
   A thin titanium rim, a black bezel, side buttons and a slim Dynamic Island. */
.phone { --pw: 260px; position: relative; width: var(--pw); padding: calc(var(--pw) * .03); border-radius: calc(var(--pw) * .165); background: #050506; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 0 0 calc(var(--pw) * .009) #4a474d, inset 0 0 0 calc(var(--pw) * .0115) #17161a,
    var(--phone-drop, 0 2px 4px rgba(24,23,26,.06), 0 24px 60px rgba(24,23,26,.14)); }
.phone img, .phone picture { width: 100%; height: auto; border-radius: calc(var(--pw) * .135); }
.phone::after { content: ""; position: absolute; left: 50%; top: calc(var(--pw) * .06); width: 27%; height: calc(var(--pw) * .078); transform: translateX(-50%); background: #000; border-radius: 999px; }
/* volume buttons on the left, the side button on the right (one element, two shadows) */
.phone::before { content: ""; position: absolute; left: calc(var(--pw) * -.009); top: calc(var(--pw) * .5); width: calc(var(--pw) * .009); height: calc(var(--pw) * .15); border-radius: 2px 0 0 2px; background: #3a383d;
  box-shadow: 0 calc(var(--pw) * .2) 0 #3a383d, calc(var(--pw) * 1.009) calc(var(--pw) * .08) 0 #3a383d; }

/* Partner Pass: the app's "buy 1, get 2" card. Once it scrolls in, the second
   person slides in beside you, a +1 pops, and one soft ring plays twice.
   Colors come from each direction's own variables. */
.pp { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 18px 22px 18px 18px; border-radius: 22px; background: var(--soft); color: var(--ink); }
.pp-pair { position: relative; width: 82px; height: 50px; }
.pp-av { position: absolute; top: 0; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; }
.pp-av svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.pp-me { left: 0; background: var(--surface, var(--card, #fff)); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.pp-you { left: 32px; background: var(--accent); color: #18171A; box-shadow: 0 0 0 3px var(--soft); }
.pp-badge { position: absolute; left: 66px; top: -9px; min-width: 28px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--bg); box-shadow: 0 0 0 2px var(--soft); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.pp-pair::after { content: ""; position: absolute; left: 32px; top: 0; width: 50px; height: 50px; border-radius: 50%; pointer-events: none; }
.pp-deal { font-size: 13px; font-weight: 700; color: var(--accent-ink, var(--em, var(--ink))); }
.pp-h { margin-top: 2px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.pp-body { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--muted); }

.pp-me { transform: translateX(16px); transition: transform .8s cubic-bezier(.2,.8,.2,1) .35s; }
.pp-you { opacity: 0; transform: translateX(24px) scale(.8); transition: opacity .5s ease .5s, transform .9s cubic-bezier(.2,.8,.2,1) .5s; }
.pp-badge { opacity: 0; transform: scale(.3); transition: opacity .2s ease 1.15s, transform .55s cubic-bezier(.3,1.7,.5,1) 1.15s; }
.pp.in .pp-me, .pp.in .pp-you, .pp.in .pp-badge { opacity: 1; transform: none; }
.pp.in .pp-pair::after { animation: pp-ring 1.5s ease-out 1.4s 2; }
@keyframes pp-ring { from { box-shadow: 0 0 0 0 rgba(255,120,103,.6); } to { box-shadow: 0 0 0 16px rgba(255,120,103,0); } }
@media (max-width: 480px) { .pp { grid-template-columns: 1fr; gap: 14px; padding: 20px; } }

/* Store CTA when the app is not live yet */
[data-store][aria-disabled="true"] { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .pp-me, .pp-you, .pp-badge { transition-delay: 0s !important; }
  .pp-pair::after { animation: none !important; }
}