:root {
  --navy: #10283c;
  --deep: #061827;
  --muted: rgba(16, 40, 60, 0.62);
  --cream: #fffaf2;
  --mint: #9af3e2;
  --gold: #f5ca72;
  --coral: #ff876f;
  --line: rgba(16, 40, 60, 0.14);
  --sans: "Avenir Next", Avenir, "Gill Sans", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--navy);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 18% 18%, rgba(154, 243, 226, 0.48), transparent 24rem),
    radial-gradient(circle at 84% 12%, rgba(245, 202, 114, 0.5), transparent 25rem),
    radial-gradient(circle at 70% 82%, rgba(255, 135, 111, 0.22), transparent 24rem),
    linear-gradient(135deg, #fffaf2 0%, #f7f1e8 100%);
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: linear-gradient(rgba(16,40,60,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(16,40,60,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: calc(22px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-left)) calc(20px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-right));
}

.coming {
  position: relative;
  width: min(100%, 920px);
  min-height: min(720px, calc(100svh - 100px));
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 18px;
  padding: clamp(30px, 6vw, 70px);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: clamp(28px, 5vw, 56px);
  background: rgba(255, 250, 242, 0.78);
  box-shadow: 0 34px 90px rgba(16, 40, 60, 0.14);
  backdrop-filter: blur(18px);
  overflow: hidden;
  animation: rise 700ms cubic-bezier(.2,.8,.2,1) both;
}

.coming::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(16,40,60,.08);
  border-radius: calc(clamp(28px, 5vw, 56px) - 10px);
  pointer-events: none;
}

.shape {
  position: absolute;
  border-radius: 999px;
  filter: blur(0.2px);
  opacity: 0.9;
  animation: float 8s ease-in-out infinite;
}
.shape--mint { width: 260px; height: 260px; left: -80px; top: 60px; background: rgba(154, 243, 226, 0.45); }
.shape--gold { width: 210px; height: 210px; right: -52px; top: -42px; background: rgba(245, 202, 114, 0.42); animation-delay: -2s; }
.shape--navy { width: 88px; height: 88px; right: 12%; bottom: 14%; background: rgba(16, 40, 60, 0.11); animation-delay: -4s; }

.logo {
  position: relative;
  z-index: 1;
  width: clamp(138px, 18vw, 210px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 35px rgba(16,40,60,.1));
}

.kicker {
  position: relative;
  z-index: 1;
  margin: 4px 0 0;
  color: rgba(16, 40, 60, 0.58);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.headline {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--deep);
  font-size: clamp(56px, 11vw, 126px);
  font-weight: 950;
  letter-spacing: -0.07em;
  line-height: .85;
  text-align: center;
  text-transform: uppercase;
}

.subhead {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55;
  text-align: center;
}

.notify {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  margin-top: 12px;
}
.form { margin: 0; }
.honeypot { display: none !important; }
.form__row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 7px;
  border: 1px solid rgba(16,40,60,.16);
  border-radius: 24px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 18px 42px rgba(16,40,60,.1);
  overflow: hidden;
  transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.form__row:focus-within {
  border-color: rgba(16,40,60,.42);
  box-shadow: 0 22px 58px rgba(16,40,60,.14), 0 0 0 6px rgba(154,243,226,.22);
  transform: translateY(-1px);
}
.form__row[data-state="error"] {
  border-color: rgba(180, 40, 40, .58);
  box-shadow: 0 18px 42px rgba(180,40,40,.12), 0 0 0 5px rgba(180,40,40,.08);
}
.form__input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--deep);
  padding: 18px 20px;
  font: inherit;
  font-size: 16px;
  font-weight: 750;
}
.form__input::placeholder { color: rgba(16,40,60,.38); }
.form__btn {
  border: 0;
  border-radius: 17px;
  background: var(--deep);
  color: #fffaf2;
  padding: 0 26px;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}
.form__btn:hover { transform: translateY(-1px); background: #14344c; }
.form__btn:disabled { cursor: not-allowed; opacity: .62; transform: none; }
.form__btn--link { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; text-decoration: none; }
.fieldMsg,
.form__status {
  min-height: 18px;
  margin: 10px 4px 0;
  color: rgba(16,40,60,.56);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}
.fieldMsg.is-error,
.form__status.is-error { color: #a82727; }

.contact,
.thankActions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.contact a,
.contact button,
.ctaLink {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid rgba(16,40,60,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.52);
  color: rgba(16,40,60,.76);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.contact a:hover,
.contact button:hover,
.ctaLink:hover { color: var(--deep); border-color: rgba(16,40,60,.32); }

.footer {
  padding-top: 16px;
  color: rgba(16,40,60,.48);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.wrap--thanks { grid-template-rows: 1fr auto; }
.coming--thanks { min-height: min(680px, calc(100svh - 100px)); }
.thankCard { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
.thankLogo { width: clamp(120px, 18vw, 170px); height: auto; margin-bottom: 18px; }
.headline--thanks { font-size: clamp(54px, 10vw, 108px); }
.subhead--thanks { max-width: 620px; margin: 0; }
.thankActions { margin-top: 24px; }

@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes float { 50% { transform: translate3d(0, -14px, 0) scale(1.04); } }

@media (max-width: 680px) {
  .coming { min-height: auto; padding: 28px 18px; border-radius: 34px; }
  .coming::before { inset: 10px; }
  .form__row { grid-template-columns: 1fr; gap: 8px; }
  .form__btn { min-height: 56px; }
  .contact, .thankActions { align-items: stretch; width: 100%; }
  .contact a, .contact button, .ctaLink, .form__btn--link { width: 100%; }
}

@media (max-width: 420px) {
  .headline { font-size: clamp(46px, 16vw, 64px); }
  .subhead { font-size: 15px; }
  .kicker { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}