:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #252223;
  background: #f3f6f7;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

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

body {
  background:
    radial-gradient(circle at top left, rgba(7, 172, 183, 0.08), transparent 34rem),
    #f3f6f7;
}

.page-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.holding-card {
  position: relative;
  width: min(100%, 46rem);
  overflow: hidden;
  padding: clamp(2rem, 6vw, 4.5rem);
  border: 1px solid #dce5e7;
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 1.25rem 3.75rem rgba(39, 61, 67, 0.11);
  text-align: center;
}

.brand-mark {
  position: absolute;
  inset: 0 0 auto;
  height: 0.4rem;
  background: linear-gradient(90deg, #08aeb7 0 25%, #7eafc2 25% 50%, #879052 50% 75%, #c69a73 75%);
}

.logo {
  display: block;
  width: min(15rem, 64vw);
  height: auto;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
}

.content {
  max-width: 36rem;
  margin: 0 auto;
}

h1 {
  margin: 0 0 1.4rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 5vw, 2.65rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

p {
  margin: 0;
  font-size: clamp(1rem, 2.3vw, 1.125rem);
  line-height: 1.7;
}

p + p {
  margin-top: 1.2rem;
}

a {
  color: #087f87;
  font-weight: 700;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
  color: #245b67;
}

a:focus-visible {
  border-radius: 0.15rem;
  outline: 0.18rem solid rgba(8, 174, 183, 0.28);
  outline-offset: 0.2rem;
}

@media (max-width: 32rem) {
  .holding-card {
    padding: 2.6rem 1.35rem 2.25rem;
  }
}