:root {
    --bg:     rgb(251, 249, 244);
    --ink:    rgb(28, 26, 22);
    --accent: rgb(194, 58, 22);

    --font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  }

  *, *::before, *::after { box-sizing: border-box; }

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

  body {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    min-height: 100svh;

    padding: 2rem calc(1.5rem + env(safe-area-inset-right, 0px))
             2rem calc(1.5rem + env(safe-area-inset-left, 0px));

    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.6;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  main {
    max-width: 34rem;
  }

  h1 {
    margin: 0;
    font-weight: 800;
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }

  p {
    margin: 1.5rem 0 0;
    text-wrap: balance;
  }

  .soon {
    margin-top: 2.5rem;
    color: var(--accent);
  }

  @media (prefers-reduced-motion: no-preference) {
    main > * {
      animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
    }
    main > :nth-child(2) { animation-delay: 0.08s; }
    main > :nth-child(3) { animation-delay: 0.16s; }

    @keyframes rise {
      from { opacity: 0; transform: translateY(0.5rem); }
      to   { opacity: 1; transform: none; }
    }
  }