/* The landing page: the only page a stranger sees.
 *
 * A different shape from page.css, which dresses doorways -- a form sheet
 * centred in the dark. This one has to hold a paragraph somebody reads before
 * they trust you with an email address, so it is wider, quieter, and has no
 * boxes around the parts that matter.
 *
 * Colours come from tokens.css; nothing here defines its own. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }

/* The scroll gutter. Past the top or bottom of the document the browser
   paints the root element, not the body, so the body's gradient does not
   reach the rubber-band overscroll -- it came out white. Two declarations,
   both needed: an explicit root background, and color-scheme so the UA's own
   surfaces (that overscroll, form controls, the scrollbar) are painted the
   same way round. Both come from tokens.css, so both follow the theme. */
html { background: var(--bg-void); color-scheme: var(--scheme); }

body {
  background: radial-gradient(ellipse at 50% 0%, var(--bg-deep) 0%, var(--bg-void) 70%);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  padding: 0 1.2rem 4rem;
}

.top {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.4rem 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.wordmark {
  color: var(--text-bright);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}

/* The way in, and the lamp -- the toggle last so it still ends up in the
   top-right corner of the window, where every other page puts it.
   The header aligns its two halves on a baseline; this half is a flex box, and
   a flex box takes its baseline from its first item, so the link has to come
   first or the wordmark and "Sign in" stop sitting on the same line. The icon
   is centred against the link rather than hung from that baseline. */
.top-right { display: flex; align-items: center; gap: 0.5rem; }

a { color: var(--accent); }
a.quiet {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
}
a.quiet:hover { color: var(--text); }

main { max-width: 52rem; margin: 0 auto; }

section { margin: 3.5rem 0; }

h1 {
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: normal;
  color: var(--text-bright);
  line-height: 1.2;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.3rem;
  font-weight: normal;
  color: var(--text-soft);
  font-style: italic;
  margin-bottom: 1.2rem;
}

h3 {
  font-size: 1rem;
  font-weight: normal;
  color: var(--text-bright);
  margin-bottom: 0.4rem;
}

p { margin-bottom: 0.9rem; }

/* The headline sits over a tiled band of the fifteen forms (see .hero::before
   below), so it needs a positioning context and its own layer above it. */
.hero { text-align: center; margin-top: 2.5rem; position: relative; }
.hero > * { position: relative; z-index: 1; }
.hero .lede {
  font-size: 1.15rem;
  color: var(--text-mute);
  max-width: 36rem;
  margin: 0 auto 1.8rem;
}
.closing { margin-top: 4.5rem; }

.cta-row { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }

/* The call to action is an <a>, because pressing it navigates -- calling it a
   <button> to borrow the look would be lying to a screen reader about what it
   does. It wears `btn btn-lg` in the markup instead, so its colour, hover and
   focus ring are the app's and only its size is its own. */
.cta { display: inline-block; }

/* The banner behind the headline: forms-band.svg, every shape the find
   familiar spell allows, tiled across the full width of the window. It is the
   only place the drawings appear now -- they used to be a strip of fifteen
   40px line drawings under the hero as well, which was one creature parade too
   many once the headline had its own.

   It is a mask rather than a background image, which is what lets the colour
   come from a token -- the band is a flat fill of --forms-band showing through
   creature-shaped holes, so it can never drift from the palette the way a
   second copy of the artwork in its own colours would.

   Two mask layers composited: the tile, and a gradient that decides where any
   of it survives. That gradient is the whole design of the thing -- it opens a
   clear hole down the middle so the headline is never read through a spider,
   and closes again before either window edge so the row does not end in a hard
   vertical cut. What is left is two wings of creatures flanking the words.
   The hole is measured in rem out from the centre rather than in percent,
   because the thing it has to clear is the 52rem text column, which does not
   get wider when the window does -- in percent the wings would crawl inwards
   over the headline on a laptop and strand themselves at the far edges on a
   large monitor. Below about 60rem of window the hole swallows the whole band
   and the drawings simply are not there, which is the right answer on a phone:
   there is no margin to put them in.
   Full-bleed via 100vw pulled back to centre, because the band should run past
   the 52rem column even though the words do not.

   Only the headline hero, not .closing -- which is the same class again around
   the second call-to-action, where a band would be decoration for its own
   sake. */
.hero:not(.closing)::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -1.6rem;
  left: 50%;
  width: 100vw;
  height: 9rem;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--forms-band);
  opacity: 0.4;

  -webkit-mask-image: url(/forms-band.svg), linear-gradient(to right, transparent 0, #000 4rem, #000 calc(50% - 29rem), transparent calc(50% - 23rem), transparent calc(50% + 23rem), #000 calc(50% + 29rem), #000 calc(100% - 4rem), transparent 100%);
  mask-image: url(/forms-band.svg), linear-gradient(to right, transparent 0, #000 4rem, #000 calc(50% - 29rem), transparent calc(50% - 23rem), transparent calc(50% + 23rem), #000 calc(50% + 29rem), #000 calc(100% - 4rem), transparent 100%);
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  -webkit-mask-size: auto 4.6rem, 100% 100%;
  mask-size: auto 4.6rem, 100% 100%;
  -webkit-mask-position: center 1.2rem, center;
  mask-position: center 1.2rem, center;
  -webkit-mask-composite: source-in;   /* Safari's older keyword for intersect */
  mask-composite: intersect;
}

/* The call for interest before there is a list to join. The href is
   substituted server-side from SIGNUP_URL (see server._render_landing), so
   the placeholder that is in the file is also the signal that nothing has
   been configured -- and it styles itself inert rather than offering a click
   that goes nowhere. No JavaScript, and the file stays truthful opened on
   its own from disk. */
.cta[href="#signup-not-configured"] {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
}

.note {
  color: var(--text-dim);
  font-size: 0.88rem;
  font-style: italic;
  max-width: 30rem;
  text-align: center;
}

/* The spell, quoted. A rule down the side rather than quote marks: the
   passage is already set apart by being the only italic paragraph on the
   page, and a serif face at this size makes real quotation marks look like
   grit. The citation is upright so it reads as a label rather than as more
   of the quotation. */
.spell {
  border-left: 2px solid var(--line);
  padding-left: 1.2rem;
  margin-bottom: 1.4rem;
  color: var(--text-soft);
  font-style: italic;
}
.spell p { margin-bottom: 0.4rem; }
.spell cite {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* Six short claims. A grid rather than a list because they are peers -- none
   of them is the headline feature, and a numbered list would imply an order
   nobody experiences them in. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
}
.card p { color: var(--text-mute); font-size: 0.95rem; margin: 0; }

/* The sections a person actually has to read. No card, no border: the
   microphone paragraph should not look like a feature. */
.plain { max-width: 38rem; }
.plain ul { margin: 0 0 1rem 1.2rem; }
.plain li { margin-bottom: 0.5rem; color: var(--text-mute); }
.plain strong { color: var(--text-bright); font-weight: normal; }

footer {
  max-width: 52rem;
  margin: 4rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--text-faint);
  font-size: 0.88rem;
}
footer a { color: var(--text-dim); text-decoration: none; }
footer a:hover { color: var(--text); }
.sep { margin: 0 0.5rem; }