.gpv2-glass {
  background:
    linear-gradient(145deg, rgb(244 249 250 / 20%), rgb(210 226 230 / 12%)),
    var(--gpv2-surface);
  border: 1px solid var(--gpv2-glass-line);
  border-radius: var(--gpv2-radius-lg);
  box-shadow:
    inset 0 1px 0 var(--gpv2-glass-highlight),
    0 18px 52px rgb(25 47 56 / 13%);
  backdrop-filter: blur(16px) saturate(112%);
}

.gpv2-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gpv2-ink);
  text-decoration: none;
}

.gpv2-brand__mark {
  display: grid;
  width: 42px;
  height: 42px;
  color: #eef5f6;
  background: linear-gradient(145deg, var(--gpv2-accent), #2d5868);
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 14px;
  font-family: var(--gpv2-font-data);
  font-weight: 750;
  place-items: center;
}

.gpv2-brand strong,
.gpv2-brand small {
  display: block;
}

.gpv2-brand small {
  color: var(--gpv2-ink-soft);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gpv2-count {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  margin-left: 4px;
  padding-inline: 5px;
  color: var(--gpv2-ink);
  background: rgb(255 255 255 / 48%);
  border-radius: 999px;
  font-family: var(--gpv2-font-data);
  font-size: 11px;
  place-items: center;
}

.gpv2-eyebrow {
  margin-bottom: 12px;
  color: var(--gpv2-accent-hover);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gpv2-actions {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.gpv2-button,
button.gpv2-button,
.gpv2-site .button,
.gpv2-site button.button,
.gpv2-site input.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  color: var(--gpv2-ink);
  background: rgb(245 249 249 / 52%);
  border: 1px solid var(--gpv2-line);
  border-radius: var(--gpv2-radius-md);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--gpv2-motion), border-color var(--gpv2-motion), transform var(--gpv2-motion);
}

.gpv2-button:hover,
.gpv2-site .button:hover {
  color: var(--gpv2-ink);
  background: rgb(249 252 252 / 84%);
  border-color: var(--gpv2-line-strong);
  transform: translateY(-1px);
}

.gpv2-button--primary,
.gpv2-site .button.alt {
  color: #eff7f8;
  background: rgb(23 109 139 / 88%);
  border-color: rgb(23 109 139 / 32%);
}

.gpv2-button--primary:hover,
.gpv2-site .button.alt:hover {
  color: #fff;
  background: var(--gpv2-accent-hover);
}

.gpv2-button--quiet {
  background: rgb(239 246 247 / 36%);
}

.gpv2-card {
  min-height: 230px;
  padding: 28px;
}

.gpv2-card > span {
  display: block;
  margin-bottom: 28px;
  color: var(--gpv2-gold);
  font-family: var(--gpv2-font-data);
  font-weight: 750;
}

.gpv2-card h2,
.gpv2-card h3 {
  font-size: 24px;
}

.gpv2-card p {
  color: var(--gpv2-ink-soft);
}

.gpv2-article,
.gpv2-commerce__surface,
.gpv2-empty__card {
  padding: clamp(24px, 5vw, 64px);
}

.gpv2-article > header,
.gpv2-prose {
  max-width: 820px;
  margin-inline: auto;
}

.gpv2-article h1,
.gpv2-empty h1 {
  font-size: clamp(36px, 5vw, 62px);
}

.gpv2-prose {
  margin-top: 36px;
}

.gpv2-prose > * + * {
  margin-top: 1.2em;
}

.gpv2-empty {
  display: grid;
  min-height: 62vh;
  place-items: center;
}

.gpv2-empty__card {
  width: min(100%, 760px);
  text-align: center;
}

@supports not (backdrop-filter: blur(1px)) {
  .gpv2-glass,
  .gpv2-header,
  .gpv2-header__nav {
    background: #dfe9eb;
  }
}