/* UNSET's original braces and backslash, shared by the website and service pages. */
.unset-mark {
  position: relative;
  display: inline-block;
  flex: none;
  width: 28px;
  height: 36px;
  overflow: hidden;
  vertical-align: middle;
  mix-blend-mode: multiply;
}
/* The source is square with generous white margins. Keep the complete glyph. */
body .unset-mark > img,
body :is(#header, #footer) .unset-mark > img {
  position: absolute;
  width: 200%;
  height: auto;
  max-width: none;
  left: -50%;
  top: -27%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  mix-blend-mode: normal;
}
body .brand > .unset-mark {width: 31px; height: 40px; padding: 0; border: 0; margin-right: 3px}
body #footer .brand > .unset-mark {width: 37px; height: 48px; filter: invert(1); mix-blend-mode: screen}
.unset-signed {display: flex; align-items: center; gap: 12px}
body .overline.unset-signed::before {display: none}
body .hero-copy > .overline.unset-signed {font-size: 10px; letter-spacing: 1.5px; color: var(--accent)}
.hero-copy > .overline .unset-mark {width: 33px; height: 43px}
body .demo-topline > .unset-signed {display: flex; align-items: center; gap: 10px}
.demo-topline .unset-mark {width: 15px; height: 20px; filter: invert(1); mix-blend-mode: screen}
body .value-preview > .unset-signed {display: flex; align-items: center; gap: 9px; font-size: 11px; line-height: 1.5}
.value-preview .unset-mark {width: 15px; height: 20px}
.quote-preview .unset-mark {filter: invert(1); mix-blend-mode: screen}
.empty > .unset-mark {width: 40px; height: 52px; margin: 0 auto 18px}
.updates-intro > .unset-mark {margin-bottom: 22px}
.assistant-heading > .unset-mark {width: 26px; height: 34px}

/* The slant always descends from upper left to lower right, as in the logo. */
body main .overline:not(.unset-signed)::before,
.service-eyebrow:not(.unset-signed)::before {
  content: "";
  display: inline-block;
  position: static;
  width: 3px;
  height: 12px;
  margin: 0 11px 0 3px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  transform: skewX(29deg);
  vertical-align: -1px;
  flex: none;
}
.brand-backslash {display: inline-block; width: 3px; height: 22px; background: var(--accent); transform: skewX(29deg); margin: 0 6px; flex: none}
.value-gallery-choices > a > span,
.service-next > div > a > span {font-variant-numeric: tabular-nums}
.value-gallery-choices > a > span::after,
.service-next > div > a > span::after {content: ""; display: block; width: 3px; height: 18px; margin: 12px 0 0 6px; background: var(--accent); transform: skewX(29deg)}

/* Braces frame a result or an invitation, with a clear area reserved for text. */
.unset-framed {position: relative; isolation: isolate}
.unset-framed::before, .unset-framed::after {
  position: absolute;
  top: 50%;
  transform: translateY(-54%);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 96px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  opacity: .22;
  pointer-events: none;
  z-index: -1;
}
.unset-framed::before {content: "{"; left: 8px}
.unset-framed::after {content: "}"; right: 8px}
.hero .demo-panel.unset-framed {padding-left: 42px; padding-right: 42px}
.demo-panel.unset-framed::before, .demo-panel.unset-framed::after {font-size: 80px; opacity: .17}
.closing.unset-framed {padding-left: 82px; padding-right: 82px}
.closing.unset-framed::before, .closing.unset-framed::after {font-size: 170px; opacity: .3}
.closing.unset-framed::before {left: 22px}
.closing.unset-framed::after {right: 22px}
.closing > .unset-signed {justify-content: center}
.closing .unset-mark {width: 24px; height: 31px}

.service-brand > .unset-mark {width: 31px; height: 40px}
.service-hero .unset-signed {gap: 14px; margin-bottom: 20px}
.service-hero .unset-mark {width: 32px; height: 42px}
.service-hero aside.unset-framed {padding: 26px 50px; border-left: 0; border-right: 0; border-radius: 0}
.service-hero aside.unset-framed::before, .service-hero aside.unset-framed::after {font-size: 108px; opacity: .45}
.service-footer .unset-signed {gap: 10px}
.service-footer .unset-mark, .footer .unset-mark {width: 19px; height: 25px}

@media (max-width: 650px) {
  body .brand > .unset-mark {width: 24px; height: 31px; margin-right: 0}
  body #footer .brand > .unset-mark {width: 30px; height: 39px}
  body .hero-copy > .overline.unset-signed {font-size: 9px; letter-spacing: 1px; gap: 10px}
  .hero-copy > .overline .unset-mark {width: 26px; height: 34px}
  .hero .demo-panel.unset-framed {padding-left: 30px; padding-right: 30px}
  .demo-panel.unset-framed::before, .demo-panel.unset-framed::after {font-size: 54px; opacity: .17}
  .demo-panel.unset-framed::before {left: 4px}
  .demo-panel.unset-framed::after {right: 4px}
  .closing.unset-framed {padding-left: 38px; padding-right: 38px}
  .closing.unset-framed::before, .closing.unset-framed::after {font-size: 80px; opacity: .22}
  .closing.unset-framed::before {left: 4px}
  .closing.unset-framed::after {right: 4px}
  .closing > .unset-signed {flex-direction: column; gap: 12px}
  .service-hero .unset-signed {font-size: 11px}
  .service-hero aside.unset-framed {padding: 22px 38px}
  .service-hero aside.unset-framed::before, .service-hero aside.unset-framed::after {font-size: 80px}
}