/* The First Ten Minutesâ„¢ Coming Soon Page */

:root {
  --red: #df1f2d;
  --red-dark: #b91521;
  --white: #ffffff;
  --soft-white: rgba(255, 255, 255, 0.88);
  --line: rgba(255, 255, 255, 0.42);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #020b18;
  color: var(--white);
}

.landing-page {
  min-height: 100vh;
}

/*
  Layout fix (was: absolute-positioned content at top:21vh + footer at
  bottom:8.5vh). Those two numbers only agree with each other on some
  viewport heights — shrink the effective viewport (100% zoom vs. 50% zoom,
  a shorter laptop screen, a smaller browser window) and the footer's fixed
  slot starts overlapping the form because neither element knows how tall
  the other one actually is.

  Fix: make .hero a flex column and let .hero__content / .footer-line be
  real flow children. `justify-content: space-between` pushes the footer
  toward the bottom whenever there's spare vertical space (matching the
  original look), and `gap` guarantees a minimum breathing-room even when
  space runs out — so on short viewports the footer just sits right below
  the form instead of drawing on top of it. Works at any zoom level, width,
  or height, and if content ever gets tall enough to exceed the viewport,
  the page simply grows/scrolls instead of overlapping.
*/
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  min-height: 100dvh; /* accounts for mobile browser chrome (address bar, etc.) */
  overflow: hidden;
  isolation: isolate;
  gap: clamp(40px, 8vh, 96px);
  padding: clamp(64px, 16vh, 200px) 28px clamp(32px, 8.5vh, 96px);
  background-image: url("assets/ftm-coming-soon-background.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(2, 11, 24, 0.02) 0%,
    rgba(2, 11, 24, 0.08) 44%,
    rgba(2, 11, 24, 0.10) 100%
  );
  pointer-events: none;
}

.hero__content {
  position: relative;
  width: min(100%, 980px);
  text-align: center;
}

h1 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: clamp(0.14em, 1.1vw, 0.24em);
  font-weight: 500;
  line-height: 1.4;
  color: var(--soft-white);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.42);
}

h1 span,
h1 strong {
  display: block;
}

h1 span {
  font-size: clamp(1.4rem, 2.5vw, 3.2rem);
}

h1 strong {
  margin-top: 0.35em;
  color: var(--red);
  font-size: clamp(1.22rem, 2.15vw, 2.18rem);
  font-weight: 800;
  letter-spacing: clamp(0.10em, 0.7vw, 0.16em);
}

.divider {
  width: 86px;
  height: 3px;
  margin: clamp(42px, 5vw, 72px) auto clamp(26px, 4vw, 48px);
  background: var(--red);
  box-shadow: 0 0 14px rgba(223, 31, 45, 0.28);
}

.signup-title {
  margin: 0 0 clamp(22px, 2.2vw, 34px);
  color: var(--soft-white);
  text-transform: uppercase;
  letter-spacing: clamp(0.22em, 1vw, 0.42em);
  font-size: clamp(0.92rem, 1.45vw, 1.34rem);
  font-weight: 500;
}

.signup-form {
  display: flex;
  width: min(100%, 720px);
  min-height: 72px;
  margin: 0 auto;
  border: 1px solid var(--line);
  background: rgba(3, 13, 30, 0.28);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px);
}

.signup-form input {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0 30px;
  color: var(--white);
  background: transparent;
  font: inherit;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  outline: none;
}

.signup-form input::placeholder {
  color: rgba(255, 255, 255, 0.58);
}

.signup-form input:focus {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
}

.signup-form button {
  flex: 0 0 auto;
  min-width: 240px;
  border: 0;
  padding: 0 32px;
  color: var(--white);
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  font: inherit;
  font-size: clamp(0.94rem, 1.2vw, 1.2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}

.signup-form button:hover {
  filter: brightness(1.08);
}

.signup-form button:active {
  transform: translateY(1px);
}

.signup-form button:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Honeypot field: trapped for bots, invisible and unreachable for real users */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-message {
  min-height: 24px;
  margin: 16px 0 0;
  color: var(--soft-white);
  font-size: 0.95rem;
}

.footer-line {
  position: relative;
  margin: 0;
  text-align: center;
  color: var(--soft-white);
  text-transform: uppercase;
  letter-spacing: clamp(0.18em, 0.9vw, 0.34em);
  font-size: clamp(0.78rem, 1.35vw, 1.28rem);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
}

.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;
}

@media (max-width: 720px) {
  .hero {
    background-position: center bottom;
    padding: clamp(40px, 12vh, 96px) 18px clamp(20px, 5vh, 40px);
    gap: clamp(28px, 6vh, 56px);
  }

  .hero__content {
    width: min(calc(100% - 36px), 980px);
  }

  h1 {
    letter-spacing: 0.12em;
  }

  h1 span {
    font-size: clamp(1.3rem, 7vw, 2.1rem);
  }

  h1 strong {
    font-size: clamp(1.05rem, 4.6vw, 1.36rem);
    line-height: 1.45;
  }

  .signup-form {
    display: grid;
    min-height: auto;
  }

  .signup-form input {
    min-height: 60px;
    text-align: center;
  }

  .signup-form button {
    min-height: 58px;
    width: 100%;
    min-width: 0;
  }

  .footer-line {
    line-height: 1.6;
  }
}