@layer base, layout, components;

@layer base {
  :root {
    --c-paper: #fff;
    --c-ink: #14171a;
    --c-ink-soft: #4a5056;
    --c-ink-faint: #6b7279;
    --c-legal: #8b9197;
    --c-brand: #e8590c;
    --c-brand-deep: #d04f09;
    --c-placeholder: #eef0f2;
    --ff-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

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

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background: var(--c-paper);
    color: var(--c-ink);
    font: 400 17px/1.5 var(--ff-ui);
    text-align: center;
    -webkit-font-smoothing: antialiased;
  }
}

@layer layout {
  .screen {
    padding: 28px 20px 40px;
  }

  .stage {
    max-width: 620px;
    margin-inline: auto;
  }

  .fineprint {
    max-width: 620px;
    margin: 28px auto 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-legal);
  }
}

@layer components {
  .stage__headline {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.4px;
  }

  .stage__tagline {
    margin: 0 0 22px;
    font-size: 18px;
    line-height: 1.45;
    color: var(--c-ink-soft);
  }

  .stage__figure {
    margin: 0 0 24px;
  }

  .stage__photo {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    margin-inline: auto;
    border-radius: 12px;
    background: var(--c-placeholder);
  }

  .button-offer {
    display: block;
    padding: 17px 22px;
    border-radius: 10px;
    background: var(--c-brand);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
  }

  .button-offer:hover,
  .button-offer:active {
    background: var(--c-brand-deep);
  }

  .stage__proof {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--c-ink-faint);
  }

  .fineprint__line { margin: 0 0 1em; }

  .fineprint__nav { display: block; margin-bottom: 1em; }

  .fineprint__corp { margin: 0; font-size: 11px; line-height: 1.6; }

  .fineprint a { color: var(--c-legal); }

  @media (min-width: 620px) {
    .stage__headline { font-size: 38px; }
    .stage__tagline { font-size: 20px; }

    .button-offer {
      display: inline-block;
      min-width: 360px;
    }
  }
}