:root {
  --cda-navy: #0b1f3a;
  --cda-blue: #1168c5;
  --cda-cyan: #57d7ff;
}

.cda-lockup {
  --cda-master-color: var(--cda-navy);
  --cda-product-color: var(--cda-blue);
  --cda-master-size: 2.25rem;
  --cda-product-size: 1.05rem;
  display: inline-grid;
  gap: 0.3rem;
  justify-items: start;
  color: var(--cda-master-color);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1;
}

.cda-lockup--dark {
  --cda-master-color: #fff;
  --cda-product-color: var(--cda-cyan);
}

.cda-lockup--header {
  --cda-master-size: clamp(1.55rem, 3vw, 2.15rem);
  --cda-product-size: 0.88rem;
}

.cda-lockup--card {
  --cda-master-size: clamp(1.9rem, 4vw, 2.75rem);
  --cda-product-size: clamp(0.95rem, 2vw, 1.25rem);
  margin-bottom: 1.1rem;
}

.cda-lockup--section {
  --cda-master-size: clamp(2.2rem, 5vw, 3.75rem);
  --cda-product-size: clamp(1.05rem, 2.4vw, 1.5rem);
}

.cda-master {
  color: var(--cda-master-color);
  font-size: var(--cda-master-size);
  font-weight: 820;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.cda-product {
  display: inline-flex;
  align-items: center;
  gap: 0.48em;
  margin-left: 0.08em;
  color: var(--cda-product-color);
  font-size: var(--cda-product-size);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.cda-door {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 0.58em;
  height: 0.72em;
  border: 0.09em solid currentColor;
  border-bottom: 0;
  border-radius: 0.12em 0.04em 0 0.12em;
}

.cda-door::before {
  position: absolute;
  top: 0.07em;
  left: 0.08em;
  width: 0.55em;
  height: 0.66em;
  content: "";
  background: currentColor;
  clip-path: polygon(0 0, 100% 9%, 89% 91%, 0 100%);
  transform: perspective(1.6em) rotateY(-8deg);
  transform-origin: left center;
}

.cda-door::after {
  position: absolute;
  z-index: 1;
  top: 48%;
  right: -0.01em;
  width: 0.09em;
  height: 0.09em;
  content: "";
  background: var(--cda-door-handle, #fff);
  border-radius: 50%;
}

.cda-lockup--dark .cda-door::after {
  --cda-door-handle: var(--cda-navy);
}

@media (forced-colors: active) {
  .cda-lockup {
    --cda-master-color: CanvasText;
    --cda-product-color: CanvasText;
  }

  .cda-door {
    forced-color-adjust: none;
  }
}