/* maybs — landing page
   Brand palette is fixed (2026-08-17 identity). Do not add colours. */

:root {
  --pink:   #EEBAD5; /* background */
  --purple: #553863; /* ink: all type and icons */
  --orange: #EC673B; /* accent, CTA only */
  --yellow: #FFD33A; /* unused, kept for reference */
  --grey:   #E4E4E4; /* unused, kept for reference */

  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--pink);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 6vw, 3.5rem);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--pink);
  color: var(--purple);
  font-family: var(--font);
  font-size: 100%;
  line-height: 1.35;
  text-align: center;
}

/* ---------------------------------------------------------------- hero --- */

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 3rem);
}

/* The lockup is a container so every piece inside can be sized in cqw and
   therefore scales as one drawing, from a 375pt phone to a wide desktop. */
.lockup {
  width: min(100%, 780px);
  container-type: inline-size;
}

.lockup__inner {
  position: relative;
  height: 47cqw; /* wordmark band + a hand band above and below */
}

.wordmark {
  position: absolute;
  left: 11cqw;
  top: 13.6cqw;
  width: 78cqw;
  margin: 0;
}

.wordmark img,
.hand {
  display: block;
  width: 100%;
  height: auto;
}

.hand {
  position: absolute;
}

.hand--peace   { width: 7.4cqw;  left: 7cqw;   top: 0.6cqw;    transform: rotate(-14deg); }
.hand--shaka   { width: 15cqw;   left: 50%;    top: 2.5cqw;    transform: translateX(-50%) rotate(-5deg); }
.hand--crossed { width: 7.2cqw;  right: 7cqw;  top: 0.5cqw;    transform: rotate(12deg); }
.hand--love    { width: 12cqw;   left: 12cqw;  bottom: 0.5cqw; transform: rotate(9deg); }
.hand--like    { width: 8.4cqw;  right: 12cqw; bottom: 0;      transform: rotate(-8deg); }

.tagline {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.375rem, 4.5vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* ----------------------------------------------------------------- cta --- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2.25rem;
  border: 2px solid var(--purple);
  border-radius: 999px;
  background: var(--orange);
  color: var(--purple);
  font: inherit;
  font-size: 1.25rem; /* large text: keeps purple-on-orange above 3:1 */
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* The pre-launch state: no href, so it is not a link and must not look like
   one. Restored to a real button by the script once APP_STORE_URL is set. */
.cta--pending {
  background: transparent;
  color: var(--purple);
  border-style: dashed;
  cursor: default;
}

.cta--pending:hover,
.cta--pending:focus-visible {
  background: transparent;
  color: var(--purple);
}

.cta:hover,
.cta:focus-visible {
  background: var(--purple);
  color: var(--pink);
  transform: translateY(-1px);
}

.cta:active { transform: translateY(1px); }

/* -------------------------------------------------------------- footer --- */

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}

.footer-nav a {
  color: var(--purple);
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer-nav a:hover { text-decoration-thickness: 2px; }

.copyright {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--purple);
}

/* --------------------------------------------------------------- focus --- */

a:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* --------------------------------------------------------- small phones --- */

@media (max-width: 420px) {
  body { padding: 1rem 0.75rem; }
  .cta { width: 100%; max-width: 20rem; }
}

/* ======================================================================
   DOCUMENT PAGES — terms, privacy, data deletion
   ----------------------------------------------------------------------
   The hero above is a centred, full-viewport lockup. A legal document is
   the opposite job: long-form text that has to be READ, so `.doc` undoes
   the centring and the viewport-filling rather than fighting it inline.
   Palette and face are unchanged — same identity, different job.
   ====================================================================== */

body.doc {
  display: block;
  text-align: left;
  max-width: 42rem;   /* ~65 characters at this size */
  margin: 0 auto;
  gap: 0;
}

.doc main {
  display: block;
  flex: none;
}

.doc-back {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--purple);
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.doc h1 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* The "last updated" line. Not a heading, and it must not read as one —
   it is the first thing a reviewer looks for and the last thing a reader
   needs. */
.doc-updated {
  margin: 0 0 2.5rem;
  font-size: 0.875rem;
  /* A tint of the ink rather than a new grey: the palette is fixed. */
  opacity: 0.7;
}

.doc section { margin-bottom: 2rem; }

.doc h2 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.doc p {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
}

.doc p:last-child { margin-bottom: 0; }

.doc ul {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
}

.doc li { margin-bottom: 0.25rem; }

.doc a {
  color: var(--purple);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.doc a:hover { text-decoration-thickness: 2px; }

.doc footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--purple);
  align-items: flex-start;
}

/* ======================================================================
   LINK CATCHERS — /event/<id> and /sup/<code>
   ----------------------------------------------------------------------
   Someone tapped a shared link on a device that did not open the app.
   Either they do not have it, or the universal link did not resolve. The
   page's whole job is to get them to the App Store, so it reuses the
   hero's centred layout and says one thing.
   ====================================================================== */

.catcher-title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(1.5rem, 5vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.catcher-body {
  margin: 0;
  max-width: 32ch;
  font-size: 1.0625rem;
  line-height: 1.5;
  opacity: 0.8;
}