/* Original Webtrace plan colors; the plate leans, the name stays upright. */
.plan-tag,
.account-plan-tag {
  --tag-ink: #37434d;
  --tag-face: linear-gradient(160deg, #ffffff, #edf0f2);
  --tag-line: #cbd2d7;
  --tag-edge: #aab4bc;
  --tag-type-shadow: none;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 8px);
  padding: .38em .77em .43em;
  margin: 3px 4px 5px;
  color: var(--tag-ink);
  font-size: .82em;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-shadow: var(--tag-type-shadow);
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
}

.plan-tag::before,
.account-plan-tag::before {
  display: none;
}

.plan-tag::after,
.account-plan-tag::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  border: 1px solid var(--tag-line);
  border-radius: 4px;
  background: var(--tag-face);
  transform: skewX(-11deg);
  box-shadow: inset 0 1px 0 #ffffff70, 0 3px 0 var(--tag-edge);
}

.plan-tag-pro,
.account-plan-tag-pro {
  --tag-ink: #ffffff;
  --tag-face: radial-gradient(84% 180% at 50% 118%, #ffb154 0%, #ff8f3b 52%, #ff7627 100%);
  --tag-line: #ee7b2c;
  --tag-edge: #be4f0f;
  --tag-type-shadow: 0 1px 0 #943b0b, .5px 0 .5px #943b0b, -.5px 0 .5px #943b0b, 0 -.5px .5px #943b0b;
}

.plan-tag-max,
.account-plan-tag-max {
  --tag-ink: #ffffff;
  --tag-face: radial-gradient(84% 180% at 50% 118%, #5bc9e8 0%, #4aa3ff 52%, #3b8bff 100%);
  --tag-line: #428fea;
  --tag-edge: #2263cf;
  --tag-type-shadow: 0 1px 0 #185eac, .5px 0 .5px #185eac, -.5px 0 .5px #185eac, 0 -.5px .5px #185eac;
}

@media (max-width: 360px) {
  .plan-tag,
  .account-plan-tag { padding-inline: .7em; }
}

@media (forced-colors: active) {
  .plan-tag,
  .account-plan-tag {
    color: CanvasText;
    text-shadow: none;
  }

  .plan-tag::after,
  .account-plan-tag::after {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
  }
}