/* Shared by every page: the logo mark, the waitlist button and the footer. */

/* the mark: one of the page's swallows rising through a circle of dawn sky */
.logo-mark {
  position: relative; display: block; flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, #fff6fa 0%, transparent 55%), linear-gradient(160deg, #d6cdee 0%, #e9d3ea 50%, #f6c4d9 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.logo-mark img { position: absolute; width: 56%; left: 20%; top: 16%; max-width: none; transform: rotate(-8deg); } /* centred with room all round */

/* The waitlist button, the same size everywhere: a Messages-style tile, a label and an arrow.
   Light by default; .dark for the navbar, the closing section and forms. */
.btn-msg {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px 0 20px; border-radius: 19px; /* tile radius 10 + 8 gap + 1 border keeps the corners concentric */
  background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); color: var(--ink, #2b3150);
  text-decoration: none; white-space: nowrap; cursor: pointer; font: 600 15px/1 var(--sans, "Manrope", system-ui, sans-serif);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .25s;
}
.btn-msg:hover { background: rgba(255,255,255,.85); }
.btn-msg .tile svg { width: 22px; height: 22px; }
.btn-msg .tile { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(180deg, #6ef085 0%, #1fc23c 100%); }
.btn-msg .arrow { color: var(--ink-soft, #5d6382); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.btn-msg:hover .arrow { transform: translateX(4px); }
/* the same button in ink, for the navbar and the closing section */
.btn-msg.dark { background: var(--ink, #2b3150); border-color: var(--ink, #2b3150); color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn-msg.dark:hover { background: #20253f; border-color: #20253f; }
.btn-msg.dark .arrow { color: rgba(255,255,255,.72); }

/* The name: a huge "Jimmy" in Lora, coloured like the rising sun. On the home page it rises
   from behind the closing cloud bank; on other pages it sits on the footer's horizon. */
.name-word {
  margin: 0; text-align: center; white-space: nowrap; pointer-events: none; user-select: none;
  font: 500 min(26vw, 420px)/.8 "Lora", Georgia, serif; letter-spacing: -.035em;
  background: linear-gradient(180deg, #fffbf5 0%, #ffeccd 38%, #ffd39f 72%, #f9b98a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Footer: a slim row on the pink the clouds fade into */
.foot { position: relative; background: #ef9cc4; color: #6b3a62; font: 400 14px/1.4 "Manrope", system-ui, sans-serif; }
/* the sky's grain and blend, so the cloud floor runs into the footer without a seam */
.foot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.foot-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  position: relative; z-index: 1; width: min(1160px, 100% - 32px); margin: 0 auto; padding: 22px 0 28px;
}
.foot-row nav { display: flex; gap: 22px; }
.foot-row a { color: inherit; text-decoration: none; }
.foot-row a:hover { color: #3a1d36; }
@media (max-width: 700px) { .foot-row { justify-content: center; text-align: center; } }