/*
 * OVLP — the site
 *
 * Same design language as the app, deliberately: the person arriving here
 * clicked a friend's link and will open the app thirty seconds later, and two
 * different-looking things reads as a scam rather than a brand.
 */
:root {
  --bg: #08080A;
  --surface: #131316;
  --line: rgba(239, 234, 226, 0.10);
  --line-2: rgba(239, 234, 226, 0.20);
  --cream: #EFEAE2;
  --muted: rgba(239, 234, 226, 0.52);
  --muted-lg: rgba(239, 234, 226, 0.72);
  --gold: #D8B978;
  --gold-soft: rgba(216, 185, 120, 0.12);
  --gold-line: rgba(216, 185, 120, 0.34);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --mono: ui-monospace, Menlo, "SF Mono", monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 680px; }

/* ---------- nav ---------- */
header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(8, 8, 10, 0.82);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
nav { display: flex; align-items: center; gap: 22px; height: 64px; }
@media (max-width: 520px) {
  nav { gap: 16px; }
  .wordmark { font-size: 18px; letter-spacing: 0.26em; }
  nav a.link { font-size: 13px; }
}
.wordmark {
  font-family: var(--serif);
  font-size: 21px; letter-spacing: 0.34em;
  text-transform: uppercase; text-decoration: none; color: var(--cream);
  margin-right: auto;
}
nav a.link {
  color: var(--muted); text-decoration: none; font-size: 14px;
}
nav a.link:hover { color: var(--cream); }

/* ---------- hero ---------- */
.hero { padding: 88px 0 64px; display: grid; gap: 56px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 0.95fr; align-items: center; padding: 112px 0 88px; }
}
h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 6.2vw, 66px); line-height: 1.04;
  letter-spacing: -0.025em; margin: 0 0 22px;
}
.lede { color: var(--muted-lg); font-size: 18px; max-width: 30em; margin: 0 0 32px; }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 18px;
}

.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
}
.btn-primary { background: var(--cream); color: #08080A; }
.btn-primary:hover { background: #fff; }
.btn-ghost { border-color: var(--line-2); color: var(--cream); }
.btn-ghost:hover { border-color: var(--cream); }
.note { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* ---------- the phone ---------- */
.phone {
  width: 100%; max-width: 330px; margin: 0 auto;
  border: 1px solid var(--line-2); border-radius: 42px;
  background: var(--bg); padding: 12px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.screen {
  border-radius: 32px; background: var(--bg); overflow: hidden;
  padding: 22px 18px 26px;
}
.status {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  margin-bottom: 20px;
}
.screen h2 {
  font-family: var(--serif); font-weight: 400; font-size: 27px;
  margin: 0 0 3px; letter-spacing: -0.02em;
}
.screen .sub {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 20px;
}

/* the overlap card — the thing the product is actually for */
.overlap {
  border: 1px solid var(--gold-line); border-radius: 16px;
  background: rgba(28, 26, 24, 0.92); padding: 20px; margin-bottom: 12px;
}
.overlap .top { display: flex; align-items: center; gap: 14px; }
.days {
  font-family: var(--serif); font-size: 60px; line-height: 0.94;
  color: var(--gold); letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.overlap .label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--cream); margin-top: 6px;
}
.face {
  margin-left: auto; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; color: #08080A;
  border: 1.5px solid var(--gold);
}
.tracks { margin-top: 18px; display: grid; gap: 7px; }
.track { display: flex; align-items: center; gap: 9px; }
.track .who {
  width: 46px; font-size: 10.5px; color: var(--muted-lg);
  font-weight: 600; flex: none;
}
.rail {
  flex: 1; height: 10px; border-radius: 5px;
  background: rgba(239, 234, 226, 0.07); position: relative; overflow: hidden;
}
.bar { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.track .when {
  width: 74px; text-align: right; font-family: var(--mono);
  font-size: 9px; color: var(--muted); flex: none;
}
.foot {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--gold); margin-top: 16px;
}
.compact {
  border: 1px solid var(--line); border-radius: 16px;
  padding: 15px 20px; display: flex; align-items: center; gap: 14px;
  margin-bottom: 10px;
}
.compact .n {
  font-family: var(--serif); font-size: 32px; color: var(--gold);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.compact .c {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-lg);
}

/* ---------- sections ---------- */
section { padding: 72px 0; border-top: 1px solid var(--line); }
h2.h { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; margin: 0 0 14px; }
.steps { display: grid; gap: 32px; margin-top: 40px; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.step .n {
  width: 27px; height: 27px; border-radius: 50%;
  border: 1px solid var(--gold-line); background: var(--gold-soft);
  color: var(--gold); font-family: var(--mono); font-size: 11px;
  display: grid; place-items: center; margin-bottom: 14px;
}
.step h3 { font-size: 17px; margin: 0 0 7px; }
.step p { color: var(--muted); margin: 0; font-size: 15px; }

/* ---------- prose (privacy, terms, support) ---------- */
.prose { padding: 64px 0 96px; }
.prose h1 { font-size: clamp(32px, 5vw, 46px); margin-bottom: 8px; }
.prose .updated { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 40px; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: 25px; margin: 44px 0 12px; letter-spacing: -0.015em; }
.prose h3 { font-size: 16px; margin: 28px 0 8px; }
.prose p, .prose li { color: var(--muted-lg); }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--cream); }
.prose a { color: var(--gold); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }
.callout {
  border: 1px solid var(--gold-line); background: var(--gold-soft);
  border-radius: 14px; padding: 20px 22px; margin: 28px 0;
}
.callout p { margin: 0; color: var(--cream); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 40px 0 56px; }
.frow { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
footer a { color: var(--muted); text-decoration: none; font-size: 14px; }
footer a:hover { color: var(--cream); }
footer .co { margin-left: auto; font-size: 13px; color: var(--muted); }

/* ============================================================
   The cover page
   ------------------------------------------------------------
   One screen, no scroll, three pieces of text. The restraint is
   the message: explaining is what an app that needs you does.
   ============================================================ */

body.cover {
  height: 100dvh; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto;
}

#globe {
  position: fixed; inset: 0; z-index: 0;
}
.maplibregl-canvas { outline: none; }

/* Sinks the map far enough that type sits on it comfortably, without
   killing the thing we went to the trouble of making real. */
.veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 52% 40% at 50% 44%, rgba(8,8,10,0.80) 0%, rgba(8,8,10,0.34) 62%, rgba(8,8,10,0) 100%),
    linear-gradient(180deg, rgba(8,8,10,0.55) 0%, rgba(8,8,10,0) 26%, rgba(8,8,10,0) 62%, rgba(8,8,10,0.88) 100%);
}

.stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  animation: rise 1100ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .stage { animation: none; } }

.mark {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 8.4vw, 68px);
  letter-spacing: 0.34em; text-indent: 0.34em;
  margin: 0 0 22px; line-height: 1;
}
.line {
  font-family: var(--serif);
  font-size: clamp(19px, 3.4vw, 26px);
  color: var(--muted-lg); margin: 0 0 44px; letter-spacing: -0.01em;
}
.apply {
  display: inline-block; text-decoration: none;
  padding: 15px 34px; border-radius: 999px;
  background: var(--cream); color: #08080A;
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  transition: transform 180ms cubic-bezier(.22,1,.36,1), background 180ms;
}
.apply:hover { background: #fff; transform: translateY(-1px); }

footer.thin {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 20px 34px; padding: 0 24px calc(28px + env(safe-area-inset-bottom));
  font-size: 13px; color: var(--muted); border: 0;
}
footer.thin a { color: var(--muted); text-decoration: none; }
footer.thin a:hover { color: var(--cream); }

/* ---------- the request ---------- */

/* `display: flex` on .ask beats the hidden attribute, so the success state
   rendered underneath the form it was meant to replace. Any layout rule on an
   element that also gets toggled needs this, and it is easy to miss because
   the markup is correct — only the cascade is wrong. */
[hidden] { display: none !important; }

.ask {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; align-items: center;
}
.mark.small {
  font-size: clamp(26px, 5vw, 34px); margin-bottom: 12px;
  text-decoration: none; color: var(--cream);
}
.line.small { font-size: 17px; margin-bottom: 34px; }

.field { width: 100%; text-align: left; margin-bottom: 16px; }
.field span {
  display: block; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 7px;
}
.field input {
  width: 100%; height: 48px; padding: 0 16px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--cream);
  font-family: var(--ui); font-size: 16px; /* 16px or iOS zooms on focus */
  outline: none; transition: border-color 160ms;
}
.field input::placeholder { color: rgba(239,234,226,0.30); }
.field input:focus { border-color: var(--gold-line); }

.apply.wide { width: 100%; text-align: center; margin-top: 10px; border: 0; cursor: pointer; font-family: var(--ui); }
.apply.wide:disabled { opacity: 0.55; cursor: default; transform: none; }

.err { color: #D9765B; font-size: 14px; margin: 14px 0 0; text-align: center; }
.fine {
  font-size: 12.5px; color: var(--muted); line-height: 1.55;
  margin: 20px 0 0; text-align: center;
}
.fine a { color: var(--muted-lg); }
.wide-text { max-width: 330px; }
.ghostlink {
  margin-top: 26px; color: var(--muted); text-decoration: none; font-size: 14px;
}
.ghostlink:hover { color: var(--cream); }

/* The request page scrolls on a short phone; the cover never should. */
body.cover:has(.ask) { height: auto; min-height: 100dvh; overflow: auto; }

/* A select, dressed to match. The native control is kept — it is the right
   picker on a phone and nothing hand-rolled beats it — but its chrome is
   removed so it does not arrive as a grey system box in the middle of a
   black page. */
.selectwrap { position: relative; }
.selectwrap::after {
  content: ''; position: absolute; right: 17px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); pointer-events: none;
}
.selectwrap select {
  width: 100%; height: 48px; padding: 0 42px 0 16px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--cream);
  font-family: var(--ui); font-size: 16px;
  appearance: none; -webkit-appearance: none;
  outline: none; cursor: pointer; transition: border-color 160ms;
  text-overflow: ellipsis;
}
.selectwrap select:focus { border-color: var(--gold-line); }
/* Until something is chosen it should read as a prompt, not an answer. */
.selectwrap select:invalid { color: rgba(239,234,226,0.30); }
.selectwrap select option { background: #131316; color: var(--cream); }

/* ---------------------------------------------------------- invite pages
   /j and /i — where every link the app shares actually lands. They were
   404s until now, so these are new rather than restyled. Deliberately plain:
   somebody arriving here has been sent by a friend and needs one sentence
   and one button, not the landing page. */
.invite {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
}
.invite .mark { margin-bottom: 4px; }
.invite-card {
  width: 100%;
  max-width: 460px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface, rgba(255, 255, 255, 0.02));
}
.invite-card h1 { margin: 6px 0 0; font-size: clamp(28px, 7vw, 40px); line-height: 1.08; }
.invite-card .lede { margin-top: 12px; }
.invite .cta {
  display: inline-flex;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--cream);
  color: #08080A;
  font-weight: 600;
  text-decoration: none;
}
.invite .cta:hover { background: #fff; }
.invite .fine { max-width: 420px; }