.dims-feature-paths {
  background: #fff;
  padding: clamp(5rem, 10vw, 10rem) 0 0;
}

.dims-feature-paths__inner {
  max-width: none;
  padding-bottom: 18vh;
}

.dims-feature-paths__intro {
  margin-bottom: clamp(2.5rem, 4vw, 4.5rem);
  margin-inline: auto;
  width: 86vw;
  text-align: center;
}

.dims-feature-paths__eyebrow {
  font-family: var(--dims-font-regular, system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  margin: 0 0 1.25rem;
  text-transform: uppercase;
}

.dims-feature-paths__title {
  font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", system-ui, sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0 auto;
  max-width: 20ch;
  text-wrap: balance;
}

.dims-feature-paths__sub {
  max-width: 38rem;
  margin: 1rem auto 0;
  color: rgb(11 20 40 / 0.64);
  font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", system-ui,
    sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.55;
  text-wrap: balance;
}

.dims-feature-paths__cta {
  display: none;
  margin-top: 1.5rem;
}

@media (min-width: 810px) {
  .dims-feature-paths__intro {
    display: block;
    text-align: center;
  }

  .dims-feature-paths__title,
  .dims-feature-paths__sub {
    margin-left: auto;
    margin-right: auto;
  }

  .dims-feature-paths__cta {
    display: none;
  }
}

.dims-feature-path {
  align-items: center;
  background: var(--feature-gradient);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 0;
  border-radius: 28px;
  box-shadow: none;
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  margin-bottom: 12vh;
  margin-left: 7vw;
  margin-right: 7vw;
  min-height: 78vh;
  overflow: hidden;
  padding-block: clamp(3rem, 5vw, 4.5rem);
  padding-inline: max(1.25rem, calc((100vw - 1240px) / 2));
  position: sticky;
  top: 84px;
  width: 86vw;
}

.dims-feature-path:last-child {
  margin-bottom: 12vh;
}

.dims-feature-paths__inner::after {
  content: "";
  display: block;
  height: 12vh;
}

/* Keep the stacked feature cards aligned with the shared bento grid on
   super-wide displays instead of continuing to grow with the viewport. */
@media (min-width: 1600px) {
  .dims-feature-paths__intro,
  .dims-feature-path {
    width: min(var(--dims-section-grid-w, 1220px), calc(100vw - 2.5rem));
    margin-inline: auto;
  }

  .dims-feature-path {
    margin-bottom: 12vh;
  }
}

.dims-feature-path__title {
  color: #fff;
  font-family: var(--dims-font, system-ui, sans-serif);
  font-size: clamp(2.35rem, 4vw, 54px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0 0 1.25rem;
  max-width: 10ch;
  text-wrap: balance;
}

.dims-feature-path__badge {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 999px;
  font-family: var(--dims-font-regular, system-ui, sans-serif);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.78);
  background: rgb(255 255 255 / 0.09);
}

.dims-feature-path--websites .dims-feature-path__title {
  max-width: none;
  white-space: nowrap;
  text-wrap: nowrap;
}

@media (min-width: 761px) {
  .dims-feature-path--link-in-bio .dims-feature-path__title,
  .dims-feature-path--sell-music .dims-feature-path__title {
    max-width: none;
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

.dims-feature-path__body {
  color: rgb(255 255 255 / 0.76);
  font-family: var(--dims-font-regular, system-ui, sans-serif);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  letter-spacing: -0.005em;
  line-height: 1.55;
  margin: 0 0 2rem;
  max-width: 32rem;
}

@media (min-width: 761px) {
  .dims-feature-path__copy {
    margin-left: clamp(1.25rem, 2.5vw, 2.5rem);
  }
}

@media (min-width: 1100px) {
  .dims-feature-path {
    gap: clamp(3.5rem, 5.5vw, 6rem);
    min-height: 0;
    padding-block: clamp(2.5rem, 3.5vw, 3.5rem);
    padding-inline: clamp(2.5rem, 5vw, 5.5rem);
  }

  .dims-feature-path--labels {
    min-height: calc(min(62vh, 650px) + 7rem);
  }

  .dims-feature-path--websites .dims-feature-path__media img,
  .dims-feature-path--link-in-bio .dims-feature-path__media img,
  .dims-feature-path--presave .dims-feature-path__media img,
  .dims-feature-path--events .dims-feature-path__media img {
    max-height: min(52vh, 540px);
  }
}

.dims-feature-path__link {
  align-items: center;
  background: #fff;
  color: #000;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--dims-font-medium, var(--dims-font, system-ui, sans-serif));
  letter-spacing: 0;
  text-decoration: none;
}

.dims-feature-path__link:hover,
.dims-feature-path__link:focus-visible {
  background: #f1f1f1;
  color: #000;
}

.dims-feature-path__link::after { content: none; }

.dims-feature-path__media {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  justify-content: flex-end;
  min-height: clamp(300px, 38vw, 500px);
  overflow: hidden;
  padding: 0;
}

.dims-feature-path__media img {
  display: block;
  height: auto;
  max-height: 480px;
  max-width: 100%;
  object-fit: contain;
}

.dims-feature-path:nth-of-type(1) { z-index: 1; }
.dims-feature-path:nth-of-type(2) { z-index: 2; }
.dims-feature-path:nth-of-type(3) { z-index: 3; }
.dims-feature-path:nth-of-type(4) { z-index: 4; }
.dims-feature-path:nth-of-type(5) { z-index: 5; }
.dims-feature-path:nth-of-type(6) { z-index: 6; }

.dims-feature-path--websites {
  --feature-gradient: url("../images/feature-bg-websites.png");
}

.dims-feature-path--websites .dims-feature-path__media {
  justify-self: end;
  min-height: 0;
  width: fit-content;
}

.dims-feature-path--websites .dims-feature-path__media img {
  max-height: min(62vh, 650px);
  width: auto;
}

.dims-feature-path--websites .dims-feature-path__media picture {
  display: contents;
}

.dims-feature-path--link-in-bio {
  --feature-gradient: url("../images/feature-bg-link-in-bio.png");
}

.dims-feature-path--link-in-bio .dims-feature-path__media {
  justify-self: end;
  min-height: 0;
  width: fit-content;
}

.dims-feature-path--link-in-bio .dims-feature-path__media img {
  max-height: min(62vh, 650px);
  width: auto;
}

.dims-feature-path--presave .dims-feature-path__media {
  justify-self: end;
  min-height: 0;
  width: fit-content;
}

.dims-feature-path--presave .dims-feature-path__media img {
  max-height: min(62vh, 650px);
  width: auto;
}

.dims-feature-path--sell-music {
  --feature-gradient: url("../images/feature-bg-music-sales.png");
}

.dims-feature-path--sell-music .dims-feature-path__media {
  justify-self: end;
  min-height: 0;
  width: fit-content;
}

.dims-feature-path--presave {
  --feature-gradient: url("../images/feature-bg-presave.png");
}

.dims-feature-path--events {
  --feature-gradient: url("../images/eventhero.png");
}

.dims-feature-path--events .dims-feature-path__media {
  justify-self: end;
  min-height: 0;
  width: fit-content;
}

.dims-feature-path--events .dims-feature-path__media img {
  max-height: min(62vh, 650px);
  width: auto;
}

.dims-feature-path--labels {
  --feature-gradient: radial-gradient(circle at 82% 18%, rgb(45 65 98 / 0.42), transparent 46%), linear-gradient(135deg, #030507 0%, #080c12 58%, #111925 100%);
}

.dims-feature-path--labels .dims-feature-path__media {
  bottom: 0;
  justify-content: flex-end;
  position: absolute;
  right: 0;
  top: 0;
  width: min(66vw, 980px);
}

.dims-feature-path--labels .dims-feature-path__media img {
  border-radius: 14px;
  height: auto;
  max-height: none;
  max-width: none;
  transform: translateX(28%);
  transform-origin: right center;
  width: 100%;
}

.dims-feature-path--labels .dims-feature-path__copy {
  position: relative;
  z-index: 2;
}

.dims-label-orbit {
  aspect-ratio: 1;
  margin-inline: auto;
  max-width: 620px;
  position: relative;
  width: min(46vw, 620px);
}

.dims-label-orbit__ring {
  border: 1px solid rgb(135 170 255 / 0.18);
  border-radius: 50%;
  inset: 8%;
  position: absolute;
}

.dims-label-orbit__ring--inner {
  border-color: rgb(185 146 255 / 0.13);
  inset: 22%;
}

.dims-label-orbit__hub,
.dims-label-orbit__artist {
  align-items: center;
  backdrop-filter: blur(12px);
  background: rgb(17 23 34 / 0.92);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 50%;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.34), inset 0 0 0 1px rgb(255 255 255 / 0.04);
  display: flex;
  justify-content: center;
  position: absolute;
}

.dims-label-orbit__hub {
  height: 29%;
  left: 35.5%;
  top: 35.5%;
  width: 29%;
}

.dims-label-orbit__logo {
  align-items: end;
  display: flex;
  gap: 5px;
  height: 34%;
}

.dims-label-orbit__logo i {
  background: #fff;
  border-radius: 999px;
  display: block;
  height: 62%;
  opacity: 0.92;
  width: 5px;
}

.dims-label-orbit__logo i:nth-child(2) { height: 100%; }
.dims-label-orbit__logo i:nth-child(3) { height: 78%; }

.dims-label-orbit__artist {
  color: rgb(255 255 255 / 0.82);
  font-family: var(--dims-font-medium, var(--dims-font, system-ui, sans-serif));
  font-size: clamp(0.64rem, 1vw, 0.82rem);
  height: 13%;
  letter-spacing: 0.08em;
  width: 13%;
}

.dims-label-orbit__artist::after {
  border: 1px solid rgb(123 162 255 / 0.28);
  border-radius: inherit;
  content: "";
  inset: -6px;
  position: absolute;
}

.dims-label-orbit__artist--one { left: 43.5%; top: 1.5%; }
.dims-label-orbit__artist--two { right: 9%; top: 20%; }
.dims-label-orbit__artist--three { bottom: 15%; right: 8%; }
.dims-label-orbit__artist--four { bottom: 1.5%; left: 43.5%; }
.dims-label-orbit__artist--five { bottom: 15%; left: 8%; }
.dims-label-orbit__artist--six { left: 9%; top: 20%; }

/* The shared homepage stylesheet places this gallery near the top. On the
   updated homepage it belongs after comparison and immediately before FAQ. */
#main[data-dims-page="home"] > #template-gallery,
#main[data-dims-page="home-duplicate"] > #template-gallery {
  order: 60;
}

@media (max-width: 760px) {
  #template-gallery {
    padding-top: 5rem;
  }

  .dims-feature-paths {
    padding-inline: 0;
  }

  .dims-feature-paths__inner {
    padding-bottom: 0;
  }

  .dims-feature-path:last-child {
    margin-bottom: 1.5rem;
  }

  .dims-feature-paths__inner::after {
    height: 1rem;
  }

  .dims-feature-path {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
    margin-bottom: 1.5rem;
    margin-left: 20px;
    margin-right: 20px;
    min-height: 0;
    padding: 2.5rem 1.25rem 2.5rem;
    position: sticky !important;
    top: 96px !important;
    width: calc(100% - 40px);
  }

  .dims-feature-path:nth-of-type(1) { z-index: 11; }
  .dims-feature-path:nth-of-type(2) { z-index: 12; }
  .dims-feature-path:nth-of-type(3) { z-index: 13; }
  .dims-feature-path:nth-of-type(4) { z-index: 14; }
  .dims-feature-path:nth-of-type(5) { z-index: 15; }
  .dims-feature-path:nth-of-type(6) { z-index: 16; }

  .dims-feature-path__title {
    font-size: 24px;
    margin-bottom: 0.75rem;
  }

  .dims-feature-path__badge {
    display: inline-flex !important;
    position: relative;
    z-index: 2;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 0.6rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.625rem;
  }

  .dims-feature-path--websites .dims-feature-path__title {
    width: max-content;
    max-width: 100%;
    font-size: 24px;
    white-space: nowrap;
    text-wrap: nowrap;
  }

  .dims-feature-path--link-in-bio .dims-feature-path__title,
  .dims-feature-path--sell-music .dims-feature-path__title,
  .dims-feature-path--events .dims-feature-path__title {
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
    text-wrap: nowrap;
  }

  .dims-feature-path__body {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 1.25rem;
  }

  .dims-feature-path--presave .dims-feature-path__title {
    max-width: none;
    white-space: nowrap;
  }

  .dims-feature-path__link {
    border: 0;
    font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    min-height: 0;
    padding: 0.7rem 1.15rem;
  }

  .dims-feature-path__media {
    border-radius: 0;
    min-height: 360px;
    order: 2;
  }

  .dims-feature-path--websites .dims-feature-path__media img {
    height: auto;
    max-height: none;
    width: 100%;
  }

  .dims-feature-path--labels .dims-feature-path__media img {
    transform: translateX(10%);
    width: 112%;
  }

  .dims-feature-path--labels .dims-feature-path__media {
    bottom: auto;
    margin-top: -1.5rem;
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
  }

  .dims-feature-path--labels .dims-feature-path__media > .dims-label-orbit {
    margin-inline: auto;
    width: min(72vw, 350px);
  }

  .dims-feature-path--labels {
    gap: 1rem;
    min-height: 650px;
    padding-bottom: 1rem;
  }
}

@media (min-width: 761px) {
  .dims-feature-path--websites .dims-feature-path__media,
  .dims-feature-path--link-in-bio .dims-feature-path__media,
  .dims-feature-path--presave .dims-feature-path__media,
  .dims-feature-path--sell-music .dims-feature-path__media,
  .dims-feature-path--events .dims-feature-path__media {
    transform: translateX(clamp(-2.5rem, -3vw, -1.5rem));
  }

  .dims-feature-path--labels .dims-feature-path__media > .dims-label-orbit {
    left: calc(clamp(2rem, 3vw, 3.5rem) + 20px);
  }
}

@media (min-width: 1100px) {
  .dims-feature-path--labels .dims-feature-path__media > .dims-label-orbit {
    margin-inline: auto;
    width: min(38vw, calc(70vh - 2rem), 540px);
  }
}

@media (min-width: 1400px) {
  .dims-feature-path {
    gap: clamp(4.5rem, 6.5vw, 7.5rem);
    min-height: 76vh;
    padding-block: 3.35rem;
  }

  .dims-feature-path__copy {
    margin-left: 1.15rem;
  }

  .dims-feature-path--websites .dims-feature-path__media,
  .dims-feature-path--link-in-bio .dims-feature-path__media,
  .dims-feature-path--presave .dims-feature-path__media,
  .dims-feature-path--events .dims-feature-path__media,
  .dims-feature-path--sell-music .dims-feature-path__media {
    justify-self: end;
  }

  .dims-feature-path--labels {
    min-height: 76vh;
  }

  .dims-feature-path--labels .dims-feature-path__media {
    align-items: center;
    padding-block: 2.75rem;
  }

  .dims-feature-path--websites .dims-feature-path__media img,
  .dims-feature-path--link-in-bio .dims-feature-path__media img,
  .dims-feature-path--presave .dims-feature-path__media img,
  .dims-feature-path--events .dims-feature-path__media img,
  .dims-feature-path--sell-music .dims-feature-path__media img {
    max-height: min(68vh, 720px);
  }

  .dims-feature-path--labels .dims-feature-path__media img {
    height: auto;
    max-height: min(56vh, 580px);
    max-width: 88%;
    object-fit: contain;
    transform: translateX(22%);
    width: auto;
  }
}

/* Keep the homepage FAQ in one roomy, readable list. */
#main:is([data-dims-page="home"], [data-dims-page="home-duplicate"]) .dims-faq__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  gap: 1rem;
}

@media (min-width: 810px) {
  #main:is([data-dims-page="home"], [data-dims-page="home-duplicate"]) .dims-faq__trigger {
    min-height: 88px;
    padding: 1.75rem 2rem;
  }
}