.brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  overflow: hidden;
  border-radius: 9px;
  background: transparent;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.product-shot {
  position: relative;
  justify-self: center;
  width: min(100%, 430px);
  height: 620px;
  margin: 0;
  isolation: isolate;
}

.product-shot::before {
  position: absolute;
  z-index: -1;
  inset: 12% 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #28534b80, #19262900 70%);
  content: "";
  filter: blur(28px);
}

.shot-main,
.shot-peek {
  position: absolute;
  width: 58%;
  overflow: hidden;
  border-radius: 18px;
  background: #111c20;
  box-shadow: 0 24px 56px #0008;
}

.shot-main {
  z-index: 2;
  bottom: 38px;
  left: 8%;
  transform: rotate(-5deg);
}

.shot-peek {
  z-index: 1;
  top: 12px;
  right: 4%;
  transform: rotate(7deg);
}

.shot-main img,
.shot-peek img {
  display: block;
  width: 100%;
  height: auto;
}

.product-shot figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #aebdb7;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-shot figcaption span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

@media (max-width: 760px) {
  .product-shot {
    width: min(100%, 360px);
    height: 525px;
  }

  .shot-main,
  .shot-peek {
    border-radius: 15px;
  }

  .shot-main {
    bottom: 34px;
  }

  .shot-peek {
    top: 8px;
  }
}

/* Illustrated guides */
.article-wrap{max-width:1080px}.guide-step{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:48px;align-items:start;margin:64px 0}.guide-step h2{margin-top:0}.guide-figure{margin:0}.guide-figure img{width:100%;height:auto;display:block;border-radius:18px}.guide-figure figcaption{font-size:12px;line-height:1.6;color:#a8b8bd;margin-top:12px}.article-wrap table{width:100%;border-collapse:collapse;margin:24px 0 40px;font-size:15px}.article-wrap th,.article-wrap td{text-align:left;padding:14px 12px;border-bottom:1px solid #33474e;vertical-align:top}.article-wrap th{color:#fff}.article-wrap a:not(.button){color:#b3e3d1;text-underline-offset:3px}.analytics-note{font-size:12px;color:#a8b8bd;flex-basis:100%;line-height:1.6} .article-callout h2{margin-top:0}
@media(max-width:640px){.guide-step{grid-template-columns:1fr;gap:20px;margin:44px 0}.guide-figure{width:min(230px,80%);margin-inline:auto}.article-wrap table{font-size:13px}.article-wrap th,.article-wrap td{padding:12px 8px}.site-header nav{gap:12px}}

/* Original signature style examples */
.style-examples{margin:72px 0;padding:32px;border-top:1px solid #33474e;border-bottom:1px solid #33474e}.style-examples h2{margin:0 0 12px}.style-examples>div:first-child p:last-child{max-width:720px;color:#b5c2c6}.style-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px}.style-example-grid figure{margin:0;overflow:hidden;background:#f4f3ef;border-radius:12px}.style-example-grid img{display:block;width:100%;height:auto}.style-example-grid figcaption{display:flex;justify-content:space-between;gap:8px;padding:12px 14px;color:#182327;font-size:13px}.style-example-grid figcaption span{color:#536266}@media(max-width:680px){.style-examples{margin:48px 0;padding:22px 0}.style-example-grid{gap:10px}.style-example-grid figcaption{display:grid;padding:10px;font-size:12px}}

.faq-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:32px}.faq-list article{padding-top:18px;border-top:1px solid #33474e}.faq-list h3{font-size:18px;line-height:1.4}.faq-list p{color:#b5c2c6;line-height:1.7}.faq-list a{color:#b3e3d1;text-underline-offset:3px}@media(max-width:680px){.faq-list{grid-template-columns:1fr;gap:16px}.faq-list article{padding-top:14px}}