/*
 * Topic landings (couples, friends, alternatives) — foundation.
 * Loaded only on those pages, so the home page styles never leak in.
 * Values mirror docs/landing-redesign/lypa_landing_upgrade.html:
 * desktop artboard 1440px (content 1200px), mobile artboard 390px (content 350px).
 * Desktop rules come first; the phone layout lives in the max-width:1023px blocks.
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #000; color: #fff; font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: #fff; text-decoration: none; }
a:hover { color: #bbbbbb; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 800; overflow-wrap: break-word; hyphens: auto; }
img { max-width: none; }
button { font: inherit; }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #D92828; outline-offset: 3px; }

/* Layout mechanics: the desktop design keeps its 1200px content and is zoomed on small laptops. */
@media (min-width: 1024px) { .only-m { display: none !important; } }
.in { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: max(40px, min(120px, calc((100% - 1200px) / 2))); }
@media (min-width: 1024px) and (max-width: 1151px) { body { zoom: .8; } }
@media (min-width: 1152px) and (max-width: 1279px) { body { zoom: .9; } }

/* Primitives. */
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.micro { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.2; letter-spacing: 2px; text-transform: uppercase; }
.aline { width: 47px; height: 4px; background: #D92828; transform-origin: left center; animation: aline .7s cubic-bezier(.34, 1.56, .64, 1) .2s both; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 64px; padding: 0 28px; border-radius: 100px; font-family: Manrope, system-ui, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; border: 0; cursor: pointer; white-space: nowrap; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background-color .3s; }
.btn:active { transform: scale(.97); transition-duration: .08s; }
.btn-sm { height: 52px; padding: 0 22px; font-size: 13px; gap: 10px; flex-shrink: 0; }
.btn-primary { background: #fff; color: #000; }
.btn-primary:hover { background: #e2e2e2; color: #000; }
.btn-ghost { background: rgba(28, 28, 28, .5); color: #fff; border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.btn-label { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-transform: none; letter-spacing: 0; }
.btn-label small { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; line-height: 1; }
.btn-label b { font-size: 17px; font-weight: 800; line-height: 1.1; }
.stores { display: flex; gap: 14px; }
.btn-one .ic-android, .btn-one[data-store="android"] .ic-ios { display: none; }
.btn-one[data-store="android"] .ic-android { display: inline; }
.glass { background: rgba(28, 28, 28, .5); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.glass-strong { background: rgba(30, 30, 30, .78); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.print { display: block; width: 100%; height: auto; aspect-ratio: 864 / 1032; object-fit: cover; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.ring { display: block; transform: rotate(-90deg); flex-shrink: 0; }
.ring circle[data-ring] { transition: stroke-dashoffset 1s linear; }

/* Motion. */
.rise { animation: rise .8s cubic-bezier(.25, 1, .5, 1) both; }
.drop { animation: drop .9s cubic-bezier(.34, 1.3, .64, 1) both; transform: rotate(var(--r, 0deg)); }
.pop { animation: pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.float { animation: float 5s ease-in-out infinite alternate; }
.pulse { animation: pulse 1s ease-in-out infinite alternate; }
.lift { transition: transform .35s cubic-bezier(.25, 1, .5, 1); }
.lift:hover { transform: translateY(var(--lift, -8px)) rotate(0deg) !important; }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(var(--drop-y, -70px)) rotate(calc(var(--r, 0deg) - var(--drop-r, 14deg))) scale(var(--drop-s, 1.12)); } to { opacity: 1; transform: rotate(var(--r, 0deg)); } }
@keyframes pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes float { from { translate: 0 0; } to { translate: 0 var(--float, -10px); } }
@keyframes pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.35); opacity: .55; } }
@keyframes aline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Below-the-fold entrances wait until their section scrolls into view (landing-topic.js). */
.js .sec:not(.is-in) :is(.rise, .drop, .pop, .aline) { animation-play-state: paused; }

@media (max-width: 1023px) {
    .only-d { display: none !important; }
    .in { max-width: 600px; padding-inline: 20px; }
    .btn { height: 56px; }
    .btn-wide { width: 100%; height: 52px; }
    .print { box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
    @keyframes float { from { translate: 0 0; } to { translate: 0 -9px; } }

}
/* Narrow phones: shrink fixed-size compositions so the 350px artboard still fits. */
@media (max-width: 389px) { .fitm { zoom: .95; } }
@media (max-width: 374px) { .fitm { zoom: .9; } }
@media (max-width: 359px) { .fitm { zoom: .76; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .hero-n, .q1, .q2, .q3, .q4, .flt { opacity: 1; }
}