:root {
  --color-brand-900: #1b2d8d;
  --color-brand-600: #224cf0;
  --color-neutral-600: #525252;
  --color-bg: #fcfcfd;
  --color-white: #ffffff;

  --font-family: "Articulat CF", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  --card-max-width: 1248px;
  --card-height: 834px;
  --card-radius: 32px;
  --card-border: 6px;
  --card-pad-x: 64px;
  --card-pad-top: 64px;
  --card-pad-bottom: 48px;

  --content-gap: 96px;
  --hero-gap: 18px;
  --copy-max-width: 918px;

  
  --title-width: 1120px;

  --body-size: 22px;
  --body-line: normal;

  --illus-max-width: 829.614px;
  --illus-height: 282px;

  --logo-width: 479px;
  --logo-height: 56px;
}

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

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-family);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

.page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.card {
  container-type: inline-size;
  container-name: card;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  width: min(var(--card-max-width), 100%);
  min-height: var(--card-height);
  max-height: calc(100dvh - 32px);
  padding: var(--card-pad-top) var(--card-pad-x) var(--card-pad-bottom);
  background: var(--color-bg);
  border: var(--card-border) solid var(--color-brand-600);
  border-radius: var(--card-radius);
  box-shadow:
    0 16px 8px rgba(12, 12, 13, 0.1),
    0 4px 2px rgba(12, 12, 13, 0.05);
}

.card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--content-gap);
  width: 100%;
  flex-shrink: 0;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hero-gap);
  width: 100%;
  text-align: center;
}

.hero__title {
  margin: 0;
  line-height: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero__title-img {
  display: block;
  width: min(100%, var(--title-width));
  height: auto;
  aspect-ratio: 1120 / 76;
}

.hero__copy {
  margin: 0;
  max-width: var(--copy-max-width);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: var(--body-line);
  color: var(--color-neutral-600);
}

.hero__copy p {
  margin: 0;
}

.hero__copy strong {
  font-weight: 600;
}

.illustration {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}

.illustration__inner {
  transform: scaleY(-1) rotate(180deg);
  width: min(100%, var(--illus-max-width));
  height: var(--illus-height);
}

.illustration__inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
}

.card__logo {
  display: block;
  width: min(100%, var(--logo-width));
  height: auto;
  aspect-ratio: 479 / 56;
}

@container card (max-width: 1100px) {
  :root {
    --body-size: clamp(18px, 2cqi, 22px);
    --content-gap: clamp(48px, 8.7cqi, 96px);
    --illus-height: auto;
  }

  .illustration__inner {
    height: auto;
    aspect-ratio: 829.614 / 282;
  }
}

@container card (max-width: 720px) {
  :root {
    --card-pad-x: 32px;
    --card-pad-top: 40px;
    --card-pad-bottom: 32px;
    --card-border: 4px;
    --card-radius: 24px;
    --content-gap: 40px;
    --copy-max-width: 100%;
    --logo-width: min(479px, 90cqi);
  }

  .card {
    min-height: auto;
    max-height: none;
  }
}

@container card (max-width: 480px) {
  :root {
    --card-pad-x: 24px;
    --card-pad-top: 32px;
    --body-size: 18px;
    --logo-width: 100%;
  }
}

@media (max-height: 900px) {
  .card {
    min-height: auto;
    max-height: none;
    justify-content: flex-start;
    gap: clamp(32px, 5vh, 96px);
  }

  .card__footer {
    margin-top: auto;
  }
}