.brandMark {
  display:inline-block !important;
  position:relative !important;
  width:248px !important;
  height:112px !important;
  flex:none !important;
  background:none !important;
  color:transparent !important;
  line-height:0 !important;
  filter:none !important;
  overflow:visible !important;
}
.brandMark > * { visibility:visible !important; }
.brandMark .brandAsset {
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:contain !important;
}
.brandMarkCompact {
  width:128px !important;
  height:58px !important;
}
.brandLogo {
  width:270px !important;
  min-width:270px !important;
  height:122px !important;
  display:flex !important;
  align-items:center !important;
  overflow:visible !important;
}
.brandLogo .brandMark {
  width:270px !important;
  height:122px !important;
}
.nav {
  padding-top:14px !important;
  padding-bottom:14px !important;
  min-height:144px !important;
}
.wrapBrand .brandMark {
  width:138px !important;
  height:63px !important;
  opacity:1 !important;
}
.tagCleanLogo .brandMark {
  width:132px !important;
  height:60px !important;
}
.footerMark .brandMark {
  width:220px !important;
  height:100px !important;
  transform:none !important;
}
.tagFace.tagBack {
  background:url('/misfit-tag-back-production.png') center/contain no-repeat !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.tagFace.tagBack > * {
  visibility:hidden !important;
}
@media (max-width:900px) {
  .brandLogo { width:220px !important; min-width:220px !important; height:100px !important; }
  .brandLogo .brandMark { width:220px !important; height:100px !important; }
  .nav { min-height:118px !important; }
}
@media (max-width:760px) {
  .nav {
    gap:16px !important;
    min-height:104px !important;
  }
  .navItems {
    gap:0 !important;
    font-size:.62rem !important;
    letter-spacing:.1em !important;
    flex:0 0 auto !important;
  }
  .navContact {
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    padding:0 0 2px !important;
  }
  h1 {
    font-size:clamp(3.15rem,15.5vw,4.35rem) !important;
    line-height:.82 !important;
    letter-spacing:-.075em !important;
    max-width:100% !important;
  }
  .lede {
    font-size:1rem !important;
    line-height:1.58 !important;
  }
  .heroGrid {
    padding-top:34px !important;
  }
  .heroVisual {
    min-height:455px !important;
    margin-bottom:-76px !important;
    transform:scale(.82) !important;
    transform-origin:top center !important;
  }
  .heroProof {
    gap:12px 20px !important;
    line-height:1.45 !important;
  }
  .collections {
    padding-top:82px !important;
    padding-bottom:64px !important;
  }
  .sectionTopline {
    margin-bottom:32px !important;
  }
  .sectionHeadline {
    font-size:clamp(2.35rem,11vw,3.4rem) !important;
    line-height:.9 !important;
  }
  .collectionPanel {
    min-height:575px !important;
    padding:22px 22px 26px !important;
  }
  .panelVisual {
    min-height:340px !important;
  }
  .platform,
  .smartSection,
  .manifesto,
  .launch {
    padding-top:84px !important;
    padding-bottom:88px !important;
  }
  .platform h2,
  .manifesto h2,
  .launch h2,
  .smartCopy h2 {
    font-size:clamp(2.9rem,13vw,4.3rem) !important;
    line-height:.86 !important;
  }
  .bigCopy,
  .manifestoGrid p,
  .launchCopy > p,
  .smartCopy > p {
    font-size:1rem !important;
    line-height:1.66 !important;
  }
  .smartGrid,
  .platformGrid,
  .manifestoGrid,
  .launchGrid {
    gap:44px !important;
  }
  .smartTagWrap {
    min-height:430px !important;
  }
  .smartTagWrap .tagBack {
    width:250px !important;
    height:411px !important;
  }
  .privacyBadge {
    right:0 !important;
    bottom:4% !important;
  }
  .footerInner {
    gap:16px !important;
  }
  .footerLinks {
    gap:12px 16px !important;
  }
}
@media (max-width:640px) {
  .brandLogo { width:176px !important; min-width:176px !important; height:80px !important; }
  .brandLogo .brandMark { width:176px !important; height:80px !important; }
  .nav { min-height:96px !important; }
  .brandImprintInner {
    min-height:220px !important;
    padding-top:38px !important;
    padding-bottom:42px !important;
  }
  .brandImprintMark .brandMark {
    width:min(330px,82vw) !important;
    height:150px !important;
  }
}
@media (max-width:480px) {
  .wrap {
    width:calc(100% - 28px) !important;
  }
  .brandLogo {
    width:158px !important;
    min-width:158px !important;
    height:72px !important;
  }
  .brandLogo .brandMark {
    width:158px !important;
    height:72px !important;
  }
  .nav {
    min-height:88px !important;
    gap:10px !important;
  }
  h1 {
    font-size:clamp(3rem,15vw,3.8rem) !important;
  }
  .actions {
    align-items:stretch !important;
    flex-direction:column !important;
  }
  .actions .button {
    width:100% !important;
    min-height:50px !important;
  }
  .heroProof {
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  .heroVisual {
    min-height:430px !important;
    margin-top:8px !important;
    margin-bottom:-92px !important;
    transform:scale(.76) !important;
  }
  .wrappedTag-left { left:0 !important; }
  .wrappedTag-right { right:0 !important; }
  .wrappedTag-center { right:25% !important; }
  .sectionLabel,
  .eyebrow {
    letter-spacing:.14em !important;
  }
  .collectionPanel {
    min-height:550px !important;
  }
  .panelVisual {
    min-height:320px !important;
  }
  .smartTagWrap {
    min-height:405px !important;
  }
  .smartTagWrap .tagBack {
    width:232px !important;
    height:382px !important;
  }
  .privacyBadge {
    font-size:.52rem !important;
    padding:9px 10px !important;
  }
  .footerMark .brandMark {
    width:180px !important;
    height:82px !important;
  }
}