/* vueltic.com placeholder. Every colour, size and font comes from the app's
   generated tokens.css (copied next to this file at deploy), so the page follows
   the design spec and both themes the same way the app does - rule 19. */

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
  background: var(--vt-bg);
  color: var(--vt-text-primary);
  font-family: var(--vt-font-ui);
}

.hero {
  display: grid;
  justify-items: center;
  gap: var(--vt-space-3);
  padding: var(--vt-space-6) var(--vt-space-4);
  text-align: center;
}

.mark {
  width: calc(var(--vt-space-9) * 2);
  height: auto;
  margin-bottom: var(--vt-space-5);
}

.mark-v {
  fill: currentColor;
}

.mark-dot {
  fill: var(--vt-brand-volt);
}

/* The wordmark is Latin only, so the display face (no Cyrillic) is safe here. */
.wordmark {
  margin: 0;
  font-family: var(--vt-font-display);
  /* Seven letters at 0.3em tracking are ~6.7em wide: on a 390 px phone the 72 px
     token overflows, so the width of the screen caps it. */
  font-size: min(var(--vt-font-size-display-l), 11vw);
  font-weight: var(--vt-font-weight-display-l);
  letter-spacing: 0.3em;
  /* Letter spacing also trails the last letter; this pulls the word back to centre. */
  margin-right: -0.3em;
}

.tagline {
  margin: 0;
  color: var(--vt-text-secondary);
  font-size: var(--vt-font-size-overline);
  font-weight: var(--vt-font-weight-overline);
  letter-spacing: 0.4em;
  margin-right: -0.4em;
  text-transform: uppercase;
}

.status {
  margin: var(--vt-space-7) 0 0;
  color: var(--vt-text-muted);
  font-size: var(--vt-font-size-body-m);
  font-weight: var(--vt-font-weight-body-m);
}