:root {
  color-scheme: light dark;
  --paper: #F3F4F6;
  --ink: #1E2430;           /* the logo's ink */
  --muted: #596273;
  --line: #C9CDD5;
  --field: #FFFFFF;
  --signal: #B8341A;        /* text-safe vermilion; 5.4:1 on paper */
  --button: #FF5A36;        /* the logo's hot bar */
  --button-ink: #1E2430;
  font-family: "Archivo", -apple-system, system-ui, sans-serif;
  font-variation-settings: "wdth" 100;
  background: var(--paper);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1E2430;
    --ink: #F3F4F6;
    --muted: #A3ABBA;
    --line: #3A4252;
    --field: #272E3C;
    --signal: #FF5A36;
    --button: #FF5A36;
    --button-ink: #1E2430;
  }
}

body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; line-height: 1.5; }
main { flex: 1; width: 100%; max-width: 36rem; margin: 0 auto; padding: clamp(3rem, 10vh, 7rem) 1.5rem 3rem; box-sizing: border-box; }

.mark { display: block; width: 6rem; height: 6rem; margin-left: -.94rem; }  /* the logo's viewBox has an 80/512 left margin */
.wordmark {
  margin: 1.25rem 0 0;
  font-size: clamp(3.25rem, 13vw, 5.5rem);
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  letter-spacing: -.03em;
  line-height: .95;
}
.lede { margin: 1.25rem 0 0; font-size: 1.3rem; line-height: 1.45; color: var(--muted); max-width: 30em; }
.platform { margin: .75rem 0 0; color: var(--signal); }

h1:not(.wordmark) { font-size: 2.25rem; font-weight: 800; font-variation-settings: "wdth" 125; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .25rem; }
#reveal { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
#reveal > p { margin: 0 0 1rem; color: var(--muted); }

form { display: flex; flex-wrap: wrap; gap: .5rem; }
input, button, .button {
  font: inherit; padding: .65rem .9rem; border-radius: .5rem; border: 1px solid var(--line);
  background: var(--field); color: var(--ink);
}
input { flex: 1 1 9rem; min-width: 0; }
button, .button {
  background: var(--button); color: var(--button-ink); border-color: var(--button);
  font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block;
}
form[hidden], .button[hidden] { display: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.reveal-msg:empty { display: none; }
.reveal-msg { margin: .75rem 0; }

a { color: var(--signal); }
footer { width: 100%; max-width: 36rem; margin: 0 auto; padding: 2rem 1.5rem; box-sizing: border-box; color: var(--muted); }
footer a { color: inherit; }