/* ==========================================================================
   ZerofyAI, the waitlist view

   The second of the two views in index.html. It is not a page: the router
   in main.js swaps it with the site view, and it inherits the reset, the
   palette and the typefaces from css/styles.css rather than declaring its
   own. What is left here is only what makes the waitlist look unlike the
   rest of the site — centred, uncluttered, one thing to do — and every
   selector is namespaced under .zw so the two sheets cannot collide.

   The layout is deliberately not the .row/.rail skeleton. A conversion
   screen with a nav bar and six sections above the fold is a worse
   conversion screen, so this one has neither.
   ========================================================================== */

.zw {
  /* Named for what they do here. The values are the site palette, taken
     from the tokens in css/styles.css so the two views cannot drift. */
  --paper: var(--cream);
  --field: color-mix(in srgb, #fff 62%, var(--cream));
  --muted: color-mix(in srgb, var(--ink) 62%, var(--cream));

  --font-plex-ar: var(--font-arabic);
  --font-milan: var(--font-display);

  --gutter: clamp(1rem, 6vw, 7.5rem);

  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-plex-ar), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The one reset rule the site sheet does not carry.

   :where() rather than a plain descendant selector. It scopes the rule to
   this view while contributing nothing to specificity, so it stays weaker
   than every .zw__* rule below it. Written as `.zw button` it would be a
   class plus an element and would beat `.zw__submit`, quietly repainting the
   button's label in the text colour it inherits — which on a dark button is
   dark, and reads as a button with nothing written on it. */
:where(.zw) button,
:where(.zw) input { font: inherit; color: inherit; }

.zw__lang { background: transparent; cursor: pointer; }

/* The two vertical hairlines that frame the content, as in the reference. */
.zw__frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.zw__frame::before,
.zw__frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}

.zw__frame::before { left: var(--gutter); }
.zw__frame::after { right: var(--gutter); }

/* The frame lines are a desktop conceit. On a phone they sit a thumb's width
   from each edge and read as a rendering fault rather than as ruling.

   What used to be here as well was a second copy of the `:where()` reset
   above, written without it — `.zw button { color: inherit }`. A class plus
   an element beats a class, so below 640px that rule won the cascade against
   `.zw__submit`, repainted the label in the ink it inherits from `.zw`, and
   put ink type on the ink button: an empty black pill on every phone, and
   nowhere else. The comment on the reset says exactly this would happen. */
@media (max-width: 640px) {
  .zw__frame { display: none; }
}

.zw__row {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--rule);
  padding-inline: var(--gutter);
}

/* Header ------------------------------------------------------------------ */

.zw__header {
  display: flex;
  justify-content: center;
  padding-block: clamp(1.25rem, 2.6vw, 1.9rem);
}

.zw__logo {
  height: clamp(34px, 4.6vw, 54px);
  width: auto;
}

/* Utility bar — under the header rule, clear of both vertical frame lines. */
.zw__utility {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(0.6rem, 1.4vw, 0.9rem);
  padding-inline: calc(var(--gutter) + clamp(0.75rem, 2vw, 1.75rem));
  /* Physical order is fixed in both locales so the switch never jumps. */
  direction: ltr;
}

.zw__lang {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.zw__lang:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
}

.zw__social {
  display: flex;
  align-items: center;
  gap: clamp(0.15rem, 0.6vw, 0.4rem);
}

.zw__social-link {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--ink) 58%, var(--paper));
  transition: color 0.18s ease, background 0.18s ease;
}

.zw__social-link svg { width: 18px; height: 18px; }

.zw__social-link:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

/* The six marks shrank to 28px here, which is a comfortable size to look at
   and a poor one to hit. The mark itself stays 18px; only the target grows,
   and six of them at 34px still clear the language switch on a 360px bar. */
@media (max-width: 620px) {
  .zw__utility { padding-inline: calc(var(--gutter) + 0.25rem); }
  .zw__social-link { width: 34px; height: 34px; }
}

/* Under about 380px the switch and six 34px targets stop fitting on one
   line, and the row was pushing Discord off the edge of the screen. The
   targets come back down to what the line can hold, the switch gives up the
   padding it can spare, and the row is allowed to wrap — so a window
   narrower than any of this was measured against still cannot overflow. */
@media (max-width: 380px) {
  .zw__utility {
    padding-inline: var(--gutter);
    gap: 0.5rem;
  }
  .zw__lang { padding: 0.4rem 0.7rem; font-size: 0.75rem; }
  .zw__social {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .zw__social-link { width: 28px; height: 28px; }
}

/* Hero -------------------------------------------------------------------- */

.zw__hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, min(2.1vw, 2.4vh), 1.5rem);
  text-align: center;
  padding-block: clamp(1.25rem, 3vh, 2.5rem);
}

.zw__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 78%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: 0 1px 2px rgb(21 21 21 / 0.05);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-weight: 500;
  text-transform: uppercase;
}

.zw__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink);
  animation: zw-pulse 2.4s ease-in-out infinite;
}

@keyframes zw-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .zw__badge-dot { animation: none; }
}

.zw__title {
  margin: 0;
  /* Tailwind preflight resets headings to inherit — state the weight. */
  font-weight: 600;
  font-size: clamp(2.5rem, min(6.6vw, 9vh), 5rem);
  /* Milan Display carries a tall line gap; pull it back to poster spacing. */
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 16ch;
  text-wrap: balance;
}

/* The Arabic headline runs on the supplied display face. The language is on
   <html>, so this needs no help from a script. */
html[lang="ar"] .zw__title {
  font-family: var(--font-milan), var(--font-plex-ar), system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  /* Short enough to hold one line at display size; wraps on its own if not. */
  max-width: none;
}

.zw__subtitle {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--muted);
}

/* Short windows: tighten the frame before anything is pushed off-screen. */
@media (max-height: 800px) {
  .zw__header { padding-block: 0.75rem; }
  .zw__logo { height: clamp(28px, 3.4vw, 40px); }
  .zw__utility { padding-block: 0.35rem; }
  .zw__hero {
    padding-block: 0.6rem;
    gap: 0.6rem;
  }
  .zw__proof,
  .zw__footer { padding-block: 0.6rem; }
  .zw__form { gap: 0.45rem; }
  .zw__names { gap: 0.45rem; }
  .zw__row-email { gap: 0.45rem; }
  .zw__field,
  .zw__submit { padding-block: 0.7rem; }
  .zw__note { min-height: 1rem; font-size: 0.78rem; }
}

@media (max-height: 640px) {
  .zw__title { font-size: clamp(1.75rem, min(6.6vw, 7.2vh), 5rem); }
  .zw__subtitle { font-size: 0.9rem; }
  .zw__badge { padding: 0.35rem 0.85rem; }
  .zw__proof,
  .zw__footer { padding-block: 0.45rem; }
}

/* Form -------------------------------------------------------------------- */

.zw__form {
  width: min(100%, 30rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
  text-align: start;
}

.zw__names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

/* First and last name stay side by side. At 320px — the narrowest window a
   phone still produces — each cell is about 136px and the wider of the two
   placeholders sets at 115px, so the pair fits everywhere it is asked to;
   the floor below is for a window narrower than any phone has. Stacking them
   earlier cost the form a third row and the screen an extra scroll. */
@media (max-width: 300px) {
  .zw__names { grid-template-columns: 1fr; }
}

.zw__field {
  width: 100%;
  padding: 0.9rem 1.15rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  box-shadow: 0 1px 2px rgb(21 21 21 / 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.zw__field::placeholder { color: color-mix(in srgb, var(--ink) 42%, var(--paper)); }

.zw__field:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent);
}

.zw__row-email {
  display: flex;
  gap: 0.6rem;
}

.zw__row-email .zw__field { flex: 1; min-width: 0; }

@media (max-width: 460px) {
  .zw__row-email { flex-direction: column; }
  .zw__submit { width: 100%; }
}

.zw__submit {
  flex-shrink: 0;
  padding: 0.9rem 1.65rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.zw__submit:hover { transform: translateY(-1px); }
.zw__submit:active { transform: translateY(0); }
.zw__submit:disabled { opacity: 0.55; cursor: progress; transform: none; }

.zw__note {
  min-height: 1.25rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

.zw__note--error { color: #b3261e; }
.zw__note--ok { color: color-mix(in srgb, var(--ink) 85%, transparent); }

/* Social proof ------------------------------------------------------------ */

.zw__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem clamp(0.75rem, 2vw, 1.5rem);
  padding-block: clamp(1rem, 2.2vw, 1.5rem);
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
  font-size: 0.9rem;
  color: var(--muted);
}

.zw__proof-lead { font-weight: 500; color: var(--ink); }

.zw__tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem clamp(0.6rem, 1.6vw, 1.1rem);
  /* Sub-brand names are proper nouns — always Latin, always left-to-right. */
  direction: ltr;
}

.zw__tool {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink) 70%, var(--paper));
}

/* Footer ------------------------------------------------------------------ */

.zw__footer {
  border-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.85rem;
  padding-block: clamp(1rem, 2vw, 1.5rem);
  font-size: 0.82rem;
  color: var(--muted);
}

/* Brand Bible §05 — the ZerofyAI wordmark is set in IBM Plex Sans Arabic. */
.zw__wordmark {
  font-family: var(--font-plex-ar), system-ui, sans-serif;
  font-weight: 600;
  color: var(--ink);
}

.zw__sep { opacity: 0.4; }

.zw__footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

.zw__footer a:hover { color: var(--ink); }

.zw__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The lockup is the way back to the landing page, so it has to be a link
   without becoming a button. */
.zw__home {
  display: inline-flex;
  border-radius: 2px;
}

.zw__home:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

/* ==========================================================================
   The waitlist on a narrow window.

   The screen was already fluid — every size on it is a clamp — so most of
   what is left is not layout but the handful of things a phone does that a
   desktop does not: it zooms the whole page when a field under 16px takes
   focus, it has no pointer to hover with, and it has a keyboard that eats
   half the window the moment the first field is tapped.
   ========================================================================== */

@media (max-width: 640px) {
  /* iOS Safari zooms the viewport when a focused input is set below 16px,
     and never zooms back out. 0.95rem is 15.2px, which is under the line by
     less than a pixel and costs the whole layout. The rest of the type on
     this screen can stay where it is; only the things you can put a caret in
     have to clear 16px. */
  .zw__field { font-size: 16px; }

  /* A tap does not hover, and a tap that leaves a hover behind reads as a
     control that is stuck on. */
  .zw__submit:hover { transform: none; }
  .zw__lang:hover { background: transparent; }
  .zw__social-link:hover { background: transparent; color: inherit; }

  .zw__submit:active { transform: scale(0.985); }

  .zw__hero { padding-block: clamp(1.5rem, 5vh, 2.5rem); }
  .zw__subtitle { font-size: 1rem; max-width: 34ch; }
  .zw__form { margin-top: 0.75rem; }

  /* Both fields and the button are one thumb tall at this width. */
  .zw__field,
  .zw__submit { padding-block: 0.95rem; }
}

/* Small phones. The title is the only thing on the screen with no room left
   to give, so it is the only thing that gets smaller. */
@media (max-width: 420px) {
  .zw__title {
    font-size: clamp(2rem, 9.4vw, 2.6rem);
    max-width: 14ch;
  }

  .zw__badge { font-size: 0.66rem; padding: 0.45rem 0.85rem; }
  .zw__proof { font-size: 0.85rem; }
  .zw__footer { font-size: 0.78rem; gap: 0.3rem 0.6rem; }
}

/* The Arabic headline runs on Milan Display, which is a Black: it carries
   far more ink per line than the Latin does and needs the room back. */
@media (max-width: 420px) {
  html[lang="ar"] .zw__title { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
}

/* A phone held on its side has about 380px of height to play with once the
   keyboard is up. Everything that is padding becomes padding worth having
   somewhere else. */
@media (max-height: 520px) and (orientation: landscape) {
  .zw { min-height: 0; }
  .zw__header { padding-block: 0.5rem; }
  .zw__logo { height: 26px; }
  .zw__hero {
    padding-block: 0.75rem;
    gap: 0.5rem;
  }
  .zw__title { font-size: clamp(1.5rem, 5vw, 2rem); }
  .zw__subtitle { font-size: 0.85rem; }
  .zw__badge { display: none; }
  .zw__proof,
  .zw__footer { padding-block: 0.5rem; }
}