/* Pliny landing page. No third-party requests: fonts, images and script are served from this site. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/fonts/Inter-Bold.woff2") format("woff2"); }

:root { color-scheme: light; --ink: #0B0E14; --soft: #2C3A52; --muted: #51607A; --warn: #B4320A; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--ink);
  background: linear-gradient(180deg, #5F9DEB 0%, #7FB2F0 38%, #A9CFF5 72%, #CFE4FA 100%) fixed;
}
a { color: inherit; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: #fff; padding: 8px 12px; border-radius: 8px; z-index: 10; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Sky: the portrait and the clouds sit behind everything and never take a tap. */
.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.portrait {
  position: absolute; right: -4vw; bottom: -2vh; width: min(58vw, 860px); height: auto; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 68% 70% at 60% 54%, #000 38%, transparent 76%);
          mask-image: radial-gradient(ellipse 68% 70% at 60% 54%, #000 38%, transparent 76%);
  animation: drift 16s ease-in-out infinite alternate, breathe 9s ease-in-out infinite alternate;
}
.cloud { position: absolute; width: 520px; opacity: .95; animation: float 60s linear infinite alternate; }
.c1 { left: -140px; bottom: 6vh; width: 460px; animation-duration: 48s; }
.c2 { left: 30vw; bottom: -70px; width: 380px; animation-duration: 70s; animation-direction: alternate-reverse; }
.c3 { right: 12vw; bottom: 12vh; width: 560px; animation-duration: 84s; }
.c4 { right: -160px; bottom: -40px; width: 420px; animation-duration: 56s; animation-direction: alternate-reverse; }
.c5 { left: 12vw; top: 16vh; width: 200px; opacity: .55; animation-duration: 95s; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-26px, -18px, 0) scale(1.035); } }
@keyframes breathe { from { opacity: .34; } to { opacity: .62; } }
@keyframes float { from { transform: translateX(-30px); } to { transform: translateX(50px); } }

.top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(16px, 3.4vw, 44px); }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.brand svg { width: 28px; height: 28px; display: block; }
.cta { display: inline-block; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; padding: 11px 18px; border-radius: 999px; }
.cta:hover { background: #1C2331; }

main { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(28px, 9vh, 96px) 16px 40px; }
.spots { margin: 0 0 22px; display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .7); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 500; color: var(--soft); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #0F8A5F; }
h1 span { display: inline; }
h1 { margin: 0; font-size: clamp(38px, 6.4vw, 60px); line-height: 1.06; letter-spacing: -.035em; font-weight: 600; max-width: 15em; }
.lead { margin: 18px 0 0; font-size: clamp(17px, 2vw, 21px); line-height: 1.45; color: var(--soft); max-width: 34em; }

.box {
  margin-top: 30px; width: min(100%, 560px); text-align: left; border-radius: 26px; padding: 18px;
  background: linear-gradient(180deg, #fff 0%, #F2F7FF 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 50px rgba(20, 50, 110, .28), 0 2px 6px rgba(20, 50, 110, .16);
}
.field { width: 100%; border: 0; background: transparent; font: inherit; font-size: 18px; color: var(--ink); padding: 12px 8px 16px; outline: none; }
.field::placeholder { color: #6B778C; }
.field:focus-visible { box-shadow: 0 2px 0 var(--ink); }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 2px 8px 14px; font-size: 14px; line-height: 1.4; color: var(--soft); }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.btn { display: block; width: 100%; border: 0; cursor: pointer; background: var(--ink); color: #fff; font: inherit; font-weight: 600; font-size: 17px; padding: 15px 18px; border-radius: 16px; }
.btn:hover { background: #1C2331; }
.btn:disabled { opacity: .6; cursor: default; }
.btn:focus-visible, .cta:focus-visible, .link:focus-visible, .check input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
.btn-small { width: auto; padding: 11px 16px; font-size: 15px; border-radius: 12px; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); margin-top: 10px; }
.btn-ghost:hover { background: rgba(11, 14, 20, .06); }
.error { margin: 0 8px 12px; color: var(--warn); font-size: 14px; font-weight: 500; }
.fine { margin: 12px 8px 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.join-sub { margin: 0 8px 10px; font-size: 15px; color: var(--soft); }

#result, #removed { padding: 6px 8px; outline: none; }
.pill { display: inline-block; margin: 0 0 6px; background: #E3F2EB; color: #0F6B4A; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.pill.early { background: #E8ECFF; color: #2238CC; }
.join-title { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.place { margin: 6px 0; font-size: 56px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.place-hash { color: #9AA6BA; margin-right: 2px; }
.field-label { display: block; margin: 14px 0 6px; font-size: 14px; font-weight: 600; }
.copyrow { display: flex; gap: 8px; }
.copyrow .field { background: #EEF3FB; border-radius: 12px; font-size: 15px; padding: 11px 12px; min-width: 0; }
.link { background: none; border: 0; padding: 0; margin-top: 14px; font: inherit; font-size: 14px; color: var(--muted); text-decoration: underline; cursor: pointer; }

footer { position: relative; z-index: 2; text-align: center; padding: 18px 16px 22px; font-size: 13px; color: var(--soft); }

@media (max-width: 760px) {
  .portrait { width: 118vw; right: -34vw; bottom: 4vh; }
  .c3 { display: none; }
  h1 span { display: block; }
  .c1 { width: 320px; } .c2 { width: 280px; } .c4 { width: 300px; }
  .cta { padding: 10px 15px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .portrait, .cloud { animation: none; } .portrait { opacity: .5; } }