/* meetandexplore.com: shared styles for every page.
   Black like the app, lit with its gold. The website has its own tokens; the app's
   constants/ are not used here and are not touched. */
@font-face {
  font-family: 'Inter Tight';
  src: url('/assets/fonts/inter-tight.woff2') format('woff2');
  font-weight: 500 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
:root {
  --btn-small: 44px;
  --bg: #070707;
  --card: #111010;
  --surface: #1a1a1a;
  --text: #F7F3EE;
  --muted: #A9A29A;      /* 7.9:1 on --bg */
  --gold: #F5B800;
  --gold-soft: #FFD54F;
  --ink: #000000;        /* text on gold: 11.7:1. Never white on gold. */
  --line: rgba(255, 255, 255, 0.09);
  --glass: rgba(22, 20, 18, 0.62);
  --gutter: 16px;
  --max: 720px;
  --wide: 1180px;
  --display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --accent: 'Instrument Serif', Georgia, serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
/* Anchor jumps ("I'm in" → #get) stop below the sticky header, with room to breathe. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* Film grain over everything: kills banding in the glows and makes black feel like a material. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold-soft);
  outline-offset: 3px;
  border-radius: 6px;
}
::selection { background: var(--gold); color: var(--ink); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--gutter); top: 8px; z-index: 60; background: var(--gold); color: var(--ink); padding: 10px 14px; }

/* Header: glass, sticks to the top */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter)));
  background: rgba(7, 7, 7, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--text); text-decoration: none; font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.2em; white-space: nowrap;
}
/* Same height as the header button beside it. */
.logo { flex: none; width: var(--btn-small); height: var(--btn-small); border-radius: 50%; box-shadow: 0 0 18px -2px rgba(245, 184, 0, 0.55); }
.site-nav { display: flex; align-items: center; gap: 4px; }
/* Language menu: the current language's flag, opening onto every language by name. */
.lang-menu { position: relative; }
.lang-menu summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 8px;
  list-style: none; cursor: pointer; border-radius: 999px; transition: background 0.2s;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { background: rgba(255, 255, 255, 0.08); }
.chev { width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); rotate: 45deg; translate: 0 -2px; transition: rotate 0.25s var(--ease-out); }
.lang-menu[open] .chev { rotate: 225deg; translate: 0 2px; }
.flag {
  display: inline-block; flex: none; width: 24px; height: 17px; border-radius: 4px; background: center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.flag-fr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23002654' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23CE1126' d='M2 0h1v2H2z'/%3E%3C/svg%3E"); }
.flag-en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='s'%3E%3Cpath d='M0 0v30h60V0z'/%3E%3C/clipPath%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23s)'%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E"); }
.flag-es { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23AA151B' d='M0 0h3v2H0z'/%3E%3Cpath fill='%23F1BF00' d='M0 .5h3v1H0z'/%3E%3C/svg%3E"); }
.flag-ru { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23fff' d='M0 0h3v2H0z'/%3E%3Cpath fill='%230039A6' d='M0 .667h3V2H0z'/%3E%3Cpath fill='%23D52B1E' d='M0 1.333h3V2H0z'/%3E%3C/svg%3E"); }
.flag-lv { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath fill='%239E3039' d='M0 0h20v10H0z'/%3E%3Cpath fill='%23fff' d='M0 4h20v2H0z'/%3E%3C/svg%3E"); }
.lang-menu ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; min-width: 180px; margin: 0; padding: 6px; list-style: none;
  border-radius: 16px; border: 1px solid var(--line); background: rgba(18, 17, 16, 0.92);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
}
.lang-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: inherit; font-size: 0.9375rem; font-weight: 600; text-decoration: none; text-align: left; cursor: pointer;
}
a.lang-item:hover, button.lang-item:hover { background: rgba(255, 255, 255, 0.07); }
.lang-item[aria-current] { color: var(--muted); }
.lang-item[aria-current]::after { content: ''; margin-left: auto; width: 6px; height: 11px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); rotate: 45deg; translate: -4px -2px; }
@media (max-width: 400px) {
  .wordmark { letter-spacing: 0.14em; gap: 8px; }
  .site-nav .btn-small { padding: 0 14px; }
}
/* Narrow phones: a tighter wordmark, then the round logo alone (the link keeps its name). */
@media (max-width: 380px) {
  .wordmark { letter-spacing: 0.08em; font-size: 0.75rem; }
}
@media (max-width: 359px) {
  .wordmark-text { display: none; }
}

/* Buttons: gold, with a sheen that crosses on hover */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 213, 79, 0.4) inset, 0 10px 30px -10px rgba(245, 184, 0, 0.55);
  transition: transform 0.35s var(--spring), box-shadow 0.35s var(--ease-out), background 0.2s;
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  translate: -120% 0; transition: translate 0.7s var(--ease-out);
}
.btn:hover { background: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 213, 79, 0.6) inset, 0 16px 40px -10px rgba(245, 184, 0, 0.75); }
.btn:hover::after { translate: 120% 0; }
.btn:active { transform: scale(0.96); }
.btn-small { min-height: var(--btn-small); padding: 0 18px; font-size: 0.9375rem; }
.btn-big { min-height: 58px; padding: 0 34px; font-size: 1.125rem; }

/* Type */
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; }
h1 { font-size: clamp(2.75rem, 12vw, 5.75rem); line-height: 0.98; margin: 0 0 22px; }
h2 { font-size: clamp(2.25rem, 9vw, 4.25rem); line-height: 1; margin: 0 0 16px; }
h3 { font-size: clamp(1.875rem, 7vw, 2.75rem); line-height: 1.02; margin: 0 0 12px; }
em {
  font-family: var(--accent); font-style: italic; font-weight: 400; letter-spacing: -0.01em;
  /* The gradient paints only inside the box, so pad it under the baseline or the tails
     of g, p and y are cut off; the negative margin keeps the line height unchanged. */
  padding: 0.04em 0.12em 0.34em 0.14em; margin: -0.04em -0.1em -0.34em -0.14em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(100deg, #FFE17A 0%, var(--gold) 40%, #FF9F1C 70%, var(--gold-soft) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.muted { color: var(--muted); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 28px 0 0; }
.aurora { position: absolute; inset: -20% -10% 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.aurora i { position: absolute; border-radius: 50%; }
.aurora i:nth-child(1) { width: 720px; height: 720px; left: -260px; top: -200px; background: radial-gradient(closest-side, rgba(245, 184, 0, 0.30), rgba(245, 184, 0, 0)); }
.aurora i:nth-child(2) { width: 640px; height: 640px; right: -240px; top: 120px; background: radial-gradient(closest-side, rgba(255, 110, 70, 0.20), rgba(255, 110, 70, 0)); }
.aurora i:nth-child(3) { width: 560px; height: 560px; left: 30%; top: 460px; background: radial-gradient(closest-side, rgba(255, 70, 140, 0.13), rgba(255, 70, 140, 0)); }
.hero-grid { position: relative; max-width: var(--wide); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 14px 7px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  color: var(--text); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.01em;
}
.live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; }
.live::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #3DDC84; opacity: 0; }
/* The mask for the rising line must leave room for italic tails that hang below and to
   the left (Safari clips them flat otherwise). */
.hero h1 .line { display: block; overflow: hidden; padding: 0 0 0.36em 0.16em; margin: 0 0 -0.36em -0.16em; }
.hero h1 .line > span { display: inline-block; }
.sub { color: var(--muted); font-size: 1.1875rem; line-height: 1.55; max-width: 30em; margin: 0 0 28px; }
.hero .get { align-items: flex-start; text-align: left; }
.hero .badges { justify-content: flex-start; }

.photo { position: relative; margin: 0; overflow: hidden; border-radius: 28px; background: var(--surface); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.loop picture, .loop video { position: absolute; inset: 0; width: 100%; height: 100%; }
.loop video { object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.loop video.playing { opacity: 1; }

.hero-visual { position: relative; margin: 44px 0 0; padding-bottom: 60px; }
.hero-photo { aspect-ratio: 4 / 4.4; box-shadow: 0 40px 120px -40px rgba(245, 184, 0, 0.35); }
.hero-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 7, 7, 0) 40%, rgba(7, 7, 7, 0.75) 100%);
}
.phone {
  margin: 0; padding: 6px; border-radius: 30px; background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(245, 184, 0, 0.3);
}
.phone img { width: 100%; aspect-ratio: 360 / 600; object-fit: cover; object-position: var(--crop, 50% 0%); border-radius: 24px; }
.hero-phone { position: absolute; z-index: 2; width: 42%; max-width: 210px; right: -4px; bottom: 0; rotate: 6deg; }

.chat { position: absolute; z-index: 3; left: 12px; right: 36%; bottom: 76px; display: grid; align-items: end; }
.convo { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; visibility: hidden; }
.convo.is-on, .convo.is-off { visibility: visible; }
.msg {
  position: relative; display: flex; align-items: flex-end; gap: 8px; margin: 0; max-width: 100%;
  padding: 9px 13px; border-radius: 18px 18px 18px 6px; font-size: 0.9375rem; line-height: 1.3;
  background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.8);
}
.msg.them { padding-left: 8px; }
.msg b { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.msg.you { align-self: flex-end; background: var(--gold); color: var(--ink); border-color: transparent; border-radius: 18px 18px 6px 18px; }
.msg.you b { color: rgba(0, 0, 0, 0.6); }
.msg.saved { box-shadow: 0 0 0 1px rgba(245, 184, 0, 0.55), 0 0 40px -6px rgba(245, 184, 0, 0.55); }
.msg.typing { display: none; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.av {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--av); color: #fff; font-weight: 700; font-size: 0.8125rem;
}


/* Ticker: kinds of evenings, sliding past */
.ticker {
  position: relative; display: flex; overflow: hidden; margin-top: 28px; padding: 18px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.ticker li {
  display: flex; align-items: center; white-space: nowrap;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 4.5vw, 2rem); letter-spacing: -0.02em; color: var(--muted);
}
.ticker li::after { content: '✦'; margin: 0 28px; color: var(--gold); font-size: 0.7em; }

@media (min-width: 960px) {
  .hero { padding-top: 56px; }
  .hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; }
  .hero-visual { margin: 0; padding: 0 0 40px 60px; }
  .hero-phone { width: 220px; right: auto; left: 0; bottom: 0; rotate: -7deg; }
  .chat { left: auto; right: -12px; bottom: auto; top: 30px; width: 300px; }
  .ticker { margin-top: 56px; }
}

/* The evening: cards that stack as you scroll */
.evening { position: relative; padding: 96px 0 24px; }
.evening .wrap { max-width: var(--wide); }
.section-title { text-align: center; max-width: 12em; margin: 0 auto 48px; }
/* Cards stack as you scroll. site.js sets --card-h to the tallest card so every card is
   the same height (a shorter one would let the one below peek out), and the space after
   the last card lets the whole deck sit together before it leaves as one. */
.stack { display: flex; flex-direction: column; gap: 28px; }
.stack::after { content: ''; flex: none; height: 45vh; margin-top: -28px; }
.moment { min-height: var(--card-h, auto); }
.moment {
  position: sticky; top: calc(72px + var(--i) * 12px);
  display: grid; gap: 22px; align-content: space-between; padding: 26px 20px 20px; border-radius: 32px; overflow: hidden;
  border: 1px solid transparent;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(var(--glow), 0.16), rgba(var(--glow), 0) 60%) padding-box,
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(150deg, rgba(var(--glow), 0.55), rgba(255, 255, 255, 0.06) 35%, rgba(255, 255, 255, 0.04)) border-box;
  box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, 0.9);
}
.moment::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.07), transparent 60%);
}
.moment:hover::after { opacity: 1; }
.when {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--glow));
}
.when .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px 2px currentColor; }
.moment-copy p:last-child { color: var(--muted); font-size: 1.125rem; margin: 0; max-width: 26em; }
.moment-visual { position: relative; padding: 0 0 18px; }
.moment-photo { aspect-ratio: 16 / 11; border-radius: 22px; }
.moment-phone { position: absolute; right: 10px; bottom: -6px; width: 118px; rotate: 5deg; padding: 4px; border-radius: 22px; }
.moment-phone img { border-radius: 18px; }
.chip {
  position: absolute; left: 10px; bottom: 30px; right: 136px; display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 9px 13px 9px 9px; border-radius: 18px 18px 18px 6px; font-size: 0.875rem; line-height: 1.3;
  background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.chip-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 92, 138, 0.2); color: #FF5C8A; }

/* A card taller than the screen can't be read while it's stuck, so short screens scroll normally. */
@media (max-height: 740px) and (max-width: 859px) {
  .moment { position: relative; top: auto; min-height: 0; }
  .stack::after { display: none; }
}

@media (min-width: 860px) {
  .evening { padding-top: 140px; }
  .section-title { margin-bottom: 72px; }
  .stack { gap: 48px; }
  .moment { top: calc(96px + var(--i) * 16px); grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; padding: 56px; min-height: 520px; }
  .moment-photo { aspect-ratio: 4 / 3.3; }
  .moment-phone { width: 170px; right: -18px; bottom: -30px; }
  .chip { left: -28px; right: auto; bottom: 48px; max-width: 300px; font-size: 0.9375rem; }
}

/* Closing: the lights are on */
.closing { position: relative; overflow: hidden; padding: 64px 0 110px; text-align: center; isolation: isolate; }
/* The video fades to transparent at its own top and bottom edges, so no row of the
   bright footage can show past the dark overlay when the two round to different pixels. */
.closing-photo {
  position: absolute; inset: 0; z-index: -2; border-radius: 0; background: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
}
.closing-photo img, .closing-photo video { opacity: 1; }
.closing-copy { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7); }
.closing-photo video:not(.playing) { opacity: 0; }
.closing::before {
  content: ''; position: absolute; inset: -1px 0; z-index: -1;
  /* Dim only behind the words; the dancers and the bulbs stay visible around them. */
  background: radial-gradient(55% 42% at 50% 44%, rgba(7, 7, 7, 0.6), rgba(7, 7, 7, 0) 100%), linear-gradient(180deg, var(--bg), rgba(7, 7, 7, 0.2) 22%, rgba(7, 7, 7, 0.2) 72%, var(--bg));
}
.closing-copy p { color: #E6DED5; max-width: 26em; margin: 0 auto 20px; font-size: 1.1875rem; text-wrap: balance; }
.closing .kicker { font-family: var(--accent); font-style: italic; font-size: clamp(1.5rem, 5vw, 2rem); color: var(--gold-soft); margin-bottom: 18px; }
.closing h2 { max-width: 11em; margin-left: auto; margin-right: auto; }
.closing .btn { margin-top: 12px; }

/* Store block */
.get { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.get-lead { font-weight: 700; font-size: 1.125rem; margin: 0; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.badge { display: inline-flex; align-items: center; min-height: 44px; transition: transform 0.35s var(--spring); }
.badge:hover { transform: translateY(-3px); }
.android-soon { color: var(--muted); font-size: 0.9375rem; max-width: 30em; margin: 0; }
/* Google Play before it is live: the badge greyed, "Coming soon" under it,
   out of the flow so the two badges stay centred on each other. */
.badge-soon { position: relative; }
.badges:has(.badge-soon) { padding-bottom: 1.25rem; }
.p-ios .badges, .p-android .badges { padding-bottom: 0; }
.badge-soon:hover { transform: none; }
.badge-soon img { opacity: 0.4; filter: grayscale(1); }
.badge-soon p { position: absolute; top: calc(100% + 4px); left: 50%; translate: -50% 0; margin: 0; white-space: nowrap; color: var(--muted); font-size: 0.8125rem; }
.open-app { color: var(--muted); margin: 20px 0 0; }
.open-app a, .links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Platform hints: html.p-* comes from the inline head script. With no JS, everything shows. */
.p-ios [data-only]:not([data-only~="ios"]),
.p-android [data-only]:not([data-only~="android"]),
.p-desktop [data-only]:not([data-only~="desktop"]) { display: none !important; }


/* Two more ways in */
.founder-note { padding: 48px 0; }
.founder { display: grid; gap: 16px; align-items: center; }
.founder img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }

/* Pau */
.hero-chip { position: absolute; z-index: 3; left: 12px; right: auto; bottom: 90px; max-width: 70%; }
.pin-icon { background: rgba(245, 184, 0, 0.18); position: relative; }
.pin-icon::after { content: ''; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; rotate: -45deg; border: 2.5px solid var(--gold); }
.pau-hero .hero-copy .btn { margin-top: 4px; }
.weekends { padding: 96px 0 48px; }
.weekend-grid { display: grid; gap: 36px; max-width: var(--wide); align-items: center; }
.weekend-grid p { color: var(--muted); font-size: 1.125rem; margin: 0 0 12px; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.day {
  display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 0.62; padding-bottom: 12px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: var(--muted); font-size: 0.8125rem; font-weight: 700;
}
.day.on {
  color: var(--ink); border-color: transparent;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold)); box-shadow: 0 16px 40px -12px rgba(245, 184, 0, 0.7);
}
@media (min-width: 860px) { .weekend-grid { grid-template-columns: 1fr 1fr; gap: 72px; } .weekends { padding-top: 140px; } }
.places { padding: 48px 0 32px; }
.places .wrap { max-width: var(--wide); }
.place-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.place {
  position: relative; overflow: hidden; min-height: 190px; padding: 24px; border-radius: 28px; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--glow), 0.22), rgba(var(--glow), 0) 60%), var(--card);
  border: 1px solid rgba(var(--glow), 0.25);
  transition: translate 0.4s var(--spring), border-color 0.3s;
}
.place:hover { translate: 0 -4px; border-color: rgba(var(--glow), 0.6); }
.place .when { color: rgb(var(--glow)); }
.place-text { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.015em; }
@media (min-width: 720px) { .place-cards { grid-template-columns: 1fr 1fr; } .place { min-height: 240px; padding: 32px; } }

/* Invite: the room is already full of light, and someone has saved you a spot */
.invite-hero { min-height: calc(100svh - 61px); display: flex; align-items: center; padding: 48px 0 56px; isolation: isolate; }
.invite-bg { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.invite-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 7, 7, 0.55), rgba(7, 7, 7, 0.82) 60%, var(--bg)); }
.invite-copy { text-align: center; }
.invite-copy .msg { display: inline-flex; text-align: left; margin-bottom: 26px; }
.invite-copy .sub { margin-left: auto; margin-right: auto; color: #E6DED5; }
.invite-copy .get { align-items: center; text-align: center; }

/* 404 */
.lost-hero { padding: 72px 0 80px; text-align: center; }
.lost-copy { position: relative; }
.lost-mark { margin: 0 0 8px; font-family: var(--accent); font-style: italic; font-size: clamp(5rem, 28vw, 11rem); line-height: 0.9; color: transparent; -webkit-text-stroke: 1.5px rgba(245, 184, 0, 0.6); }
.lost-copy .sub { margin-left: auto; margin-right: auto; }
.lost-copy .get, .invite-copy .get { align-items: center; text-align: center; }
.lost-copy .badges, .invite-copy .badges { justify-content: center; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 32px; }
.pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text); text-decoration: none; font-weight: 600; transition: border-color 0.3s, translate 0.3s var(--spring); }
.pill:hover { border-color: rgba(245, 184, 0, 0.5); translate: 0 -2px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0 44px; color: var(--muted); font-size: 0.9375rem; }
.site-footer .wrap { max-width: var(--wide); }
.site-footer ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.site-footer a:hover { color: var(--text); }
.site-footer p { margin: 0; }

/* Documents: legal, support, child safety, delete account */
.doc { padding-top: 16px; padding-bottom: 48px; line-height: 1.7; }
.doc h1 { color: var(--gold); font-size: 2rem; letter-spacing: -0.02em; overflow-wrap: anywhere; margin-bottom: 0.5rem; }
.doc h2 { color: var(--gold); font-size: 1.25rem; letter-spacing: -0.01em; margin: 2.5rem 0 0.75rem; }
.doc header { margin-bottom: 2.5rem; }
.doc header p { color: var(--muted); font-size: 0.9375rem; }
.doc p, .doc li { color: #d6d6d6; }
.doc ul { margin: 0 0 1rem 1.25rem; padding: 0; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

/* Motion. Everything above is the still page, which is what reduced motion gets.
   Scroll reveals hide content only once site.js has added .motion, so a failed
   script never leaves the page blank. */
@media (prefers-reduced-motion: no-preference) {
  .aurora i { animation: drift 22s ease-in-out infinite alternate; }
  .aurora i:nth-child(2) { animation-duration: 28s; animation-direction: alternate-reverse; }
  .aurora i:nth-child(3) { animation-duration: 34s; }
  @keyframes drift { 50% { translate: 80px 50px; scale: 1.15; } 100% { translate: -40px 90px; scale: 0.95; } }
  .live::after { animation: ping 2s var(--ease-out) infinite; }
  @keyframes ping { from { opacity: 0.8; scale: 0.6; } to { opacity: 0; scale: 2; } }
  em { animation: sheen 6s ease-in-out infinite alternate; }
  @keyframes sheen { to { background-position: 100% 0; } }

  /* Quick, so the headline (the page's largest paint) is fully in place soon after first paint. */
  .hero h1 .line > span { animation: line-up 0.6s var(--ease-out) calc(var(--i) * 0.08s) both; }
  @keyframes line-up { from { translate: 0 105%; } }
  .hero .eyebrow, .hero .sub, .hero .get { animation: fade-up 0.9s var(--ease-out) both; }
  .hero .sub { animation-delay: 0.35s; }
  .hero .get { animation-delay: 0.5s; }
  @keyframes fade-up { from { opacity: 0; translate: 0 18px; } }
  .hero-photo { animation: photo-in 1.4s var(--ease-out) 0.2s both; }
  @keyframes photo-in { from { opacity: 0; scale: 1.06; clip-path: inset(8% 8% 8% 8% round 28px); } to { clip-path: inset(0 round 28px); } }
  .hero-phone { animation: phone-in 1.2s var(--ease-out) 0.55s both, float 6s ease-in-out 1.8s infinite alternate; }
  @keyframes phone-in { from { opacity: 0; translate: 0 80px; rotate: 0deg; } }
  @keyframes float { to { translate: 0 -10px; } }

  .is-on .msg { animation: msg-in 0.55s var(--spring) var(--d) both; }
  .convo.is-off { animation: convo-out 0.6s var(--ease-out) both; }
  @keyframes convo-out { to { opacity: 0; translate: 0 -24px; filter: blur(6px); } }
  @keyframes msg-in { from { opacity: 0; translate: 0 14px; scale: 0.9; } }
  /* The typing dots show for a beat, then give their place to the reply. */
  .msg.typing { gap: 4px; align-items: center; height: 34px; }
  .is-on .msg.typing { display: flex; animation: typing 1s linear var(--d) both; }
  @keyframes typing {
    0% { opacity: 0; }
    12%, 85% { opacity: 1; height: 34px; margin-bottom: 0; }
    100% { opacity: 0; height: 0; margin-bottom: -8px; padding-top: 0; padding-bottom: 0; border-width: 0; }
  }
  .typing i { animation: dot 0.9s ease-in-out infinite; }
  .typing i:nth-child(2) { animation-delay: 0.15s; }
  .typing i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes dot { 50% { translate: 0 -4px; opacity: 0.5; } }
  .is-on .msg.saved { animation: msg-in 0.55s var(--spring) var(--d) both, glow 2.4s ease-in-out calc(var(--d) + 0.6s) infinite alternate; }
  @keyframes glow { to { box-shadow: 0 0 0 1px rgba(245, 184, 0, 0.8), 0 0 60px -4px rgba(245, 184, 0, 0.7); } }

  .pop { animation: msg-in 0.6s var(--spring) var(--d, 0s) both, bob 4s ease-in-out calc(var(--d, 0s) + 0.8s) infinite alternate; }
  .motion .place.reveal { transition-delay: calc(var(--i) * 0.1s); }
  .motion .week .day { transition: background 0.5s, color 0.5s, box-shadow 0.5s, translate 0.6s var(--spring); transition-delay: calc(0.2s + var(--i) * 0.09s); }
  .motion .week:not(.in) .day { translate: 0 16px; }
  .motion .week:not(.in) .day.on { background: rgba(255, 255, 255, 0.04); color: var(--muted); box-shadow: none; }
  .week.in .day.on { animation: day-glow 2.4s ease-in-out 1.2s infinite alternate; }
  @keyframes day-glow { to { box-shadow: 0 16px 60px -8px rgba(245, 184, 0, 0.95); } }
  .lost-mark { animation: float 5s ease-in-out infinite alternate; }
  .ticker-track { animation: ticker 38s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  @keyframes ticker { to { translate: -100% 0; } }

  .motion .reveal { opacity: 0; translate: 0 48px; transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out); }
  .motion .reveal.in { opacity: 1; translate: 0 0; }
  /* Headings arrive word by word, out of a soft blur. */
  .motion .section-title.reveal { opacity: 1; translate: 0 0; }
  .w { display: inline-block; }
  .motion .reveal .w { opacity: 0; translate: 0 0.4em; filter: blur(10px); transition: opacity 0.7s var(--ease-out), translate 0.8s var(--ease-out), filter 0.8s var(--ease-out); transition-delay: calc(0.15s + var(--w) * 0.08s); }
  .motion .reveal.in .w { opacity: 1; translate: 0 0; filter: blur(0); }
  .motion .moment .moment-photo img { scale: 1.12; transition: scale 1.6s var(--ease-out); }
  .motion .moment.in .moment-photo img { scale: 1; }
  .motion .moment .moment-phone { opacity: 0; translate: 0 60px; transition: opacity 0.8s var(--ease-out) 0.25s, translate 1s var(--spring) 0.25s; }
  .motion .moment.in .moment-phone { opacity: 1; translate: 0 0; }
  .motion .moment.in .moment-phone img { animation: float 5s ease-in-out 1.3s infinite alternate; }
  .motion .moment .chip { opacity: 0; scale: 0.8; transition: opacity 0.5s var(--ease-out) 0.6s, scale 0.6s var(--spring) 0.6s; }
  .motion .moment.in .chip { opacity: 1; scale: 1; animation: bob 4s ease-in-out 1.4s infinite alternate; }
  @keyframes bob { to { translate: 0 -6px; } }
  .closing .btn { animation: breathe 2.8s ease-in-out infinite alternate; }
  @keyframes breathe { to { box-shadow: 0 0 0 1px rgba(255, 213, 79, 0.6) inset, 0 0 60px -6px rgba(245, 184, 0, 0.8); } }

  /* Depth on scroll, where the browser can tie animation to scrolling. */
  @supports (animation-timeline: view()) {
    .hero-photo img, .hero-photo video { animation: zoom-out linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes zoom-out { to { scale: 1.15; translate: 0 6%; } }
    .moment-photo img { animation: pan linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes pan { from { object-position: 50% 15%; } to { object-position: 50% 85%; } }
    .closing-photo img, .closing-photo video { animation: settle linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes settle { from { scale: 1.2; } to { scale: 1; } }
    .closing-photo video { animation-name: settle-soft; }
    @keyframes settle-soft { from { scale: 1.06; } to { scale: 1; } }
  }
}