/*
  safemoat.app home (docs/website-plan.md §6). The setup page's night look (setup.css: the background, glow, headline
  gradient, cream button, the glass fields) on one screen, with the water along the bottom. No red anywhere.
  Fonts: Latin-only WOFF2 copies of the bundled Plus Jakarta Sans (about 9.5 KB each).
*/

@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("/fonts/PlusJakartaSans-Regular-latin.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url("/fonts/PlusJakartaSans-Medium-latin.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("/fonts/PlusJakartaSans-SemiBold-latin.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("/fonts/PlusJakartaSans-Bold-latin.woff2") format("woff2"); }

:root {
  --text: #F5F8FC;
  --text-2: rgba(206, 220, 242, 0.8);
  --text-3: rgba(206, 220, 242, 0.62);
  --link: #CFE0FF;
  --accent: #8FB8FF;
  --cream: #F4F1EA;
  --cream-ink: #0A0E13;
  --water: 190px;
  --top: #01040C;
  /* The water's bottom row (the front wave over the gradient's last colour, measured). The root background, so the
     strip behind Safari's floating toolbar and the bounce below the page continue the water. */
  --bottom: #06318F;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--bottom); }
/* iOS 26 Safari colours the strips behind the status bar and the floating toolbar from a fixed element touching that
   edge, or else from the root background. The root gives the bottom the water's colour; this invisible strip in the
   page's top colour gives the top its own. Tested on iOS 26.3: Safari ignores pseudo-elements, elements under the
   page and strips under about 8px, so it's a real element, on top, 12px tall. */
.edge { position: fixed; z-index: 3; top: 0; left: 0; right: 0; height: 12px; background: var(--top); pointer-events: none; }
body { font-family: "Plus Jakarta Sans", "Helvetica Neue", system-ui, sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
a:hover { color: #FFFFFF; }
button { font-family: inherit; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.page {
  position: relative; overflow: hidden; width: 100%; min-height: 100vh; min-height: 100dvh; /* 100vh only where dvh isn't known */
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--top) 0%, #03102B 26%, #082A78 54%, #0A2C80 64%, #061A4C 84%, #030B20 100%);
}
.glow {
  position: absolute; left: 50%; top: 22%; width: 1400px; height: 640px; margin-left: -700px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(46, 107, 255, 0.42) 0%, rgba(30, 80, 220, 0.12) 42%, rgba(4, 16, 48, 0) 70%);
  pointer-events: none;
}

/* The logo: the round wave mark and the wordmark. The wave flows; hovering or tapping raises the water and sends two
   rings out across the moat. */
.header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: calc(112px + env(safe-area-inset-top)); flex-shrink: 0; padding-top: calc(16px + env(safe-area-inset-top)); }
.brand { display: flex; align-items: center; gap: 12px; color: #FFFFFF; cursor: default; -webkit-tap-highlight-color: transparent; }
.mark { position: relative; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 6px 18px rgba(10, 60, 220, 0.5); }
/* The glow sits on .mark, not the moving SVG: iOS Safari clipped it to a square on the SVG's own layer. */
.mark-svg { position: relative; display: block; width: 44px; height: 44px; border-radius: 50%; }
.wave { animation: flow 7s linear infinite; }
@keyframes flow { to { transform: translateX(-52px); } }
.tide { transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1); }
.water { transition: fill-opacity 0.9s ease; }
.brand.rising .tide { transform: translateY(-14px); }
.brand.rising .water { fill-opacity: 0.16; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(143, 184, 255, 0.7); opacity: 0; pointer-events: none; }
.brand.splash .ring { animation: ring 1.4s cubic-bezier(0.2, 0.6, 0.3, 1) both; }
.brand.splash .ring2 { animation-delay: 0.22s; }
@keyframes ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } }
.wordmark { font-size: 23px; font-weight: 700; letter-spacing: -0.03em; }

main { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px max(24px, env(safe-area-inset-right)) calc(var(--water) - 24px) max(24px, env(safe-area-inset-left)); }
.hero { width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; text-align: center; }

.badge {
  margin: 0; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; color: #DCE8FF;
}
.hl {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, #B9D3FF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFFFFF;
  font-weight: 600; line-height: 1.1; outline: none;
}
h1 { margin: 24px 0 -10px; padding-bottom: 10px; font-size: 76px; letter-spacing: -0.045em; }
.sub { margin: 18px 0 0; max-width: 600px; text-wrap: balance; font-size: 19px; line-height: 1.5; color: var(--text-2); }

.waitlist { width: 100%; max-width: 470px; margin-top: 40px; }
.fields { display: flex; gap: 10px; }
.email {
  flex: 1; min-width: 0; height: 58px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #FFFFFF; font: 500 17px/1 "Plus Jakarta Sans", system-ui, sans-serif; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.email::placeholder { color: rgba(206, 220, 242, 0.5); }
.email:focus { border-color: rgba(143, 184, 255, 0.9); box-shadow: 0 0 0 5px rgba(60, 130, 255, 0.22); }
.email.wrong { border-color: rgba(143, 184, 255, 0.55); }
.cta {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 58px; padding: 0 26px; border: none;
  border-radius: 999px; background: var(--cream); color: var(--cream-ink); font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em; cursor: pointer; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(77, 179, 251, 0.1);
  transition: opacity 0.25s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.45), 0 0 0 8px rgba(77, 179, 251, 0.16); }
.cta:active { transform: scale(0.98); }
.cta:disabled { opacity: 0.5; cursor: default; transform: none; }
.note { min-height: 42px; margin: 14px auto 0; max-width: 400px; font-size: 13.5px; font-weight: 500; line-height: 1.55; color: var(--text-3); text-wrap: balance; }
.note.error { font-size: 14.5px; font-weight: 600; line-height: 1.45; color: #DCE8FF; }
.joined {
  width: fit-content; margin: 0 auto; height: 58px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 26px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(143, 184, 255, 0.45);
  box-shadow: 0 0 0 6px rgba(60, 130, 255, 0.12); font-size: 17px; font-weight: 600; color: #FFFFFF; outline: none;
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.joined svg { color: var(--accent); }

.footer {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 0 max(16px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); font-size: 13.5px; font-weight: 500; color: rgba(220, 232, 255, 0.78);
}
.footer a { color: rgba(220, 232, 255, 0.92); text-decoration: none; }
.footer a:hover { color: #FFFFFF; text-decoration: underline; }
.moat { position: absolute; z-index: 0; left: 0; bottom: 0; width: 100%; height: var(--water); pointer-events: none; }

/* Entrance: fade in and rise 14px, 0.7s, staggered (as on the setup page). */
.rise { opacity: 0; transform: translateY(14px); animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.r1 { animation-delay: 0.05s; } .r2 { animation-delay: 0.15s; } .r3 { animation-delay: 0.25s; } .r4 { animation-delay: 0.35s; }

@media (max-width: 600px) {
  :root { --water: 150px; }
  .header { height: calc(88px + env(safe-area-inset-top)); padding-top: calc(8px + env(safe-area-inset-top)); }
  .mark, .mark-svg { width: 38px; height: 38px; }
  .wordmark { font-size: 21px; }
  main { padding: 8px max(20px, env(safe-area-inset-right)) calc(var(--water) - 10px) max(20px, env(safe-area-inset-left)); }
  h1 { margin-top: 20px; font-size: 46px; }
  .sub { margin-top: 14px; font-size: 16.5px; max-width: 330px; }
  .waitlist { margin-top: 30px; }
  .fields { flex-direction: column; gap: 12px; }
  .email { flex: none; height: 56px; text-align: center; }
  .cta { height: 56px; }
  .joined { margin: 34px auto 48px; height: 56px; } /* as tall as the field and button (the 48 absorbs the note's 14), so nothing moves */
  .footer { font-size: 12.5px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .page .glow { left: -505px; margin-left: 0; top: 18%; }
}
@media (max-height: 700px) and (max-width: 600px) {
  :root { --water: 120px; }
  .header { height: calc(72px + env(safe-area-inset-top)); }
  h1 { font-size: 40px; margin-top: 16px; }
  .waitlist { margin-top: 22px; }
}

/* The first iPhone SE (320 × 568, iOS 15): the headline stays on one line and everything fits. */
@media (max-width: 340px) {
  h1 { font-size: 36px; }
  .footer { gap: 6px; font-size: 11.5px; white-space: nowrap; }
}
@media (max-height: 600px) and (max-width: 600px) {
  :root { --water: 120px; }
  .header { height: calc(60px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  h1 { margin-top: 12px; }
  .sub { margin-top: 10px; font-size: 15.5px; }
  .waitlist { margin-top: 18px; }
  .note { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .joined { animation: none; opacity: 1; transform: none; }
  .wave, .brand.splash .ring { animation: none; }
  .tide, .water, .cta, .email { transition: none; }
  .brand.rising .tide { transform: none; }
  .brand.rising .water { fill-opacity: 0; }
}