:root {
  color-scheme: light dark;
  color: #1a202c;
  background: #ffffff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --canvas: #ffffff;
  --ink: #1a202c;
  --muted: #4a5568;
  --quiet: #5f6b7e;
  --line: #e8ecf1;
  --destination: #4f7864;
  --destination-hover: #3f6653;
  --destination-decoration: #9ab4a7;
  --destination-focus: #2f5945;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--canvas);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
}

.site--snapboard {
  --selection: #00a8b5;
  --selection-ink: #062a30;
}

.site--webframe {
  --selection: #323232;
  --selection-ink: #ffffff;
}

::selection {
  color: var(--selection-ink);
  background: var(--selection);
}

a {
  color: inherit;
}

.page {
  display: grid;
  align-content: center;
  width: min(100% - 3rem, 34rem);
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding-block: clamp(2rem, 8vh, 5rem) clamp(3rem, 12vh, 7rem);
}

.notice {
  min-width: 0;
}

.brand__mark {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow:
    inset 0 0 0 1px #eceff3,
    0 0.5rem 1.5rem rgba(26, 32, 44, 0.06);
}

.brand-art {
  display: block;
  width: 100%;
  height: 100%;
}

.notice__body {
  margin-top: 2.5rem;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  font-weight: 720;
  letter-spacing: -0.026em;
  line-height: 1.15;
}

/* Hold the authored break so the hero reads as two lines. */
.headline__line {
  display: block;
}

.lede,
.handoff {
  max-width: 33rem;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.lede {
  margin: 1rem 0 0;
}

.handoff {
  margin: 1.25rem 0 0;
}

.destination {
  color: var(--destination);
  font-weight: 680;
  text-decoration-color: var(--destination-decoration);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.destination:hover {
  color: var(--destination-hover);
  text-decoration-color: currentColor;
}

.destination:focus-visible {
  outline: 3px solid var(--destination-focus);
  outline-offset: 3px;
}

.thanks {
  max-width: 32rem;
  margin: 2.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-size: 0.8125rem;
  line-height: 1.6;
}

@media (max-width: 39.999rem) {
  .page {
    width: min(100% - 3rem, 34rem);
    padding-block: 2.5rem 4rem;
  }

  .brand__mark {
    width: 3rem;
    height: 3rem;
    border-radius: 0.625rem;
  }

  .notice__body {
    margin-top: 2rem;
  }

  /* Narrow screens wrap on measure instead of the authored break. */
  h1 {
    max-width: 15ch;
    text-wrap: balance;
  }

  .headline__line {
    display: inline;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #12151c;
    --ink: #edf0f5;
    --muted: #b6c0ce;
    --quiet: #97a3b4;
    --line: #262b36;
    --destination: #8ab39f;
    --destination-hover: #9bc2af;
    --destination-decoration: #527965;
    --destination-focus: #b7dac9;
  }

  .site--snapboard {
    --selection: #22beca;
    --selection-ink: #0b0e13;
  }

  .site--webframe {
    --selection: #edf0f5;
    --selection-ink: #0b0e13;
  }

  .brand__mark {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.09),
      0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
  }

}

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }
  }

  @keyframes grow {
    from {
      transform: scaleY(0);
    }
  }

  @keyframes draw {
    from {
      stroke-dashoffset: 310;
    }
  }

  .brand__mark,
  h1,
  .lede,
  .handoff,
  .thanks {
    animation: rise 480ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }

  h1 {
    animation-delay: 90ms;
  }

  .lede {
    animation-delay: 150ms;
  }

  .handoff {
    animation-delay: 210ms;
  }

  .thanks {
    animation-delay: 270ms;
  }

  .logo-bar {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: grow 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .logo-bar:nth-of-type(2) {
    animation-delay: 120ms;
  }

  .logo-bar:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .logo-bar:nth-of-type(4) {
    animation-delay: 280ms;
  }

  .logo-frame {
    stroke-dasharray: 310;
    stroke-dashoffset: 0;
    animation: draw 700ms ease-out 100ms both;
  }
}

@media (forced-colors: active) {
  .destination {
    border: 1px solid ButtonText;
  }
}