/* Brand roles and assets match app-user-ui's marketing surface. */
@font-face {
  font-family: 'Zibby Stack Text';
  src: url('extra/custom-assets/StackSansText-Variable.ttf') format('truetype');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zibby Stack Headline';
  src: url('extra/custom-assets/StackSansHeadline-Variable.ttf') format('truetype');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --z-sky: #c4dcef;
  --z-paper: #f7faff;
  --z-surface: #ffffff;
  --z-action: #156c8e;
  --z-action-dark: #2b5973;
  --z-ink: #191b19;
  --z-ink-low: #464845;
  --z-text: 'Zibby Stack Text', system-ui, sans-serif;
  --z-heading: 'Zibby Stack Headline', var(--z-text);
}
* { box-sizing: border-box; }
html { min-height: 100%; font-size: 16px; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--z-ink);
  font: 400 1rem/1.5 var(--z-text);
  background: var(--z-sky);
  background-image:
    radial-gradient(ellipse 82vw 58vw at 78% 16%, rgb(255 255 255 / 78%), transparent 62%),
    radial-gradient(ellipse 70vw 86vw at 6% 64%, rgb(255 255 255 / 24%), transparent 68%),
    linear-gradient(180deg, var(--z-sky), var(--z-paper));
  background-attachment: fixed;
}
.container {
  position: relative;
  width: min(100% - 40px, 520px);
  margin: 0 auto;
  padding: clamp(24px, 5vh, 56px) 0 36px;
  text-align: center;
}
.column { width: 100%; margin: 0 !important; }
#avatar {
  display: block;
  width: min(272px, 76%) !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 auto 20px;
  border-radius: 0 !important;
  object-fit: contain !important;
}
.container h1 {
  /* The wordmark is the visible title; retain the heading for assistive technology. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
p { margin: 0 0 24px; }
.description-parent { color: var(--z-ink-low); padding-bottom: 0 !important; }
.description-parent:has(p:empty) { display: none; }
a { color: var(--z-action); text-decoration: none; }
a:hover { color: var(--z-action-dark); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--z-action-dark);
  outline-offset: 5px;
}
.background-container { display: none; }
.credit-footer { margin-top: 26px; }
.credit-txt, .credit-txt-clr {
  color: var(--z-ink-low) !important;
  font: 400 .8rem/1.5 var(--z-text);
}
.social-icon { color: var(--z-action); }
.spacing { padding: 0 10px; }
.u-full-width { width: 100%; }
.u-max-full-width { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}